Add header
This commit is contained in:
parent
430c1ee5a8
commit
ceea9f2b5a
8 changed files with 97 additions and 15 deletions
1
qlfile
1
qlfile
|
@ -7,3 +7,4 @@ ql cl-ppcre
|
||||||
ql log4cl
|
ql log4cl
|
||||||
ql function-cache
|
ql function-cache
|
||||||
ql trivial-backtrace
|
ql trivial-backtrace
|
||||||
|
ql cl-interpol
|
||||||
|
|
|
@ -38,3 +38,7 @@
|
||||||
(:class qlot/source/ql:source-ql
|
(:class qlot/source/ql:source-ql
|
||||||
:initargs (:%version :latest)
|
:initargs (:%version :latest)
|
||||||
:version "ql-2023-10-21"))
|
:version "ql-2023-10-21"))
|
||||||
|
("cl-interpol" .
|
||||||
|
(:class qlot/source/ql:source-ql
|
||||||
|
:initargs (:%version :latest)
|
||||||
|
:version "ql-2023-10-21"))
|
||||||
|
|
|
@ -1,15 +1,50 @@
|
||||||
(defpackage #:hp/components/layout
|
(defpackage #:hp/components/layout
|
||||||
(:use #:cl
|
(:use #:cl
|
||||||
#:piccolo)
|
#:piccolo
|
||||||
(:local-nicknames (#:cfg #:hp/config/*))
|
#:cl-interpol)
|
||||||
|
(:import-from #:hp/config/asset
|
||||||
|
#:*hx-ext*)
|
||||||
|
(:import-from #:hp/view/asset
|
||||||
|
#:defasset)
|
||||||
(:export #:layout))
|
(:export #:layout))
|
||||||
(in-package #:hp/components/layout)
|
(in-package #:hp/components/layout)
|
||||||
|
|
||||||
|
(named-readtables:in-readtable :interpol-syntax)
|
||||||
|
|
||||||
|
(defparameter *header-nav-items*
|
||||||
|
'((:href "/" :label "Home")
|
||||||
|
(:href "/about" :label "About")
|
||||||
|
(:href "/work" :label "Work")
|
||||||
|
(:href "/contact" :label "Contact")))
|
||||||
|
|
||||||
|
(define-element header-nav-item (href label)
|
||||||
|
(li
|
||||||
|
:class "px-2 rounded-full"
|
||||||
|
:|:class| #?"isCurrentPath('${href}') && 'font-bold bg-lime-200 pointer-events-none'"
|
||||||
|
(a :href href
|
||||||
|
label)))
|
||||||
|
|
||||||
|
(define-element layout-header ()
|
||||||
|
(header :class "px-10 py-6 flex justify-between"
|
||||||
|
(H1 :class "font-bold text-2xl"
|
||||||
|
"skyizwhite.dev")
|
||||||
|
(nav
|
||||||
|
:x-data "{
|
||||||
|
currentPath: window.location.pathname,
|
||||||
|
isCurrentPath(path) {
|
||||||
|
return this.currentPath === path
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
:hx-boost "true"
|
||||||
|
(ul :class "h-full flex items-center gap-6 text-lg"
|
||||||
|
(mapcar (lambda (item) (header-nav-item item))
|
||||||
|
*header-nav-items*)))))
|
||||||
|
|
||||||
(define-element layout ()
|
(define-element layout ()
|
||||||
(body
|
(body
|
||||||
:hx-ext cfg:*hx-ext*
|
:hx-ext *hx-ext*
|
||||||
:class "h-[100svh] flex flex-col"
|
:class "h-[100svh] flex flex-col"
|
||||||
(header)
|
(layout-header)
|
||||||
(main :class "flex-1"
|
(main :class "flex-1"
|
||||||
children)
|
children)
|
||||||
; footer
|
; footer
|
||||||
|
|
16
src/routes/about.lisp
Normal file
16
src/routes/about.lisp
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
(defpackage #:hp/routes/about
|
||||||
|
(:use #:cl
|
||||||
|
#:piccolo)
|
||||||
|
(:local-nicknames (#:view #:hp/view/*))
|
||||||
|
(:export #:handle-get))
|
||||||
|
(in-package #:hp/routes/about)
|
||||||
|
|
||||||
|
(define-element page ()
|
||||||
|
(div :class "h-full place-content-center"
|
||||||
|
(h1
|
||||||
|
:class "text-4xl text-center"
|
||||||
|
"About")))
|
||||||
|
|
||||||
|
(defun handle-get (params)
|
||||||
|
(declare (ignore params))
|
||||||
|
(view:render (page)))
|
16
src/routes/contact.lisp
Normal file
16
src/routes/contact.lisp
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
(defpackage #:hp/routes/contact
|
||||||
|
(:use #:cl
|
||||||
|
#:piccolo)
|
||||||
|
(:local-nicknames (#:view #:hp/view/*))
|
||||||
|
(:export #:handle-get))
|
||||||
|
(in-package #:hp/routes/contact)
|
||||||
|
|
||||||
|
(define-element page ()
|
||||||
|
(div :class "h-full place-content-center"
|
||||||
|
(h1
|
||||||
|
:class "text-4xl text-center"
|
||||||
|
"Contact")))
|
||||||
|
|
||||||
|
(defun handle-get (params)
|
||||||
|
(declare (ignore params))
|
||||||
|
(view:render (page)))
|
|
@ -8,15 +8,7 @@
|
||||||
(define-element page ()
|
(define-element page ()
|
||||||
(div :class "h-full place-content-center"
|
(div :class "h-full place-content-center"
|
||||||
(h1
|
(h1
|
||||||
:x-data "{
|
|
||||||
flag: true,
|
|
||||||
toggle() {
|
|
||||||
this.flag = !this.flag
|
|
||||||
}
|
|
||||||
}"
|
|
||||||
:@click "toggle"
|
|
||||||
:class "text-4xl text-center"
|
:class "text-4xl text-center"
|
||||||
:|:class| "flag ? 'text-red-400' : 'text-blue-400'"
|
|
||||||
"Hello, world!")))
|
"Hello, world!")))
|
||||||
|
|
||||||
(defun handle-get (params)
|
(defun handle-get (params)
|
||||||
|
|
|
@ -10,8 +10,10 @@
|
||||||
:description "お探しのページは見つかりませんでした。"))
|
:description "お探しのページは見つかりませんでした。"))
|
||||||
|
|
||||||
(define-element page ()
|
(define-element page ()
|
||||||
(section
|
(div :class "h-full place-content-center"
|
||||||
(h1 "404 Not Found")))
|
(h1
|
||||||
|
:class "text-rose-400 text-4xl text-center"
|
||||||
|
"404 Not Found")))
|
||||||
|
|
||||||
(defun handle-not-found ()
|
(defun handle-not-found ()
|
||||||
(view:render (page)
|
(view:render (page)
|
||||||
|
|
16
src/routes/work.lisp
Normal file
16
src/routes/work.lisp
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
(defpackage #:hp/routes/work
|
||||||
|
(:use #:cl
|
||||||
|
#:piccolo)
|
||||||
|
(:local-nicknames (#:view #:hp/view/*))
|
||||||
|
(:export #:handle-get))
|
||||||
|
(in-package #:hp/routes/work)
|
||||||
|
|
||||||
|
(define-element page ()
|
||||||
|
(div :class "h-full place-content-center"
|
||||||
|
(h1
|
||||||
|
:class "text-4xl text-center"
|
||||||
|
"Work")))
|
||||||
|
|
||||||
|
(defun handle-get (params)
|
||||||
|
(declare (ignore params))
|
||||||
|
(view:render (page)))
|
Loading…
Add table
Add a link
Reference in a new issue