use-package piccolo

src/components/document.lisp

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

src/components/layout.lisp

@@ -1,17 +1,16 @@
 (defpackage #:hp/components/layout
-  (:use #:cl)
+  (:use #:cl
-  (:local-nicknames (#:pi #:piccolo))
+        #:piccolo)
   (:local-nicknames (#:cfg #:hp/config/*))
   (:export #:layout))
 (in-package #:hp/components/layout)
 
-(pi:define-element layout ()
+(define-element layout ()
-  (pi:h
+  (body
-    (body
+    :hx-ext cfg:*hx-ext*
-      :hx-ext cfg:*hx-ext*
+    :class "h-[100svh] flex flex-col"
-      :class "h-[100svh] flex flex-col"
+    (header)
-      (header)
+    (main :class "flex-1"
-      (main :class "flex-1"
+      children)
-        pi:children)
+    ; footer
-      ; footer
+    (footer)))
-      (footer))))

src/routes/index.lisp

@@ -1,19 +1,23 @@
 (defpackage #:hp/routes/index
-  (:use #:cl)
+  (:use #:cl
-  (:local-nicknames (#:pi #:piccolo))
+        #:piccolo)
   (:local-nicknames (#:view #:hp/view/*))
   (:export #:handle-get))
 (in-package #:hp/routes/index)
 
-(pi:define-element page ()
+(define-element page ()
-  (pi:h
+  (div :class "h-full place-content-center"
-    (div :class "h-full place-content-center"
+    (h1
-      (h1
+      :x-data "{
-        :x-data "{flag: true}"
+         flag: true,
-        :@click "flag = ! flag"
+         toggle() {
-        :class "text-4xl text-center"
+           this.flag = !this.flag
-        :|:class| "flag ? 'text-red-400' : 'text-blue-400'"
+         }
-        "Hello, world!"))))
+       }"
+      :@click "toggle"
+      :class "text-4xl text-center"
+      :|:class| "flag ? 'text-red-400' : 'text-blue-400'"
+      "Hello, world!")))
 
 (defun handle-get (params)
   (declare (ignore params))

src/routes/not-found.lisp

@@ -1,7 +1,6 @@
 (defpackage #:hp/routes/not-found
-  (:use #:cl)
+  (:use #:cl
-  (:local-nicknames (#:jg #:jingle))
+        #:piccolo)
-  (:local-nicknames (#:pi #:piccolo))
   (:local-nicknames (#:view #:hp/view/*))
   (:export #:handle-not-found))
 (in-package #:hp/routes/not-found)
@@ -10,10 +9,9 @@
   '(:title "404 Not Found"
     :description "お探しのページは見つかりませんでした。"))
 
-(pi:define-element page ()
+(define-element page ()
-  (pi:h
+  (section
-    (section
+    (h1 "404 Not Found")))
-      (h1 "404 Not Found"))))
 
 (defun handle-not-found ()
   (view:render (page)