From b62a2dd8c4a374e2b07b4a18636fa7c719c69f41 Mon Sep 17 00:00:00 2001
From: paku <paku@skyizwhite.dev>
Date: Thu, 25 Apr 2024 17:19:40 +0900
Subject: [PATCH] Implement layout (wip)
---
assets/css/components/.keep | 0
assets/css/components/layout/footer.css | 6 ++++++
assets/css/components/layout/header.css | 7 +++++++
assets/css/components/layout/main.css | 11 +++++++++++
assets/css/global.css | 6 +-----
assets/css/pages/index.css | 2 +-
src/app.lisp | 3 +--
src/components/layout/footer.lisp | 9 +++++++++
src/components/layout/header.lisp | 10 ++++++++++
src/components/layout/main.lisp | 21 +++++++++++++++++++++
src/routes/index.lisp | 2 +-
src/view/asset.lisp | 11 +----------
src/view/components/layout/main.lisp | 17 -----------------
13 files changed, 69 insertions(+), 36 deletions(-)
delete mode 100644 assets/css/components/.keep
create mode 100644 assets/css/components/layout/footer.css
create mode 100644 assets/css/components/layout/header.css
create mode 100644 assets/css/components/layout/main.css
create mode 100644 src/components/layout/footer.lisp
create mode 100644 src/components/layout/header.lisp
create mode 100644 src/components/layout/main.lisp
delete mode 100644 src/view/components/layout/main.lisp
diff --git a/assets/css/components/.keep b/assets/css/components/.keep
deleted file mode 100644
index e69de29..0000000
diff --git a/assets/css/components/layout/footer.css b/assets/css/components/layout/footer.css
new file mode 100644
index 0000000..6a0d903
--- /dev/null
+++ b/assets/css/components/layout/footer.css
@@ -0,0 +1,6 @@
+@scope ([data-css='components/layout/footer.css']) {
+ :scope {
+ height: 40px;
+ background-color: gray;
+ }
+}
diff --git a/assets/css/components/layout/header.css b/assets/css/components/layout/header.css
new file mode 100644
index 0000000..3b0754e
--- /dev/null
+++ b/assets/css/components/layout/header.css
@@ -0,0 +1,7 @@
+@scope ([data-css='components/layout/header.css']) {
+ :scope {
+ height: 80px;
+ display: flex;
+ background-color: gray;
+ }
+}
diff --git a/assets/css/components/layout/main.css b/assets/css/components/layout/main.css
new file mode 100644
index 0000000..fe2004e
--- /dev/null
+++ b/assets/css/components/layout/main.css
@@ -0,0 +1,11 @@
+@scope ([data-css='components/layout/main.css']) {
+ :scope {
+ height: 100svh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .main {
+ flex: 1;
+ }
+}
diff --git a/assets/css/global.css b/assets/css/global.css
index a7c7c9b..9f4385b 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -1,12 +1,8 @@
@charset "utf-8";
-body {
+html {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
-
- &[data-dark] {
- background-color: slategrey;
- }
}
diff --git a/assets/css/pages/index.css b/assets/css/pages/index.css
index 42a2d5d..109f9ac 100644
--- a/assets/css/pages/index.css
+++ b/assets/css/pages/index.css
@@ -1,6 +1,6 @@
@scope ([data-css='pages/index.css']) {
:scope {
- height: 100svh;
+ height: 100%;
display: grid;
place-content: center;
}
diff --git a/src/app.lisp b/src/app.lisp
index dcd5a4e..ba379df 100644
--- a/src/app.lisp
+++ b/src/app.lisp
@@ -4,7 +4,6 @@
(:local-nicknames (#:jg #:jingle))
(:local-nicknames (#:fbr #:ningle-fbr))
(:local-nicknames (#:cfg #:hp/config/env))
- (:local-nicknames (#:asset #:hp/view/asset))
(:local-nicknames (#:mw #:hp/middlewares/*))
(:export #:start
#:stop
@@ -32,7 +31,7 @@
(defun update ()
(stop)
- (setup)
+ (ql:quickload :hp)
(start))
(setup)
diff --git a/src/components/layout/footer.lisp b/src/components/layout/footer.lisp
new file mode 100644
index 0000000..da0091f
--- /dev/null
+++ b/src/components/layout/footer.lisp
@@ -0,0 +1,9 @@
+(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")))
diff --git a/src/components/layout/header.lisp b/src/components/layout/header.lisp
new file mode 100644
index 0000000..a185db8
--- /dev/null
+++ b/src/components/layout/header.lisp
@@ -0,0 +1,10 @@
+(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"))))
diff --git a/src/components/layout/main.lisp b/src/components/layout/main.lisp
new file mode 100644
index 0000000..db768d3
--- /dev/null
+++ b/src/components/layout/main.lisp
@@ -0,0 +1,21 @@
+(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)
+ )))
diff --git a/src/routes/index.lisp b/src/routes/index.lisp
index 024e23e..a09e4f0 100644
--- a/src/routes/index.lisp
+++ b/src/routes/index.lisp
@@ -7,7 +7,7 @@
(pi:define-element page ()
(pi:h
- (div (view:cmp-props :css "pages/index.css")
+ (div :data-css "pages/index.css"
(h1 "Hello, World!"))))
(defun handle-get (params)
diff --git a/src/view/asset.lisp b/src/view/asset.lisp
index 90a8fcf..8361445 100644
--- a/src/view/asset.lisp
+++ b/src/view/asset.lisp
@@ -4,8 +4,7 @@
(:local-nicknames (#:cfg #:hp/config/asset))
(:export #:asset-root
#:defasset
- #:get-css-paths
- #:cmp-props))
+ #:get-css-paths))
(in-package #:hp/view/asset)
(defun asset-root (kind)
@@ -31,11 +30,3 @@
(defun get-css-paths (html)
(mapcar (asset-path-under :css)
(detect-attr-vals html "data-css")))
-
-(defun cmp-props (&key css js x-data)
- (append (and css `(:data-css ,css))
- (and js x-data
- `(:ax-load t
- :ax-load-src ,(asset-path :js js)
- :x-ignore t
- :x-data ,x-data))))
diff --git a/src/view/components/layout/main.lisp b/src/view/components/layout/main.lisp
deleted file mode 100644
index 599b7e8..0000000
--- a/src/view/components/layout/main.lisp
+++ /dev/null
@@ -1,17 +0,0 @@
-(defpackage #:hp/components/layout/main
- (:use #:cl)
- (:local-nicknames (#:pi #:piccolo))
- (:local-nicknames (#:cfg #:hp/config/asset))
- (:export #:layout))
-(in-package #:hp/components/layout/main)
-
-(pi:define-element layout ()
- (pi:h
- (body
- :hx-ext cfg:*hx-ext*
- :x-data t
- :|:data-dark| "$store.darkMode.on"
- ; header
- (main pi:children)
- ; footer
- )))