Merge branch 'master' of https://src.eltr.ac/eltrac/geedeapro

12 files changed, 66 insertions, 61 deletions

diff --git a/assets/css/_markdown.scss b/assets/css/_markdown.scss
index 0b57aca2..cb70c1e4 100644
--- a/assets/css/_markdown.scss
+++ b/assets/css/_markdown.scss
@@ -124,9 +124,6 @@ $block-background-color: var(--block-background-color);
     &[href*="github.com"]::before {
         content: '';
         background-image: url('/icons/github.svg');
-        @media (prefers-color-scheme: dark) {
-            filter: invert(1);
-        }
         .dark & {
             filter: invert(1);
         }
diff --git a/assets/css/utils/_reset.scss b/assets/css/utils/_reset.scss
index 47d8af1a..568d8b5b 100644
--- a/assets/css/utils/_reset.scss
+++ b/assets/css/utils/_reset.scss
@@ -18,7 +18,7 @@ body {
     background-size: 5rem;
     background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='var(--block-background-color)' fill-opacity='0.018' fill-rule='evenodd'/%3E%3C/svg%3E");
 
-    @media (prefers-color-scheme: dark) {
+    .dark & {
         background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='var(--block-background-color)' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
     }
 }
diff --git a/assets/css/utils/_variables.scss b/assets/css/utils/_variables.scss
index 83159980..15bb019a 100644
--- a/assets/css/utils/_variables.scss
+++ b/assets/css/utils/_variables.scss
@@ -52,8 +52,3 @@
     @include variablesInDarkMode;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        @include variablesInDarkMode;
-    }
-}
diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js
new file mode 100644
index 00000000..6057f357
--- /dev/null
+++ b/assets/js/darkmode.js
@@ -0,0 +1,36 @@
+(() => {
+    const THEME = 'geedeapro.theme' // auto | light | dakr
+    const mql = window.matchMedia('(prefers-color-scheme: dark)')
+
+    function useDarkMode(store) {
+        document.documentElement.classList.add('dark')
+        if (localStorage.getItem(THEME) != 'auto') mql.onchange = null
+        if (store) localStorage.setItem(THEME, 'dark')
+    }
+
+    function useLightMode(store) {
+        document.documentElement.classList.remove('dark')
+        if (localStorage.getItem(THEME) != 'auto') mql.onchange = null
+        if (store) localStorage.setItem(THEME, 'light')
+    }
+
+    function useSystem(store) {
+        if (mql.matches) useDarkMode()
+        else useLightMode()
+        mql.onchange = e => {
+            console.log("changed when system changed")
+            if (e.matches) useDarkMode()
+            else useLightMode()
+        }
+        if (store) localStorage.setItem(THEME, 'auto')
+    }
+
+    window.switchTheme = (theme, store) => {
+        if (!theme || theme === 'auto') useSystem(store)
+        else if (theme === 'dark') useDarkMode(store)
+        else if (theme === 'light') useLightMode(store)
+    }
+
+    // use preferred theme immediately upon DOM loaded
+    window.switchTheme(localStorage.getItem(THEME), false)
+})();
diff --git a/i18n/zh.yml b/i18n/zh.yml
index fa2b539a..ea2c2906 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -1,5 +1,9 @@
 lang: zh-CN
 seeArchive: 查看全部页面
+theme:
+  auto: 自动
+  light: 亮色
+  dark: 暗色
 archivePage:
   postCountMonthly: '{{ . }} 篇文章'
   postCountAnnual: '共计 {{ . }} 篇文章'
diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html
index a50dd333..3a8cd25c 100644
--- a/layouts/_partials/head.html
+++ b/layouts/_partials/head.html
@@ -4,6 +4,7 @@
   <link rel="preconnect" href="https://r2.eltr.ac" />
   {{ hugo.Generator }}
   {{ partial "head/siteinfo" . }}
-  {{ partial "head/css" . }}
   {{ partial "head/verification" . }}
+  {{ partial "head/css" . }}
+  {{ partial "head/scripts" . }}
 </head>
diff --git a/layouts/_partials/head/scripts.html b/layouts/_partials/head/scripts.html
new file mode 100644
index 00000000..f067944c
--- /dev/null
+++ b/layouts/_partials/head/scripts.html
@@ -0,0 +1,4 @@
+{{ with resources.Get "js/darkmode.js" }}
+<script>{{ .Content | safeJS }}</script>
+{{ end }}
+
diff --git a/layouts/_partials/header/other-navigation.html b/layouts/_partials/header/other-navigation.html
index 662f1076..db37477d 100644
--- a/layouts/_partials/header/other-navigation.html
+++ b/layouts/_partials/header/other-navigation.html
@@ -1,6 +1,14 @@
 {{ $langButtonSize := "w-4 h-4" }}
 
 <div class="flex gap-2 pr-2">
+    <!-- theme switch -->
+    <select id="theme-select"
+        class="bg-neutral/10 border-1 border-[var(--text-color)] border-solid rd text-[var(--text-color)] font-serif text-size-[0.5rem] font-extrabold">
+    {{ $switches := slice "auto" "light" "dark" }}
+    {{ range $switches }}
+        <option value="{{ . }}">{{ T (printf "theme.%s" .) }}</option>
+    {{ end }}
+    </select>
     <!-- language switch -->
     {{- $lang := .Site.Language.Lang -}}
     {{- $switch := dict
@@ -9,7 +17,7 @@
     {{- $entry := index $switch $lang -}}
     <a
         href="{{ $entry.url }}"
-        class="rounded-full text-center hover:no-underline {{ $langButtonSize }}
+        class="rd-full text-center hover:no-underline {{ $langButtonSize }}
           bg-neutral/10 border-1 border-[var(--text-color)] border-solid
           bg-[var(--block-background-color)]
           flex items-center justify-center"
diff --git a/layouts/_partials/scripts.html b/layouts/_partials/scripts.html
index 6ad03632..f7e9c36b 100644
--- a/layouts/_partials/scripts.html
+++ b/layouts/_partials/scripts.html
@@ -1,3 +1,12 @@
+<!-- Theme Switch -->
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+    const themeSelect = document.getElementById('theme-select')
+    themeSelect.value = localStorage.getItem('geedeapro.theme')
+    themeSelect.onchange = () => switchTheme(themeSelect.value, true)
+})
+</script>
+
 <!-- global JS -->
 {{ $commonJS := slice
   (resources.Get "js/tooltip.js")
diff --git a/layouts/_partials/scripts/libra-js.html b/layouts/_partials/scripts/libra-js.html
deleted file mode 100644
index 95e121ed..00000000
--- a/layouts/_partials/scripts/libra-js.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<script type="module">
-document.addEventListener('DOMContentLoaded', async () => {
-  const { default: LightBox } = await import('/js/libra.min.js');
-  const lightbox = new LightBox({ offset: { x: -8, y: -80 } });
-});
-</script>
diff --git a/layouts/_partials/scripts/toc-js.html b/layouts/_partials/scripts/toc-js.html
deleted file mode 100644
index 110f2357..00000000
--- a/layouts/_partials/scripts/toc-js.html
+++ /dev/null
@@ -1,41 +0,0 @@
-{{ if .Params.toc }}
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-  const toc = document.getElementById('toc');
-  if (!toc) return;
-
-  const headings = document.querySelectorAll('h2, h3');
-  const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      if (!entry.isIntersecting) return;
-
-      const id = entry.target.id;
-      const tocLink = toc.querySelector(`a[href="#${id}"]`);
-      if (!tocLink) return;
-
-      const listItem = tocLink.parentElement;
-      const isH2 = entry.target.tagName === 'H2';
-
-      // Clear all active states when a new H2 is encountered
-      if (isH2) {
-        toc.querySelectorAll('li.active').forEach(el => el.classList.remove('active'));
-      }
-
-      // Set current item as active
-      listItem.classList.add('active');
-
-      // If this is an H3, find and activate its parent H2
-      if (!isH2) {
-        const parentH2Item = listItem.closest('ul').previousElementSibling?.closest('li');
-        if (parentH2Item) parentH2Item.classList.add('active');
-      }
-    });
-  }, {
-    rootMargin: '0px 0px -50% 0px',
-    threshold: 0.5
-  });
-
-  headings.forEach(heading => observer.observe(heading));
-});
-</script>
-{{ end }}
diff --git a/uno.config.js b/uno.config.js
index eed0e5fb..2ebeaed1 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -14,9 +14,7 @@ export default defineConfig({
   },
   presets: [
     presetAttributify(),
-    presetWind3({
-      dark: 'media'
-    })
+    presetWind3()
   ],
   theme: {
     colors: {