Remove bg, add header

src/components/header.lisp

@@ -0,0 +1,28 @@
+(defpackage #:hp/components/header
+  (:use #:cl
+        #:hsx)
+  (:import-from #:jingle
+                #:request-uri)
+  (:export #:~header))
+(in-package #:hp/components/header)
+
+(defparameter *nav-menu*
+  '(("/bio" "bio")
+    ("/work" "work")
+    ("/blog" "blog")))
+
+(defcomp ~header ()
+  (hsx
+   (header :class "flex justify-between pb-2 md:pb-4 border-b-1"            
+     (h1 :class "text-2xl md:text-3xl font-bold"
+       (a :href "/"
+         "skyizwhite"))
+     (nav :class "flex items-end"
+       (ul :preload "mouseover" :class "flex gap-4 text-lg"
+         (loop
+           :for (href label) :in *nav-menu* :collect
+              (if (search href (request-uri jingle:*request*))
+                  (hsx (li :class "text-pink-500"
+                         label))
+                  (hsx (li (a :href href :class "underline hover:text-pink-500"
+                             label))))))))))

src/components/layout.lisp

@@ -1,21 +1,16 @@
-(defpackage #:hp/ui/layout
+(defpackage #:hp/components/layout
   (:use #:cl
         #:hsx)
   (:import-from #:hp/lib/metadata
                 #:~metadata)
-  (:import-from #:jingle
+  (:import-from #:hp/components/header
-                #:request-uri)
+                #:~header)
   (:export #:~layout))
-(in-package #:hp/ui/layout)
+(in-package #:hp/components/layout)
 
 (defun bust-cache (url)
   (format nil "~a?v=~a" url #.(get-universal-time)))
 
-(defparameter *nav-menu*
-  '(("/bio" "bio")
-    ("/work" "work")
-    ("/blog" "blog")))
-
 (defcomp ~layout (&key metadata children)
   (hsx
    (html :lang "ja"
@@ -40,27 +35,11 @@
      (body
        :hx-ext "head-support, response-targets, preload"
        :hx-boost "true" :hx-target-404 "body" :hx-target-5* "body"
-       :class (<>
+       :class (<> 
-                "h-[100svh] flex flex-col bg-[url(/img/bg.webp)] bg-cover bg-center "
+                "bg-amber-50 flex flex-col h-[100svh] w-full max-w-[700px] "
-                "p-2 md:p-8")
+                "p-2 md:pt-6 mx-auto")
-       (div :class (<> 
+       (~header)
-                     "bg-amber-50/90 flex flex-col flex-1 w-full max-w-[700px] overflow-hidden  shadow-sm "
+       (main :class "flex-1 px-2 py-6 md:px-4 md:py-8 overflow-y-scroll"
-                     "px-2 pt-2 mx-auto md:px-8 md:pt-8")
+         children)
-         (header :class "flex justify-between pb-2 md:pb-4 border-b-1"
+       (footer :class "flex p-2 justify-center text-sm border-t-1"
-           (h1 :class "text-2xl md:text-3xl font-bold"
+         (p "© 2025 Akira Tempaku"))))))
-             (a :href "/"
-               "skyizwhite"))
-           (nav :class "flex items-end"
-             (ul
-               :preload "mouseover"
-               :class "flex gap-4 text-lg"
-               (loop
-                 :for (href label) :in *nav-menu*
-                 :collect
-                    (if (search href (request-uri jingle:*request*))
-                        (hsx (li :class "text-pink-500"
-                               label))
-                        (hsx (li (a :href href :class "underline hover:text-pink-500"
-                                   label))))))))
-         (main :class "flex-1 pt-2 pb-4 md:pt-4 md:pb-8 overflow-y-scroll "
-           children))))))

src/renderer.lisp

@@ -9,7 +9,7 @@
   (:import-from #:hp/lib/env
                 #:hp-url
                 #:hp-env)
-  (:import-from #:hp/ui/layout
+  (:import-from #:hp/components/layout
                 #:~layout))
 (in-package #:hp/renderer)
 

tailwind.config.js

@@ -3,7 +3,7 @@ module.exports = {
   content: [
     "./src/renderer.lisp",
     "./src/routes/**/*.lisp",
-    "./src/ui/**/*.lisp",
+    "./src/components/**/*.lisp",
   ],
   theme: {
     container: {