make workflow more generic

.github/workflows/docker-publish.yml

@@ -1,5 +1,8 @@
 name: Build and Push Docker Image to GHCR
 
+env:
+  OCI_REGISTRY: ghcr.io
+
 on:
   push:
     branches: ["main"]
@@ -20,7 +23,7 @@ jobs:
       - name: Log in to GHCR
         uses: docker/login-action@v3
         with:
-          registry: ghcr.io
+          registry: ${{ OCI_REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
@@ -28,7 +31,7 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ghcr.io/${{ github.repository }}
+          images: ${{ OCI_REGISTRY }}/${{ github.repository }}
 
       - name: Build and push Docker image
         uses: docker/build-push-action@v6

styles/main.css

@@ -34,4 +34,16 @@ h2 {
 
 h3 {
     font-size: 1.25rem;
+}
+
+input:not(.search) {
+    @apply px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#2E2E32] placeholder:text-[#8A8E90] text-white focus-visible:outline-none transition-colors duration-300 ease-out overflow-hidden;
+    
+    &[type="file"] {
+        @apply p-0 cursor-pointer;
+
+        &::file-selector-button {
+            @apply px-2 py-2 mr-1 bg-[hsl(240,6%,18%)] text-white cursor-pointer;
+        }
+    }
 }

templates/views/admin/index.hbs

@@ -1,180 +1,170 @@
-<header class="flex w-full p-3">
+<div id="blur-target" class="transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-300">
-    <a href="/" class="flex items-center flex-row gap-2 text-white border-b hover:border-transparent justify-center">
+    <header class="flex w-full p-3">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+        <a href="/"
-            viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
+            class="flex items-center flex-row gap-2 text-white border-b hover:border-transparent justify-center">
-            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                <path d="m9 14l-4-4l4-4" />
+                viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
-                <path d="M5 10h11a4 4 0 1 1 0 8h-1" />
+                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-            </g>
+                    <path d="m9 14l-4-4l4-4" />
-        </svg>
+                    <path d="M5 10h11a4 4 0 1 1 0 8h-1" />
-        Return to home
+                </g>
-    </a>
+            </svg>
-</header>
+            Return to home
+        </a>
+    </header>
 
-<section class="flex justify-center w-full">
+    <section class="flex justify-center w-full">
-    <div class="w-full sm:w-4/5 p-2.5">
+        <div class="w-full sm:w-4/5 p-2.5">
-        {{#each Categories}}
+            {{#each Categories}}
-        <div class="flex items-center" key="category-{{this.ID}}">
+            <div class="flex items-center" key="category-{{this.ID}}">
-            <img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" alt="{{this.Name}}"
+                <img class="object-contain mr-2 select-none" width="32" height="32" draggable="false"
-                src="{{this.Icon}}" />
+                    alt="{{this.Name}}" src="{{this.Icon}}" />
-            <h2 class="capitalize break-all">{{this.Name}}</h2>
+                <h2 class="capitalize break-all">{{this.Name}}</h2>
-            <button onclick="deleteCategory({{this.ID}})"
+                <button onclick="deleteCategory({{this.ID}})"
-                class="w-fit h-fit flex p-0.5 bg-[#1C1C21] border-solid border-[#211F23] rounded-md hover:bg-[#29292e] cursor-pointer"><svg
+                    class="w-fit h-fit flex p-0.5 bg-[#1C1C21] border-solid border-[#211F23] rounded-md hover:bg-[#29292e] cursor-pointer"><svg
-                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
-                    <path fill="none" stroke="#ff1919" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
-                </svg></button>
-        </div>
-        <div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
-            {{#each this.Links}}
-            <div key="link-{{this.ID}}"
-                class="rounded-2xl bg-[#211F23] p-2.5 flex flex-row items-center shadow-md hover:shadow-xl transition-[shadow,transform,translate] ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-1 relative">
-                <img class="mr-2 select-none rounded-md aspect-square object-cover" width="64" height="64"
-                    draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
-                <div class="break-all">
-                    <h3>{{this.Name}}</h3>
-                    <p class="text-[#D7D7D7]">{{this.Description}}</p>
-                </div>
-                <button onclick="deleteLink({{this.ID}}, {{this.CategoryID}})"
-                    class="w-fit h-fit flex p-0.5 bg-[#1C1C21] border-solid border-[#211F23] rounded-md hover:bg-[#29292e] cursor-pointer absolute right-1 top-1"><svg
                         xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                         <path fill="none" stroke="#ff1919" stroke-linecap="round" stroke-linejoin="round"
                             stroke-width="2"
                             d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
                     </svg></button>
             </div>
+            <div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
+                {{#each this.Links}}
+                <div key="link-{{this.ID}}"
+                    class="rounded-2xl bg-[#211F23] p-2.5 flex flex-row items-center shadow-md hover:shadow-xl transition-[shadow,transform,translate] ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-1 relative">
+                    <img class="mr-2 select-none rounded-md aspect-square object-cover" width="64" height="64"
+                        draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
+                    <div class="break-all">
+                        <h3>{{this.Name}}</h3>
+                        <p class="text-[#D7D7D7]">{{this.Description}}</p>
+                    </div>
+                    <button onclick="deleteLink({{this.ID}}, {{this.CategoryID}})"
+                        class="w-fit h-fit flex p-0.5 bg-[#1C1C21] border-solid border-[#211F23] rounded-md hover:bg-[#29292e] cursor-pointer absolute right-1 top-1"><svg
+                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+                            <path fill="none" stroke="#ff1919" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
+                        </svg></button>
+                </div>
+                {{/each}}
+                <div onclick="openModal('link', {{this.ID}})"
+                    class="rounded-2xl border border-dashed border-[#656565] p-2.5 flex flex-row items-center shadow-md hover:shadow-xl transition-[shadow,transform] ease-[cubic-bezier(0.16,1,0.3,1)] pointer-cursor select-none cursor-pointer">
+                    <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
+                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                            stroke-width="2" d="M12 5v14m-7-7h14" />
+                    </svg>
+                    <div>
+                        <h3>Add a link</h3>
+                    </div>
+                </div>
+            </div>
             {{/each}}
-            <div onclick="openLinkModal({{this.ID}})"
+            <div class="flex items-center">
-                class="rounded-2xl border border-dashed border-[#656565] p-2.5 flex flex-row items-center shadow-md hover:shadow-xl transition-[shadow,transform] ease-[cubic-bezier(0.16,1,0.3,1)] pointer-cursor select-none cursor-pointer">
+                <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
-                <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
                     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                         stroke-width="2" d="M12 5v14m-7-7h14" />
                 </svg>
-                <div>
+                <h2 onclick="openModal('category')" class="text-[#656565] underline decoration-dashed cursor-pointer">
-                    <h3>Add a link</h3>
+                    Add a new category
-                </div>
+                </h2>
             </div>
         </div>
-        {{/each}}
+    </section>
-        <div class="flex items-center">
-            <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
-                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M12 5v14m-7-7h14" />
-            </svg>
-            <h2 onclick="openCategoryModal()" class="text-[#656565] underline decoration-dashed cursor-pointer">
-                Add a new category
-            </h2>
-        </div>
-    </div>
-</section>
-<div id="linkModal"
-    class="flex modal-bg fixed top-0 left-0 bottom-0 right-0 bg-[#00000070] justify-center items-center">
-    <div class="bg-[#151316] rounded-xl overflow-hidden w-fit p-4 modal">
-        <h3>Add A link</h3>
-        <form id="link-form" action="/api/links" method="post"
-            class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
-            <div>
-                <label for="linkName">Name</label>
-                <input required
-                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none transition-colors duration-300 ease-out"
-                    type="text" name="name" placeholder="Name" id="linkName" />
-            </div>
-            <div>
-                <label for="linkDesc">Description (optional)</label>
-                <input
-                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none transition-colors duration-300 ease-out"
-                    type="text" name="description" placeholder="Description" id="linkDesc" />
-            </div>
-            <div>
-                <label for="linkURL">URL</label>
-                <input required
-                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none transition-colors duration-300 ease-out"
-                    type="url" name="url" placeholder="URL" id="linkURL" />
-            </div>
-            <div>
-                <label for="linkIcon">Icon</label>
-                <input required
-                    class="w-full text-white py-2 px-4 rounded bg-[#1C1C21] border border-[#56565b]/30 transition-colors duration-300 ease-out"
-                    type="file" name="icon" id="linkIcon" accept="image/*" />
-            </div>
-            <button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0" type="submit">Add link</button>
-        </form>
-        <span id="link-message"></span>
-    </div>
 </div>
-<div id="categoryModal"
+
+<div id="modal-container"
     class="flex modal-bg fixed top-0 left-0 bottom-0 right-0 bg-[#00000070] justify-center items-center">
     <div class="bg-[#151316] rounded-xl overflow-hidden w-fit p-4 modal">
-        <h3>Create A category</h3>
+        <div id="category-contents" class="hidden">
-        <form id="category-form" action="/api/categories" method="post"
+            <h3>Create A category</h3>
-            class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
+            <form id="category-form" action="/api/categories" method="post"
-            <div>
+                class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
-                <label for="categoryName">Name</label>
+                <div>
-                <input
+                    <label for="categoryName">Name</label>
-                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
+                    <input required type="text" name="name" id="categoryName" />
-                    type="text" name="name" placeholder="Name" id="categoryName" />
+                </div>
-            </div>
+                <div>
-            <div>
+                    <label for="linkIcon">Icon</label>
-                <label for="linkIcon">Icon</label>
+                    <input type="file" name="icon" id="linkIcon" accept=".svg" required />
-                <input class="w-full text-white py-2 px-4 rounded bg-[#1C1C21] border border-[#56565b]/30" type="file"
+                </div>
-                    name="icon" id="linkIcon" accept=".svg" />
+                <button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0" type="submit">Create
-            </div>
+                    category</button>
-            <button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0" type="submit">Create
+            </form>
-                category</button>
+            <span id="category-message"></span>
-        </form>
+        </div>
-        <span id="category-message"></span>
+
+        <div id="link-contents" class="hidden">
+            <h3>Add A link</h3>
+            <form id="link-form" action="/api/links" method="post"
+                class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
+                <div>
+                    <label for="linkName">Name</label>
+                    <input required type="text" name="name" id="linkName" />
+                </div>
+                <div>
+                    <label for="linkDesc">Description (optional)</label>
+                    <input type="text" name="description" id="linkDesc" />
+                </div>
+                <div>
+                    <label for="linkURL">URL</label>
+                    <input required type="url" name="url" id="linkURL" />
+                </div>
+                <div>
+                    <label for="linkIcon">Icon</label>
+                    <input required type="file" name="icon" id="linkIcon" accept="image/*" />
+                </div>
+                <button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0" type="submit">Add
+                    link</button>
+            </form>
+            <span id="link-message"></span>
+        </div>
     </div>
 </div>
 
 <script>
     // idfk what this variable capitalization is, it's a mess
-    let linkModalBg = document.getElementById("linkModal");
+    let modalContainer = document.getElementById("modal-container");
-    let linkModal = linkModalBg.querySelector("div");
+    let modal = modalContainer.querySelector("div");
-    let categoryModalBg = document.getElementById("categoryModal");
+    let pageElement = document.getElementById("blur-target");
-    let categoryModal = categoryModalBg.querySelector("div");
-    let pageElement = document.querySelector("section");
     let targetCategoryID = null;
+    let activeModal = null;
 
-    function openCategoryModal() {
+    function openModal(modalKind, categoryID) {
-        pageElement.style.filter = "blur(20px)";
+        activeModal = modalKind;
-        document.getElementById("category-form").reset();
-
-        categoryModalBg.classList.add("is-visible");
-        categoryModal.classList.add("is-visible");
-    }
-
-    function closeCategoryModal() {
-        pageElement.style.filter = "";
-
-        categoryModalBg.classList.remove("is-visible");
-        categoryModal.classList.remove("is-visible");
-
-        document.getElementById("category-form").querySelectorAll("[required]").forEach((el) => {
-            el.classList.remove("invalid:border-[#861024]");
-        });
-    }
-
-    function openLinkModal(categoryID) {
         targetCategoryID = categoryID;
 
         pageElement.style.filter = "blur(20px)";
-        document.getElementById("link-form").reset();
+        document.getElementById(modalKind + "-contents").classList.remove("hidden");
 
-        linkModalBg.classList.add("is-visible");
+        modalContainer.classList.add("is-visible");
-        linkModal.classList.add("is-visible");
+        modal.classList.add("is-visible");
+        document.getElementById(modalKind + "-form").reset();
     }
 
-    function closeLinkModal() {
+    function closeModal() {
         pageElement.style.filter = "";
 
-        linkModalBg.classList.remove("is-visible");
+        modalContainer.classList.remove("is-visible");
-        linkModal.classList.remove("is-visible");
+        modal.classList.remove("is-visible");
 
-        document.getElementById("link-form").querySelectorAll("[required]").forEach((el) => {
+        setTimeout(() => {
-            el.classList.remove("invalid:border-[#861024]");
+            document.getElementById(activeModal + "-contents").classList.add("hidden");
+            activeModal = null;
+        }, 300)
+
+        document.getElementById(activeModal + "-form").querySelectorAll("[required]").forEach((el) => {
+            el.classList.remove("invalid:border-[#861024]!");
         });
+
+        targetCategoryID = null;
     }
 
+    modalContainer.addEventListener("click", (event) => {
+        if (event.target === modalContainer) {
+            closeModal();
+        }
+    });
+
     async function deleteLink(linkID, categoryID) {
         let res = await fetch(`/api/category/${categoryID}/link/${linkID}`, {
             method: "DELETE"
@@ -202,7 +192,7 @@
 
     document.getElementById("link-form").querySelector("button").addEventListener("click", (event) => {
         document.getElementById("link-form").querySelectorAll("[required]").forEach((el) => {
-            el.classList.add("invalid:border-[#861024]");
+            el.classList.add("invalid:border-[#861024]!");
         });
     });
 
@@ -216,7 +206,7 @@
         });
 
         if (res.status === 201) {
-            closeLinkModal();
+            closeModal('link');
             document.getElementById("link-form").reset();
             location.reload();
         } else {
@@ -227,7 +217,7 @@
 
     document.getElementById("category-form").querySelector("button").addEventListener("click", (event) => {
         document.getElementById("category-form").querySelectorAll("[required]").forEach((el) => {
-            el.classList.add("invalid:border-[#861024]");
+            el.classList.add("invalid:border-[#861024]!");
         });
     });
 
@@ -241,7 +231,7 @@
         });
 
         if (res.status === 201) {
-            closeCategoryModal()
+            closeModal('category');
             document.getElementById("category-form").reset();
             location.reload();
         } else {
@@ -249,20 +239,6 @@
             document.getElementById("link-message").innerText = json.message;
         }
     });
-
-    linkModalBg.addEventListener("click", (event) => {
-        if (event.target === linkModalBg) {
-            targetCategoryID = null;
-            closeLinkModal();
-        }
-    });
-
-    categoryModalBg.addEventListener("click", (event) => {
-        if (event.target === categoryModalBg) {
-            targetCategoryID = null;
-            closeCategoryModal();
-        }
-    });
 </script>
 
 <style>

templates/views/admin/login.hbs

@@ -6,12 +6,8 @@
                 Login
             </h2>
             <form action="/admin/login" method="post" class="flex flex-col gap-y-3 my-2">
-                <input
+                <input type="text" name="username" placeholder="Username" />
-                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
+                <input type="password" name="password" placeholder="Password" />
-                    type="text" name="username" placeholder="Username" />
-                <input
-                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
-                    type="password" name="password" placeholder="Password" />
                 <button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0"
                     type="submit">Login</button>
             </form>

templates/views/index.hbs

@@ -62,7 +62,7 @@
         </div>
         <form class="w-full max-w-3xl" action="{{ SearchProviderURL }}" method="GET">
             <input name="{{ SearchParam }}" aria-label="Search bar"
-                class="w-full bg-[#1C1C21] border border-[#56565b]/30 rounded-full px-3 py-1 text-white h-7 focus-visible:outline-none placeholder:italic placeholder:text-[#434343]"
+                class="w-full bg-[#1C1C21] border border-[#2E2E32] rounded-full px-3 py-1 text-white h-7 focus-visible:outline-none placeholder:italic placeholder:text-[#434343] search"
                 placeholder="Search..." />
         </form>
     </div>