From e437c66e80924bc1bf0896fd524b753b70320f3b Mon Sep 17 00:00:00 2001
From: minoplhy <c@3qx.nl>
Date: Sat, 9 Mar 2024 13:27:57 +0700
Subject: [PATCH] hugo-bear-blog : support 'lastmod' and add darkmode toggle

---
 archetypes/blog.md                  |  1 +
 layouts/_default/baseof.html        |  2 +
 layouts/_default/single.html        |  6 +++
 layouts/partials/nav.html           |  3 ++
 layouts/partials/script.html        | 25 ++++++++++++
 layouts/partials/script_bottom.html |  5 +++
 layouts/partials/style.html         | 62 ++++++++++++++---------------
 7 files changed, 72 insertions(+), 32 deletions(-)
 create mode 100644 layouts/partials/script.html
 create mode 100644 layouts/partials/script_bottom.html

diff --git a/archetypes/blog.md b/archetypes/blog.md
index e4594c6..65388f7 100644
--- a/archetypes/blog.md
+++ b/archetypes/blog.md
@@ -1,6 +1,7 @@
 +++
 title = "{{ replace .Name "-" " " | title }}"
 date = "{{ .Date }}"
+lastmod = "{{ .Lastmod }}
 
 #
 # description is optional
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6bce2dc..d175160 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -16,6 +16,7 @@
   {{ end -}}
 
   {{- partial "style.html" . -}}
+  {{- partial "script.html" . -}}
 
   <!-- A partial to be overwritten by the user.
   Simply place a custom_head.html into
@@ -37,6 +38,7 @@
   <!-- A partial to be overwritten by the user.
   Simply place a custom_body.html into
   your local /layouts/partials-directory -->
+  {{- partial "script_bottom.html" -}}
   {{- partial "custom_body.html" . -}}
 </body>
 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 7d57351..1d79e4d 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -6,6 +6,12 @@
     <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
       {{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
     </time>
+    {{ if ne .Lastmod .Date }}
+      / <b>EDIT : 
+        <time datetime='{{ .Lastmod.Format "2006-01-02" }}'>
+        {{ .Lastmod.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
+        </time></b>
+    {{ end }}
   </i>
 </p>
 {{ end }}{{ end }}
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index f4fabed..a886161 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -5,3 +5,6 @@
 {{ with .Site.GetPage "/blog" }}
 <a href="{{ "blog" | relURL }}">Blog</a>
 {{ end }}
+<a id="dark-mode-button" onclick="darkmode()" >
+    <span>Toggle-Dark-Mode</span>
+  </a> 
\ No newline at end of file
diff --git a/layouts/partials/script.html b/layouts/partials/script.html
new file mode 100644
index 0000000..d6e5e63
--- /dev/null
+++ b/layouts/partials/script.html
@@ -0,0 +1,25 @@
+<script>
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('dark-mode') === null) {
+        localStorage.setItem('dark-mode', 'true');
+    }
+    
+    function darkmode() {
+    if (localStorage.getItem('dark-mode') === 'false') {
+        darkmode_enable();
+    } else if (localStorage.getItem('dark-mode') === null) {
+        darkmode_enable();
+    } else {
+        darkmode_disable();
+    }
+    }
+
+    function darkmode_enable()  {
+        document.body.classList.add("dark-mode");
+        localStorage.setItem('dark-mode', 'true');
+    }
+
+    function darkmode_disable() {
+        document.body.classList.remove("dark-mode");
+        localStorage.setItem('dark-mode', 'false');
+    }
+</script>
\ No newline at end of file
diff --git a/layouts/partials/script_bottom.html b/layouts/partials/script_bottom.html
new file mode 100644
index 0000000..7a2b18e
--- /dev/null
+++ b/layouts/partials/script_bottom.html
@@ -0,0 +1,5 @@
+<script>
+    if (localStorage.getItem('dark-mode') === 'true') {
+        darkmode_enable()
+    }
+</script>
\ No newline at end of file
diff --git a/layouts/partials/style.html b/layouts/partials/style.html
index 122a641..882360f 100644
--- a/layouts/partials/style.html
+++ b/layouts/partials/style.html
@@ -126,48 +126,46 @@
     color: #8b6fcb;
   }
 
-  @media (prefers-color-scheme: dark) {
-    body {
+  .dark-mode {
       background-color: #333;
       color: #ddd;
     }
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    strong,
-    b {
-      color: #eee;
-    }
+  .dark-mode h1,
+  .dark-mode h2,
+  .dark-mode h3,
+  .dark-mode h4,
+  .dark-mode h5,
+  .dark-mode h6,
+  .dark-mode strong,
+  .dark-mode b {
+    color: #eee;
+  }
 
-    a {
-      color: #8cc2dd;
-    }
+  .dark-mode a {
+    color: #8cc2dd;
+  }
 
-    code {
-      background-color: #777;
-    }
+  .dark-mode code {
+    background-color: #777;
+  }
 
-    pre code {
-      color: #ddd;
-    }
+  .dark-mode pre code {
+    color: #ddd;
+  }
 
-    blockquote {
-      color: #ccc;
-    }
+  .dark-mode blockquote {
+    color: #ccc;
+  }
 
-    textarea,
-    input {
-      background-color: #252525;
-      color: #ddd;
-    }
+  .dark-mode textarea,
+  .dark-mode input {
+    background-color: #252525;
+    color: #ddd;
+  }
 
-    .helptext {
-      color: #aaa;
-    }
+  .dark-mode .helptext {
+    color: #aaa;
   }
 
 </style>