Add on-demand styling feature

This commit is contained in:
Akira Tempaku 2024-04-14 00:18:48 +09:00
parent 1d7f8b6ed5
commit 56ffa88dbf
5 changed files with 47 additions and 6 deletions

View file

@ -11,8 +11,10 @@
(pi:define-element page ()
(pi:h
(section
(h1 "About"))))
(section :data-cmp "pages/about"
(h1 "About")
(a :href "/" :hx-boost "true"
"top"))))
(defun on-get (params)
(declare (ignore params))

View file

@ -7,7 +7,7 @@
(pi:define-element page ()
(pi:h
(section
(section :data-cmp "pages/index"
(h1 "Hello, World!")
(a :href "/about" :hx-boost "true"
"About"))))

View file

@ -0,0 +1,8 @@
@scope ([data-cmp='pages/about']) {
:scope {
height: 100svh;
background-color: thistle;
display: grid;
place-content: center;
}
}

View file

@ -0,0 +1,8 @@
@scope ([data-cmp='pages/index']) {
:scope {
height: 100svh;
background-color: aliceblue;
display: grid;
place-content: center;
}
}

View file

@ -2,10 +2,28 @@
(:use #:cl)
(:local-nicknames (#:jg #:jingle))
(:local-nicknames (#:pi #:piccolo))
(:local-nicknames (#:re #:cl-ppcre))
(:export #:render))
(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
(html :lang "ja"
(head
@ -23,11 +41,16 @@
(title (format nil "~@[~a - ~]skyizwhite.dev" title))
(meta
:name "description"
:content (or description "pakuの個人サイト")))
:content (or description "pakuの個人サイト"))
(on-demand-stylesheets :hrefs style-hrefs))
(body :hx-ext "head-support"
(main pi:children)))))
(defun render (page &key status metadata)
(jg:with-html-response
(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)))))