automatically resize/optimize images via Hugo processing

layouts/_default/list.html

@@ -1,19 +1,19 @@
 {{ partial "header.html" . }}
 {{ partial "blog-header.html" . }}
     <main id="archive">
-      {{ range (where .Site.RegularPages "Type" "notes").GroupByDate "2006" }}
+      {{- range (where .Site.RegularPages "Type" "notes").GroupByDate "2006" }}
       <section class="year">
         <h2>{{ .Key }}</h2>
         <ul>
-        {{ range .Pages }}
+        {{- range .Pages }}
           <li>
             <div class="date">{{ .Date.Format "Jan 2" }}</div>
             <div class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></div>
           </li>
-        {{ end }}
+        {{- end }}
         </ul>
       </section>
-      {{ end }}
+      {{- end }}
     </main>
 {{ partial "blog-footer.html" . }}
 {{ partial "footer.html" . }}

layouts/_default/single.html

@@ -5,24 +5,19 @@
         <div id="info">
           <h1 itemprop="name headline" class="p-name"><a href="{{ .Permalink }}" itemprop="url" class="u-url no-underline">{{ .Title }}</a></h1>
           <div id="meta">
-            by <span itemprop="author" itemscope itemtype="http://schema.org/Person" class="p-author"><a itemprop="url" rel="me author" href="{{ .Site.BaseURL }}" title="Jake Jarvis" class="h-card no-underline"><span itemprop="name" class="p-name">Jake Jarvis</span></a></span> &middot; 
-            <a class="no-underline" href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}"><time itemprop="datePublished" content="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="dt-published">{{ .Date.Format "January 2, 2006" }}</time></a>
-            <!-- {{ if lt 1 .WordCount }}{{ .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }} &middot; -->
-            <!-- {{ .ReadingTime }} minute read -->
-            <!-- &middot; <a class="no-underline" href="{{ .Permalink }}#commento">Comments</a> -->
-            {{ with .File }}&middot; <a class="no-underline" href="https://github.com/jakejarvis/jarv.is/blob/master/content/{{ .Path }}" title="Edit this page on GitHub" target="_blank" rel="noopener nofollow noreferrer">Improve Post</a>{{ end }}
+            by <span itemprop="author" itemscope itemtype="http://schema.org/Person" class="p-author"><a itemprop="url" rel="me author" href="{{ .Site.BaseURL }}" title="Jake Jarvis" class="h-card no-underline"><span itemprop="name" class="p-name">Jake Jarvis</span></a></span>
+            &middot; <a class="no-underline" href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}"><time itemprop="datePublished" content="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="dt-published">{{ .Date.Format "January 2, 2006" }}</time></a>
+            &middot; <a class="no-underline" href="https://github.com/jakejarvis/jarv.is/blob/master/content/{{ .File.Path }}" title="Edit this page on GitHub" target="_blank" rel="noopener nofollow noreferrer">Improve Post</a>
             <div id="tags">
-            {{ with .Params.tags }}{{ if ge (len .) 1 }}
-              {{ range . }}<span itemprop="keywords" class="tag p-category"><!--<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">-->{{ . }}<!--</a>--></span>
-              {{ end }}
-            {{ end }}{{ end }}
+            {{- range .Params.tags }}
+              <span itemprop="keywords" class="tag p-category">{{ . }}</span>
+            {{- end }}
             </div>
           </div>
         </div>
         <div id="content" itemprop="articleBody" class="e-content">
 {{ .Content }}
         </div>
-        <!-- <div id="commento"></div> -->
       </article>
     </main>
 {{ partial "blog-footer.html" . }}

layouts/partials/blog-footer.html

@@ -2,5 +2,4 @@
       <div id="copyright">Posts licensed under <a class="no-underline" href="https://creativecommons.org/licenses/by/4.0/" title="Creative Commons Attribution 4.0 International" target="_blank" rel="noopener noreferrer nofollow">CC-BY-4.0</a>, <a class="no-underline" href="https://web.archive.org/web/20010501000000*/jakejarvis.com" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener noreferrer nofollow">2001 &ndash;</a> {{ now.Format "2006" }}.</div>
       <div id="panda"><a class="no-underline" href="https://nationalzoo.si.edu/webcams/panda-cam" title="Live Panda Party!!!11" target="_blank" rel="noopener noreferrer nofollow"><span>&#x1F43C;</span></a></div>
       <div id="poweredby"><a class="no-underline" href="https://gohugo.io/" title="Powered by Hugo" id="hugo" target="_blank" rel="noopener noreferrer nofollow">Powered by Hugo.</a> <a class="no-underline" href="https://github.com/jakejarvis/jarv.is" title="View Source on GitHub" id="source" target="_blank" rel="noopener noreferrer">View source.</a></div>
-    </footer>
-    {{ if .IsPage }}<!-- <script async defer src="https://comments.jarv.is/js/commento.js"></script> -->{{ end }}
+    </footer>

layouts/partials/footer.html

@@ -1,5 +1,5 @@
 {{ if eq hugo.Environment "production" }}{{ partial "stats.html" . }}{{ end }}
-  </body>
+</body>
 </html>
 
 {{"<!--" | safeHTML}} {{ hugo.Environment }} {{"-->" | safeHTML}}

layouts/partials/stats.html

@@ -1,12 +1,12 @@
     <script>
-      (function(f, a, t, h, o, m){
-        a[h]=a[h]||function(){
-          (a[h].q=a[h].q||[]).push(arguments)
+      (function(j, a, r, v, i, s){
+        a[v]=a[v]||function(){
+          (a[v].q=a[v].q||[]).push(arguments)
         };
-        o=f.createElement('script'),
-        m=f.getElementsByTagName('script')[0];
-        o.async=1; o.src=t; o.id='fathom-script';
-        m.parentNode.insertBefore(o,m)
+        i=j.createElement('script'),
+        s=j.getElementsByTagName('script')[0];
+        i.async=1; i.src=r; i.id='fathom-script';
+        s.parentNode.insertBefore(i,s)
       })(document, window, 'https://s.jarv.is/tracker.js', 'fathom');
       fathom('set', 'siteId', 'DYCXU');
       fathom('trackPageview');

layouts/shortcodes/image.html

@@ -1,14 +1,40 @@
-{{ if .Get "caption"}}
+<!-- Automatic resizing for HiDPI/retina images -->
+<!-- https://gohugo.io/content-management/image-processing/ -->
+
+{{- $original := .Page.Resources.GetMatch (.Get "src") -}}
+{{- .Scratch.Set "image" $original -}}
+
+<!-- TODO: automatically pull max-width of page -->
+{{- $maxWidth := 910 -}}
+
+{{- if .Get "width" }}
+  {{- $inputWidth := (int (.Get "width")) -}}
+  {{- $retinaWidth := (mul $inputWidth 2) -}}
+
+  {{- if gt $original.Width $retinaWidth -}}
+    {{- $finalWidth := (printf "%dx" $retinaWidth ) -}}
+    {{- .Scratch.Set "image" ($original.Resize $finalWidth) -}}
+  {{- end -}}
+{{- else -}}
+  {{- $inputWidth := $maxWidth -}}
+  {{- if gt $original.Width 1820 -}}
+    {{- .Scratch.Set "image" ($original.Resize "1820x") -}}
+  {{- end -}}
+{{- end -}}
+
+{{- $image := .Scratch.Get "image" -}}
+
+{{- if .Get "caption" -}}
 <figure>
   <picture>
-{{ else }}
+{{- else -}}
 <p>
-{{ end }}
-<img src="{{ .Get "src" }}" alt="{{ .Get "alt" }}"{{ if .Get "width"}} width="{{ .Get "width" }}"{{ end }}{{ if .Get "caption"}} title="{{ .Get "caption"}}"{{ end }}>
-{{ if .Get "caption"}}
+{{- end -}}
+<img src="{{ $image.Permalink }}"{{ if .Get "alt" }} alt="{{ .Get "alt" }}"{{ end }}{{ if .Get "width" }} width="{{ .Get "width" }}"{{ end }}{{ if .Get "caption" }} title="{{ .Get "caption"}}"{{ end }}>
+{{- if .Get "caption" -}}
   </picture>
   <figcaption>{{ .Get "caption" }}</figcaption>
 </figure>
-{{ else }}
+{{- else -}}
 </p>
-{{ end }}
+{{- end -}}