Improve document component

This commit is contained in:
Akira Tempaku 2024-04-22 06:37:20 +09:00
parent 0e0ecf294b
commit 5d1cbd4b9f
12 changed files with 138 additions and 114 deletions

View file

@ -1,4 +1,4 @@
@scope ([data-style='pages/about.css']) {
@scope ([data-css='pages/about.css']) {
:scope {
height: 100svh;
display: grid;

View file

@ -1,4 +1,4 @@
@scope ([data-style='pages/index.css']) {
@scope ([data-css='pages/index.css']) {
:scope {
height: 100svh;
display: grid;

View file

@ -11,9 +11,9 @@
(pi:define-element page ()
(pi:h
(section (view:asset-props :css "pages/about.css"
:js "pages/about.js"
:x-data "aboutPage")
(section (view:cmp-props :css "pages/about.css"
:js "pages/about.js"
:x-data "aboutPage")
(h1 "About")
(a :href "/" :hx-boost "true"
"top")

View file

@ -7,9 +7,9 @@
(pi:define-element page ()
(pi:h
(section (view:asset-props :css "pages/index.css"
:js "pages/index.js"
:x-data "indexPage")
(section (view:cmp-props :css "pages/index.css"
:js "pages/index.js"
:x-data "indexPage")
(h1
"Hello, World!")
(a :href "/about" :hx-boost "true"

View file

@ -1,16 +1,10 @@
(defpackage #:hp/view/asset
(:use #:cl)
(:local-nicknames (#:re #:cl-ppcre))
(:export #:*ress*
#:*global-css*
#:*global-js*
#:*htmx*
#:*htmx-extentions*
#:*alpine*
#:*alpine-extentions*
#:asset-root
(:export #:asset-root
#:define-assets
#:get-css-paths
#:asset-props))
#:cmp-props))
(in-package #:hp/view/asset)
(defparameter *asset-roots*
@ -35,27 +29,6 @@
(,(if (listp files) 'mapcar 'funcall)
(asset-path-under ,kind) ',files)))
(define-asset *ress* :vendor
"ress@5.0.2.css")
(define-asset *global-css* :css
"global.css")
(define-asset *global-js* :js
"global.js")
(define-asset *htmx* :vendor
"htmx@1.9.12.js")
(define-asset *htmx-extentions* :htmx-ext
("alpine-morph@1.9.12.js"
"head-support@1.9.12.js"))
(define-asset *alpine* :vendor
"alpine@3.13.8.js")
(define-asset *alpine-extentions* :alpine-ext
("async-alpine@1.2.2.js"
"persist@3.13.8.js"
"morph@3.13.8.js"))
(defun detect-data-props (html-str data-prop-name)
(let* ((regex (format nil "(?<=~a=\")[^\"]*(?=\")" data-prop-name))
(data-props (re:all-matches-as-strings regex html-str)))
@ -63,10 +36,10 @@
(defun get-css-paths (html-str)
(mapcar (asset-path-under :css)
(detect-data-props html-str "data-style")))
(detect-data-props html-str "data-css")))
(defun asset-props (&key css js x-data)
(append (and css `(:data-style ,css))
(defun cmp-props (&key css js x-data)
(append (and css `(:data-css ,css))
(and js x-data
`(:ax-load t
:ax-load-src ,(asset-path :js js)

View file

@ -1,70 +0,0 @@
(defpackage #:hp/view/components/document
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:local-nicknames (#:asset #:hp/view/asset))
(:export #:document
#:partial-document))
(in-package #:hp/view/components/document)
(pi:define-element on-demand-stylesheets ()
(let* ((pi:*escape-html* nil)
(html-str (pi:elem-str pi:children))
(css-paths (asset:get-css-paths html-str)))
(pi:h
(<>
(mapcar (lambda (path)
(link :rel "stylesheet" :type "text/css" :href path))
css-paths)))))
(pi:define-element stylesheets ()
(pi:h
(<>
(link :rel "stylesheet" :type "text/css" :href asset:*ress*)
(link :rel "stylesheet" :type "text/css" :href asset:*global-css*)
(on-demand-stylesheets 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"))))
(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 asset:*htmx*)
(extentions :paths asset:*htmx-extentions*)
(extentions :paths asset:*alpine-extentions* :defer t)
(script :src asset:*global-js* :defer t)
(script :src asset:*alpine* :defer t))))
(pi:define-element seo (title description)
(pi:h
(<>
(title (format nil "~@[~a - ~]skyizwhite.dev" title))
(meta
:name "description"
:content (or description "pakuの個人サイト")))))
(pi:define-element document (metadata)
(pi:h
(html :lang "ja"
(head
(meta :charset "UTF-8")
(stylesheets pi:children)
(scripts)
(seo metadata))
pi:children)))
(pi:define-element partial-document ()
(pi:h
(<>
(head :hx-head "append"
(on-demand-stylesheets pi:children))
pi:children)))

View file

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

View file

@ -0,0 +1,41 @@
(defpackage #:hp/view/components/document/scripts
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:import-from #:hp/view/asset
#:define-asset)
(:export #:scripts))
(in-package #:hp/view/components/document/scripts)
(define-asset *global-js*
:js "global.js")
(define-asset *htmx*
:vendor "htmx@1.9.12.js")
(define-asset *htmx-extentions*
:htmx-ext ("alpine-morph@1.9.12.js"
"head-support@1.9.12.js"))
(define-asset *alpine*
:vendor "alpine@3.13.8.js")
(define-asset *alpine-extentions*
:alpine-ext ("async-alpine@1.2.2.js"
"persist@3.13.8.js"
"morph@3.13.8.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-extentions*)
(extentions :paths *alpine-extentions* :defer t)
(script :src *global-js* :defer t)
(script :src *alpine* :defer t))))

View file

@ -0,0 +1,13 @@
(defpackage #:hp/view/components/document/seo
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:export #:seo))
(in-package #:hp/view/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の個人サイト")))))

View file

@ -0,0 +1,37 @@
(defpackage #:hp/view/components/document/stylesheets
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:import-from #:hp/view/asset
#:define-asset
#:get-css-paths)
(:export #:on-demand-stylesheets
#:stylesheets))
(in-package #:hp/view/components/document/stylesheets)
(define-asset *ress*
:vendor "ress@5.0.2.css")
(define-asset *global-css*
:css "global.css")
(pi:define-element on-demand-stylesheets ()
(let* ((pi:*escape-html* nil)
(html-str (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 stylesheets ()
(pi:h
(<>
(link :rel "stylesheet" :type "text/css" :href *ress*)
(link :rel "stylesheet" :type "text/css" :href *global-css*)
(on-demand-stylesheets 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"))))

View file

@ -1,8 +1,8 @@
(defpackage #:hp/view/components/layout
(defpackage #:hp/view/components/layout/main
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:export #:layout))
(in-package #:hp/view/components/layout)
(in-package #:hp/view/components/layout/main)
(pi:define-element layout ()
(pi:h

View file

@ -2,7 +2,7 @@
(:use #:cl)
(:local-nicknames (#:jg #:jingle))
(:local-nicknames (#:pi #:piccolo))
(:local-nicknames (#:cmp #:hp/view/components/*))
(:local-nicknames (#:cmp #:hp/view/components/**/*))
(:export #:render
#:partial-render))
(in-package #:hp/view/renderer)