GH-2254 Initialize test IndexView context & implement theme switcher

dzikoysk · Oct 28, 2024 · 367d239 · 367d239
1 parent 4bd797c
commit 367d239
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 5 deletions.
diff --git a/reposilite-backend/src/main/kotlin/com/reposilite/ui/UiPlugin.kt b/reposilite-backend/src/main/kotlin/com/reposilite/ui/UiPlugin.kt
@@ -6,6 +6,7 @@ import com.reposilite.plugin.api.ReposilitePlugin
 import com.reposilite.plugin.event
 import com.reposilite.ui.jtx.JtexConfig
 import com.reposilite.ui.jtx.JtexPlugin
+import com.reposilite.ui.views.IndexView
 import com.reposilite.web.api.HttpServerConfigurationEvent
 import io.javalin.http.Context
 import io.javalin.router.JavalinDefaultRouting
@@ -24,7 +25,17 @@ internal class UiPlugin : ReposilitePlugin() {
 
             event.config.router.mount { routing: JavalinDefaultRouting ->
                 routing
-                    .get("/") { ctx: Context -> ctx.render("index.jte") }
+                    .get("/") {
+                        it.render(
+                            "index.jte",
+                            mapOf("view" to IndexView(
+                                title = "Reposilite",
+                                description = "Reposilite is a lightweight repository management software dedicated to simplicity and speed.",
+                                logo = "https://avatars.githubusercontent.com/u/88636591",
+                                website = "https://reposilite.com"
+                            ))
+                        )
+                    }
                     .post("/clicked") { ctx: Context -> ctx.result("Panda") }
             }
         }

diff --git a/reposilite-backend/src/main/kotlin/com/reposilite/ui/views/IndexView.kt b/reposilite-backend/src/main/kotlin/com/reposilite/ui/views/IndexView.kt
@@ -0,0 +1,8 @@
+package com.reposilite.ui.views
+
+class IndexView(
+    val title: String,
+    val description: String,
+    val logo: String,
+    val website: String,
+)
diff --git a/reposilite-backend/src/main/resources/ui/component/Head.jte b/reposilite-backend/src/main/resources/ui/component/Head.jte
@@ -5,7 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>${title}</title>
 
+    @template.lib.Theme()
     @template.lib.HTMX()
     @template.lib.Tailwind()
     @template.lib.DevMode()
+
+    <style>
+        #theme-switcher span {
+            display: none;
+        }
+        .dark #theme-switcher .sun-icon {
+            display: inline !important;
+        }
+        .light #theme-switcher .moon-icon {
+            display: inline !important;
+        }
+    </style>
 </head>
diff --git a/reposilite-backend/src/main/resources/ui/component/Header.jte b/reposilite-backend/src/main/resources/ui/component/Header.jte
@@ -1,5 +1,27 @@
 @param String title
 
 <header class="border-b-1 border-gray-50 h-16 flex items-center w-full">
-    <p class="px-2">${title}</p>
+    <div class="mx-auto container-xl flex justify-between w-full">
+        <nav>
+            ${title}
+        </nav>
+        <nav>
+            <button id="theme-switcher" class="flex bg-gray-900 rounded px-4 py-1">
+                Switch
+                <span class="sun-icon color-white">
+                    @template.lib.icons.SunIcon()
+                </span>
+                <span class="moon-icon color-black">
+                    @template.lib.icons.MoonIcon()
+                </span>
+            </button>
+        </nav>
+    </div>
+    <script>
+        document.getElementById("theme-switcher").addEventListener("click", () => {
+            document.documentElement.classList.toggle("dark")
+            document.documentElement.classList.toggle("light")
+            localStorage.setItem("color-theme", document.documentElement.classList.contains("dark") ? "dark" : "light")
+        })
+    </script>
 </header>
diff --git a/reposilite-backend/src/main/resources/ui/index.jte b/reposilite-backend/src/main/resources/ui/index.jte
@@ -1,9 +1,11 @@
+@param com.reposilite.ui.views.IndexView view
+
 <!DOCTYPE html>
 <html lang="en">
     @template.component.Head(title = "Reposilite")
 
-    <body class="min-h-full text-white min-w-full bg-black">
-        @template.component.Header(title = "Reposilite")
+    <body class="min-h-full text-black dark:text-white min-w-full bg-white dark:bg-black">
+        @template.component.Header(title = view.getTitle())
 
         <button hx-post="/clicked" hx-swap="innerHTML">
             Click me

diff --git a/reposilite-backend/src/main/resources/ui/lib/Tailwind.jte b/reposilite-backend/src/main/resources/ui/lib/Tailwind.jte
@@ -1 +1,7 @@
-<script src="https://cdn.tailwindcss.com"></script>
+<script src="https://cdn.tailwindcss.com"></script>
+<!--suppress JSUnresolvedReference -->
+<script>
+    tailwind.config = {
+        darkMode: 'selector'
+    }
+</script>
diff --git a/reposilite-backend/src/main/resources/ui/lib/Theme.jte b/reposilite-backend/src/main/resources/ui/lib/Theme.jte
@@ -0,0 +1,18 @@
+@raw
+<script>
+    const themeKey = 'color-theme'
+    let darkThemeEnabled = localStorage.getItem(themeKey) === 'dark'
+
+    if (!darkThemeEnabled && !(themeKey in localStorage)) {
+        darkThemeEnabled = window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
+
+    if (darkThemeEnabled) {
+        document.documentElement.classList.add('dark')
+        document.documentElement.classList.remove('light')
+    } else {
+        document.documentElement.classList.remove('dark')
+        document.documentElement.classList.add('light')
+    }
+</script>
+@endraw
diff --git a/reposilite-backend/src/main/resources/ui/lib/icons/MoonIcon.jte b/reposilite-backend/src/main/resources/ui/lib/icons/MoonIcon.jte
@@ -0,0 +1,15 @@
+<!-- Source: https://heroicons.dev/ -->
+<svg
+    class="w-6 h-6"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+    />
+</svg>
diff --git a/reposilite-backend/src/main/resources/ui/lib/icons/SunIcon.jte b/reposilite-backend/src/main/resources/ui/lib/icons/SunIcon.jte
@@ -0,0 +1,15 @@
+<!-- Source: https://heroicons.dev/ -->
+<svg
+    class="w-6 h-6"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+    />
+</svg>