hugo-bear-blog : support 'lastmod' and add darkmode toggle

archetypes/blog.md

@@ -1,6 +1,7 @@
 +++
 title = "{{ replace .Name "-" " " | title }}"
 date = "{{ .Date }}"
+lastmod = "{{ .Lastmod }}
 
 #
 # description is optional

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>
 

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 }}

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> 

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>

layouts/partials/script_bottom.html

@@ -0,0 +1,5 @@
+<script>
+    if (localStorage.getItem('dark-mode') === 'true') {
+        darkmode_enable()
+    }
+</script>

layouts/partials/style.html

@@ -126,48 +126,46 @@
     color: #8b6fcb;
   }
 
-  @media (prefers-color-scheme: dark) {
+  .dark-mode {
-    body {
       background-color: #333;
       color: #ddd;
     }
 
-    h1,
+  .dark-mode h1,
-    h2,
+  .dark-mode h2,
-    h3,
+  .dark-mode h3,
-    h4,
+  .dark-mode h4,
-    h5,
+  .dark-mode h5,
-    h6,
+  .dark-mode h6,
-    strong,
+  .dark-mode strong,
-    b {
+  .dark-mode b {
-      color: #eee;
+    color: #eee;
-    }
+  }
 
-    a {
+  .dark-mode a {
-      color: #8cc2dd;
+    color: #8cc2dd;
-    }
+  }
 
-    code {
+  .dark-mode code {
-      background-color: #777;
+    background-color: #777;
-    }
+  }
 
-    pre code {
+  .dark-mode pre code {
-      color: #ddd;
+    color: #ddd;
-    }
+  }
 
-    blockquote {
+  .dark-mode blockquote {
-      color: #ccc;
+    color: #ccc;
-    }
+  }
 
-    textarea,
+  .dark-mode textarea,
-    input {
+  .dark-mode input {
-      background-color: #252525;
+    background-color: #252525;
-      color: #ddd;
+    color: #ddd;
-    }
+  }
 
-    .helptext {
+  .dark-mode .helptext {
-      color: #aaa;
+    color: #aaa;
-    }
   }
 
 </style>