Implement layout (wip)

assets/css/components/layout/footer.css

@@ -0,0 +1,6 @@
+@scope ([data-css='components/layout/footer.css']) {
+  :scope {
+    height: 40px;
+    background-color: gray;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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; 
-  }
 }

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;
   }

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)

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")))

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"))))

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)
+      )))

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)

src/view/asset.lisp

@@ -4,8 +4,7 @@
   (:local-nicknames (#:cfg #:hp/config/asset))
   (:export #:asset-root
            #:defasset
-           #:get-css-paths
+           #:get-css-paths))
-           #:cmp-props))
 (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))))

src/view/components/layout/main.lisp

@@ -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
-      )))