Migrated from merakiui to preline.

Author: oubiwann

Dockerfile

@@ -2,7 +2,7 @@ FROM node:20-alpine3.17
 
 RUN apk add zola
 RUN npm install -g [email protected]
-RUN yarn add tailwindcss@latest @tailwindcss/typography
+RUN yarn add tailwindcss@latest @tailwindcss/typography preline@latest
 
 CMD ["zola"]
 ENTRYPOINT [ "zola" ]

Makefile

@@ -111,15 +111,14 @@ spell-suggest:
 TAILWIND_BASE = styles
 TAILWIND_INPUT = $(TAILWIND_BASE)/site.css
 TAILWIND_OUTPUT = static/css/site.css
+JS_OUTPUT = static/js/
 
-tailwind-setup: tailwind.config.js $(TAILWIND_BASE)/components
+tailwind-setup: tailwind.config.js $(JS_OUTPUT)/preline.js
 
-$(TAILWIND_BASE)/components:
-	mkdir -p $(TAILWIND_BASE) && \
-	cd $(TAILWIND_BASE) && \
-	git clone [email protected]:merakiui/merakiui.git && \
-	mv merakiui/components merakiui/assets . && \
-	rm -rf merakiui
+$(JS_OUTPUT)/preline.js:
+	ID=$$(docker create $(DOCKER_FQN)) && \
+	docker cp $$ID:/node_modules/preline/dist/preline.js $(TAILWIND_BASE)/ && \
+	docker rm -v $$ID
 
 tailwind.config.js:
 	docker run -it \
@@ -134,3 +133,4 @@ tailwind-build:
 	--entrypoint npx \
 	$(DOCKER_FQN) \
 	tailwindcss -i $(TAILWIND_INPUT) -o $(TAILWIND_OUTPUT) --minify
+	cp $(TAILWIND_BASE)/*.js $(JS_OUTPUT)

site/about/index.html

@@ -0,0 +1,87 @@
+//////////////////////////////////////////////////////////////////////////////
+///   DARK MODE   ////////////////////////////////////////////////////////////
+//////////////////////////////////////////////////////////////////////////////
+
+const HSThemeAppearance = {
+    init() {
+        const defaultTheme = 'default'
+        let theme = localStorage.getItem('hs_theme') || defaultTheme
+
+        if (document.querySelector('html').classList.contains('dark')) return
+        this.setAppearance(theme)
+    },
+    _resetStylesOnLoad() {
+        const $resetStyles = document.createElement('style')
+        $resetStyles.innerText = `*{transition: unset !important;}`
+        $resetStyles.setAttribute('data-hs-appearance-onload-styles', '')
+        document.head.appendChild($resetStyles)
+        return $resetStyles
+    },
+    setAppearance(theme, saveInStore = true, dispatchEvent = true) {
+        const $resetStylesEl = this._resetStylesOnLoad()
+
+        if (saveInStore) {
+            localStorage.setItem('hs_theme', theme)
+        }
+
+        if (theme === 'auto') {
+            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default'
+        }
+
+        document.querySelector('html').classList.remove('dark')
+        document.querySelector('html').classList.remove('default')
+        document.querySelector('html').classList.remove('auto')
+
+        document.querySelector('html').classList.add(this.getOriginalAppearance())
+
+        setTimeout(() => {
+            $resetStylesEl.remove()
+        })
+
+        if (dispatchEvent) {
+            window.dispatchEvent(new CustomEvent('on-hs-appearance-change', {detail: theme}))
+        }
+    },
+    getAppearance() {
+        let theme = this.getOriginalAppearance()
+        if (theme === 'auto') {
+            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default'
+        }
+        return theme
+    },
+    getOriginalAppearance() {
+        const defaultTheme = 'default'
+        return localStorage.getItem('hs_theme') || defaultTheme
+    }
+}
+HSThemeAppearance.init()
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+    if (HSThemeAppearance.getOriginalAppearance() === 'auto') {
+        HSThemeAppearance.setAppearance('auto', false)
+    }
+})
+
+window.addEventListener('load', () => {
+    const $clickableThemes = document.querySelectorAll('[data-hs-theme-click-value]')
+    const $switchableThemes = document.querySelectorAll('[data-hs-theme-switch]')
+
+    $clickableThemes.forEach($item => {
+        $item.addEventListener('click', () => HSThemeAppearance.setAppearance($item.getAttribute('data-hs-theme-click-value'), true, $item))
+    })
+
+    $switchableThemes.forEach($item => {
+        $item.addEventListener('change', (e) => {
+            HSThemeAppearance.setAppearance(e.target.checked ? 'dark' : 'default')
+        })
+
+        $item.checked = HSThemeAppearance.getAppearance() === 'dark'
+    })
+
+    window.addEventListener('on-hs-appearance-change', e => {
+        $switchableThemes.forEach($item => {
+            $item.checked = e.detail === 'dark'
+        })
+    })
+})
+