feat: doc pages, finished refactor of ingress

templates/auth/account.html

@@ -5,45 +5,47 @@
     opacity: 0.5;
   }
 </style>
-<div class="max-w-lg w-full">
-  <h2 class="text-2xl font-bold text-center mb-8">Account Settings</h2>
-  <div class="form-control">
-    <label class="label">
-      <span class="label-text">Email</span>
-    </label>
-    <input type="email" name="email" value="{{ user.email }}" class="input input-bordered w-full" disabled />
+<main class="flex-grow flex justify-center items-center">
+  <div class="max-w-lg w-full">
+    <h2 class="text-2xl font-bold text-center mb-8">Account Settings</h2>
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text">Email</span>
+      </label>
+      <input type="email" name="email" value="{{ user.email }}" class="input input-bordered w-full" disabled />
+    </div>
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text">API key</span>
+      </label>
+      {% block api_key_section %}
+      {% if user.api_key %}
+      <input type="text" name="api-key" value="{{ user.api_key }}" class="input input-bordered w-full" disabled />
+      {% else %}
+      <button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
+        Create API-Key
+      </button>
+      {% endif %}
+      {% endblock %}
+    </div>
+    <div class="form-control mt-4">
+      <button hx-post="/verify-email" class="btn btn-secondary w-full">
+        Verify Email
+      </button>
+    </div>
+    <div class="form-control mt-4">
+      <button hx-get="/change-password" class="btn btn-primary w-full">
+        Change Password
+      </button>
+    </div>
+    <div class="form-control mt-4">
+      <button hx-delete="/delete-account"
+        hx-confirm="This action will permanently delete your account and all data associated. Are you sure you want to continue?"
+        class="btn btn-error w-full">
+        Delete Account
+      </button>
+    </div>
+    <div id="account-result" class="mt-4"></div>
   </div>
-  <div class="form-control">
-    <label class="label">
-      <span class="label-text">API key</span>
-    </label>
-    {% block api_key_section %}
-    {% if user.api_key %}
-    <input type="text" name="api-key" value="{{ user.api_key }}" class="input input-bordered w-full" disabled />
-    {% else %}
-    <button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
-      Create API-Key
-    </button>
-    {% endif %}
-    {% endblock %}
-  </div>
-  <div class="form-control mt-4">
-    <button hx-post="/verify-email" class="btn btn-secondary w-full">
-      Verify Email
-    </button>
-  </div>
-  <div class="form-control mt-4">
-    <button hx-get="/change-password" class="btn btn-primary w-full">
-      Change Password
-    </button>
-  </div>
-  <div class="form-control mt-4">
-    <button hx-delete="/delete-account"
-      hx-confirm="This action will permanently delete your account and all data associated. Are you sure you want to continue?"
-      class="btn btn-error w-full">
-      Delete Account
-    </button>
-  </div>
-  <div id="account-result" class="mt-4"></div>
-</div>
+</main>
 {% endblock %}

templates/body_base.html

@@ -5,26 +5,27 @@
   <div class="min-h-screen flex flex-col">
     <!-- Navbar -->
     <nav class="navbar bg-base-200">
-      <div class="flex-1">
-        <a class="btn text-2xl border-transparent btn-outline btn-primary" href="/" hx-boost="true">Minne</a>
-      </div>
-      <div>
-        <ul class="menu menu-horizontal px-1">
-          {% if user %}
-          <li><a hx-boost="true" class="" href="/account">Account</a></li>
-          <li><a hx-boost="true" href="/signout">Sign out</a></li>
-          {% else %}
-          <li><a hx-boost="true" class="" href="/signin">Login</a></li>
-          <li><a hx-boost="true" class="" href="/signup">Sign up</a></li>
-          {% endif %}
-        </ul>
+      <div class="container mx-auto">
+        <div class="flex-1">
+          <a class="btn text-2xl border-transparent btn-outline btn-primary" href="/" hx-boost="true">Minne</a>
+        </div>
+        <div>
+          <ul class="menu menu-horizontal px-1">
+            <li><a hx-boost="true" class="" href="/documentation">Docs</a></li>
+            {% if user %}
+            <li><a hx-boost="true" class="" href="/account">Account</a></li>
+            <li><a hx-boost="true" href="/signout">Sign out</a></li>
+            {% else %}
+            <li><a hx-boost="true" class="" href="/signin">Login</a></li>
+            <li><a hx-boost="true" class="" href="/signup">Sign up</a></li>
+            {% endif %}
+          </ul>
+        </div>
       </div>
     </nav>
 
     <!-- Main Content -->
-    <main class="flex-grow flex items-center justify-center">
-      {% block main %}{% endblock %}
-    </main>
+    {% block main %}{% endblock %}
   </div>
 </body>
 {% endblock %}

templates/documentation/index.html

@@ -0,0 +1,35 @@
+{% extends "body_base.html" %}
+{% block main %}
+<div class="flex justify-center flex-grow mt-0 sm:mt-4">
+  <div class="container">
+    <div class="grid grid-cols-1 lg:grid-cols-[auto,1fr] gap-4 p-4">
+      <!-- Documentation Menu -->
+      <aside class="bg-base-200 rounded-lg p-4">
+        {% include "documentation/menu.html" %}
+      </aside>
+      <!-- Main Content -->
+      <article class="prose flex mx-auto justify-center flex-col">
+        <h1 class="">Personalised Knowledge Management (PKM)</h1>
+        <p class="">
+          Personalised Knowledge Management (PKM) is a system designed to help individuals organise, store, and retrieve
+          information effectively. It empowers users to create a personalised workflow for managing knowledge, enabling
+          better decision-making and productivity.
+        </p>
+        <p class="">
+          This documentation will guide you through the core concepts, tools, and best practices for building and
+          maintaining your own PKM system.
+        </p>
+        <div class="card p-6 rounded-lg shadow-md">
+          <h2 class="">Getting Started</h2>
+          <p class="">
+            To begin, explore the sections in the navigation menu. Each section provides detailed insights into
+            different
+            aspects of PKM, from foundational principles to advanced techniques.
+          </p>
+          <a href="/documentation/submenu1" class="btn btn-primary" hx-boost="true">Learn More</a>
+        </div>
+      </article>
+    </div>
+  </div>
+</div>
+{% endblock %}

templates/documentation/menu.html

@@ -0,0 +1,22 @@
+<ul class="menu bg-base-200 rounded-box">
+  <li><a hx-boost="true" href="/documentation">Start</a></li>
+  <li>
+    <details open>
+      <summary>Core Concepts</summary>
+      <ul>
+        <li><a hx-boost="true" href="/documentation/submenu1">What is PKM?</a></li>
+        <li><a hx-boost="true" href="/documentation/submenu2">Benefits of PKM</a></li>
+      </ul>
+    </details>
+  </li>
+  <li>
+    <details>
+      <summary>Tools & Techniques</summary>
+      <ul>
+        <li><a hx-boost="true" href="/documentation/tools">Tools for PKM</a></li>
+        <li><a hx-boost="true" href="/documentation/techniques">Effective Techniques</a></li>
+      </ul>
+    </details>
+  </li>
+  <li><a hx-boost="true" href="/documentation/faq">FAQ</a></li>
+</ul>

templates/gdpr.html

@@ -1,12 +1,13 @@
-<div id="gdpr-banner" class="fixed card mx-auto max-w-screen-sm  bg-neutral text-neutral-content bottom-0">
+<div id="gdpr-banner" class="fixed card mx-auto max-w-screen-sm mb-2 bg-neutral text-neutral-content bottom-0">
   <div class="card-body items-center text-center">
     <p class="text-sm"> We use cookies to enhance your experience. By continuing to visit this site, you agree to
       our use cookies.
       <a href="/privacy-policy" class="link link-primary">Learn more</a>
     </p>
-    <div class="card-actions justify-end">
-      <button class="btn btn-ghost" hx-post="/gdpr/deny" hx-target="#gdpr-banner" hx-swap="outerHTML">Deny</button>
-      <button class="btn btn-primary" hx-post="/gdpr/accept" hx-target="#gdpr-banner"
+    <div class="card-actions justify-end mt-2">
+      <button class="btn btn-ghost btn-sm" hx-post="/gdpr/deny" hx-target="#gdpr-banner"
+        hx-swap="outerHTML">Deny</button>
+      <button class="btn btn-primary btn-sm" hx-post="/gdpr/accept" hx-target="#gdpr-banner"
         hx-swap="outerHTML">Accept</button>
     </div>
   </div>

templates/head_base.html

@@ -6,6 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% block title %}Minne{% endblock %}</title>
 
+  <!-- <meta http-equiv="refresh" content="4"> -->
+
   <!-- Preload critical assets -->
   <link rel="preload" href="assets/htmx.min.js" as="script">
   <link rel="preload" href="assets/style.css" as="style">

templates/index/hero.html

@@ -1,4 +1,4 @@
-<div class="hero">
+<div class="hero flex-grow flex justify-center ">
   <div class="hero-content text-center">
     <div class="max-w-4xl space-y-8">
       <!-- Hero Section -->