diff --git a/assets/css/pages/about.css b/assets/css/pages/about.css index bcf4ecf..0793dc5 100644 --- a/assets/css/pages/about.css +++ b/assets/css/pages/about.css @@ -1,4 +1,4 @@ -@scope ([data-style='pages/about.css']) { +@scope ([data-css='pages/about.css']) { :scope { height: 100svh; display: grid; diff --git a/assets/css/pages/index.css b/assets/css/pages/index.css index 73420fc..42a2d5d 100644 --- a/assets/css/pages/index.css +++ b/assets/css/pages/index.css @@ -1,4 +1,4 @@ -@scope ([data-style='pages/index.css']) { +@scope ([data-css='pages/index.css']) { :scope { height: 100svh; display: grid; diff --git a/src/routes/about.lisp b/src/routes/about.lisp index 1dda441..c46df27 100644 --- a/src/routes/about.lisp +++ b/src/routes/about.lisp @@ -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") diff --git a/src/routes/index.lisp b/src/routes/index.lisp index 23cb65c..ef9bacc 100644 --- a/src/routes/index.lisp +++ b/src/routes/index.lisp @@ -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" diff --git a/src/view/asset.lisp b/src/view/asset.lisp index b9b6fdc..4e3d98e 100644 --- a/src/view/asset.lisp +++ b/src/view/asset.lisp @@ -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) diff --git a/src/view/components/document.lisp b/src/view/components/document.lisp deleted file mode 100644 index c8a1781..0000000 --- a/src/view/components/document.lisp +++ /dev/null @@ -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))) diff --git a/src/view/components/document/main.lisp b/src/view/components/document/main.lisp new file mode 100644 index 0000000..32012af --- /dev/null +++ b/src/view/components/document/main.lisp @@ -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))) diff --git a/src/view/components/document/scripts.lisp b/src/view/components/document/scripts.lisp new file mode 100644 index 0000000..20024f2 --- /dev/null +++ b/src/view/components/document/scripts.lisp @@ -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)))) diff --git a/src/view/components/document/seo.lisp b/src/view/components/document/seo.lisp new file mode 100644 index 0000000..bd3564e --- /dev/null +++ b/src/view/components/document/seo.lisp @@ -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の個人サイト"))))) diff --git a/src/view/components/document/stylesheets.lisp b/src/view/components/document/stylesheets.lisp new file mode 100644 index 0000000..4238702 --- /dev/null +++ b/src/view/components/document/stylesheets.lisp @@ -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")))) diff --git a/src/view/components/layout.lisp b/src/view/components/layout/main.lisp similarity index 75% rename from src/view/components/layout.lisp rename to src/view/components/layout/main.lisp index 86f1047..f99db4a 100644 --- a/src/view/components/layout.lisp +++ b/src/view/components/layout/main.lisp @@ -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 diff --git a/src/view/renderer.lisp b/src/view/renderer.lisp index a8c6016..7c441f5 100644 --- a/src/view/renderer.lisp +++ b/src/view/renderer.lisp @@ -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)