Askama + htmx for frontend

Server-side rendering with htmx and Tailwind CSS for the styling
2025-09-16 01:47:18 +02:00
parent ba6b2dbd93
commit 56035fab30
10 changed files with 403 additions and 37 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{% block title %}zero2prod{% endblock %}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/htmx.org@1.9.6"></script>
+  </head>
+  <body class="bg-gray-50 min-h-screen flex flex-col">
+    <header class="bg-white shadow-sm border-b border-gray-200 top-0 z-40">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between items-center h-16">
+          <div class="flex-shrink-0">
+            <a href="/" class="hover:opacity-80 transition-opacity">
+              <h1 class="text-xl font-bold text-gray-900">
+                <span class="text-blue-600">zero2prod</span>
+              </h1>
+            </a>
+          </div>
+
+          <nav>
+            <a
+              href="/admin/dashboard"
+              class="bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md text-sm font-medium transition-colors"
+            >
+              Dashboard
+            </a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+    <div class="flex flex-1">
+      <main class="flex-1 lg:ml-0">
+        <div class="py-8 px-4 sm:px-6 lg:px-8">
+          {% block content %}{% endblock %}
+        </div>
+      </main>
+    </div>
+
+    <footer class="bg-white border-t border-gray-200 mt-auto">
+      <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+          <div
+            class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6"
+          >
+            <div class="flex items-center space-x-4">
+              <a
+                href="https://gitea.alphonsepaix.xyz/alphonse/zero2prod"
+                target="_blank"
+                class="text-sm text-gray-500 hover:text-gray-900 transition-colors flex items-center"
+              >
+                Code repository
+                <svg
+                  class="ml-1 h-3 w-3"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                  />
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          <div class="mt-4 md:mt-0">
+            <p class="text-xs text-gray-500">
+              Built with ❤️ using Rust, axum & htmx
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>