Add header

qlfile

@@ -7,3 +7,4 @@ ql cl-ppcre
 ql log4cl
 ql function-cache
 ql trivial-backtrace
+ql cl-interpol

qlfile.lock

@@ -38,3 +38,7 @@
  (:class qlot/source/ql:source-ql
   :initargs (:%version :latest)
   :version "ql-2023-10-21"))
+("cl-interpol" .
+ (:class qlot/source/ql:source-ql
+  :initargs (:%version :latest)
+  :version "ql-2023-10-21"))

src/components/layout.lisp

@@ -1,15 +1,50 @@
 (defpackage #:hp/components/layout
   (:use #:cl
-        #:piccolo)
-  (:local-nicknames (#:cfg #:hp/config/*))
+        #:piccolo
+        #:cl-interpol)
+  (:import-from #:hp/config/asset
+                #:*hx-ext*)
+  (:import-from #:hp/view/asset
+                #:defasset)
   (:export #:layout))
 (in-package #:hp/components/layout)
 
+(named-readtables:in-readtable :interpol-syntax)
+
+(defparameter *header-nav-items*
+  '((:href "/"        :label "Home")
+    (:href "/about"   :label "About")
+    (:href "/work"    :label "Work")
+    (:href "/contact" :label "Contact")))
+
+(define-element header-nav-item (href label)
+  (li
+    :class "px-2 rounded-full"
+    :|:class| #?"isCurrentPath('${href}') && 'font-bold bg-lime-200 pointer-events-none'"
+    (a :href href
+      label)))
+
+(define-element layout-header ()
+  (header :class "px-10 py-6 flex justify-between"
+    (H1 :class "font-bold text-2xl"
+      "skyizwhite.dev")
+    (nav
+      :x-data "{
+        currentPath: window.location.pathname,
+        isCurrentPath(path) {
+          return this.currentPath === path
+        }
+      }"
+      :hx-boost "true"
+      (ul :class "h-full flex items-center gap-6 text-lg"
+        (mapcar (lambda (item) (header-nav-item item))
+                *header-nav-items*)))))
+
 (define-element layout ()
   (body
-    :hx-ext cfg:*hx-ext*
-    :class "h-[100svh] flex flex-col"
-    (header)
+    :hx-ext *hx-ext*
+    :class "h-[100svh] flex flex-col"          
+    (layout-header)
     (main :class "flex-1"
       children)
     ; footer

src/routes/about.lisp

@@ -0,0 +1,16 @@
+(defpackage #:hp/routes/about
+  (:use #:cl
+        #:piccolo)
+  (:local-nicknames (#:view #:hp/view/*))
+  (:export #:handle-get))
+(in-package #:hp/routes/about)
+
+(define-element page ()
+  (div :class "h-full place-content-center"
+    (h1
+      :class "text-4xl text-center"
+      "About")))
+
+(defun handle-get (params)
+  (declare (ignore params))
+  (view:render (page)))

src/routes/contact.lisp

@@ -0,0 +1,16 @@
+(defpackage #:hp/routes/contact
+  (:use #:cl
+        #:piccolo)
+  (:local-nicknames (#:view #:hp/view/*))
+  (:export #:handle-get))
+(in-package #:hp/routes/contact)
+
+(define-element page ()
+  (div :class "h-full place-content-center"
+    (h1
+      :class "text-4xl text-center"
+      "Contact")))
+
+(defun handle-get (params)
+  (declare (ignore params))
+  (view:render (page)))

src/routes/index.lisp

@@ -8,15 +8,7 @@
 (define-element page ()
   (div :class "h-full place-content-center"
     (h1
-      :x-data "{
-         flag: true,
-         toggle() {
-           this.flag = !this.flag
-         }
-       }"
-      :@click "toggle"
       :class "text-4xl text-center"
-      :|:class| "flag ? 'text-red-400' : 'text-blue-400'"
       "Hello, world!")))
 
 (defun handle-get (params)

src/routes/not-found.lisp

@@ -10,8 +10,10 @@
     :description "お探しのページは見つかりませんでした。"))
 
 (define-element page ()
-  (section
-    (h1 "404 Not Found")))
+  (div :class "h-full place-content-center"
+    (h1
+      :class "text-rose-400 text-4xl text-center"
+      "404 Not Found")))
 
 (defun handle-not-found ()
   (view:render (page)

src/routes/work.lisp

@@ -0,0 +1,16 @@
+(defpackage #:hp/routes/work
+  (:use #:cl
+        #:piccolo)
+  (:local-nicknames (#:view #:hp/view/*))
+  (:export #:handle-get))
+(in-package #:hp/routes/work)
+
+(define-element page ()
+  (div :class "h-full place-content-center"
+    (h1
+      :class "text-4xl text-center"
+      "Work")))
+
+(defun handle-get (params)
+  (declare (ignore params))
+  (view:render (page)))