Improve document component
This commit is contained in:
parent
0e0ecf294b
commit
5d1cbd4b9f
12 changed files with 138 additions and 114 deletions
|
@ -1,4 +1,4 @@
|
|||
@scope ([data-style='pages/about.css']) {
|
||||
@scope ([data-css='pages/about.css']) {
|
||||
:scope {
|
||||
height: 100svh;
|
||||
display: grid;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@scope ([data-style='pages/index.css']) {
|
||||
@scope ([data-css='pages/index.css']) {
|
||||
:scope {
|
||||
height: 100svh;
|
||||
display: grid;
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)))
|
30
src/view/components/document/main.lisp
Normal file
30
src/view/components/document/main.lisp
Normal 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)))
|
41
src/view/components/document/scripts.lisp
Normal file
41
src/view/components/document/scripts.lisp
Normal 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))))
|
13
src/view/components/document/seo.lisp
Normal file
13
src/view/components/document/seo.lisp
Normal 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の個人サイト")))))
|
37
src/view/components/document/stylesheets.lisp
Normal file
37
src/view/components/document/stylesheets.lisp
Normal 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"))))
|
|
@ -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
|
|
@ -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)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue