Migrate from Piccolo to HSX

src/components/document.lisp

@@ -1,6 +1,6 @@
 (defpackage #:hp/components/document
   (:use #:cl
-        #:piccolo)
+        #:hsx)
   (:import-from #:hp/view/asset
                 #:defasset)
   (:export #:document))
@@ -20,23 +20,24 @@
 (defasset *global-css* :root "global.css")
 (defasset *dist-css* :root "dist.css")
 
-(define-element document (title description)
-  (html :lang "ja"
-    (head
-      (meta :charset "UTF-8")
-      (script :src *htmx*)
-      (mapcar (lambda (path) (script :src path))
-              *htmx-exts*)
-      (mapcar (lambda (path) (script :src path :defer t))
-              *alpine-exts*)
-      (script :src *alpine-store* :defer t)
-      (script :src *alpine* :defer t)
-      (style
-        "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');")
-      (link :rel "stylesheet" :type "text/css" :href *global-css*)
-      (link :rel "stylesheet" :type "text/css" :href *dist-css*)
-      (title (format nil "~@[~a - ~]skyizwhite.dev" title))
-      (meta
-        :name "description"
-        :content (or description "pakuの個人サイト")))      
-    children))
+(defcomp document (&key title description children)
+  (hsx
+   (html :lang "ja"
+     (head
+       (meta :charset "UTF-8")
+       (script :src *htmx*)
+       (mapcar (lambda (path) (script :src path))
+               *htmx-exts*)
+       (mapcar (lambda (path) (script :src path :defer t))
+               *alpine-exts*)
+       (script :src *alpine-store* :defer t)
+       (script :src *alpine* :defer t)
+       (style
+         "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');")
+       (link :rel "stylesheet" :type "text/css" :href *global-css*)
+       (link :rel "stylesheet" :type "text/css" :href *dist-css*)
+       (title (format nil "~@[~a - ~]skyizwhite.dev" title))
+       (meta
+         :name "description"
+         :content (or description "pakuの個人サイト")))
+     children)))

src/components/layout.lisp

@@ -2,7 +2,7 @@
   (:use #:cl)
   (:mix #:parenscript
         #:paren6
-        #:piccolo)
+        #:hsx)
   (:import-from #:hp/config/asset
                 #:*hx-ext*)
   (:import-from #:hp/view/asset
@@ -15,34 +15,37 @@
     (:href "/about" :label "About")
     (:href "/work"  :label "Work")))
 
-(define-element header-nav-item (href label)
-  (li
-    :class "px-4 rounded-full"
-    :|:class| (ps* `(and (is-current-path ,href)
-                         "font-bold bg-indigo-200 pointer-events-none shadow-sm"))
-    (a :href href
-      label)))
+(defcomp header-nav-item (&key href label)
+  (hsx
+   (li
+     :class "px-4 rounded-full"
+     :|:class| (ps* `(and (is-current-path ,href)
+                          "font-bold bg-indigo-200 pointer-events-none shadow-sm"))
+     (a :href href
+       label))))
 
-(define-element layout-header ()
-  (header :class "px-10 py-6 flex justify-between"
-    (h1 :class "font-bold text-xl"
-      "skyizwhite.dev")
-    (nav
-      :x-data (ps (create6
-                   (current-path (@ window location pathname))
-                   (defun is-current-path (path)
-                     (eql (@ this current-path) 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*)))))
+(defcomp layout-header ()
+  (hsx
+   (header :class "px-10 py-6 flex justify-between"
+     (h1 :class "font-bold text-xl"
+       "skyizwhite.dev")
+     (nav
+       :x-data (ps (create6
+                    (current-path (@ window location pathname))
+                    (defun is-current-path (path)
+                      (eql (@ this current-path) 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 *hx-ext*
-    :class "h-[100svh] flex flex-col bg-neutral-200"
-    (layout-header)
-    (main :class "flex-1"
-      children)
-    ; footer
-    (footer)))
+(defcomp layout (&key children)
+  (hsx
+   (body
+     :hx-ext *hx-ext*
+     :class "h-[100svh] flex flex-col bg-neutral-200"
+     (layout-header)
+     (main :class "flex-1"
+       children)
+     ; footer
+     (footer))))