FIX theme toggle

layouts/partials/components/icon.html

@@ -0,0 +1,6 @@
+<!--
+type: string - default: link
+text: string (optional)
+url: string
+-->
+<a href="{{ .url }}"><i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>{{ if .text }} {{ .text }}{{ end }}</a>

layouts/partials/components/image.html

@@ -3,5 +3,8 @@ type: string - default
 url: string
 alt: string
 -->
+
 {{ $avatar := "avatar"}}
-<img class="{{if eq .type $avatar}} avatar {{end}}" alt="{{ .alt }}" src="{{ .url }}">
+<img class="{{if eq .type $avatar}} avatar {{end}}" alt="{{ .alt }}" src="{{ .url }}">
+
+{{/*  https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/  */}}

layouts/partials/footer.html

@@ -3,7 +3,7 @@
     {{ if .social }}
       <div class="social">
         {{ range .social }}
-          <a href="{{ .url }}"><i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>{{ if .text }}{{ .text }}{{ end }}</a>
+          {{ partial "components/icon.html" . }}
         {{ end }}
       </div>
     {{ end }}

layouts/partials/head.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
   <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="color-scheme" content="dark light">
   <title>{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}</title>
   {{ block "opengraph" . }}
     <meta property="og:type" content="website" />
@@ -39,6 +40,6 @@
     {{ $index := $template | resources.ExecuteAsTemplate "css/index.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
     <link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
   {{ end }}
-  <link id="dark-mode-theme" rel="stylesheet" href="/css/dark.css">
   <link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
+  <script src="/js/theme.js"></script>
 </head>

layouts/partials/header.html

@@ -1,13 +1,15 @@
 {{ with .Site.Params.header }}
-  <header id="header" class="header">
-    <a class="home" href="/#"><i class="icon-home"></i></a>
-    <div class="items">
-      {{ if .links }}
-        {{ range .links }}
-          <a class="item" href="{{ .url }}">{{ .text }}</a>
+  <header id="header">
+    <div class="header">
+      <a class="home" href="/#"><i class="icon-home"></i></a>
+      <div class="items">
+        {{ if .links }}
+          {{ range .links }}
+            <a class="item" href="{{ .url }}">{{ .text }}</a>
+          {{ end }}
         {{ end }}
-      {{ end }}
+      </div>
+      <a id="theme-toggler" href="#"><i class="icon-adjust"></i></a>
     </div>
-    <a href="/#"><i class="icon-adjust"></i></a>
   </header>
 {{ end }}

layouts/partials/hero.html

@@ -4,7 +4,7 @@ odd: 0 or 1
 hero:
   avatar: image
   greeting: string
-  social: array
+  social: icon
     type: string
     url: string
 content: string
@@ -19,6 +19,13 @@ content: string
         <div>
           <h1>{{ .greeting }}</h1>
           <h3>{{ .introduction }}</h3>
+          {{ if .social }}
+            <div class="social">
+              {{ range .social }}
+                {{ partial "components/icon.html" . }}
+              {{ end }}
+            </div>
+          {{ end }}
         </div>
       </div>
     {{ end }}