Add the about page and the about content form to the admin panel.

src/main/blog/handlers.cljs

@@ -24,6 +24,25 @@
             (res/status 500)
             (res/send (ex-message err))))))))
 
+(defn about-page-handler-factory
+  [client]
+  (fn [req res]
+    (let [channel (chan)
+          session (.-user (.-session req))]
+      (go
+        (try
+          (let [about (<! (db/get-about client channel))
+                content (:content about)]
+            (res/status 200)
+            (.render res "about"
+                     (-> {:content content
+                          :authorized (some? session)
+                          :url "/about"}
+                         (clj->js))))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
 (defn login-page-handler-factory
   []
   (fn [req res]
@@ -95,10 +114,12 @@
         (try
           (let [articles (if (nil? search)
                            (<! (db/get-articles-briefly client channel))
-                           (<! (db/search-articles-briefly client search channel)))]
+                           (<! (db/search-articles-briefly client search channel)))
+                about-content (:content (<! (db/get-about client channel)))]
             (res/status 200)
             (.render res "admin_panel"
                      (-> {:articles articles
+                          :about-content about-content
                           :authorized (some? session)
                           :url "/admin"}
                          (clj->js))))
@@ -237,6 +258,20 @@
             (res/status 500)
             (res/send (ex-message err))))))))
 
+(defn htmx-update-about-handler-factory
+  [client]
+  (fn [req res]
+    (let [channel (chan)
+          content (.-content (.-body req))]
+      (go
+        (try
+          (let [id (<! (db/update-about client content channel))]
+            (res/status 200)
+            (.send res ""))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
 (defn htmx-admin-search-articles-handler-factory
   [client]
   (fn [req res]

src/main/blog/server.cljs

@@ -75,6 +75,9 @@
   (. app get "/"
      (handlers/index-page-handler-factory client))
 
+  (. app get "/about"
+     (handlers/about-page-handler-factory client))
+
   (. app get "/login"
      (handlers/login-page-handler-factory))
 
@@ -84,7 +87,6 @@
   (. app get "/logout"
      (handlers/logout-page-handler-factory))
 
-
   (. app get "/admin"
      handlers/is-user-authorized
      (handlers/admin-panel-handler-factory client))
@@ -92,6 +94,13 @@
   (. app use "/admin"
      (handlers/user-not-authorized-factory))
 
+  (. app patch "/htmx/about/"
+     handlers/is-user-authorized
+     (handlers/htmx-update-about-handler-factory client))
+
+  (. app use "/htmx/about/"
+     (handlers/user-not-authorized-factory))
+
   (. app post "/htmx/search/articles/"
      (handlers/htmx-search-articles-handler-factory client))
 

views/admin_panel.hbs

@@ -1,5 +1,33 @@
 <main class="bg-white dark:bg-gray-600 grow">
   <section class="bg-gray-300 dark:bg-gray-600 p-3 sm:p-5 antialiased">
+    <div class="mx-auto max-w-screen-2xl px-4 lg:px-12 pb-6">
+      <div class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden"
+           x-data="{ 'show': false }">
+        <!-- header -->
+        <div class="flex justify-between items-center mb-4 rounded-t border-b sm:mb-5 dark:border-gray-600 mx-4 py-4 border-b">
+          <button type="button"
+                  x-on:click="show=!show"
+                  class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-authentication" data-collapse-toggle="dropdown-authentication" aria-expanded="true">
+            <span class="text-lg font-semibold text-gray-900 dark:text-white pr-2">About</span>
+            <svg x-show="show" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 5.326 5.7a.909.909 0 0 0 1.348 0L13 1"></path></svg>
+            <svg x-show="!show" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7 7.674 1.3a.91.91 0 0 0-1.348 0L1 7"></path></svg>
+          </button>
+        </div>
+        <!-- form -->
+        <form class="p-4" x-show="show">
+          <div class="grid gap-4 mb-4 sm:grid-cols-1">
+            <div>
+              <label for="content" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Content</label>
+              <textarea id="about-content" name="content" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-[#3b82f6] focus:border-[#3b82f6] dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#3b82f6] dark:focus:border-[#3b82f6]" placeholder="Write about you and your blog here">{{ about-content }}</textarea>
+            </div>
+          </div>
+          <button type="submit" hx-patch="/htmx/about/" hx-swap="none" class="text-white inline-flex items-center bg-[#1d4ed8] hover:bg-[#1e40af] focus:ring-4 focus:outline-none focus:ring-[#93c5fd] font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-[#2563eb] dark:hover:bg-[#1d4ed8] dark:focus:ring-[#1e40af]">
+          Update
+          </button>
+        </form>
+      </div>
+    </div>
+
     <div class="mx-auto max-w-screen-2xl px-4 lg:px-12">
       <div class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
         <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">