FIX theme toggler CHANGE image optimization ADD custom markdown image rendering

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

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,6 +480,7 @@ img {
   height: auto;
   margin: auto;
   object-fit: contain;
+  border-radius: 6px;
 }
 
 .avatar {
@@ -480,3 +488,10 @@ img {
   border: 3px solid {{ .Site.Params.color.primary }};
   object-fit: cover;
 }
+
+.caption {
+  text-align: center;
+  color: gray;
+  font-size: small;
+  margin: 0px;
+}

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

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

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

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>

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

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

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");

static/js/scroll.js

@@ -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");
-      }
-    });
-  }
-}

static/js/theme.js

@@ -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);
-  });
-}