paku/website
1
0
Fork 0
Code Issues4 Pull requests Projects Releases Packages Wiki Activity Actions

HTMX + Alpine.js + TailwindCSS

Browse source
This commit is contained in:
Akira Tempaku 2024-04-25 21:08:56 +09:00
commit d614f039d3
37 changed files with 114 additions and 233 deletions

43
src/components/document.lisp Normal file
View file

@ -0,0 +1,43 @@
(defpackage #:hp/components/document
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:import-from #:hp/view/asset
#:defasset)
(:export #:document))
(in-package #:hp/components/document)
(defasset *htmx* :vendor "htmx@1.9.12.js")
(defasset *htmx-exts* :htmx-ext
("alpine-morph@1.9.12.js"
"head-support@1.9.12.js"))
(defasset *alpine* :vendor "alpine@3.13.8.js")
(defasset *alpine-exts* :alpine-ext
("morph@3.13.8.js"
"persist@3.13.8.js"))
(defasset *alpine-store* :root "store.js")
(defasset *global-css* :root "global.css")
(defasset *dist-css* :root "dist.css")
(pi:define-element document (title description)
(pi:h
(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の個人サイト")))
pi:children)))

30
src/components/document/main.lisp
View file

@ -1,30 +0,0 @@
(defpackage #:hp/components/document/main
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:import-from #:hp/components/document/styles
#:styles
#:on-demand-styles)
(:import-from #:hp/components/document/scripts
#:scripts)
(:import-from #:hp/components/document/seo
#:seo)
(:export #:document
#:partial-document))
(in-package #:hp/components/document/main)
(pi:define-element document (metadata)
(pi:h
(html :lang "ja"
(head
(meta :charset "UTF-8")
(styles pi:children)
(scripts)
(seo metadata))
pi:children)))
(pi:define-element partial-document ()
(pi:h
(<>
(head :hx-head "append"
(on-demand-styles pi:children))
pi:children)))

36
src/components/document/scripts.lisp
View file

@ -1,36 +0,0 @@
(defpackage #:hp/components/document/scripts
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:import-from #:hp/view/asset
#:defasset)
(:export #:scripts))
(in-package #:hp/components/document/scripts)
(defasset *htmx* :vendor "htmx@1.9.12.js")
(defasset *htmx-exts* :htmx-ext
("alpine-morph@1.9.12.js"
"head-support@1.9.12.js"))
(defasset *alpine* :vendor "alpine@3.13.8.js")
(defasset *alpine-exts* :alpine-ext
("async-alpine@1.2.2.js"
"persist@3.13.8.js"
"morph@3.13.8.js"))
(defasset *global* :js "global.js")
(pi:define-element extentions (paths defer)
(pi:h
(<>
(mapcar (lambda (path)
(script :src path :defer defer))
paths))))
(pi:define-element scripts ()
(pi:h
(<>
(script :src *htmx*)
(extentions :paths *htmx-exts*)
(extentions :paths *alpine-exts* :defer t)
(script :src *global* :defer t)
(script :src *alpine* :defer t))))

13
src/components/document/seo.lisp
View file

@ -1,13 +0,0 @@
(defpackage #:hp/components/document/seo
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:export #:seo))
(in-package #:hp/components/document/seo)
(pi:define-element seo (title description)
(pi:h
(<>
(title (format nil "~@[~a - ~]skyizwhite.dev" title))
(meta
:name "description"
:content (or description "pakuの個人サイト")))))

34
src/components/document/styles.lisp
View file

@ -1,34 +0,0 @@
(defpackage #:hp/components/document/styles
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:import-from #:hp/view/asset
#:defasset
#:get-css-paths)
(:export #:on-demand-styles
#:styles))
(in-package #:hp/components/document/styles)
(defasset *ress* :vendor "ress@5.0.2.css")
(defasset *global* :css "global.css")
(pi:define-element on-demand-styles ()
(let* ((html-str (let ((pi:*escape-html* nil))
(pi:elem-str pi:children)))
(css-paths (get-css-paths html-str)))
(pi:h
(<>
(mapcar (lambda (path)
(link :rel "stylesheet" :type "text/css" :href path))
css-paths)))))
(pi:define-element styles ()
(pi:h
(<>
(link :rel "stylesheet" :type "text/css" :href *ress*)
(link :rel "stylesheet" :type "text/css" :href *global*)
(on-demand-styles pi:children)
(link :rel "preconnect" :href "https://fonts.googleapis.com")
(link :rel "preconnect" :href "https://fonts.gstatic.com" :crossorigin t)
(link
:rel "stylesheet"
:href "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"))))

17
src/components/layout.lisp Normal file
View file

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

9
src/components/layout/footer.lisp
View file

@ -1,9 +0,0 @@
(defpackage #:hp/components/layout/footer
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:export #:layout-footer))
(in-package #:hp/components/layout/footer)
(pi:define-element layout-footer ()
(pi:h
(footer :data-css "components/layout/footer.css")))

10
src/components/layout/header.lisp
View file

@ -1,10 +0,0 @@
(defpackage #:hp/components/layout/header
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:export #:layout-header))
(in-package #:hp/components/layout/header)
(pi:define-element layout-header ()
(pi:h
(header :data-css "components/layout/header.css"
(p "skyizwhite.dev"))))

21
src/components/layout/main.lisp
View file

@ -1,21 +0,0 @@
(defpackage #:hp/components/layout/main
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:local-nicknames (#:cfg #:hp/config/asset))
(:import-from #:hp/components/layout/header
#:layout-header)
(:import-from #:hp/components/layout/footer
#:layout-footer)
(:export #:layout))
(in-package #:hp/components/layout/main)
(pi:define-element layout ()
(pi:h
(body
:hx-ext cfg:*hx-ext*
:data-css "components/layout/main.css"
(layout-header)
(main :class "main"
pi:children)
(layout-footer)
)))