From f9ee24248ef264a85e4a3d5ef6db42f848dcb347 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Avijit=20=F0=9F=9A=80?= <526avijit@gmail.com>
Date: Fri, 4 Jun 2021 16:43:45 +0200
Subject: [PATCH] Fix theme switching and templating

---
 themes/gokarna/layouts/_default/baseof.html |  6 +-
 themes/gokarna/layouts/_default/list.html   | 52 +++++++----------
 themes/gokarna/layouts/_default/single.html | 28 +++------
 themes/gokarna/layouts/_default/terms.html  | 42 +++++--------
 themes/gokarna/layouts/partials/head.html   |  4 +-
 themes/gokarna/layouts/partials/header.html |  4 +-
 themes/gokarna/static/css/dark.css          | 21 +++++++
 themes/gokarna/static/css/main.css          | 38 +++++-------
 themes/gokarna/static/js/main.js            | 65 +++++++++++++--------
 9 files changed, 125 insertions(+), 135 deletions(-)
 create mode 100644 themes/gokarna/static/css/dark.css
diff --git a/themes/gokarna/layouts/_default/baseof.html b/themes/gokarna/layouts/_default/baseof.html
index d863ec6..d663ad3 100644
--- a/themes/gokarna/layouts/_default/baseof.html
+++ b/themes/gokarna/layouts/_default/baseof.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html class="gokarna-dark">
+<html>
     {{- partial "head.html" . -}}
     <body>
         {{- partial "header.html" . -}}
-        <div id="content">
+        <main id="content">
         {{- block "main" . }}{{- end }}
-        </div>
+        </main>
         {{- partial "footer.html" . -}}
     </body>
 </html>
diff --git a/themes/gokarna/layouts/_default/list.html b/themes/gokarna/layouts/_default/list.html
index d735015..f708129 100644
--- a/themes/gokarna/layouts/_default/list.html
+++ b/themes/gokarna/layouts/_default/list.html
@@ -1,38 +1,26 @@
-<!DOCTYPE html>
-<html>
-{{- partial "head.html" . -}}
+{{ define "main" }}        
+<!-- TODO: @yash Paginate this if items more than n -->
+<div class="container list-posts">
 
-<body>
-    {{- partial "header.html" . -}}
-    <main id="content">
+    <h2 class="list-title">{{ .Name }}</h2>
 
-        <!-- TODO: @yash Paginate this if items more than n -->
-        <div class="container list-posts">
+    {{ $posts := where .Data.Pages "Params.type" "post" }}
+    {{ range $posts.GroupByDate "2006" }}
 
-            <h2 class="list-title">{{ .Name }}</h2>
+    <h2 class="posts-year">{{ .Key }}</h2>
 
-            {{ $posts := where .Data.Pages "Params.type" "post" }}
-            {{ range $posts.GroupByDate "2006" }}
+    <!-- TODO: @yash The month param should be optional -->
+    {{ range .Pages.GroupByDate "January" }}
+    <h4 class="posts-month">{{ .Key }}</h4>
+    {{- range .Pages  -}}
+    <article class="post-title">
+        <a href="{{ .RelPermalink }}" class="post-link">{{ .Title }}</a>
+        <span class="post-date">{{ dateFormat "January 2, 2006" .Date }}</span>
+    </article>
 
-            <h2 class="posts-year">{{ .Key }}</h2>
+    {{ end }}
+    {{ end }}
+    {{ end }}
 
-            <!-- TODO: @yash The month param should be optional -->
-            {{ range .Pages.GroupByDate "January" }}
-            <h4 class="posts-month">{{ .Key }}</h4>
-            {{- range .Pages  -}}
-            <article class="post-title">
-                <a href="{{ .RelPermalink }}" class="post-link">{{ .Title }}</a>
-                <span class="post-date">{{ dateFormat "January 2, 2006" .Date }}</span>
-            </article>
-
-            {{ end }}
-            {{ end }}
-            {{ end }}
-
-        </div>
-
-    </main>
-    {{- partial "footer.html" . -}}
-</body>
-
-</html>
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/themes/gokarna/layouts/_default/single.html b/themes/gokarna/layouts/_default/single.html
index 1e68a74..d673775 100644
--- a/themes/gokarna/layouts/_default/single.html
+++ b/themes/gokarna/layouts/_default/single.html
@@ -1,21 +1,9 @@
-<!DOCTYPE html>
-<html>
-{{- partial "head.html" . -}}
+{{ define "main" }}
+    {{ if eq .Type "post" }}
+    {{- partial "post.html" . -}}
+    {{ end }}
 
-<body>
-    {{- partial "header.html" . -}}
-    <main id="content">
-
-        {{ if eq .Type "post" }}
-        {{- partial "post.html" . -}}
-        {{ end }}
-
-        {{ if eq .Type "singles" }}
-        {{- partial "single.html" . -}}
-        {{ end }}
-
-    </main>
-    {{- partial "footer.html" . -}}
-</body>
-
-</html>
+    {{ if eq .Type "singles" }}
+    {{- partial "single.html" . -}}
+    {{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/themes/gokarna/layouts/_default/terms.html b/themes/gokarna/layouts/_default/terms.html
index 2ad490b..1c400fc 100644
--- a/themes/gokarna/layouts/_default/terms.html
+++ b/themes/gokarna/layouts/_default/terms.html
@@ -1,29 +1,17 @@
-<!DOCTYPE html>
-<html>
-{{- partial "head.html" . -}}
+{{ define "main" }}
+<div class="container tags-list">
 
-<body>
-    {{- partial "header.html" . -}}
-    <main id="content">
+    <h2 class="list-title">Tags</h2>
+    <ul class="post-tags">
+        {{ range $key, $value := .Data.Terms.ByCount }}
+        <li class="post-tag">
+            <a href="/tags/{{ $value.Name | urlize }}/">
+                <div class="tag-name">{{ $value.Name }}</div>
+                <div class="tag-posts-count">{{ $value.Count }}</div>
+            </a>
+        </li>
+        {{ end }}
+    </ul>
 
-        <div class="container tags-list">
-
-            <h2 class="list-title">Tags</h2>
-            <ul class="post-tags">
-                {{ range $key, $value := .Data.Terms.ByCount }}
-                <li class="post-tag">
-                    <a href="/tags/{{ $value.Name | urlize }}/">
-                        <div class="tag-name">{{ $value.Name }}</div>
-                        <div class="tag-posts-count">{{ $value.Count }}</div>
-                    </a>
-                </li>
-                {{ end }}
-            </ul>
-
-        </div>
-
-    </main>
-    {{- partial "footer.html" . -}}
-</body>
-
-</html>
+</div>
+{{ end }}
diff --git a/themes/gokarna/layouts/partials/head.html b/themes/gokarna/layouts/partials/head.html
index 8e31968..4b34c48 100644
--- a/themes/gokarna/layouts/partials/head.html
+++ b/themes/gokarna/layouts/partials/head.html
@@ -2,11 +2,11 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    <link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
         integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" type="text/css" href="/css/main.css">
-    <script src="/js/jquery-3.6.0.slim.min.js"></script>
+    <link disabled id="dark-theme" rel="stylesheet" href="/css/dark.css">
     <script src="/js/main.js"></script>
     {{ $title := print .Site.Title " | " .Title }}
     {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
diff --git a/themes/gokarna/layouts/partials/header.html b/themes/gokarna/layouts/partials/header.html
index f39154e..61427df 100644
--- a/themes/gokarna/layouts/partials/header.html
+++ b/themes/gokarna/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<header class="header gokarna-dark">
+<header class="header">
     <nav class="header-nav">
 
         <div class="avatar">
@@ -33,7 +33,7 @@
             </div>
             -->
             <span class="nav-icons-divider"></span>
-            <div class="nav-link" id="dark-light-theme-toggle">
+            <div class="nav-link" id="dark-theme-toggle">
                 <a>
                     <span class="fa fa-moon-o"></span>
                 </a>
diff --git a/themes/gokarna/static/css/dark.css b/themes/gokarna/static/css/dark.css
new file mode 100644
index 0000000..05fc47c
--- /dev/null
+++ b/themes/gokarna/static/css/dark.css
@@ -0,0 +1,21 @@
+html {
+  background: #171717 !important;
+  color: white !important;
+}
+/* html {
+  filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
+  -webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
+} */
+.header {
+  background-color: #1b1c1d !important;
+  color: white !important;
+}
+/* body {
+  background-color: #fff !important;
+} */
+/* img,
+video,
+body * [style*="background-image"] {
+  filter: hue-rotate(180deg) contrast(100%) invert(100%);
+  -webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%); */
+/* } */
diff --git a/themes/gokarna/static/css/main.css b/themes/gokarna/static/css/main.css
index 456bc85..d6e13e3 100644
--- a/themes/gokarna/static/css/main.css
+++ b/themes/gokarna/static/css/main.css
@@ -1,36 +1,24 @@
 html {
-  font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
-}
-html.gokarna-dark {
-  background: #252525;
-  color: white;
-}
-html.gokarna-light {
   background: white;
   color: black;
+  font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
 }
 
 /* HEADER */
 .header {
+  background-color: #bbb;
+  color: black;
   height: 70px;
   left: 0;
   position: fixed;
   top: 0;
-  -ms-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  -webkit-transition: all 0.5s ease-out;
-  -o-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
+  -ms-transition: height 0.5s ease-out;
+  -moz-transition: height 0.5s ease-out;
+  -webkit-transition: height 0.5s ease-out;
+  -o-transition: height 0.5s ease-out;
+  transition: height 0.5s ease-out;
   width: 100%;
 }
-.header.gokarna-dark {
-  background-color: #1b1c1d;
-  color: white;
-}
-.header.gokarna-light {
-  background-color: #bbb;
-  color: black;
-}
 .header.small {
   height: 50px;
 }
@@ -41,11 +29,11 @@ html.gokarna-light {
 .header .header-nav {
   height: 50px;
   margin-top: 10px;
-  -ms-transition: all 0.5s ease-out;
-  -moz-transition: all 0.5s ease-out;
-  -webkit-transition: all 0.5s ease-out;
-  -o-transition: all 0.5s ease-out;
-  transition: all 0.5s ease-out;
+  -ms-transition: margin 0.5s ease-out;
+  -moz-transition: margin 0.5s ease-out;
+  -webkit-transition: margin 0.5s ease-out;
+  -o-transition: margin 0.5s ease-out;
+  transition: margin 0.5s ease-out;
 }
 .header .header-nav.small {
   margin-top: 0;
diff --git a/themes/gokarna/static/js/main.js b/themes/gokarna/static/js/main.js
index 887fb73..54886af 100644
--- a/themes/gokarna/static/js/main.js
+++ b/themes/gokarna/static/js/main.js
@@ -1,29 +1,46 @@
-window.onload = () => {
-    const GOKARNA_LIGHT_THEME = 'gokarna-light';
-    const GOKARNA_DARK_THEME = 'gokarna-dark';
-    const themeClassSwitcherMap = {
-        [GOKARNA_LIGHT_THEME]: GOKARNA_DARK_THEME,
-        [GOKARNA_DARK_THEME]: GOKARNA_LIGHT_THEME
-    };
+document.addEventListener('DOMContentLoaded', ready, false);
 
-    document.getElementById('dark-light-theme-toggle').addEventListener('click', () => {
-        const currentTheme = document.querySelector('html').classList[0];
-        const themeToSwitchTo = themeClassSwitcherMap[currentTheme];
-        document.querySelectorAll(`.${currentTheme}`).forEach((element) => {
-            element.classList.add(themeToSwitchTo);
-            element.classList.remove(currentTheme);
-        });
-    });
+const THEME_PREF_STORAGE_KEY = "theme-preference";
+const GOKARNA_LIGHT_THEME = 'gokarna-light';
+const GOKARNA_DARK_THEME = 'gokarna-dark';
+let toggleIcon = '';
 
-    window.addEventListener('scroll', () => {
-        if (window.scrollY > 100) {
-            document.querySelectorAll('.header, .header-nav').forEach(function(item) {
-                item.classList.add('small')
-            })
-        } else {
-            document.querySelectorAll('.header, .header-nav').forEach(function(item) {
-                item.classList.remove('small')
-            })
+function ready() {
+    toggleIcon = document.querySelector('#dark-theme-toggle span');
+    // TODO: Fetch programatically by user's system preference
+    const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) || GOKARNA_LIGHT_THEME;
+    setTheme(savedTheme);
+    document.getElementById('dark-theme-toggle').addEventListener('click', () => {
+        if (toggleIcon.className === "fa fa-moon-o") {
+            setTheme(GOKARNA_DARK_THEME);
+        } else if (toggleIcon.className === "fa fa-sun-o") {
+            setTheme(GOKARNA_LIGHT_THEME);
         }
     });
 }
+
+window.addEventListener('scroll', () => {
+    if (window.scrollY > 100) {
+        document.querySelectorAll('.header, .header-nav').forEach(function(item) {
+            item.classList.add('small')
+        })
+    } else {
+        document.querySelectorAll('.header, .header-nav').forEach(function(item) {
+            item.classList.remove('small')
+        })
+    }
+});
+
+function setTheme(themeToSet) {
+
+    const darkThemeCss = document.getElementById("dark-theme");
+    localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);
+    if (themeToSet === GOKARNA_DARK_THEME) {
+        darkThemeCss.disabled = false;
+        toggleIcon.className = "fa fa-sun-o";
+    } else if(themeToSet === GOKARNA_LIGHT_THEME) {
+        darkThemeCss.disabled = true;
+        toggleIcon.className = "fa fa-moon-o";
+    }
+}
+
