FIX theme toggler CHANGE image optimization ADD custom markdown image rendering

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