Add persist plugin
This commit is contained in:
parent
027077c97a
commit
a0a680c8d2
8 changed files with 24 additions and 6 deletions
public/vendor/alpine-ext
src
routes
scripts
styles
view/components
1
public/vendor/alpine-ext/persist@3.13.8.js
vendored
Normal file
1
public/vendor/alpine-ext/persist@3.13.8.js
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
(()=>{function d(t){let n=()=>{let r,a;try{a=localStorage}catch(i){console.error(i),console.warn("Alpine: $persist is using temporary storage since localStorage is unavailable.");let e=new Map;a={getItem:e.get.bind(e),setItem:e.set.bind(e)}}return t.interceptor((i,e,l,s,f)=>{let o=r||`_x_${s}`,u=g(o,a)?p(o,a):i;return l(u),t.effect(()=>{let c=e();m(o,c,a),l(c)}),u},i=>{i.as=e=>(r=e,i),i.using=e=>(a=e,i)})};Object.defineProperty(t,"$persist",{get:()=>n()}),t.magic("persist",n),t.persist=(r,{get:a,set:i},e=localStorage)=>{let l=g(r,e)?p(r,e):a();i(l),t.effect(()=>{let s=a();m(r,s,e),i(s)})}}function g(t,n){return n.getItem(t)!==null}function p(t,n){let r=n.getItem(t,n);if(r!==void 0)return JSON.parse(r)}function m(t,n,r){r.setItem(t,JSON.stringify(n))}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(d)});})();
|
|
@ -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))
|
||||
|
|
9
src/scripts/global.js
Normal file
9
src/scripts/global.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.store('darkMode', {
|
||||
on: Alpine.$persist(false).as('darkMode'),
|
||||
|
||||
toggle() {
|
||||
this.on = ! this.on
|
||||
}
|
||||
})
|
||||
})
|
|
@ -5,4 +5,8 @@ body {
|
|||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&[data-dark] {
|
||||
background-color: slategrey;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
@scope ([data-css='pages/about']) {
|
||||
:scope {
|
||||
height: 100svh;
|
||||
background-color: thistle;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
@scope ([data-css='pages/index']) {
|
||||
:scope {
|
||||
height: 100svh;
|
||||
background-color: aliceblue;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -7,6 +7,8 @@
|
|||
(pi:define-element layout ()
|
||||
(pi:h
|
||||
(body
|
||||
:x-data t
|
||||
:|:data-dark| "$store.darkMode.on"
|
||||
; header
|
||||
(main pi:children)
|
||||
; footer
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue