From 19e467fe97e6cb6fd8cd7dbfefb7f8b48f33ff51 Mon Sep 17 00:00:00 2001 From: paku <paku@skyizwhite.dev> Date: Sat, 1 Jun 2024 22:21:15 +0900 Subject: [PATCH] Migrate from Piccolo to HSX --- qlfile | 2 +- qlfile.lock | 8 +-- src/components/document.lisp | 43 +++++++-------- src/components/layout.lisp | 63 +++++++++++----------- src/routes/about.lisp | 17 +++--- src/routes/index.lisp | 101 ++++++++++++++++++----------------- src/routes/not-found.lisp | 22 ++++---- src/routes/work.lisp | 17 +++--- src/view/renderer.lisp | 25 --------- src/view/responser.lisp | 22 ++++++++ 10 files changed, 163 insertions(+), 157 deletions(-) delete mode 100644 src/view/renderer.lisp create mode 100644 src/view/responser.lisp diff --git a/qlfile b/qlfile index 428486e..d0caa0a 100644 --- a/qlfile +++ b/qlfile @@ -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 diff --git a/qlfile.lock b/qlfile.lock index aa1b3f2..df82780 100644 --- 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) diff --git a/src/components/document.lisp b/src/components/document.lisp index 8f7447b..64368fd 100644 --- 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))) diff --git a/src/components/layout.lisp b/src/components/layout.lisp index 4b00d90..20e4eb3 100644 --- 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)))) diff --git a/src/routes/about.lisp b/src/routes/about.lisp index d5c3db6..7b17503 100644 --- 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))) diff --git a/src/routes/index.lisp b/src/routes/index.lisp index 15cce15..920185f 100644 --- 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))) diff --git a/src/routes/not-found.lisp b/src/routes/not-found.lisp index 6d47d45..09604c5 100644 --- 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*)) diff --git a/src/routes/work.lisp b/src/routes/work.lisp index 445511e..26ac220 100644 --- 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))) diff --git a/src/view/renderer.lisp b/src/view/renderer.lisp deleted file mode 100644 index 342f03e..0000000 --- a/src/view/renderer.lisp +++ /dev/null @@ -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))) diff --git a/src/view/responser.lisp b/src/view/responser.lisp new file mode 100644 index 0000000..cecbdb9 --- /dev/null +++ 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)))