From 07f46720f8b83c3517a1448a0e109c6ba43c4a63 Mon Sep 17 00:00:00 2001
From: Hoernschen <julian.hoernschemeyer@mailbox.org>
Date: Mon, 15 Jan 2024 22:55:39 +0100
Subject: [PATCH] FIX theme toggler CHANGE image optimization ADD custom
 markdown image rendering

---
 assets/build/images.sh                     |  4 +--
 assets/scss/index.scss                     | 19 ++++++++--
 layouts/_default/_markup/render-image.html | 15 ++++++++
 layouts/_default/single.html               |  7 ----
 layouts/partials/components/image.html     |  5 ++-
 layouts/partials/head.html                 |  2 --
 layouts/partials/header.html               |  2 +-
 layouts/partials/hero.html                 |  2 +-
 static/js/index.js                         | 41 ++++++++++++++++++++++
 static/js/scroll.js                        | 16 ---------
 static/js/theme.js                         | 27 --------------
 11 files changed, 81 insertions(+), 59 deletions(-)
 create mode 100644 layouts/_default/_markup/render-image.html
 delete mode 100644 static/js/scroll.js
 delete mode 100644 static/js/theme.js

diff --git a/assets/build/images.sh b/assets/build/images.sh
index 515e623..9689030 100755
--- a/assets/build/images.sh
+++ b/assets/build/images.sh
@@ -15,7 +15,7 @@ shopt -s globstar
 
 # Resize
 sizes=(320 640 960 1280)
-for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
+for FILE in public/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
     DIR=$(dirname "$FILE")
     NAME=$(basename "$FILE" | cut -d. -f1)
     EXTENSION=$(basename "$FILE" | cut -d. -f2)
@@ -25,7 +25,7 @@ for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
 done
 
 # Web Optimized Formats
-for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png|gif); do 
+for FILE in public/**/*.@(jpg|jpeg|tif|tiff|png|gif); do 
     convert $PARAMS "$FILE" "${FILE}".webp;
     convert $PARAMS "$FILE" "${FILE}".avif;
 done
\ No newline at end of file
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
index dd4e0a9..669108f 100644
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@@ -161,6 +161,13 @@ a {
   z-index: 10;
 }
 
+#theme-toggler {
+  border: none;
+  background: inherit;
+  color: {{ .Site.Params.color.secondary }};
+  cursor: pointer;
+}
+
 /* Footer */
 
 .footer {
@@ -365,7 +372,7 @@ main > .content {
 }
 
 .hero > .content > .image {
-  max-width: 200px;
+  max-width: 150px;
 }
 
 .hero > .description {
@@ -397,7 +404,7 @@ main > .content {
   border-bottom: 3px solid {{ .Site.Params.color.primary }};
 }
 
-.hero > .content > div {
+.hero > .content > .heading {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
@@ -473,10 +480,18 @@ img {
   height: auto;
   margin: auto;
   object-fit: contain;
+  border-radius: 6px;
 }
 
 .avatar {
   border-radius: 50%;
   border: 3px solid {{ .Site.Params.color.primary }};
   object-fit: cover;
+}
+
+.caption {
+  text-align: center;
+  color: gray;
+  font-size: small;
+  margin: 0px;
 }
\ No newline at end of file
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
new file mode 100644
index 0000000..debb86f
--- /dev/null
+++ b/layouts/_default/_markup/render-image.html
@@ -0,0 +1,15 @@
+{{ $caption := .Title }}
+{{ $alt := .Text }}
+
+{{ $img := .Page.Resources.GetMatch .Destination }}
+{{ if not $img }}
+  {{ $img = resources.Get .Destination }}
+  {{ if not $img }}
+    {{ $img := resources.GetRemote .Destination | resources.Copy (path.Join "images" (path.Base .Destination)) }}
+  {{ end }}
+{{ end }}
+
+{{ with $img }}
+  {{ partial "components/image.html" (dict "url" .RelPermalink "alt" $alt "width" .Width "height" .Height) }}
+  <p class="caption">{{ $caption }}</p>
+{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6a1c401..2400692 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,11 +1,4 @@
 {{ define "main" }}
-    {{ with .Params.image }}
-        {{ if .url }}
-            <img class="coverimage" src="{{ .url }}" alt="{{ .alt }}" />
-        {{ else }}
-            <img class="coverimage" src="{{ . }}" />
-        {{ end }}
-    {{ end }}
     <div class="content">
         {{ with .Title }}
             <div class="title">
diff --git a/layouts/partials/components/image.html b/layouts/partials/components/image.html
index a933517..fb76fee 100644
--- a/layouts/partials/components/image.html
+++ b/layouts/partials/components/image.html
@@ -1,5 +1,5 @@
 <!--
-type: string - default
+type: string - default empty
 url: string
 alt: string
 width: int
@@ -9,6 +9,7 @@ height: int
 {{ $ext := path.Ext .url }}
 {{ $name := path.Base (replace .url $ext "") }}
 {{ $dir := path.Dir .url }}
+{{ $mediaWidthControl := "(min-width: 1240px) 50px, 70vw" }}
 
 <picture>
   <source 
@@ -19,6 +20,7 @@ height: int
       {{ end }}
       {{ .url }}.avif {{ .width }}w
     "
+    sizes="{{ $mediaWidthControl }}"
   />
   <source 
     type="image/webp"
@@ -28,6 +30,7 @@ height: int
       {{ end }}
       {{ .url }}.webp {{ .width }}w
     "
+    sizes="{{ $mediaWidthControl }}"
   />
   <img 
     class="{{ .type }}" 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 99db806..d501ff4 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -28,6 +28,4 @@
   {{ end }}
   <link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
   <script src="/js/index.js"></script>
-  <script src="/js/theme.js"></script>
-  <script src="/js/scroll.js"></script>
 </head>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 47615fa..005446d 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -9,7 +9,7 @@
           {{ end }}
         {{ end }}
       </div>
-      <a id="theme-toggler" href="#"><i class="icon-adjust"></i></a>
+      <button id="theme-toggler"><i class="icon-adjust"></i></button>
     </div>
   </header>
 {{ end }}
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
index a89efcb..b424dc2 100644
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@@ -18,7 +18,7 @@ content: string
             {{ partial "components/image.html" .avatar }}
           </div>
         {{ end }}
-        <div>
+        <div class="heading">
           <h1>{{ .greeting }}</h1>
           <h3>{{ .introduction }}</h3>
           {{ if .social }}
diff --git a/static/js/index.js b/static/js/index.js
index 3927ec2..dcb690f 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,3 +1,44 @@
+window.onload = (event) => {
+  const btn = document.getElementById("theme-toggler");
+  const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
+  const currentTheme = sessionStorage.getItem("theme");
+
+  if (currentTheme == "dark") {
+    document.body.classList.toggle("dark");
+  } else if (currentTheme == "light") {
+    document.body.classList.toggle("light");
+    btn.classList.toggle("rotate-180");
+  }
+
+  btn.addEventListener("click", function () {
+    btn.classList.toggle("rotate-180");
+    var theme = "dark";
+    if (darkTheme.matches) {
+      document.body.classList.toggle("light");
+      theme = document.body.classList.contains("light") ? "light" : "dark";
+    } else {
+      document.body.classList.toggle("dark");
+      theme = document.body.classList.contains("dark") ? "dark" : "light";
+    }
+    sessionStorage.setItem("theme", theme);
+  });
+
+  if ((document.documentElement.scrollHeight / window.screen.availHeight ) > 1.5) {
+    window.addEventListener("scroll", () => {
+      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      var scrolled = (winScroll / height) * 100;
+      document.getElementById('progress').style.width = scrolled + "%";
+
+      const toTop = document.getElementById('totop');
+
+      if ((window.scrollY > 0 && !toTop.classList.contains("show")) || (window.scrollY <= 0 && toTop.classList.contains("show"))) {
+        toTop.classList.toggle("show");
+      }
+    });
+  }
+}
+
 function toggleTableOfContent(e) {
   const toc = document.getElementById('TableOfContents');
   toc.classList.toggle("show");
diff --git a/static/js/scroll.js b/static/js/scroll.js
deleted file mode 100644
index 6fd7033..0000000
--- a/static/js/scroll.js
+++ /dev/null
@@ -1,16 +0,0 @@
-window.onload = (event) => {
-  if ((document.documentElement.scrollHeight / window.screen.availHeight ) > 1.5) {
-    window.addEventListener("scroll", () => {
-      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
-      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-      var scrolled = (winScroll / height) * 100;
-      document.getElementById('progress').style.width = scrolled + "%";
-
-      const toTop = document.getElementById('totop');
-
-      if ((window.scrollY > 0 && !toTop.classList.contains("show")) || (window.scrollY <= 0 && toTop.classList.contains("show"))) {
-        toTop.classList.toggle("show");
-      }
-    });
-  }
-}
\ No newline at end of file
diff --git a/static/js/theme.js b/static/js/theme.js
deleted file mode 100644
index 20ac14e..0000000
--- a/static/js/theme.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class
-
-window.onload = (event) => {
-  const btn = document.getElementById("theme-toggler");
-  const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
-  const currentTheme = localStorage.getItem("theme");
-
-  if (currentTheme == "dark") {
-    document.body.classList.toggle("dark");
-  } else if (currentTheme == "light") {
-    document.body.classList.toggle("light");
-    btn.classList.toggle("rotate-180");
-  }
-
-  btn.addEventListener("click", function () {
-    btn.classList.toggle("rotate-180");
-    var theme = "dark";
-    if (darkTheme.matches) {
-      document.body.classList.toggle("light");
-      theme = document.body.classList.contains("light") ? "light" : "dark";
-    } else {
-      document.body.classList.toggle("dark");
-      theme = document.body.classList.contains("dark") ? "dark" : "light";
-    }
-    localStorage.setItem("theme", theme);
-  });
-}
\ No newline at end of file