diff --git a/qlfile b/qlfile index 2bf9557..b64cfa2 100644 --- a/qlfile +++ b/qlfile @@ -7,3 +7,4 @@ ql cl-ppcre ql log4cl ql function-cache ql trivial-backtrace +ql cl-interpol diff --git a/qlfile.lock b/qlfile.lock index b018d2a..10871ee 100644 --- a/qlfile.lock +++ b/qlfile.lock @@ -38,3 +38,7 @@ (:class qlot/source/ql:source-ql :initargs (:%version :latest) :version "ql-2023-10-21")) +("cl-interpol" . + (:class qlot/source/ql:source-ql + :initargs (:%version :latest) + :version "ql-2023-10-21")) diff --git a/src/components/layout.lisp b/src/components/layout.lisp index 7c3ee16..2a1a006 100644 --- a/src/components/layout.lisp +++ b/src/components/layout.lisp @@ -1,15 +1,50 @@ (defpackage #:hp/components/layout (:use #:cl - #:piccolo) - (:local-nicknames (#:cfg #:hp/config/*)) + #:piccolo + #:cl-interpol) + (:import-from #:hp/config/asset + #:*hx-ext*) + (:import-from #:hp/view/asset + #:defasset) (:export #: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 () (body - :hx-ext cfg:*hx-ext* - :class "h-[100svh] flex flex-col" - (header) + :hx-ext *hx-ext* + :class "h-[100svh] flex flex-col" + (layout-header) (main :class "flex-1" children) ; footer diff --git a/src/routes/about.lisp b/src/routes/about.lisp new file mode 100644 index 0000000..c572e0c --- /dev/null +++ b/src/routes/about.lisp @@ -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))) diff --git a/src/routes/contact.lisp b/src/routes/contact.lisp new file mode 100644 index 0000000..7406ba5 --- /dev/null +++ b/src/routes/contact.lisp @@ -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))) diff --git a/src/routes/index.lisp b/src/routes/index.lisp index 73141b2..5ec167d 100644 --- a/src/routes/index.lisp +++ b/src/routes/index.lisp @@ -8,15 +8,7 @@ (define-element page () (div :class "h-full place-content-center" (h1 - :x-data "{ - flag: true, - toggle() { - this.flag = !this.flag - } - }" - :@click "toggle" :class "text-4xl text-center" - :|:class| "flag ? 'text-red-400' : 'text-blue-400'" "Hello, world!"))) (defun handle-get (params) diff --git a/src/routes/not-found.lisp b/src/routes/not-found.lisp index 2aaf3cc..6d47d45 100644 --- a/src/routes/not-found.lisp +++ b/src/routes/not-found.lisp @@ -10,8 +10,10 @@ :description "お探しのページは見つかりませんでした。")) (define-element page () - (section - (h1 "404 Not Found"))) + (div :class "h-full place-content-center" + (h1 + :class "text-rose-400 text-4xl text-center" + "404 Not Found"))) (defun handle-not-found () (view:render (page) diff --git a/src/routes/work.lisp b/src/routes/work.lisp new file mode 100644 index 0000000..b6ffb36 --- /dev/null +++ b/src/routes/work.lisp @@ -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)))