From aa90c7048d1fd38c4a3f027d1495e73fbd6cc98b Mon Sep 17 00:00:00 2001
From: juls0730 <62722391+juls0730@users.noreply.github.com>
Date: Sat, 23 Nov 2024 02:21:26 -0600
Subject: [PATCH] reorganize and fix some stuff

---
 main.go                                    |  16 +-
 styles/main.css                            |   2 +
 tailwind.config.js                         |   2 +-
 {views => templates}/layouts/main.hbs      |   4 +-
 templates/views/admin/index.hbs            | 203 +++++++++++++++++++++
 {views => templates/views}/admin/login.hbs |  13 +-
 templates/views/index.hbs                  |  77 ++++++++
 views/admin/index.hbs                      | 175 ------------------
 views/index.hbs                            |  54 ------
 9 files changed, 304 insertions(+), 242 deletions(-)
 rename {views => templates}/layouts/main.hbs (65%)
 create mode 100644 templates/views/admin/index.hbs
 rename {views => templates/views}/admin/login.hbs (66%)
 create mode 100644 templates/views/index.hbs
 delete mode 100644 views/admin/index.hbs
 delete mode 100644 views/index.hbs
diff --git a/main.go b/main.go
index 1a735d7..706af9c 100644
--- a/main.go
+++ b/main.go
@@ -26,6 +26,7 @@ import (
 
 	"github.com/chai2010/webp"
 	"github.com/gofiber/fiber/v3"
+	"github.com/gofiber/fiber/v3/middleware/helmet"
 	"github.com/gofiber/fiber/v3/middleware/static"
 	"github.com/gofiber/template/handlebars/v2"
 	"github.com/google/uuid"
@@ -35,7 +36,7 @@ import (
 	"github.com/nfnt/resize"
 )
 
-//go:embed assets/** views/** schema.sql
+//go:embed assets/** templates/** schema.sql
 var embeddedAssets embed.FS
 
 var devContent string = `<script>
@@ -547,7 +548,7 @@ func main() {
 		log.Fatal(err)
 	}
 
-	viewsDir, err := fs.Sub(embeddedAssets, "views")
+	templatesDir, err := fs.Sub(embeddedAssets, "templates")
 	if err != nil {
 		log.Fatal(err)
 	}
@@ -563,7 +564,8 @@ func main() {
 		log.Fatal(err)
 	}
 
-	engine := handlebars.NewFileSystem(http.FS(viewsDir), ".hbs")
+	engine := handlebars.NewFileSystem(http.FS(templatesDir), ".hbs")
+
 	engine.AddFunc("inlineCSS", func() string {
 		return string(css)
 	})
@@ -576,6 +578,8 @@ func main() {
 		Views: engine,
 	})
 
+	router.Use(helmet.New(helmet.ConfigDefault))
+
 	router.Use("/", static.New("./public", static.Config{
 		Browse: false,
 		MaxAge: 31536000,
@@ -594,7 +598,7 @@ func main() {
 
 		weather := app.WeatherCache.GetWeather()
 
-		return c.Render("index", fiber.Map{
+		return c.Render("views/index", fiber.Map{
 			"SearchProvider": os.Getenv("PASSPORT_SEARCH_PROVIDER"),
 			"WeatherData": fiber.Map{
 				"Temp": weather.Temperature,
@@ -612,7 +616,7 @@ func main() {
 			return c.Redirect().To("/admin")
 		}
 
-		return c.Render("admin/login", fiber.Map{}, "layouts/main")
+		return c.Render("views/admin/login", fiber.Map{}, "layouts/main")
 	})
 
 	router.Post("/admin/login", func(c fiber.Ctx) error {
@@ -663,7 +667,7 @@ func main() {
 			return err
 		}
 
-		return c.Render("admin/index", fiber.Map{
+		return c.Render("views/admin/index", fiber.Map{
 			"Categories": categories,
 		}, "layouts/main")
 	})
diff --git a/styles/main.css b/styles/main.css
index 4ee37b0..990a260 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -6,10 +6,12 @@
   font-family: "Instrument Sans";
   src: url("/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2")
     format("woff2");
+  font-display: swap;
 }
 
 html {
   line-height: normal;
+  color-scheme: dark;
 }
 
 h1,
diff --git a/tailwind.config.js b/tailwind.config.js
index 0b80f72..89fd37b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./views/**/*.hbs"],
+  content: ["./templates/**/*.hbs"],
   theme: {
     extend: {
       fontFamily: {
diff --git a/views/layouts/main.hbs b/templates/layouts/main.hbs
similarity index 65%
rename from views/layouts/main.hbs
rename to templates/layouts/main.hbs
index bc230ed..eb0565b 100644
--- a/views/layouts/main.hbs
+++ b/templates/layouts/main.hbs
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
     <title>Passport</title>
     <link rel="favicon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <link rel="prefetch" href="/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2">
+    <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2">
     <style>{{{inlineCSS}}}</style>
 </head>
 
diff --git a/templates/views/admin/index.hbs b/templates/views/admin/index.hbs
new file mode 100644
index 0000000..3cfd144
--- /dev/null
+++ b/templates/views/admin/index.hbs
@@ -0,0 +1,203 @@
+<section class="flex justify-center w-full">
+    <div class="w-full sm:w-4/5 p-2.5">
+        {{#each Categories}}
+        <div class="flex items-center">
+            <img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" alt="{{this.Name}}"
+                src="{{this.Icon}}" />
+            <h2 class="capitalize">{{this.Name}}</h2>
+            <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
+                    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
+                class="rounded-2xl bg-[#211F23] 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)] relative">
+                <img class="object-contain mr-2 select-none rounded-md" width="64" height="64" draggable="false"
+                    src="{{this.Icon}}" alt="{{this.Name}}" />
+                <div>
+                    <h3>{{this.Name}}</h3>
+                    <p class="text-[#D7D7D7]">{{this.Description}}</p>
+                </div>
+                <button onclick="deleteLink({{this.ID}})"
+                    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="addLink({{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 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="addCategory()" class="text-[#656565] underline decoration-dashed cursor-pointer">
+                Add a new category
+            </h2>
+        </div>
+    </div>
+</section>
+<div id="linkModal" class="hidden absolute 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">
+        <h3>Add A link</h3>
+        <form id="link-form" action="/api/links" method="post" class="flex flex-col gap-y-3 my-2">
+            <div>
+                <label for="linkName">Name</label>
+                <input
+                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
+                    type="text" name="name" placeholder="Name" id="linkName" />
+            </div>
+            <div>
+                <label for="linkDesc">Description</label>
+                <input
+                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
+                    type="text" name="description" placeholder="Description" id="linkDesc" />
+            </div>
+            <div>
+                <label for="linkURL">URL</label>
+                <input
+                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
+                    type="text" name="url" placeholder="URL" id="linkURL" />
+            </div>
+            <div>
+                <label for="linkIcon">Icon</label>
+                <input class="w-full text-white" 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</button>
+        </form>
+        <span id="link-message"></span>
+    </div>
+</div>
+<div id="categoryModal"
+    class="hidden absolute 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">
+        <h3>Create A category</h3>
+        <form id="category-form" action="/api/categories" method="post" class="flex flex-col gap-y-3 my-2">
+            <div>
+                <label for="categoryName">Name</label>
+                <input
+                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
+                    type="text" name="name" placeholder="Name" id="categoryName" />
+            </div>
+            <div>
+                <label for="linkIcon">Icon</label>
+                <input class="w-full text-white" type="file" name="icon" id="linkIcon" accept=".svg" />
+            </div>
+            <button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0" type="submit">Create</button>
+        </form>
+        <span id="category-message"></span>
+    </div>
+</div>
+
+<script>
+    // idfk what this variable capitalization is, it's a mess
+    let linkModal = document.getElementById("linkModal");
+    let categoryModal = document.getElementById("categoryModal");
+    let targetCategoryID = null;
+
+    function addCategory() {
+        categoryModal.classList.remove("hidden");
+        categoryModal.classList.add("flex");
+    }
+
+    function addLink(categoryID) {
+        targetCategoryID = categoryID;
+        linkModal.classList.remove("hidden");
+        linkModal.classList.add("flex");
+    }
+
+    async function deleteLink(linkID) {
+        let res = await fetch(`/api/links/${linkID}`, {
+            method: "DELETE"
+        });
+
+        if (res.status === 200) {
+            location.reload();
+        }
+    }
+
+    async function deleteCategory(categoryID) {
+        let res = await fetch(`/api/categories/${categoryID}`, {
+            method: "DELETE"
+        });
+
+        if (res.status === 200) {
+            location.reload();
+        }
+    }
+
+    document.getElementById("link-form").addEventListener("submit", async (event) => {
+        event.preventDefault();
+        let data = new FormData(event.target);
+
+        data.append("category_id", targetCategoryID);
+
+        let res = await fetch(`/api/links`, {
+            method: "POST",
+            body: data
+        });
+
+        if (res.status === 201) {
+            linkModal.classList.add("hidden");
+            linkModal.classList.remove("flex");
+            document.getElementById("link-form").reset();
+            location.reload();
+        } else {
+            let json = await res.json();
+            document.getElementById("category-message").innerText = json.message;
+        }
+    });
+
+    document.getElementById("category-form").addEventListener("submit", async (event) => {
+        event.preventDefault();
+        let data = new FormData(event.target);
+
+        let res = await fetch(`/api/categories`, {
+            method: "POST",
+            body: data
+        });
+
+        if (res.status === 201) {
+            categoryModal.classList.add("hidden");
+            categoryModal.classList.remove("flex");
+            document.getElementById("category-form").reset();
+            location.reload();
+        } else {
+            let json = await res.json();
+            document.getElementById("link-message").innerText = json.message;
+        }
+    });
+
+    linkModal.addEventListener("click", (event) => {
+        if (event.target === linkModal) {
+            targetCategoryID = null;
+            linkModal.classList.add("hidden");
+            linkModal.classList.remove("flex");
+        }
+    });
+
+    categoryModal.addEventListener("click", (event) => {
+        if (event.target === categoryModal) {
+            targetCategoryID = null;
+            categoryModal.classList.add("hidden");
+            categoryModal.classList.remove("flex");
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/views/admin/login.hbs b/templates/views/admin/login.hbs
similarity index 66%
rename from views/admin/login.hbs
rename to templates/views/admin/login.hbs
index 9f1281a..983917e 100644
--- a/views/admin/login.hbs
+++ b/templates/views/admin/login.hbs
@@ -1,4 +1,4 @@
-<main class="flex justify-center items-center h-100vh relative bg-[#0E0A0E]">
+<main class="flex justify-center items-center h-screen relative bg-[#0E0A0E]">
     <div class="flex bg-[#151316] rounded-xl overflow-hidden">
         <img src="/assets/leaves.webp" class="h-96 w-64 object-cover" />
         <div class="flex flex-col p-4 text-center">
@@ -6,9 +6,14 @@
                 Login
             </h2>
             <form action="/admin/login" method="post" class="flex flex-col gap-y-3 my-2">
-                <input class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[rgb(86,86,91)/30] text-white" type="text" name="username" placeholder="Username" />
-                <input class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[rgb(86,86,91)/30] text-white" 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>
+                <input
+                    class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#56565b]/30 text-white focus-visible:outline-none"
+                    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>
             <span id="message"></span>
         </div>
diff --git a/templates/views/index.hbs b/templates/views/index.hbs
new file mode 100644
index 0000000..3ace5d9
--- /dev/null
+++ b/templates/views/index.hbs
@@ -0,0 +1,77 @@
+<main class="flex justify-center items-center h-screen relative bg-[#0E0A0E]">
+    <div class="absolute top-2.5 left-2.5">
+        <div class="text-[#BABABA] flex items-center">
+            <span class="mr-2 flex items-center">
+                {{{WeatherData.Icon}}}
+            </span>
+            <div class="font-semibold">
+                <p>{{WeatherData.Temp}}°C</p>
+                <p>{{WeatherData.Desc}}</p>
+            </div>
+        </div>
+    </div>
+    <div class="flex flex-col items-center w-full mx-6">
+        <div class="flex items-center pb-2.5">
+            <svg class="mr-3 aspect-square w-[clamp(48px,10vw,60px)]" viewBox="0 0 100 100" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <rect x="12.1483" y="24.7693" width="70" height="47" rx="12" transform="rotate(14.63 12.1483 24.7693)"
+                    fill="url(#paint0_linear_20_10)" />
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M52.7386 13.4812C46.8869 10.3698 39.6209 12.5913 36.5096 18.4429L32.7819 25.4537L68.4322 34.7599C77.5166 37.1313 82.9586 46.418 80.5872 55.5025L74.7779 77.7567C74.7752 77.7674 74.7724 77.778 74.7696 77.7886C79.7728 78.7022 85.0029 76.3441 87.518 71.6138L98.3159 51.306C101.427 45.4543 99.2058 38.1883 93.3542 35.0769L52.7386 13.4812Z"
+                    fill="url(#paint1_linear_20_10)" />
+                <defs>
+                    <linearGradient id="paint0_linear_20_10" x1="12.359" y1="44.8681" x2="82.491" y2="48.2607"
+                        gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#F0389B" />
+                        <stop offset="1" stop-color="#EEE740" />
+                    </linearGradient>
+                    <linearGradient id="paint1_linear_20_10" x1="33.8935" y1="25.6926" x2="94.2236" y2="61.6131"
+                        gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#AA38F0" />
+                        <stop offset="1" stop-color="#EE406A" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <h1>Passport</h1>
+        </div>
+        <input id="search-input"
+            class="w-full max-w-3xl 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]"
+            placeholder="Search..." />
+    </div>
+</main>
+<section class="flex justify-center w-full">
+    <div class="w-full sm:w-4/5 p-2.5">
+        {{#each Categories}}
+        <div class="flex items-center w-fit">
+            <img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" alt="{{this.Name}}"
+                src="{{this.Icon}}" />
+            <h2 class="capitalize w-fit">{{this.Name}}</h2>
+        </div>
+        <div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
+            {{#each this.Links}}
+            <a href="{{this.URL}}"
+                class="underline-none text-unset rounded-2xl bg-[#211F23] 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)] hover:-translate-y-1"
+                draggable="false" target="_blank" rel="noopener noreferrer">
+                <img class="object-contain mr-2 select-none rounded-md" width="64" height="64" draggable="false"
+                    src="{{this.Icon}}" alt="{{this.Name}}" />
+                <div>
+                    <h3>{{this.Name}}</h3>
+                    <p class="text-[#D7D7D7]">{{this.Description}}</p>
+                </div>
+            </a>
+            {{/each}}
+        </div>
+        {{/each}}
+    </div>
+</section>
+
+<script>
+    let search_input = document.getElementById("search-input");
+    let search_provider = "{{ SearchProvider }}";
+    // on enter key press
+    search_input.addEventListener("keyup", function (event) {
+        if (event.key === "Enter") {
+            window.location.href = search_provider.replace("%s", search_input.value);
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/views/admin/index.hbs b/views/admin/index.hbs
deleted file mode 100644
index bdda3d9..0000000
--- a/views/admin/index.hbs
+++ /dev/null
@@ -1,175 +0,0 @@
-<section class="flex justify-center w-full">
-    <div class="w-full sm:w-4/5 p-2.5">
-        {{#each Categories}}
-            <div class="flex items-center">
-                <img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" src="{{this.Icon}}" />
-                <h2 class="capitalize">{{this.Name}}</h2>
-                <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 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 class="rounded-2xl bg-[#211F23] 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)] relative">
-                        <img class="object-contain mr-2 select-none rounded-md" width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
-                        <div>
-                            <h3>{{this.Name}}</h3>
-                            <p class="text-[#D7D7D7]">{{this.Description}}</p>
-                        </div>
-                        <button onclick="deleteLink({{this.ID}})" 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 id="link-add" onclick="addLink({{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 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 id="add-category" class="text-[#656565] underline decoration-dashed cursor-pointer">Add a new category</h2>
-        </div>
-    </div>
-</section>
-<div id="linkModal" class="hidden absolute 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">
-        <h3>Add A link</h3>
-        <form id="link-form" action="/api/links" method="post" class="flex flex-col gap-y-3 my-2">
-            <div>
-                <label for="linkName">Name</label>
-                <input class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[rgb(86,86,91)/30] text-white" type="text" name="name" placeholder="Name" id="linkName" />
-            </div>
-            <div>
-                <label for="linkDesc">Description</label>
-                <input class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[rgb(86,86,91)/30] text-white" type="text" name="description" placeholder="Description" id="linkDesc" />
-            </div>
-            <div>
-                <label for="linkURL">URL</label>
-                <input class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[rgb(86,86,91)/30] text-white" type="text" name="url" placeholder="URL" id="linkURL" />
-            </div>
-            <div>
-                <label for="linkIcon">Icon</label>
-                <input class="w-full text-white" 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</button>
-        </form>
-        <span id="link-message"></span>
-    </div>
-</div>
-<div id="categoryModal" class="hidden absolute 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">
-        <h3>Create A category</h3>
-        <form id="category-form" action="/api/categories" method="post" class="flex flex-col gap-y-3 my-2">
-            <div>
-                <label for="categoryName">Name</label>
-                <input class="px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[rgb(86,86,91)/30] text-white" type="text" name="name" placeholder="Name" id="categoryName" />
-            </div>
-            <div>
-                <label for="linkIcon">Icon</label>
-                <input class="w-full text-white" type="file" name="icon" id="linkIcon" accept=".svg" />
-            </div>
-            <button class="px-4 py-2 rounded-md w-full bg-[#8A42FF] text-white border-0" type="submit">Create</button>
-        </form>
-        <span id="category-message"></span>
-    </div>
-</div>
-
-<script>
-    // idfk what this variable capitalization is, it's a mess
-    let linkAdd = document.getElementById("link-add");
-    let linkModal = document.getElementById("linkModal");
-    let categoryModal = document.getElementById("categoryModal");
-    let categoryAdd = document.getElementById("add-category");
-    let targetCategoryID = null;
-
-    function refresh() {
-        window.location.href = "/admin";
-    }
-
-    categoryAdd.addEventListener("click", () => {
-        categoryModal.classList.remove("hidden");
-        categoryModal.classList.add("flex");
-    });
-
-    function addLink(categoryID) {
-        targetCategoryID = categoryID;
-        linkModal.classList.remove("hidden");
-        linkModal.classList.add("flex");
-    }
-
-    async function deleteLink(linkID) {
-        let res = await fetch(`/api/links/${linkID}`, {
-            method: "DELETE"
-        });
-
-        if (res.status === 200) {
-            refresh();
-        }
-    }
-
-    async function deleteCategory(categoryID) {
-        let res = await fetch(`/api/categories/${categoryID}`, {
-            method: "DELETE"
-        });
-
-        if (res.status === 200) {
-            refresh();
-        }
-    }
-
-    document.getElementById("link-form").addEventListener("submit", async (event) => {
-        event.preventDefault();
-        let data = new FormData(event.target);
-
-        data.append("category_id", targetCategoryID);
-
-        let res = await fetch(`/api/links`, {
-            method: "POST",
-            body: data
-        });
-
-        if (res.status === 201) {
-            linkModal.classList.add("hidden");
-            linkModal.classList.remove("flex");
-            refresh();
-        } else {
-            let json = await res.json();
-            document.getElementById("category-message").innerText = json.message;
-        }
-    });
-
-    document.getElementById("category-form").addEventListener("submit", async (event) => {
-        event.preventDefault();
-        let data = new FormData(event.target);
-
-        let res = await fetch(`/api/categories`, {
-            method: "POST",
-            body: data
-        });
-
-        if (res.status === 201) {
-            categoryModal.classList.add("hidden");
-            categoryModal.classList.remove("flex");
-            refresh();
-        } else {
-            let json = await res.json();
-            document.getElementById("link-message").innerText = json.message;
-        }
-    });
-
-    linkModal.addEventListener("click", (event) => {
-        if (event.target === linkModal) {
-            targetCategoryID = null;
-            linkModal.classList.add("hidden");
-            linkModal.classList.remove("flex");
-        }
-    });
-
-    categoryModal.addEventListener("click", (event) => {
-        if (event.target === categoryModal) {
-            targetCategoryID = null;
-            categoryModal.classList.add("hidden");
-            categoryModal.classList.remove("flex");
-        }
-    });
-</script>
\ No newline at end of file
diff --git a/views/index.hbs b/views/index.hbs
deleted file mode 100644
index 71a7d94..0000000
--- a/views/index.hbs
+++ /dev/null
@@ -1,54 +0,0 @@
-<main class="flex justify-center items-center h-screen relative bg-[#0E0A0E]">
-    <div class="absolute top-2.5 left-2.5">
-        <div class="text-[#BABABA] flex items-center">
-            <span class="mr-2 flex items-center">
-                {{{WeatherData.Icon}}}
-            </span>
-            <div class="font-semibold">
-                <p>{{WeatherData.Temp}}°C</p>
-                <p>{{WeatherData.Desc}}</p>
-            </div>
-        </div>
-    </div>
-    <div class="flex flex-col items-center w-full mx-6">
-        <div class="flex items-center pb-2.5">
-            <svg class="mr-3 aspect-square w-[clamp(48px,10vw,60px)]" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="12.1483" y="24.7693" width="70" height="47" rx="12" transform="rotate(14.63 12.1483 24.7693)" fill="url(#paint0_linear_20_10)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M52.7386 13.4812C46.8869 10.3698 39.6209 12.5913 36.5096 18.4429L32.7819 25.4537L68.4322 34.7599C77.5166 37.1313 82.9586 46.418 80.5872 55.5025L74.7779 77.7567C74.7752 77.7674 74.7724 77.778 74.7696 77.7886C79.7728 78.7022 85.0029 76.3441 87.518 71.6138L98.3159 51.306C101.427 45.4543 99.2058 38.1883 93.3542 35.0769L52.7386 13.4812Z" fill="url(#paint1_linear_20_10)"/><defs><linearGradient id="paint0_linear_20_10" x1="12.359" y1="44.8681" x2="82.491" y2="48.2607" gradientUnits="userSpaceOnUse"><stop stop-color="#F0389B"/><stop offset="1" stop-color="#EEE740"/></linearGradient><linearGradient id="paint1_linear_20_10" x1="33.8935" y1="25.6926" x2="94.2236" y2="61.6131" gradientUnits="userSpaceOnUse"><stop stop-color="#AA38F0"/><stop offset="1" stop-color="#EE406A"/></linearGradient></defs></svg>
-            <h1>Passport</h1>
-        </div>
-        <input id="search-input" class="w-full max-w-3xl 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]" placeholder="Search..." />
-    </div>
-</main>
-<section class="flex justify-center w-full">
-    <div class="w-full sm:w-4/5 p-2.5">
-        {{#each Categories}}
-            <div class="flex items-center w-fit">
-                <img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" src="{{this.Icon}}" />
-                <h2 class="capitalize w-fit">{{this.Name}}</h2>
-            </div>
-            <div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
-                {{#each this.Links}}
-                    <a href="{{this.URL}}" class="underline-none text-unset" draggable="false" target="_blank" rel="noopener noreferrer">
-                        <div class="rounded-2xl bg-[#211F23] 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)] hover:-translate-y-1">
-                            <img class="object-contain mr-2 select-none rounded-md" width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
-                            <div>
-                                <h3>{{this.Name}}</h3>
-                                <p class="text-[#D7D7D7]">{{this.Description}}</p>
-                            </div>
-                        </div>
-                    </a>
-                {{/each}}
-            </div>
-        {{/each}}
-    </div>
-</section>
-
-<script>
-    let search_input = document.getElementById("search-input");
-    let search_provider = "{{ SearchProvider }}";
-    // on enter key press
-    search_input.addEventListener("keyup", function (event) {
-        if (event.key === "Enter") {
-            window.location.href = search_provider.replace("%s", search_input.value);
-        }
-    });
-</script>
\ No newline at end of file
