paku/website
1
0
Fork 0
Code Issues4 Pull requests Projects Releases Packages Wiki Activity Actions

HTMX + Alpine.js + TailwindCSS

Browse source
This commit is contained in:
Akira Tempaku 2024-04-25 21:08:56 +09:00
commit d614f039d3
37 changed files with 114 additions and 233 deletions

7
src/app.lisp
View file

@ -14,9 +14,13 @@
:port cfg:*port*))
(defun start ()
(if (cfg:dev-mode-p)
(uiop:run-program "make dev"))
(jg:start *app*))
(defun stop ()
(if (cfg:dev-mode-p)
(uiop:run-program "make stop"))
(jg:stop *app*))
(defun setup ()
@ -24,9 +28,8 @@
(jg:clear-routing-rules *app*)
(fbr:assign-routes *app* :system "hp" :directory "src/routes")
(jg:install-middleware *app* mw:*path-normalizer*)
(jg:install-middleware *app* mw:*assets-server*)
(jg:install-middleware *app* mw:*public-server*)
(jg:install-middleware *app* mw:*access-logger*)
(jg:install-middleware *app* mw:*access-blocker*)
(jg:install-middleware *app* mw:*recoverer*))
(defun update ()

43
src/components/document.lisp Normal file
View file

@ -0,0 +1,43 @@
(defpackage #:hp/components/document
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:import-from #:hp/view/asset
#:defasset)
(:export #:document))
(in-package #:hp/components/document)
(defasset *htmx* :vendor "htmx@1.9.12.js")
(defasset *htmx-exts* :htmx-ext
("alpine-morph@1.9.12.js"
"head-support@1.9.12.js"))
(defasset *alpine* :vendor "alpine@3.13.8.js")
(defasset *alpine-exts* :alpine-ext
("morph@3.13.8.js"
"persist@3.13.8.js"))
(defasset *alpine-store* :root "store.js")
(defasset *global-css* :root "global.css")
(defasset *dist-css* :root "dist.css")
(pi:define-element document (title description)
(pi:h
(html :lang "ja"
(head
(meta :charset "UTF-8")
(script :src *htmx*)
(mapcar (lambda (path) (script :src path))
*htmx-exts*)
(mapcar (lambda (path) (script :src path :defer t))
*alpine-exts*)
(script :src *alpine-store* :defer t)
(script :src *alpine* :defer t)
(style
"@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');")
(link :rel "stylesheet" :type "text/css" :href *global-css*)
(link :rel "stylesheet" :type "text/css" :href *dist-css*)
(title (format nil "~@[~a - ~]skyizwhite.dev" title))
(meta
:name "description"
:content (or description "pakuの個人サイト")))
pi:children)))

30
src/components/document/main.lisp
View file

@ -1,30 +0,0 @@
(defpackage #:hp/components/document/main
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:import-from #:hp/components/document/styles
#:styles
#:on-demand-styles)
(:import-from #:hp/components/document/scripts
#:scripts)
(:import-from #:hp/components/document/seo
#:seo)
(:export #:document
#:partial-document))
(in-package #:hp/components/document/main)
(pi:define-element document (metadata)
(pi:h
(html :lang "ja"
(head
(meta :charset "UTF-8")
(styles pi:children)
(scripts)
(seo metadata))
pi:children)))
(pi:define-element partial-document ()
(pi:h
(<>
(head :hx-head "append"
(on-demand-styles pi:children))
pi:children)))

36
src/components/document/scripts.lisp
View file

@ -1,36 +0,0 @@
(defpackage #:hp/components/document/scripts
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:import-from #:hp/view/asset
#:defasset)
(:export #:scripts))
(in-package #:hp/components/document/scripts)
(defasset *htmx* :vendor "htmx@1.9.12.js")
(defasset *htmx-exts* :htmx-ext
("alpine-morph@1.9.12.js"
"head-support@1.9.12.js"))
(defasset *alpine* :vendor "alpine@3.13.8.js")
(defasset *alpine-exts* :alpine-ext
("async-alpine@1.2.2.js"
"persist@3.13.8.js"
"morph@3.13.8.js"))
(defasset *global* :js "global.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-exts*)
(extentions :paths *alpine-exts* :defer t)
(script :src *global* :defer t)
(script :src *alpine* :defer t))))

13
src/components/document/seo.lisp
View file

@ -1,13 +0,0 @@
(defpackage #:hp/components/document/seo
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:export #:seo))
(in-package #:hp/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の個人サイト")))))

34
src/components/document/styles.lisp
View file

@ -1,34 +0,0 @@
(defpackage #:hp/components/document/styles
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:import-from #:hp/view/asset
#:defasset
#:get-css-paths)
(:export #:on-demand-styles
#:styles))
(in-package #:hp/components/document/styles)
(defasset *ress* :vendor "ress@5.0.2.css")
(defasset *global* :css "global.css")
(pi:define-element on-demand-styles ()
(let* ((html-str (let ((pi:*escape-html* nil))
(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 styles ()
(pi:h
(<>
(link :rel "stylesheet" :type "text/css" :href *ress*)
(link :rel "stylesheet" :type "text/css" :href *global*)
(on-demand-styles 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"))))

17
src/components/layout.lisp Normal file
View file

@ -0,0 +1,17 @@
(defpackage #:hp/components/layout
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:local-nicknames (#:cfg #:hp/config/*))
(:export #:layout))
(in-package #:hp/components/layout)
(pi:define-element layout ()
(pi:h
(body
:hx-ext cfg:*hx-ext*
:class "h-[100svh] flex flex-col"
(header)
(main :class "flex-1"
pi:children)
; footer
(footer))))

9
src/components/layout/footer.lisp
View file

@ -1,9 +0,0 @@
(defpackage #:hp/components/layout/footer
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:export #:layout-footer))
(in-package #:hp/components/layout/footer)
(pi:define-element layout-footer ()
(pi:h
(footer :data-css "components/layout/footer.css")))

10
src/components/layout/header.lisp
View file

@ -1,10 +0,0 @@
(defpackage #:hp/components/layout/header
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:export #:layout-header))
(in-package #:hp/components/layout/header)
(pi:define-element layout-header ()
(pi:h
(header :data-css "components/layout/header.css"
(p "skyizwhite.dev"))))

21
src/components/layout/main.lisp
View file

@ -1,21 +0,0 @@
(defpackage #:hp/components/layout/main
(:use #:cl)
(:local-nicknames (#:pi #:piccolo))
(:local-nicknames (#:cfg #:hp/config/asset))
(:import-from #:hp/components/layout/header
#:layout-header)
(:import-from #:hp/components/layout/footer
#:layout-footer)
(:export #:layout))
(in-package #:hp/components/layout/main)
(pi:define-element layout ()
(pi:h
(body
:hx-ext cfg:*hx-ext*
:data-css "components/layout/main.css"
(layout-header)
(main :class "main"
pi:children)
(layout-footer)
)))

5
src/config/asset.lisp
View file

@ -5,9 +5,8 @@
(in-package #:hp/config/asset)
(defparameter *asset-roots*
'(:img "/img/"
:css "/css/"
:js "/js/"
'(:root "/"
:img "/img/"
:vendor "/vendor/"
:htmx-ext "/vendor/htmx-ext/"
:alpine-ext "/vendor/alpine-ext/"))

15
src/middlewares/access-blocker.lisp
View file

@ -1,15 +0,0 @@
(defpackage #:hp/middlewares/access-blocker
(:use #:cl)
(:local-nicknames (#:re #:cl-ppcre))
(:export #:*access-blocker*))
(in-package #:hp/middlewares/access-blocker)
(defparameter *access-blocker*
(lambda (app)
(lambda (env)
(let ((user-agent (gethash "user-agent" (getf env :headers))))
(if (re:scan "(Firefox|SamsungBrowser)" user-agent)
`(:400
(:content-type "text/plain")
("This site is not compatible with your browser. Please use Chrome, Edge, Safari, or another compatible browser."))
(funcall app env))))))

12
src/middlewares/assets-server.lisp → src/middlewares/public-server.lisp
View file

@ -1,18 +1,18 @@
(defpackage #:hp/middlewares/assets-server
(defpackage #:hp/middlewares/public-server
(:use #:cl)
(:import-from #:lack.middleware.static
#:*lack-middleware-static*)
(:export #:*assets-server*))
(in-package #:hp/middlewares/assets-server)
(:export #:*public-server*))
(in-package #:hp/middlewares/public-server)
(defun exist-asset-file-p (path)
(let ((pathname (probe-file (concatenate 'string "assets" path))))
(let ((pathname (probe-file (concatenate 'string "public" path))))
(and pathname (pathname-name pathname))))
(defparameter *assets-server*
(defparameter *public-server*
(lambda (app)
(funcall *lack-middleware-static*
app
:path (lambda (path)
(and (exist-asset-file-p path) path))
:root (asdf:system-relative-pathname :hp "assets/"))))
:root (asdf:system-relative-pathname :hp "public/"))))

9
src/routes/index.lisp
View file

@ -7,8 +7,13 @@
(pi:define-element page ()
(pi:h
(div :data-css "pages/index.css"
(h1 "Hello, World!"))))
(div :class "h-full place-content-center"
(h1
:x-data "{flag: true}"
:@click "flag = ! flag"
:class "text-4xl text-center"
:|:class| "flag ? 'text-red-400' : 'text-blue-400'"
"Hello, world!"))))
(defun handle-get (params)
(declare (ignore params))

12
src/view/asset.lisp
View file

@ -3,8 +3,7 @@
(:local-nicknames (#:re #:cl-ppcre))
(:local-nicknames (#:cfg #:hp/config/asset))
(:export #:asset-root
#:defasset
#:get-css-paths))
#:defasset))
(in-package #:hp/view/asset)
(defun asset-root (kind)
@ -21,12 +20,3 @@
`(defparameter ,name
(,(if (listp files) 'mapcar 'funcall)
(asset-path-under ,kind) ',files)))
(defun detect-attr-vals (html attr)
(let* ((regex (format nil "(?<=~a=\")[^\"]*(?=\")" attr))
(vals (re:all-matches-as-strings regex html)))
(remove-duplicates vals :test #'string=)))
(defun get-css-paths (html)
(mapcar (asset-path-under :css)
(detect-attr-vals html "data-css")))

4
src/view/renderer.lisp
View file

@ -3,7 +3,7 @@
(:local-nicknames (#:jg #:jingle))
(:local-nicknames (#:pi #:piccolo))
(:local-nicknames (#:cfg #:hp/config/env))
(:local-nicknames (#:cmp #:hp/components/**/*))
(:local-nicknames (#:cmp #:hp/components/*))
(:export #:render
#:partial-render))
(in-package #:hp/view/renderer)
@ -22,4 +22,4 @@
(defun partial-render (component &key status)
(jg:with-html-response
(if status (jg:set-response-status status))
(funcall (renderer) (cmp:partial-document component))))
(funcall (renderer) component)))