From f541321d55f529773d704d7bc71bb586b2b42e7b Mon Sep 17 00:00:00 2001
From: Akira Tempaku <paku@skyizwhite.dev>
Date: Fri, 2 May 2025 00:49:52 +0900
Subject: [PATCH 1/2] Rename ui to components
---
src/{ui => components}/layout.lisp | 49 ++++++++++++++----------------
src/renderer.lisp | 2 +-
src/ui/.keep | 0
tailwind.config.js | 2 +-
4 files changed, 25 insertions(+), 28 deletions(-)
rename src/{ui => components}/layout.lisp (61%)
delete mode 100644 src/ui/.keep
diff --git a/src/ui/layout.lisp b/src/components/layout.lisp
similarity index 61%
rename from src/ui/layout.lisp
rename to src/components/layout.lisp
index ea14831..4421773 100644
--- a/src/ui/layout.lisp
+++ b/src/components/layout.lisp
@@ -1,4 +1,4 @@
-(defpackage #:hp/ui/layout
+(defpackage #:hp/components/layout
(:use #:cl
#:hsx)
(:import-from #:hp/lib/metadata
@@ -6,7 +6,7 @@
(:import-from #:jingle
#:request-uri)
(:export #:~layout))
-(in-package #:hp/ui/layout)
+(in-package #:hp/components/layout)
(defun bust-cache (url)
(format nil "~a?v=~a" url #.(get-universal-time)))
@@ -40,27 +40,24 @@
(body
:hx-ext "head-support, response-targets, preload"
:hx-boost "true" :hx-target-404 "body" :hx-target-5* "body"
- :class (<>
- "h-[100svh] flex flex-col bg-[url(/img/bg.webp)] bg-cover bg-center "
- "p-2 md:p-8")
- (div :class (<>
- "bg-amber-50/90 flex flex-col flex-1 w-full max-w-[700px] overflow-hidden shadow-sm "
- "px-2 pt-2 mx-auto md:px-8 md:pt-8")
- (header :class "flex justify-between pb-2 md:pb-4 border-b-1"
- (h1 :class "text-2xl md:text-3xl font-bold"
- (a :href "/"
- "skyizwhite"))
- (nav :class "flex items-end"
- (ul
- :preload "mouseover"
- :class "flex gap-4 text-lg"
- (loop
- :for (href label) :in *nav-menu*
- :collect
- (if (search href (request-uri jingle:*request*))
- (hsx (li :class "text-pink-500"
- label))
- (hsx (li (a :href href :class "underline hover:text-pink-500"
- label))))))))
- (main :class "flex-1 pt-2 pb-4 md:pt-4 md:pb-8 overflow-y-scroll "
- children))))))
+ :class (<>
+ "bg-amber-50/90 flex flex-col h-[100svh] w-full max-w-[700px] "
+ "px-2 pt-2 mx-auto md:px-8 md:pt-8")
+ (header :class "flex justify-between pb-2 md:pb-4 border-b-1"
+ (h1 :class "text-2xl md:text-3xl font-bold"
+ (a :href "/"
+ "skyizwhite"))
+ (nav :class "flex items-end"
+ (ul
+ :preload "mouseover"
+ :class "flex gap-4 text-lg"
+ (loop
+ :for (href label) :in *nav-menu*
+ :collect
+ (if (search href (request-uri jingle:*request*))
+ (hsx (li :class "text-pink-500"
+ label))
+ (hsx (li (a :href href :class "underline hover:text-pink-500"
+ label))))))))
+ (main :class "flex-1 pt-2 pb-4 md:pt-4 md:pb-8 overflow-y-scroll "
+ children)))))
diff --git a/src/renderer.lisp b/src/renderer.lisp
index 23742cf..8d26ca9 100644
--- a/src/renderer.lisp
+++ b/src/renderer.lisp
@@ -9,7 +9,7 @@
(:import-from #:hp/lib/env
#:hp-url
#:hp-env)
- (:import-from #:hp/ui/layout
+ (:import-from #:hp/components/layout
#:~layout))
(in-package #:hp/renderer)
diff --git a/src/ui/.keep b/src/ui/.keep
deleted file mode 100644
index e69de29..0000000
diff --git a/tailwind.config.js b/tailwind.config.js
index e7772f0..738e1dd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,7 @@ module.exports = {
content: [
"./src/renderer.lisp",
"./src/routes/**/*.lisp",
- "./src/ui/**/*.lisp",
+ "./src/components/**/*.lisp",
],
theme: {
container: {
From 9503b56084c9488ec580f3ac27d180e5b92607b1 Mon Sep 17 00:00:00 2001
From: Akira Tempaku <paku@skyizwhite.dev>
Date: Fri, 2 May 2025 01:31:26 +0900
Subject: [PATCH 2/2] Remove bg, add header
---
src/components/header.lisp | 28 ++++++++++++++++++++++++++++
src/components/layout.lisp | 36 +++++++++---------------------------
2 files changed, 37 insertions(+), 27 deletions(-)
create mode 100644 src/components/header.lisp
diff --git a/src/components/header.lisp b/src/components/header.lisp
new file mode 100644
index 0000000..82bbef8
--- /dev/null
+++ b/src/components/header.lisp
@@ -0,0 +1,28 @@
+(defpackage #:hp/components/header
+ (:use #:cl
+ #:hsx)
+ (:import-from #:jingle
+ #:request-uri)
+ (:export #:~header))
+(in-package #:hp/components/header)
+
+(defparameter *nav-menu*
+ '(("/bio" "bio")
+ ("/work" "work")
+ ("/blog" "blog")))
+
+(defcomp ~header ()
+ (hsx
+ (header :class "flex justify-between pb-2 md:pb-4 border-b-1"
+ (h1 :class "text-2xl md:text-3xl font-bold"
+ (a :href "/"
+ "skyizwhite"))
+ (nav :class "flex items-end"
+ (ul :preload "mouseover" :class "flex gap-4 text-lg"
+ (loop
+ :for (href label) :in *nav-menu* :collect
+ (if (search href (request-uri jingle:*request*))
+ (hsx (li :class "text-pink-500"
+ label))
+ (hsx (li (a :href href :class "underline hover:text-pink-500"
+ label))))))))))
diff --git a/src/components/layout.lisp b/src/components/layout.lisp
index 4421773..fadd874 100644
--- a/src/components/layout.lisp
+++ b/src/components/layout.lisp
@@ -3,19 +3,14 @@
#:hsx)
(:import-from #:hp/lib/metadata
#:~metadata)
- (:import-from #:jingle
- #:request-uri)
+ (:import-from #:hp/components/header
+ #:~header)
(:export #:~layout))
(in-package #:hp/components/layout)
(defun bust-cache (url)
(format nil "~a?v=~a" url #.(get-universal-time)))
-(defparameter *nav-menu*
- '(("/bio" "bio")
- ("/work" "work")
- ("/blog" "blog")))
-
(defcomp ~layout (&key metadata children)
(hsx
(html :lang "ja"
@@ -41,23 +36,10 @@
:hx-ext "head-support, response-targets, preload"
:hx-boost "true" :hx-target-404 "body" :hx-target-5* "body"
:class (<>
- "bg-amber-50/90 flex flex-col h-[100svh] w-full max-w-[700px] "
- "px-2 pt-2 mx-auto md:px-8 md:pt-8")
- (header :class "flex justify-between pb-2 md:pb-4 border-b-1"
- (h1 :class "text-2xl md:text-3xl font-bold"
- (a :href "/"
- "skyizwhite"))
- (nav :class "flex items-end"
- (ul
- :preload "mouseover"
- :class "flex gap-4 text-lg"
- (loop
- :for (href label) :in *nav-menu*
- :collect
- (if (search href (request-uri jingle:*request*))
- (hsx (li :class "text-pink-500"
- label))
- (hsx (li (a :href href :class "underline hover:text-pink-500"
- label))))))))
- (main :class "flex-1 pt-2 pb-4 md:pt-4 md:pb-8 overflow-y-scroll "
- children)))))
+ "bg-amber-50 flex flex-col h-[100svh] w-full max-w-[700px] "
+ "p-2 md:pt-6 mx-auto")
+ (~header)
+ (main :class "flex-1 px-2 py-6 md:px-4 md:py-8 overflow-y-scroll"
+ children)
+ (footer :class "flex p-2 justify-center text-sm border-t-1"
+ (p "© 2025 Akira Tempaku"))))))