Migrate from Piccolo to HSX

2024-06-01 22:21:15 +09:00 · 2024-06-01 22:21:15 +09:00 · 19e467fe97
commit 19e467fe97
parent ef57e83a8c
10 changed files with 163 additions and 157 deletions
--- a/2
+++ b/2
@ -1,7 +1,7 @@
 ql wild-package-inferred-system
 ql fiveam
 ql cl-jingle
-git piccolo https://github.com/skyizwhite/piccolo.git
+git hsx https://github.com/skyizwhite/hsx.git
 git ningle-fbr https://github.com/skyizwhite/ningle-fbr.git
 ql cl-ppcre
 ql log4cl
--- a/qlfile.lock
+++ b/qlfile.lock
@ -14,14 +14,14 @@
 (:class qlot/source/ql:source-ql
  :initargs (:%version :latest)
  :version "ql-2023-10-21"))
-("piccolo" .
+("hsx" .
 (:class qlot/source/git:source-git
-  :initargs (:remote-url "https://github.com/skyizwhite/piccolo.git")
-  :version "git-543e14b7743fb4fbc2ca515ab2009cb54a39646d"))
+  :initargs (:remote-url "https://github.com/skyizwhite/hsx.git")
+  :version "git-6d894ed9a1daece01c3067e1886b911d81c35437"))
 ("ningle-fbr" .
 (:class qlot/source/git:source-git
  :initargs (:remote-url "https://github.com/skyizwhite/ningle-fbr.git")
-  :version "git-79496d59002546e800fcf0ac59e176ada74a3fb0"))
+  :version "git-31d9e48b13c478eb65e4d57d8890270e1cb8b36e"))
 ("cl-ppcre" .
 (:class qlot/source/ql:source-ql
  :initargs (:%version :latest)
--- a/src/components/document.lisp
+++ b/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)))
--- a/src/components/layout.lisp
+++ b/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))))
--- a/src/routes/about.lisp
+++ b/src/routes/about.lisp
@ -1,17 +1,18 @@
 (defpackage #:hp/routes/about
  (:use #:cl
-        #:piccolo)
+        #:hsx)
  (:import-from #:hp/view/*
-                #:render)
+                #:response)
  (:export #:handle-get))
 (in-package #:hp/routes/about)

-(define-element page ()
-  (div :class "h-full place-content-center"
-    (h1
-      :class "text-4xl text-center"
-      "Coming soon...")))
+(defcomp page ()
+  (hsx
+   (div :class "h-full place-content-center"
+     (h1
+       :class "text-4xl text-center"
+       "Coming soon..."))))

 (defun handle-get (params)
  (declare (ignore params))
-  (render (page)))
+  (response (page)))
--- a/src/routes/index.lisp
+++ b/src/routes/index.lisp
@ -2,63 +2,64 @@
  (:use #:cl)
  (:mix #:parenscript
        #:paren6
-        #:piccolo)
+        #:hsx)
  (:import-from #:hp/view/*
                #:defasset
-                #:render)
+                #:response)
  (:export #:handle-get))
 (in-package #:hp/routes/index)

 (defasset *me-img* :img "me.jpg")

-(define-element page ()
-  (div :class "h-full place-content-center"
-    (div :class "flex justify-center gap-x-20"
-      (div :class "flex justify-end"
-        (img
-          :src *me-img*
-          :alt "avatar of paku"
-          :class "w-full max-w-xs rounded-xl shadow-sm"))
-      (div :class "flex flex-col justify-center gap-10"
-        (h1 :class "text-4xl font-bold"
-          "paku")
-        (p :class "text-xl"
-          "Web developer")
-        (ul
-          (li
-            (span "GitHub:")
-            (a
-              :target "_blank"
-              :href "https://github.com/skyizwhite"
-              :class "text-indigo-500"
-              "@skyizwhite"))
-          (li
-            (span "Email: ")
-            (a
-              :x-data (ps (create6
-                           (email (chain (list6 "paku" "skyizwhite.dev")
-                                         (join "@")))))
-              :x-text (ps email)
-              :|:href| (ps (chain (list6 "mailto:" email) (join "")))
-              :|:class| "'text-indigo-500'"
-              "(Please enable Javascript to show.)"))
-          (li
-            (span "Fediverse(main): ")
-            (a
-              :rel "me"
-              :target "_blank" 
-              :href "https://post.skyizwhite.dev/@paku"
-              :class "text-indigo-500"
-              "@paku@post.skyizwhite.dev"))
-          (li
-            (span "Fediverse(sub): ")
-            (a
-              :rel "me"
-              :target "_blank"
-              :href "https://himagine.club/@skyizwhite"
-              :class "text-indigo-500"
-              "@skyizwhite@himagine.club")))))))
+(defcomp page ()
+  (hsx
+   (div :class "h-full place-content-center"
+     (div :class "flex justify-center gap-x-20"
+       (div :class "flex justify-end"
+         (img
+           :src *me-img*
+           :alt "avatar of paku"
+           :class "w-full max-w-xs rounded-xl shadow-sm"))
+       (div :class "flex flex-col justify-center gap-10"
+         (h1 :class "text-4xl font-bold"
+           "paku")
+         (p :class "text-xl"
+           "Web developer")
+         (ul
+           (li
+             (span "GitHub:")
+             (a
+               :target "_blank"
+               :href "https://github.com/skyizwhite"
+               :class "text-indigo-500"
+               "@skyizwhite"))
+           (li
+             (span "Email: ")
+             (a
+               :x-data (ps (create6
+                            (email (chain (list6 "paku" "skyizwhite.dev")
+                                          (join "@")))))
+               :x-text (ps email)
+               :|:href| (ps (chain (list6 "mailto:" email) (join "")))
+               :|:class| "'text-indigo-500'"
+               "(Please enable Javascript to show.)"))
+           (li
+             (span "Fediverse(main): ")
+             (a
+               :rel "me"
+               :target "_blank" 
+               :href "https://post.skyizwhite.dev/@paku"
+               :class "text-indigo-500"
+               "@paku@post.skyizwhite.dev"))
+           (li
+             (span "Fediverse(sub): ")
+             (a
+               :rel "me"
+               :target "_blank"
+               :href "https://himagine.club/@skyizwhite"
+               :class "text-indigo-500"
+               "@skyizwhite@himagine.club"))))))))

 (defun handle-get (params)
  (declare (ignore params))
-  (render (page)))
+  (response (page)))
--- a/src/routes/not-found.lisp
+++ b/src/routes/not-found.lisp
@ -1,7 +1,8 @@
 (defpackage #:hp/routes/not-found
  (:use #:cl
-        #:piccolo)
-  (:local-nicknames (#:view #:hp/view/*))
+        #:hsx)
+  (:import-from #:hp/view/responser
+                #:response)
  (:export #:handle-not-found))
 (in-package #:hp/routes/not-found)

@ -9,13 +10,14 @@
  '(:title "404 Not Found"
    :description "お探しのページは見つかりませんでした。"))

-(define-element page ()
-  (div :class "h-full place-content-center"
-    (h1
-      :class "text-rose-400 text-4xl text-center"
-      "404 Not Found")))
+(defcomp page ()
+  (hsx
+   (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)
-               :status :not-found
-               :metadata *metadata*))
+  (response (page)
+            :status :not-found
+            :metadata *metadata*))
--- a/src/routes/work.lisp
+++ b/src/routes/work.lisp
@ -1,17 +1,18 @@
 (defpackage #:hp/routes/work
  (:use #:cl
-        #:piccolo)
+        #:hsx)
  (:import-from #:hp/view/*
-                #:render)
+                #:response)
  (:export #:handle-get))
 (in-package #:hp/routes/work)

-(define-element page ()
-  (div :class "h-full place-content-center"
-    (h1
-      :class "text-4xl text-center"
-      "Coming soon...")))
+(defcomp page ()
+  (hsx
+   (div :class "h-full place-content-center"
+     (h1
+       :class "text-4xl text-center"
+       "Coming soon..."))))

 (defun handle-get (params)
  (declare (ignore params))
-  (render (page)))
+  (response (page)))
--- a/src/view/renderer.lisp
+++ b/src/view/renderer.lisp
@ -1,25 +0,0 @@
-(defpackage #:hp/view/renderer
-  (:use #:cl)
-  (:local-nicknames (#:jg #:jingle))
-  (:local-nicknames (#:pi #:piccolo))
-  (:local-nicknames (#:cfg #:hp/config/env))
-  (:local-nicknames (#:cmp #:hp/components/*))
-  (:export #:render
-           #:partial-render))
-(in-package #:hp/view/renderer)
-
-(defun renderer ()
-  (if (cfg:dev-mode-p)
-      #'pi:element-string
-      #'pi:elem-str))
-
-(defun render (page &key status metadata)
-  (jg:with-html-response
-    (if status (jg:set-response-status status))
-    (funcall (renderer) (cmp:document :metadata metadata
-                          (cmp:layout page)))))
-
-(defun partial-render (component &key status)
-  (jg:with-html-response
-    (if status (jg:set-response-status status))
-    (funcall (renderer) component)))
--- a/src/view/responser.lisp
+++ b/src/view/responser.lisp
@ -0,0 +1,22 @@
+(defpackage #:hp/view/responser
+  (:use #:cl)
+  (:import-from #:hsx
+                #:render)
+  (:local-nicknames (#:jg #:jingle))
+  (:local-nicknames (#:cfg #:hp/config/env))
+  (:local-nicknames (#:cmp #:hp/components/*))
+  (:export #:response
+           #:partial-response))
+(in-package #:hp/view/responser)
+
+(defun response (page &key status metadata)
+  (jg:with-html-response
+    (if status (jg:set-response-status status))
+    (render (cmp:document :metadata metadata
+              (cmp:layout page))
+            :minify t)))
+
+(defun partial-response (component &key status)
+  (jg:with-html-response
+    (if status (jg:set-response-status status))
+    (render component :minify t)))