diff --git a/.gitignore b/.gitignore index 95b52b0..8476e98 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .qlot +src/assets/css/dist.css diff --git a/Makefile b/Makefile index 0c84aa2..8b85e68 100644 --- a/Makefile +++ b/Makefile @@ -1,6 +1,9 @@ install: ## Install dependencies @qlot install +dev: ## Run dev mode + @tailwindcss -i ./src/assets/css/global.css -o ./src/assets/css/dist.css --watch + help: ## Show options @grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \ awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}' diff --git a/src/app.lisp b/src/app.lisp index 5077aa9..10ac5ec 100644 --- a/src/app.lisp +++ b/src/app.lisp @@ -24,8 +24,7 @@ (fbr:assign-routes *app* :system "hp" :directory "src/routes") - (jg:static-path *app* "/scripts/" "src/scripts/") - (jg:static-path *app* "/styles/" "src/styles/") + (jg:static-path *app* "/assets/" "src/assets/") (jg:install-middleware *app* mw:*public-files*) (jg:install-middleware *app* mw:*normalize-path*)) diff --git a/src/assets/css/global.css b/src/assets/css/global.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/src/assets/css/global.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/scripts/alpine.js b/src/assets/js/alpine.js similarity index 100% rename from src/scripts/alpine.js rename to src/assets/js/alpine.js diff --git a/src/scripts/htmx-ext/head-support.js b/src/assets/js/htmx-ext/head-support.js similarity index 100% rename from src/scripts/htmx-ext/head-support.js rename to src/assets/js/htmx-ext/head-support.js diff --git a/src/scripts/htmx.js b/src/assets/js/htmx.js similarity index 100% rename from src/scripts/htmx.js rename to src/assets/js/htmx.js diff --git a/src/routes/about.lisp b/src/routes/about.lisp index 5d73589..4bbbe77 100644 --- a/src/routes/about.lisp +++ b/src/routes/about.lisp @@ -11,7 +11,7 @@ (pi:define-element page () (pi:h - (section :data-scope "pages/about" + (section (h1 "About") (a :href "/" :hx-boost "true" "top")))) diff --git a/src/routes/index.lisp b/src/routes/index.lisp index 3986fa7..857142f 100644 --- a/src/routes/index.lisp +++ b/src/routes/index.lisp @@ -7,8 +7,9 @@ (pi:define-element page () (pi:h - (section :data-scope "pages/index" - (h1 "Hello, World!") + (section + (h1 :class "text-red-400" + "Hello, World!") (a :href "/about" :hx-boost "true" "About")))) diff --git a/src/styles/global.css b/src/styles/global.css deleted file mode 100644 index cf97e92..0000000 --- a/src/styles/global.css +++ /dev/null @@ -1,8 +0,0 @@ -@charset "utf-8"; - -body { - font-family: "Noto Sans JP", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; -} diff --git a/src/styles/pages/about.css b/src/styles/pages/about.css deleted file mode 100644 index 22cf4df..0000000 --- a/src/styles/pages/about.css +++ /dev/null @@ -1,8 +0,0 @@ -@scope ([data-scope='pages/about']) { - :scope { - height: 100svh; - background-color: thistle; - display: grid; - place-content: center; - } -} diff --git a/src/styles/pages/index.css b/src/styles/pages/index.css deleted file mode 100644 index 6b49455..0000000 --- a/src/styles/pages/index.css +++ /dev/null @@ -1,8 +0,0 @@ -@scope ([data-scope='pages/index']) { - :scope { - height: 100svh; - background-color: aliceblue; - display: grid; - place-content: center; - } -} diff --git a/src/styles/ress.css b/src/styles/ress.css deleted file mode 100644 index 3a886b9..0000000 --- a/src/styles/ress.css +++ /dev/null @@ -1 +0,0 @@ -html{-webkit-text-size-adjust:100%;box-sizing:border-box;-moz-tab-size:4;tab-size:4;word-break:normal}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}hr{color:inherit;height:0;overflow:visible}details,main{display:block}summary{display:list-item}small{font-size:80%}[hidden]{display:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}a{background-color:transparent}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}pre{font-size:1em}b,strong{font-weight:bolder}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}iframe{border-style:none}input{border-radius:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}button,select{text-transform:none}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,input,select,textarea{background-color:transparent;border-style:none}a:focus,button:focus,input:focus,select:focus,textarea:focus{outline-width:0}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;color:inherit;font:inherit}[disabled]{cursor:default}img{border-style:none}progress{vertical-align:baseline}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true]{cursor:default} \ No newline at end of file diff --git a/src/view/optimizer.lisp b/src/view/optimizer.lisp deleted file mode 100644 index 4b6efc2..0000000 --- a/src/view/optimizer.lisp +++ /dev/null @@ -1,18 +0,0 @@ -(defpackage #:hp/view/optimizer - (:use #:cl) - (:local-nicknames (#:re #:cl-ppcre)) - (:export #:collect-style-links)) -(in-package #:hp/view/optimizer) - -(defun detect-scopes (html-str) - (remove-duplicates (re:all-matches-as-strings "(?<=data-scope=\")[^\"]*(?=\")" - html-str) - :test #'string=)) - -(defun scopes->stylesheets (scopes) - (mapcar (lambda (scope) - (concatenate 'string "/styles/" scope ".css")) - scopes)) - -(defun collect-style-links (html-str) - (scopes->stylesheets (detect-scopes html-str))) diff --git a/src/view/renderer.lisp b/src/view/renderer.lisp index 3f679b7..0ffb2d6 100644 --- a/src/view/renderer.lisp +++ b/src/view/renderer.lisp @@ -2,51 +2,30 @@ (:use #:cl) (:local-nicknames (#:jg #:jingle)) (:local-nicknames (#:pi #:piccolo)) - (:local-nicknames (#:opt #:hp/view/optimizer)) (:export #:render #:partial-render)) (in-package #:hp/view/renderer) -(pi:define-element stylesheets (hrefs) - (pi:h - (<> - (mapcar (lambda (href) - (link :rel "stylesheet" :type "text/css" :href href)) - hrefs)))) - (pi:define-element document (title description) - (let* ((children-str (pi:elem-str pi:children)) - (style-links (opt:collect-style-links children-str))) - (pi:h - (html :lang "ja" - (head - (meta :charset "UTF-8") - (script :src "/scripts/htmx.js") - (script :src "/scripts/htmx-ext/head-support.js") - (script :src "/scripts/alpine.js" :defer t) - (link :rel "stylesheet" :type "text/css" :href "/styles/ress.css") - (link :rel "stylesheet" :type "text/css" :href "/styles/global.css") - (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") - (title (format nil "~@[~a - ~]skyizwhite.dev" title)) - (meta - :name "description" - :content (or description "pakuの個人サイト")) - (stylesheets :hrefs style-links)) - (body :hx-ext "head-support" - (main pi:children)))))) - -(pi:define-element assets-provider () - (let* ((child-str (pi:elem-str pi:children)) - (style-links (opt:collect-style-links child-str))) - (pi:h - (<> - (head :hx-head "append" - (stylesheets :hrefs style-links)) - pi:children)))) + (pi:h + (html :lang "ja" + (head + (meta :charset "UTF-8") + (script :src "/assets/js/htmx.js") + (script :src "/assets/js/htmx-ext/head-support.js") + (script :src "/assets/js/alpine.js" :defer t) + (link :rel "stylesheet" :type "text/css" :href "/assets/css/dist.css") + (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") + (title (format nil "~@[~a - ~]skyizwhite.dev" title)) + (meta + :name "description" + :content (or description "pakuの個人サイト"))) + (body :hx-ext "head-support" + (main pi:children))))) (defun render (page &key status metadata) (jg:with-html-response @@ -56,4 +35,4 @@ (defun partial-render (component &key status) (jg:with-html-response (and status (jg:set-response-status status)) - (pi:elem-str (assets-provider component)))) + (pi:elem-str component))) diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..0aeeca3 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,12 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./src/routes/**/*.lisp", + "./src/components/**/*.lisp" + ], + theme: { + extend: {}, + }, + plugins: [], +} +