Improve document component

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;

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;

src/routes/about.lisp

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

src/routes/index.lisp

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

src/view/asset.lisp

@@ -1,16 +1,10 @@
 (defpackage #:hp/view/asset
   (:use #:cl)
   (:local-nicknames (#:re #:cl-ppcre))
-  (:export #:*ress*
+  (:export #:asset-root
-           #:*global-css*
+           #:define-assets
-           #:*global-js*
-           #:*htmx*
-           #:*htmx-extentions*
-           #:*alpine*
-           #:*alpine-extentions*
-           #:asset-root
            #: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)
+(defun cmp-props (&key css js x-data)
-  (append (and css `(:data-style ,css))
+  (append (and css `(:data-css ,css))
           (and js x-data
                `(:ax-load t
                  :ax-load-src ,(asset-path :js js)

src/view/components/document.lisp

@@ -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)))

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)))

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))))

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の個人サイト")))))

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"))))

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

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)