images, deterministic caching

README.md

@@ -6,4 +6,8 @@ Some styling and general logic of my website, separated from content. No extra a
 cp themes/yrzam/init/hugo.yaml . # site config
 hugo new _index.md --kind home # home template
 hugo new yoursection --kind section # list template
+# put png favicons in assets/favicon
+# read generated _index template
 ```
+
+Resource names must not start with underscore. Pattern `/_` in the URL means that resource may be permanently cached (but it won't unless you configure this rule on the web server).

archetypes/home.md

@@ -2,20 +2,21 @@
 linkTitle: home
 title:
 description:
-image:
-  link:
-  ratio: 1/1 # x/y
+image: # localpath from assets/
 pgp:
-  fingerprint:
-  link:
+  fingerprint: # space-separated
+  link: # localpath from static/
 links:
-  - link:
-    icon:
+  - url:
+    icon: # localpath from assets/icons/ w/o ext
   # ...
 sections:
   - name:
-    link:
-    icon:
+    link: # /<section>/
+    icon: # localpath from assets/icons/ w/o ext
   # ...
 notice:
+
+# generator settings, no need to edit
+cascade: [ build: { publishResources: false } ]
 ---

archetypes/section/_index.md

@@ -1,5 +1,5 @@
 ---
 linkTitle: "{{ .File.ContentBaseName | humanize | lower }}"
 title: "{{ .File.ContentBaseName | humanize }}"
-outputs: [html]
+outputs: [html] # ,rss
 ---

assets/css/basic.scss

@@ -14,7 +14,7 @@ $color-fg-accent-op-l: rgba($color-fg-accent, $opacity-low);
   box-sizing: border-box;
 }
 /* prettier-ignore */
-html,body,ul,ol,li,blockquote,pre,hr {
+html,body,ul,ol,li,blockquote,pre,hr,figure,figcaption {
   margin: 0;
   padding: 0;
 }
@@ -121,10 +121,27 @@ article {
     border: 1px solid $color-bg-accent-light;
     border-radius: 0.25rem;
   }
-  p img,
-  li img {
-    width: 100%;
-    border: 1px solid $color-bg-accent-light;
+  figure {
+    margin: 1em 0;
+    img {
+      object-fit: contain;
+      display: block;
+      width: 100%;
+      max-height: 30rem;
+      border: 1px solid $color-bg-accent-light;
+    }
+    figcaption {
+      text-align: center;
+      color: $color-fg-dark;
+      font-size: 0.875rem;
+      margin-top: 0.2rem;
+      line-height: 1.5;
+    }
+    &:hover {
+      figcaption {
+        color: $color-fg;
+      }
+    }
   }
   blockquote {
     border-left: 0.5rem solid $color-bg-accent-light;

init/hugo.yaml

@@ -13,7 +13,8 @@ params:
   dateFormat: "2006-01-02T15:04:05Z"
   dateFormatShort: "2006-01-02"
   paginationAdjacentLinks: 2
-paginate: 50
+pagination:
+  pagerSize: 50
 
 # GENERATOR SETTINGS
 capitalizeListTitles: false
@@ -29,3 +30,7 @@ outputFormats:
     baseName: rss
 minify:
   minifyOutput: true
+markup:
+  goldmark:
+    parser:
+      wrapStandAloneImageWithinParagraph: false

layouts/_default/_markup/render-image.html

@@ -0,0 +1,7 @@
+{{ $hook_ctx := . }}
+{{ with .Page.Resources.Get .Destination | resources.Copy (replaceRE "([^/]*)$" "_$1" (path.Join .Page.Path .Destination)) | fingerprint }}
+<figure>
+  <a href="{{ .RelPermalink }}"><img src="{{ .RelPermalink }}"></a>
+  {{- with $hook_ctx.Text }}<figcaption>{{ . }}</figcaption>{{ end -}}
+</figure>
+{{ end }}

layouts/_default/baseof.html

@@ -5,11 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- prettier-ignore -->
     <title>{{ if not .IsHome }}{{ .LinkTitle | humanize }} - {{ end }}{{ .Site.Title }}</title>
-    {{ $opts := dict "transpiler" "libsass" "targetPath" "style.css" }}
+    {{ $opts := dict "transpiler" "libsass" "targetPath" "_style._c.css" }}
     {{ with resources.Get "css/index.scss" | toCSS $opts | minify | fingerprint }}
       <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" />
     {{ end }}
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    {{ range resources.Match "favicon/*.png" }}
+      {{ with resources.Copy (printf "_favicon%d._c.png" .Width) . }}
+        <link rel="shortcut icon" type="image/png" sizes="{{ .Width }}x{{ .Height }}" href="{{ .RelPermalink }}">
+      {{ end }}
+    {{ end }}
     {{ with .OutputFormats.Get "rss" -}}
       {{ printf `<link rel=%q type=%q href=%q title=%q>` .Rel .MediaType.Type .Permalink site.Title | safeHTML }}
     {{ end }}

layouts/_default/index.html

@@ -4,10 +4,12 @@
       <div class="about-container">
         <div class="about-block">
           <div class="image-container">
-            <img
-              src="{{ .Params.image.link }}"
-              {{ print "style" "=" "\"" "aspect-ratio:" .Params.image.ratio "\""  | safeHTMLAttr }}
+            {{ with resources.Get .Params.image | fingerprint }}
+		<img
+              src="{{ .RelPermalink }}"
+              {{ print "style" "=" "\"" "aspect-ratio:" (print .Width "/" .Height) "\""  | safeHTMLAttr }}
             />
+            {{ end }}
           </div>
           <div class="info-container">
             <h1>{{ .Title }}</h1>
@@ -22,7 +24,7 @@
             </div>
             <div class="links">
               {{- range .Params.links -}}
-                <a href="{{ .link | safeURL }}" class="icon-a-wrapper">{{- partial "icon.html" .icon -}}{{- print "" -}}</a>
+                <a href="{{ .url | safeURL }}" class="icon-a-wrapper" target="_blank">{{- partial "icon.html" .icon -}}{{- print "" -}}</a>
               {{- end -}}
             </div>
           </div>