Add on-demand styling feature
This commit is contained in:
parent
1d7f8b6ed5
commit
56ffa88dbf
5 changed files with 47 additions and 6 deletions
src
|
@ -11,8 +11,10 @@
|
||||||
|
|
||||||
(pi:define-element page ()
|
(pi:define-element page ()
|
||||||
(pi:h
|
(pi:h
|
||||||
(section
|
(section :data-cmp "pages/about"
|
||||||
(h1 "About"))))
|
(h1 "About")
|
||||||
|
(a :href "/" :hx-boost "true"
|
||||||
|
"top"))))
|
||||||
|
|
||||||
(defun on-get (params)
|
(defun on-get (params)
|
||||||
(declare (ignore params))
|
(declare (ignore params))
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
(pi:define-element page ()
|
(pi:define-element page ()
|
||||||
(pi:h
|
(pi:h
|
||||||
(section
|
(section :data-cmp "pages/index"
|
||||||
(h1 "Hello, World!")
|
(h1 "Hello, World!")
|
||||||
(a :href "/about" :hx-boost "true"
|
(a :href "/about" :hx-boost "true"
|
||||||
"About"))))
|
"About"))))
|
||||||
|
|
8
src/styles/pages/about.css
Normal file
8
src/styles/pages/about.css
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
@scope ([data-cmp='pages/about']) {
|
||||||
|
:scope {
|
||||||
|
height: 100svh;
|
||||||
|
background-color: thistle;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
}
|
||||||
|
}
|
8
src/styles/pages/index.css
Normal file
8
src/styles/pages/index.css
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
@scope ([data-cmp='pages/index']) {
|
||||||
|
:scope {
|
||||||
|
height: 100svh;
|
||||||
|
background-color: aliceblue;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,10 +2,28 @@
|
||||||
(:use #:cl)
|
(:use #:cl)
|
||||||
(:local-nicknames (#:jg #:jingle))
|
(:local-nicknames (#:jg #:jingle))
|
||||||
(:local-nicknames (#:pi #:piccolo))
|
(:local-nicknames (#:pi #:piccolo))
|
||||||
|
(:local-nicknames (#:re #:cl-ppcre))
|
||||||
(:export #:render))
|
(:export #:render))
|
||||||
(in-package #:hp/view)
|
(in-package #:hp/view)
|
||||||
|
|
||||||
(pi:define-element document (title description)
|
(defun detect-data-cmps (page-str)
|
||||||
|
(remove-duplicates (cl-ppcre:all-matches-as-strings "(?<=data-cmp=\")[^\"]*(?=\")"
|
||||||
|
page-str)
|
||||||
|
:test #'string=))
|
||||||
|
|
||||||
|
(defun data-cmps->style-hrefs (data-cmps)
|
||||||
|
(mapcar (lambda (cmp-name)
|
||||||
|
(concatenate 'string "/styles/" cmp-name ".css"))
|
||||||
|
data-cmps))
|
||||||
|
|
||||||
|
(pi:define-element on-demand-stylesheets (hrefs)
|
||||||
|
(pi:h
|
||||||
|
(<> '()
|
||||||
|
(mapcar (lambda (href)
|
||||||
|
(link :rel "stylesheet" :type "text/css" :href href))
|
||||||
|
hrefs))))
|
||||||
|
|
||||||
|
(pi:define-element document (title description style-hrefs)
|
||||||
(pi:h
|
(pi:h
|
||||||
(html :lang "ja"
|
(html :lang "ja"
|
||||||
(head
|
(head
|
||||||
|
@ -23,11 +41,16 @@
|
||||||
(title (format nil "~@[~a - ~]skyizwhite.dev" title))
|
(title (format nil "~@[~a - ~]skyizwhite.dev" title))
|
||||||
(meta
|
(meta
|
||||||
:name "description"
|
:name "description"
|
||||||
:content (or description "pakuの個人サイト")))
|
:content (or description "pakuの個人サイト"))
|
||||||
|
(on-demand-stylesheets :hrefs style-hrefs))
|
||||||
(body :hx-ext "head-support"
|
(body :hx-ext "head-support"
|
||||||
(main pi:children)))))
|
(main pi:children)))))
|
||||||
|
|
||||||
(defun render (page &key status metadata)
|
(defun render (page &key status metadata)
|
||||||
(jg:with-html-response
|
(jg:with-html-response
|
||||||
(and status (jg:set-response-status status))
|
(and status (jg:set-response-status status))
|
||||||
(pi:elem-str (document metadata page))))
|
(let* ((page-str (pi:elem-str page))
|
||||||
|
(style-hrefs (data-cmps->style-hrefs (detect-data-cmps page-str))))
|
||||||
|
(pi:elem-str
|
||||||
|
(document `(,@metadata :style-hrefs ,style-hrefs)
|
||||||
|
page)))))
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue