Add header

qlfile

@@ -6,3 +6,4 @@ git ningle-fbr https://github.com/skyizwhite/ningle-fbr.git
 ql cl-ppcre
 ql trivial-backtrace
 ql trivia
+ql cl-str

qlfile.lock

@@ -34,3 +34,7 @@
  (:class qlot/source/ql:source-ql
   :initargs (:%version :latest)
   :version "ql-2024-10-12"))
+("cl-str" .
+ (:class qlot/source/ql:source-ql
+  :initargs (:%version :latest)
+  :version "ql-2024-10-12"))

src/renderer.lisp

@@ -2,6 +2,7 @@
   (:use #:cl
         #:hsx
         #:trivia)
+  (:import-from #:str)
   (:local-nicknames (#:jg #:jingle))
   (:import-from #:hsx/element
                 #:element)
@@ -11,6 +12,25 @@
 (defun bust-cache (url)
   (format nil "~a?~a" url #.(get-universal-time)))
 
+(defcomp page-header ()
+  (let ((links '(("Work" "/work")
+                 ("Blog" "/blog"))))
+    (hsx
+     (header :class "flex justify-between container mx-auto py-4"
+       (h1 :class "text-lg font-bold"
+         (a :href "/" "skyizwhite"))
+       (ul :class "flex"
+         (loop
+           :for (content href) :in links :collect
+              (li (a
+                    :href href
+                    :class (concatenate 'string
+                                        "pl-4"
+                                        (and (str:starts-with? href
+                                                               (jg:request-uri jg:*request*))
+                                             " text-pink-600"))
+                    content))))))))
+
 (defcomp document (&key title description children)
   (hsx
    (html :lang "ja"
@@ -24,12 +44,14 @@
        (script :src "https://cdn.jsdelivr.net/npm/htmx-ext-head-support@2.0.0/head-support.min.js")
        (script :src "https://cdn.jsdelivr.net/npm/htmx-ext-response-targets@2.0.0/response-targets.min.js")
        (script :src "https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js" :defer t)
-       (title (format nil "~@[~a - ~]skyizwhite.dev" title))
-       (meta
-         :name "description"
-         :content (or description "pakuの個人サイト")))
-     (body :hx-ext "head-support, response-targets" :hx-target-404 "body"
-       (main :class "container mx-auto"
+       (title (format nil "~@[~a - ~]skyizwhite" title))
+       (meta :name "description" :content (or description "pakuの個人サイト")))
+     (body
+       :hx-ext "head-support, response-targets"
+       :hx-boost "true" :hx-target-404 "body" :hx-target-5* "body"
+       :class "h-[100svh] flex flex-col"
+       (page-header)
+       (main :class "flex-1 h-full mx-auto container"
          children)))))
 
 (defmethod jg:process-response ((app jg:app) result)

src/routes/index.lisp

@@ -6,18 +6,9 @@
 
 (defcomp page ()
   (hsx
-   (<>
-     (h1 :class "text-green-600"
-       "こんにちは")
-     (div :x-data "{
-         open: false,
-         get isOpen() { return this.open },
-         toggle() { this.open = ! this.open },
-       }"
-       (button :@click "toggle()"
-         "Toggle")
-       (div :x-show "isOpen"
-         "Content ...")))))
+   (div :class "h-full grid place-items-center"
+     (h1 :class "text-pink-600"
+       "Hello World"))))
 
 (defun handle-get (params)
   (declare (ignore params))