Add persist plugin

src/routes/index.lisp

@@ -11,7 +11,9 @@
       (h1
         "Hello, World!")
       (a :href "/about"
-        "About"))))
+        "About")
+      (button :x-data t :@click "$store.darkMode.toggle()"
+        "Toggle theme"))))
 
 (defun handle-get (params)
   (declare (ignore params))

src/scripts/global.js

@@ -0,0 +1,9 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.store('darkMode', {
+    on: Alpine.$persist(false).as('darkMode'),
+
+    toggle() {
+      this.on = ! this.on
+    }
+  })
+})

src/styles/global.css

@@ -5,4 +5,8 @@ body {
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
-}
+
+  &[data-dark] {
+    background-color: slategrey; 
+  }
+}

src/styles/pages/about.css

@@ -1,7 +1,6 @@
 @scope ([data-css='pages/about']) {
   :scope {
     height: 100svh;
-    background-color: thistle;
     display: grid;
     place-content: center;
   }

src/styles/pages/index.css

@@ -1,7 +1,6 @@
 @scope ([data-css='pages/index']) {
   :scope {
     height: 100svh;
-    background-color: aliceblue;
     display: grid;
     place-content: center;
   }

src/view/components/document.lisp

@@ -31,7 +31,7 @@
   (pi:h
     (<>
       (mapcar (lambda (src)
-                (script :src src))
+                (script :src src :defer t))
               srcs))))
 
 (pi:define-element stylesheets (hrefs)
@@ -63,8 +63,10 @@
         (link 
           :rel "stylesheet"
           :href "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap")
-        (on-demand-assets :component pi:children)
         (script :src "/vendor/htmx@1.9.12.js")
+        (script :src "/vendor/alpine-ext/persist@3.13.8.js" :defer t)
+        (script :src "/scripts/global.js" :defer t)
+        (on-demand-assets :component pi:children)
         (script :src "/vendor/alpine@3.13.8.js" :defer t)
         (title (format nil "~@[~a - ~]skyizwhite.dev" title))
         (meta

src/view/components/layout.lisp

@@ -7,6 +7,8 @@
 (pi:define-element layout ()
   (pi:h
     (body
+      :x-data t
+      :|:data-dark| "$store.darkMode.on"
       ; header
       (main pi:children)
       ; footer