Merge pull request #631 from gethinode/develop

Make page breakpoint configurable

assets/scss/app-dart.scss

@@ -38,7 +38,7 @@
 @import "components/table.scss";
 @import "components/timeline.scss";
 @import "components/toc.scss";
-@import "components/vimeo.scss";
+@import "components/video.scss";
 @import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";

assets/scss/app.scss

@@ -36,7 +36,7 @@
 @import "components/table.scss";
 @import "components/timeline.scss";
 @import "components/toc.scss";
-@import "components/vimeo.scss";
+@import "components/video.scss";
 @import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";

assets/scss/components/_img.scss

@@ -14,3 +14,8 @@
     height: 100%;
     object-fit: cover;
 }
+
+.mirrorred {
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+}

assets/scss/components/_video.scss

@@ -1,3 +1,19 @@
+.youtube-embedded {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.youtube-embedded > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border:0;
+}
+
 // Adapted from https://github.com/gohugoio/hugo/tpl/tplimpl/embedded/templates/shortcodes/vimeo_simple.html
 .__h_video {
     position: relative;

config/_default/params.toml

@@ -8,6 +8,7 @@
     endorse = true
     footerBelowFold = false
     loading = "lazy"
+    breakpoint = "md"
     [main.externalLinks]
         cue = false
         tab = false

exampleSite/config/_default/params.toml

@@ -6,6 +6,7 @@
     canonifyAssetsURLs = false
     footerBelowFold = false
     loading = "lazy"
+    breakpoint = "md"
     [main.externalLinks]
         cue = true
         tab = true

exampleSite/go.sum

@@ -32,6 +32,8 @@ github.com/gethinode/mod-fontawesome v1.4.0 h1:JfmVYwQl19jmZxgxY64yvGqJAAEiFkKf2
 github.com/gethinode/mod-fontawesome v1.4.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.5.0 h1:3mW5dnWauuF9wSWXNIY+PPgTNPlc/xQOQoG7XGic1Yk=
 github.com/gethinode/mod-fontawesome v1.5.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.5.1 h1:C7goQY4HrEua/lpjC++laydNKBuYo1+307ngn5tyXeM=
+github.com/gethinode/mod-fontawesome v1.5.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-katex v1.0.1/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.2 h1:pIG4n3qLl/IVe7BEiwn+GL8r5lOCtF6FDxlcrPKdAXk=
 github.com/gethinode/mod-katex v1.0.2/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=

exampleSite/hugo_stats.json

@@ -120,12 +120,15 @@
       "col-8",
       "col-9",
       "col-auto",
+      "col-lg-2",
       "col-lg-4",
       "col-lg-8",
       "col-md-10",
       "col-md-2",
+      "col-md-3",
       "col-md-4",
       "col-md-8",
+      "col-md-9",
       "col-md-auto",
       "col-sm-12",
       "col-sm-3",
@@ -141,6 +144,7 @@
       "d-grid",
       "d-inline",
       "d-inline-flex",
+      "d-lg-block",
       "d-md-block",
       "d-md-flex",
       "d-md-none",
@@ -332,6 +336,7 @@
       "row",
       "row-cols-1",
       "row-cols-2",
+      "row-cols-lg-3",
       "row-cols-md-2",
       "row-cols-md-3",
       "row-cols-sm-2",
@@ -341,6 +346,7 @@
       "search-suggestions",
       "shadow",
       "show",
+      "sidebar-overflow",
       "slide",
       "small",
       "spinner-border",

go.mod

@@ -6,7 +6,7 @@ require (
 	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
 	github.com/gethinode/mod-bootstrap v1.2.2 // indirect
 	github.com/gethinode/mod-flexsearch v1.6.0 // indirect
-	github.com/gethinode/mod-fontawesome v1.5.0 // indirect
+	github.com/gethinode/mod-fontawesome v1.5.1 // indirect
 	github.com/gethinode/mod-katex v1.0.4 // indirect
 	github.com/gethinode/mod-leaflet v0.3.5 // indirect
 	github.com/gethinode/mod-lottie v1.3.0 // indirect

go.sum

@@ -62,6 +62,8 @@ github.com/gethinode/mod-fontawesome v1.4.0 h1:JfmVYwQl19jmZxgxY64yvGqJAAEiFkKf2
 github.com/gethinode/mod-fontawesome v1.4.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.5.0 h1:3mW5dnWauuF9wSWXNIY+PPgTNPlc/xQOQoG7XGic1Yk=
 github.com/gethinode/mod-fontawesome v1.5.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.5.1 h1:C7goQY4HrEua/lpjC++laydNKBuYo1+307ngn5tyXeM=
+github.com/gethinode/mod-fontawesome v1.5.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-katex v1.0.0 h1:me/3dIIZBkfk1mRIFt8QiAGYwYDoSG5bc2hHRtIutFc=
 github.com/gethinode/mod-katex v1.0.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.1 h1:809QUztxmKgMNchU+v03iMO7Ma+ISc3ZzhXYauc21rs=

hugo_stats.json

@@ -15,6 +15,7 @@
       "link",
       "meta",
       "nav",
+      "ol",
       "p",
       "path",
       "script",
@@ -29,11 +30,14 @@
       "active",
       "align-items-center",
       "align-self-center",
+      "align-self-end",
       "bg-body",
       "bg-opacity-10",
       "bg-primary",
       "bottom-0",
       "bottom-bar",
+      "breadcrumb",
+      "breadcrumb-item",
       "btn",
       "btn-close",
       "btn-primary",
@@ -85,7 +89,6 @@
       "form-control",
       "fs-3",
       "fs-5",
-      "fw-30",
       "fw-bold",
       "hstack",
       "img-fluid",

i18n/en.yaml

@@ -27,6 +27,18 @@
   translation: "More {{ . }}"
 - id: emptyList
   translation: "No articles found"
+- id: emptyTags
+  translation: "No tags found"
+
+# Languages
+- id: lang_de
+  translation: "German"
+- id: lang_en
+  translation: "English"
+- id: lang_nl
+  translation: "Dutch"
+- id: lang_fr
+  translation: "French"
 
 # Sharing
 - id: shareLink

i18n/nl.yaml

@@ -25,6 +25,18 @@
   translation: "Meer {{ . }}"
 - id: emptyList
   translation: "Geen artikelen gevonden"
+- id: emptyTags
+  translation: "Geen tags gevonden"
+
+# Languages
+- id: lang_de
+  translation: "Duits"
+- id: lang_en
+  translation: "Engels"
+- id: lang_nl
+  translation: "Nederlands"
+- id: lang_fr
+  translation: "Frans"
 
 # Sharing
 - id: shareLink

layouts/_default/baseof.html

@@ -48,6 +48,9 @@
 {{ $sections := partial "utilities/GetSections.html" (dict "page" . "loading" $loading) }}
 {{- $.Scratch.Set "sections" $sections -}}
 
+{{- /* Define main breakpoint */ -}}
+{{- $.Scratch.Set "breakpoint" (partial "utilities/GetBreakpoint.html") }}
+
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">
     <head>

layouts/_default/list/body.html

@@ -1,9 +1,10 @@
 {{- $sections := $.Scratch.Get "sections" -}}
 {{- $fullCover := $.Scratch.Get "fullCover" -}}
+{{- $breakpoint := $.Scratch.Get "breakpoint" -}}
 {{- $layout := .Params.layout -}}
 
-<div class="row row-cols-1 row-cols-sm-2">
-    <div class="col col-sm-12 col-md-8">
+<div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
+    <div class="col-12 col-{{ $breakpoint.current }}-9">
         {{ if not .IsHome }}
             {{ with .Title }}<p id="{{ anchorize . }}" class="display-4 mt-5{{ if and $.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
         {{ end }}
@@ -15,9 +16,12 @@
             {{- if $fullCover }}{{ $loading = site.Params.main.loading }}{{ end }}
         {{ end }}
         {{- $content := partial "utilities/ProcessContent" (dict "page" . "raw" .RawContent "loading" $loading) -}}
-        {{ $content | safeHTML }}
+        {{- $content | safeHTML -}}
         {{ if and (and $sections (eq (len $sections) 1)) (not $content) }}
             <p class="pt-4">{{- T "emptyList" }}.</p>
         {{ end }}
     </div>
-</div>
+    <div class="col col-{{ $breakpoint.current }}-3 d-none d-{{ $breakpoint.current }}-block">
+        {{/* Empty in default layout */}}        
+    </div>
+</div>    

layouts/_default/single.html

@@ -1,13 +1,13 @@
 {{- define "partials/single-main.html" -}}
+    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
     {{ if .Site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
 
     {{ .Render "single/header" }}
 
     {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-        <div class="d-md-none pb-5">{{ partial "assets/toc-dropdown.html" . }}</div>
+        <div class="d-{{ $breakpoint.current }}-none pb-5">{{ partial "assets/toc-dropdown.html" . }}</div>
     {{- end -}}
     {{ .Render "single/body" }}
-    {{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}
 
     {{ .Render "single/footer" }}
     {{- if and .Site.Params.comments.enabled .Params.showComments | default true -}}
@@ -17,21 +17,15 @@
 {{ end -}}
 
 {{ define "main" -}}
-    {{- $download := .Params.download -}}
-    {{- if and $download (not (fileExists (path.Join "static" $download))) -}}
-        {{- errorf "Cannot find download file for page '%s': %s" .File.Path $download -}}
-    {{- end -}}
-    
     {{- $menu := .Scratch.Get "sidebar" -}}
     {{- $version := .Scratch.Get "version" -}}
+    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
 
     {{ $sidebar := "" }}
     {{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
     {{ if and $menu $hasSidebar  }}{{ $sidebar = partial "assets/sidebar.html" (dict "page" . "menu" $menu "version" $version) }}{{ end }}
 
-    {{ $toc := "" }}
-    {{- $hasTOC := and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-    {{ if $hasTOC }}{{ $toc = partial "assets/toc.html" (dict "page" . "download" $download) }}{{ end -}}
+    {{ $toc := .Render "single/panel-toc" }}
 
     {{ with $sidebar -}}
         <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-inledby="offcanvas-label">
@@ -46,34 +40,24 @@
     {{ end }}
 
     <div class="container-xxl flex-fill p-4 px-xxl-0">
-        {{ if and $menu $hasSidebar -}}
-            <div class="row row-cols-md-2 row-cols-lg-3">
-                <div class="col col-md-3 col-lg-2 d-none pt-5 d-md-block sidebar-overflow sticky-top">
+        {{ if $hasSidebar -}}
+            <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2 row-cols-{{ $breakpoint.next }}-3">
+                <div class="col col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.next }}-block sidebar-overflow sticky-top pt-5">
                     {{ $sidebar | safeHTML }}
                 </div>
-                <div class="col col-md-9 col-lg-8 mb-5 p-4">
+                <div class="col-12 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 mb-5 p-4">
                     {{ partial "partials/single-main.html" . }}
                 </div>
-                <div class="col col-lg-2 d-none d-lg-block pt-5">
+                <div class="col col-{{ $breakpoint.current }}-3 col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.current }}-block pt-5">
                     {{ $toc | safeHTML }}
                 </div>
             </div>
-        {{ else if $hasSidebar }}
-            <div class="row row-cols-1 row-cols-sm-3">
-                <div class="col col-md-2 d-none d-md-block"></div>
-                <div class="col col-sm-12 col-md-8">
-                    {{ partial "partials/single-main.html" . }}
-                </div>
-                <div class="col col-md-2 d-none d-md-block">
-                    {{ $toc | safeHTML }}
-                </div>
-            </div>    
         {{ else }}
-            <div class="row row-cols-1 row-cols-sm-2">
-                <div class="col col-sm-12 col-md-9">
+            <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
+                <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-9">
                     {{ partial "partials/single-main.html" . }}
                 </div>
-                <div class="col col-md-3 d-none d-md-block">
+                <div class="col col-{{ $breakpoint.current }}-3 d-none d-{{ $breakpoint.current }}-block">
                     {{ $toc | safeHTML }}
                 </div>
             </div>    

layouts/_default/single/body.html

@@ -1,2 +1,3 @@
 {{- partial "single/thumbnail.html" (dict "page" . "class" "mb-5") -}}
 
+{{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}

layouts/_default/single/header.html

@@ -1,12 +1,31 @@
-{{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
-{{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
+{{- $metadata := "full" -}}
+{{ if isset .Params "metadata" }}
+    {{ $metadata = .Params.metadata }}
+{{ else }}
+    {{- with (index site.Params.pages .Type ) -}}
+        {{ if isset . "metadata" }}{{ $metadata = (index . "metadata") }}{{ end }}
+    {{- end -}}
+{{ end }}
+
+{{- $supportedStates := slice "full" "original" "none" -}}
+{{- if not (in $supportedStates $metadata) -}}
+    {{- errorf "layout [_default/single/header.html] - Invalid value for param 'metadata': %s" $metadata -}}
+{{- end -}}
+
 {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
-<small class="text-body-secondary text-uppercase">
-    {{ $datestr | i18n "postedOnDate" -}}
-    {{ if ne $datestr $lastmodstr -}}&nbsp;({{ $lastmodstr | i18n "lastModified" }}){{ end }} &bull;
-    {{ .ReadingTime | lang.FormatNumber 0 }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }} &bull;
-    {{ .WordCount | lang.FormatNumber 0 }}&nbsp;{{ i18n "words" }}
-</small>
+{{ if ne $metadata "none" }}
+    {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
+    {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
+    <small class="text-body-secondary text-uppercase">
+        {{ $datestr | i18n "postedOnDate" -}}
+        {{ if eq $metadata "full" }}
+            {{ if ne $datestr $lastmodstr -}}&nbsp;({{ $lastmodstr | i18n "lastModified" }}){{ end }}
+        {{ end }}
+        &bull;
+        {{ .ReadingTime | lang.FormatNumber 0 }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }} &bull;
+        {{ .WordCount | lang.FormatNumber 0 }}&nbsp;{{ i18n "words" }}
+    </small>
+{{ end }}
 
 {{- if gt (len (.GetTerms "tags")) 0 -}}
     <div class="mt-3">

layouts/_default/single/panel-toc.html

@@ -0,0 +1,42 @@
+{{- $download := .Params.download -}}
+{{- if and $download (not (fileExists (path.Join "static" $download))) -}}
+    {{- errorf "Cannot find download file for page '%s': %s" .File.Path $download -}}
+{{- end -}}
+
+{{- $toc := .Site.Params.navigation.toc -}}
+{{ if $toc }}
+    {{ if isset .Params "includeToc" }}
+        {{ $toc = .Params.includeToc }}
+    {{ else }}
+        {{- with (index site.Params.pages .Type) -}}
+            {{ if isset . "includetoc" }}
+                {{ $toc = index . "includetoc" }}
+                {{ if ne (printf "%T" $toc) "bool" }}
+                    {{ errorf "Expected bool value in site parameters: pages.%s.includeToc" $.Type }}
+                {{ end }}
+            {{ end }}
+    {{- end -}}
+    {{ end }}
+{{ end }}
+
+<div class="toc toc-sidebar mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
+    {{ with $download }}
+        {{ $title := (T "download" ) }}
+        {{ $lang := strings.TrimPrefix "." (path.Ext (path.BaseName .)) }}
+        {{ if and $lang (ne (string site.LanguageCode) $lang) }}
+            {{ range site.Languages }}
+                {{ if eq .LanguageCode $lang }}
+                    {{ $title = printf "%s (%s)" (T "download") (T (printf "lang_%s" .LanguageCode)) }}
+                {{ end }}
+            {{ end }}
+        {{ end }}
+        <div class="mb-5 text-center">
+            {{ $attr := dict "download" (path.Base .) }}
+            {{ partial "assets/button.html" (dict "href" . "title" $title "color" "primary" "outline" "true" "icon" "fas download" "size" "sm" "attributes" $attr) }}
+        </div>
+    {{ end }}
+
+    {{ if $toc }}
+        {{ partial "assets/toc.html" (dict "page" . "download" $download) }}
+    {{ end -}}
+</div>

layouts/docs/single/body.html

@@ -1 +1 @@
-{{/* Intentionally left blank to suppress thumbnail */}}
+{{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}

layouts/minimal/single/body.html

@@ -1 +1 @@
-{{/* Intentionally left blank to suppress thumbnail */}}
+{{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}

layouts/partials/assets/card-group.html

@@ -36,6 +36,7 @@
 -->
 
 {{- $page := .page -}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
 
 {{- if not (in (slice "*hugolib.pageState" "*hugolib.pageForShortcode") (printf "%T" $page)) -}}
     {{- errorf "partial [assets/card-group.html] - Invalid value for param 'page': %T" $page -}}
@@ -108,10 +109,10 @@
 {{- end -}}
 {{- $colGrid := "" -}}
 {{- if eq $cols "1" }}{{ $colGrid = "row-cols-1" -}}
-{{- else if eq $cols "2" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-1 row-cols-md-2" }}{{ else }}{{ $colGrid = "row-cols-2" }}{{ end -}}
-{{- else if eq $cols "3" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-3" }}{{ else }}{{ $colGrid = "row-cols-3" }}{{ end -}}
-{{- else if eq $cols "4" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-4" }}{{ else }}{{ $colGrid = "row-cols-4" }}{{ end -}}
-{{- else if eq $cols "5" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ else }}{{ $colGrid = "row-cols-5" }}{{ end -}}
+{{- else if eq $cols "2" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-2" }}{{ end -}}
+{{- else if eq $cols "3" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-3" }}{{ end -}}
+{{- else if eq $cols "4" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-4" }}{{ end -}}
+{{- else if eq $cols "5" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-5" }}{{ end -}}
 {{ end -}}
 
 {{- $gutter := .gutter | default "4" -}}
@@ -186,7 +187,7 @@
             <div class="pt-3">{{ partial "assets/pagination.html" (dict "page" $page "format" "terse") }}</div>
         {{- end -}} 
     {{ else }}
-        {{ if gt $count $max }}
+        {{ if and (gt $count $max) $moreTitle }}
             <a class="btn btn-outline-primary" href="{{ $moreURL| safeURL }}" role="button">{{ $moreTitle }}</a>
         {{ end }}
     {{ end }}

layouts/partials/assets/carousel-item.html

@@ -13,7 +13,7 @@
     {{ end -}}
 {{- end -}}
 
-<div class="carousel-item{{ if $active }} active{{ end }}">
+<div class="carousel-item{{ if $active }} active{{ end }}" {{ if not $active }} fetchpriority="low"{{ end }}>
     {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" $page "innerClass" "d-block w-100" "portrait" $portrait "loading" $loading) }}
     <div class="carousel-caption gradient"></div>
     {{ with $caption }}

layouts/partials/assets/image.html

@@ -25,6 +25,10 @@
                     loaded images is deferred until the image is within scrolling range of the viewport. This should
                     reduce the initial loading time of the website. It is recommended to lazily load only those images
                     that are below the page fold.
+    "priority":     Optional fetch priority of the image, either "high", "low", or "auto" (default). The priority
+                    provides a hint to the browser on how it should prioritize the fetch of the image relative to other
+                    images. The implementation is experimental and currently only supported by Chrome, Edge, and Opera.
+                    (https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchpriority#browser_compatibility).
     "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
     "innerClass":   Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
@@ -64,6 +68,15 @@
 {{- end -}}
 {{- $lazy := eq $loading "lazy" -}}
 
+{{- $priority := .priority -}}
+{{- $validPriorities := slice "high" "low" "auto" -}}
+{{- if $priority -}}
+    {{ if not (in $validPriorities $priority) -}}
+        {{- errorf "partial [assets/image.html] - Invalid value for param 'priority'" -}}
+    {{ end -}}
+{{- end -}}
+{{- if eq $priority "auto" }}{{ $priority = "" }}{{ end -}}
+
 {{- define "partials/image-portrait.html" -}}
     {{- $dimensions := slice }}
     {{- $dim := .dim -}}
@@ -196,6 +209,7 @@
     {{- $modes := .modes -}}
     {{- $lazy := .lazy -}}
     {{- $page := .page -}}
+    {{- $priority := .priority -}}
     {{- $isVector := false -}}
 
     {{- $segments := split $url "#" -}}
@@ -209,8 +223,19 @@
     {{- if hasSuffix $url "svg" -}}
         {{- $fallbackURL = $url -}}
         {{- $isVector = true -}}
+        {{- $res := partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
+        {{ if not $res }}
+            {{- if not (fileExists (path.Join "/static" $url)) -}}
+                {{ warnf "Cannot find vector image resource: %q" $url -}}
+            {{ end }}
+        {{ end }}
     {{- else -}}
-        {{- $img := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
+        {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
+        {{- $img := "" -}}
+        {{ with $res }}
+            {{ $img = $res.resource }}
+            {{ if $res.mirror }}{{ $innerClass = printf "%s mirrorred" $innerClass }}{{ end }}
+        {{ end }}
         {{- if $img -}}
             {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
             {{- if $absoluteURL -}}
@@ -250,6 +275,7 @@
             <img class="img-fluid {{ $innerClass }}"
                 src="{{ $fallbackURL }}"
                 {{ if $lazy }}loading="lazy"{{ end }}
+                {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
                 {{ with $imgset -}}srcset="{{ . }}" sizes="100vw"{{- end }}
                 {{ with $height }}height="{{ . }}"{{ end }}
                 {{ with $width }}width="{{ . }}"{{ end }}
@@ -277,6 +303,7 @@
     "title" $title
     "caption" $caption
     "lazy" $lazy
+    "priority" $priority
     "page" $page)
 -}}
 

layouts/partials/assets/section-list.html

@@ -1,7 +1,7 @@
 {{- $page := .page }}
 {{- $section := .section }}
 {{- if not $section }}{{ errorf "partial [assets/section-list.html] - Missing value for param 'section'" }}{{ end -}}
-{{- $home := .home }}
+{{- $home := .home | default false }}
 {{ if ne (printf "%T" $home) "bool" }}
     {{ errorf "partial [assets/section-list.html] - Invalid value for param 'home'"}}
 {{ end }}
@@ -37,6 +37,7 @@
 {{- $ratio := "" -}}
 {{- $wrap := false -}}
 {{- $loading := .loading -}}
+{{- $wrapper := .wrapper | default "p-4 px-xxl-0 pb-5" -}}
 
 {{- with (index site.Params.sections $section) -}}
     {{- with index . "title" }}{{ $title = or $.title . }}{{ end -}}
@@ -77,6 +78,14 @@
     {{ else }}
         {{ $list = where site.Pages (printf ".Params.%s" $section) "!=" nil }}
     {{ end }}
+{{ else if eq $kind "related" }}
+    {{ if $page.Keywords}}
+        {{ $keywords := keyVals "tags" $page.Keywords }}
+        {{ $opts := dict "namedSlices" (slice $keywords) }}
+        {{ $list = site.RegularPages.Related $opts }}
+    {{ end }}
+{{ else if $page.IsSection }}
+    {{ $list = $page.Pages }}
 {{ else if $nested }}
     {{ $list = where site.RegularPages "Type" "in" $section }}
 {{ else if $home }}
@@ -100,7 +109,7 @@
 {{- end -}}
 
 {{ if gt $max 0 }}
-    {{- if $home -}}
+    {{- if or $home (eq $kind "related") -}}
         {{- $paginate = false -}}
         {{- $max = int (math.Min $homepage $max) -}}
     {{ end -}}
@@ -128,7 +137,7 @@
     {{- $partial := "" -}}
 
     <div class="container-fluid {{ with $background }} bg-{{ . }}{{ end }} p-0">
-        <div class="container-xxl p-4 px-xxl-0 pb-5">
+        <div class="container-xxl {{ $wrapper }}">
             {{- partial "assets/section-header.html" $params -}}
             
             {{ if eq $layout "card" }}

layouts/partials/assets/sharing.html

@@ -1,11 +1,28 @@
 {{- if .Site.Params.sharing.enabled -}}
-    {{- if or .Params.sharing (not (isset .Params "sharing")) -}}
+    {{- $sharing := true -}}
+    {{ if isset .Params "sharing" }}
+        {{ $sharing = .Params.sharing }}
+    {{ else }}
+        {{- with (index site.Params.pages .Type ) -}}
+            {{ if isset . "sharing" }}
+                {{ $sharing = (index . "sharing") }}
+            {{ end }}
+        {{- end -}}
+    {{ end }}
+
+    {{- if $sharing -}}
         {{- $page := . -}}
         {{- $order := "asc" -}}
         {{- $list := .Site.Params.sharing.providers -}}
         {{- if .Site.Params.sharing.reverse }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
         {{- $sort := .Site.Params.sharing.sort | default "weight" -}}
         {{- $list = sort $list $sort $order -}}
+
+        {{- $download := .Params.download -}}
+        {{- if and $download (not (fileExists (path.Join "static" $download))) -}}
+            {{- errorf "Cannot find download file for page '%s': %s" .File.Path $download -}}
+        {{- end -}}
+        
         <div class="py-3 text-body-secondary hstack gap-1">
             {{ T "shareLink" "" }}
             {{- range $index, $item := $list -}}
@@ -27,6 +44,10 @@
                 {{ $attr := dict "data-sharing-title" .Title "data-sharing-description" .Description "data-sharing-url" .Permalink }}
                 {{ partial "assets/button.html" (dict "href" "#!" "icon" "fas share-nodes fa-fw" "id" "btn-webshare" "class" "btn-social p-0" "attributes" $attr "label" (T "shareLink" (T "shareSystem")) "spacing" false) }}
             {{- end -}}
+            {{ with $download }}
+                {{ $attr := dict "download" (path.Base .) }}
+                {{ partial "assets/button.html" (dict "href" . "icon" "fas download fa-fw" "class" "btn-social p-0" "attributes" $attr "spacing" false) }}
+            {{- end -}}
         </div>
     {{- end -}}
 {{- end -}}

layouts/partials/assets/toc.html

@@ -1,17 +1,7 @@
 {{- $page := .page -}}
-{{- $download := .download -}}
 
 {{ $items := len (findRE "<li.*?>(.|\n)*?</li>" $page.TableOfContents) -}}
-{{ if or $download (gt $items 1) -}}
-    <div class="toc toc-sidebar mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
-        {{ with $download }}
-            <div class="mb-5">
-                {{ $attr := dict "download" (path.Base .) }}
-                {{ partial "assets/button.html" (dict "href" . "title" (T "download" ) "color" "primary" "outline" "true" "icon" "fas download" "attributes" $attr) }}
-            </div>
-        {{ end }}
-
-        <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
-        {{ $page.TableOfContents }}
-    </div>
+{{ if gt $items 1 -}}
+    <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
+    {{ $page.TableOfContents }}
 {{ end -}}

layouts/partials/head/seo.html

@@ -12,8 +12,10 @@
 
 {{- $thumbnail := (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) -}}
 {{ with $thumbnail -}}
-    {{ $img := partial "utilities/GetImage.html" (dict "url" .) -}}
-    {{ with $img -}}
+{{- $res := partial "utilities/GetImage.html" (dict "url" .) -}}
+{{- $img := "" -}}
+{{ with $res }}{{ $img = $res.resource }}{{ end }}
+{{ with $img -}}
         {{ $dim := "1280x640" -}}
         {{ $scaled := (.Fill (printf "%s jpg" $dim)) -}}
         {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink ".jpg" (printf "-%s.jpg" $dim)) -}}

layouts/partials/list/featured.html

@@ -56,7 +56,7 @@
     {{ else }}
         {{- $thumbnail := (or (and (reflect.IsMap $page.Params.Thumbnail) $page.Params.Thumbnail.url) $page.Params.Thumbnail) -}}
         {{- if $thumbnail }}
-            {{ partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" $style "innerClass" "rounded" "title" $page.Site.Title) }}
+            {{ partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" $style "innerClass" "rounded" "title" $page.Site.Title "priority" "high") }}
         {{ end }}
     {{ end }}
 {{- end -}}

layouts/partials/single/thumbnail.html

@@ -1,5 +1,7 @@
 {{- $page := .page -}}
-{{- $class := printf "img-wrap %s" .class -}}
+{{- $class := printf "img-wrap" -}}
+{{- with .class }}{{ $class = printf "img-wrap %s" . }}{{ end -}}
+{{- $ratio := .ratio | default "21x9" -}}
 {{- $thumbnail := "" -}}
 {{- $credits := "" -}}
 
@@ -33,5 +35,5 @@
 {{- end -}}
 
 {{ if $thumbnail -}}
-    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "21x9" "outerClass" $class "innerClass" "rounded" "title" $page.Params.title "caption" $credits) -}}
+    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" $ratio "outerClass" $class "innerClass" "rounded" "title" $page.Params.title "caption" $credits "priority" "high") -}}
 {{ end -}}

layouts/partials/utilities/GetBreakpoint.html

@@ -0,0 +1,21 @@
+{{- /* Define main breakpoint */ -}}
+{{ $prev := 0 }}
+{{ $next := 0 }}
+{{ $result := dict }}
+{{- $breakpoints := slice "xs" "sm" "md" "lg" "xl" "xxl" }}
+{{- $breakpoint := site.Params.main.breakpoint | default "md" -}}
+{{- if not (in $breakpoints $breakpoint) -}}
+    {{- errorf "layout [_default/baseof.html] - Invalid value for param 'breakpoint': %s" $breakpoint -}}
+{{ else }}
+    {{ range $index, $item := $breakpoints }}
+        {{ if eq $item $breakpoint }}
+            {{ $prev = sub $index 1 }}
+            {{ $next = add $index 1 }}
+        {{ end }}
+    {{ end }}
+    {{ if lt $prev 0 }}{{ $prev = 0 }}{{ end }}
+    {{ if ge $next (len $breakpoints) }}{{ $next = sub (len $breakpoints) 1 }}{{ end }}
+    {{ $result = dict "prev" (index $breakpoints $prev) "current" $breakpoint "next" (index $breakpoints $next) }}
+{{- end -}}
+
+{{ return $result }}

layouts/partials/utilities/GetImage.html

@@ -10,20 +10,11 @@
 
 {{ $url := .url -}}
 {{ $page := .page -}}
+{{ $mirror := false }}
 
 {{ $supportedMediaTypes := slice "image/png" "image/jpeg" "image/gif" "image/tiff" "image/bmp" "image/webp" -}}
-{{ $img := "" }}
 {{ $remote := hasPrefix (lower $url) "http" }}
-{{ if $remote }}
-    {{ $img = resources.GetRemote $url -}}
-{{ else }}
-    {{ if $page }}
-        {{ $img = $page.Resources.Get $url -}}
-    {{ end }}
-    {{ if not $img }}
-        {{ $img = resources.GetMatch $url }}
-    {{ end }}
-{{ end }}
+{{- $img := partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
 
 {{ with $img -}}
     {{ if in $supportedMediaTypes (string $img.MediaType) -}}
@@ -38,6 +29,34 @@
             {{ end -}}
             {{ $img = $img.Content | resources.FromString (printf "/img/%s" $filename) -}}
         {{ end -}}
+
+        <!-- 
+            Rotate the image if needed based on EXIF orientation. EXIF defines the following values:
+            (source: https://sirv.com/help/articles/rotate-photos-to-be-upright/#EXIF_orientation_values)
+            1 = 0 degrees: the correct orientation, no adjustment is required.
+            2 = 0 degrees, mirrored: image has been flipped back-to-front.
+            3 = 180 degrees: image is upside down.
+            4 = 180 degrees, mirrored: image has been flipped back-to-front and is upside down.
+            5 = 90 degrees: image has been flipped back-to-front and is on its side.
+            6 = 90 degrees, mirrored: image is on its side.
+            7 = 270 degrees: image has been flipped back-to-front and is on its far side.
+            8 = 270 degrees, mirrored: image is on its far side.
+        -->
+        {{ with $img.Exif }}
+            {{ $filter := "" }}
+            {{ $orientation := .Tags.Orientation }}
+            {{ if or (eq $orientation 3) (eq $orientation 4) }}
+                {{ $filter = images.Process "r180" }}
+            {{ else if or (eq $orientation 5) (eq $orientation 6) }}
+                {{ $filter = images.Process "r270" }}
+            {{ else if or (eq $orientation 7) (eq $orientation 8) }}
+                {{ $filter = images.Process "r90" }}
+            {{ end }}
+            {{ with $filter }}{{ $img = $img.Filter . }}{{ end }}
+
+            {{- $isMirrored := slice 2 4 5 7 -}}
+            {{- if (in $isMirrored $orientation) }}{{ $mirror = true }}{{ end -}}
+        {{ end }}
     {{ else -}}
         {{ warnf "Image type '%s' is not supported: %s" $img.MediaType $url -}}
         {{ $img = "" -}}
@@ -46,4 +65,4 @@
     {{ warnf "Cannot find image resource: %q" $url -}}
 {{ end -}}
 
-{{ return $img -}}
+{{ return (dict "resource" $img "mirror" $mirror) -}}

layouts/partials/utilities/GetResource.html

@@ -0,0 +1,25 @@
+<!-- 
+    Retrieve a local or remote resource. If the url starts with 'http', the resource is retrieved from an external
+    location. Else, the url is matched with a page resource and site asset (in that order). The partial returns nil if
+    the resource cannot be found. The partial supports the following arguments:
+    "url"           Required path or url of the resource, e.g. "img/example.jpg" or "https://example.com/img.jpg"
+    "page"          Optional page context, used to retrieve a resource from page resources.
+-->
+
+{{ $url := .url -}}
+{{ $page := .page -}}
+
+{{ $res := "" }}
+{{ $remote := hasPrefix (lower $url) "http" }}
+{{ if $remote }}
+    {{ $res = resources.GetRemote $url -}}
+{{ else }}
+    {{ if $page }}
+        {{ $res = $page.Resources.Get $url -}}
+    {{ end }}
+    {{ if not $res }}
+        {{ $res = resources.GetMatch $url }}
+    {{ end }}
+{{ end }}
+
+{{ return $res -}}

layouts/partials/utilities/GetSections.html

@@ -48,7 +48,8 @@
 
     {{- $thumbnail := (or (and (reflect.IsMap $sectionPage.Params.Thumbnail) $sectionPage.Params.Thumbnail.url) $sectionPage.Params.Thumbnail) -}}
     {{- $icon := $sectionPage.Params.Icon -}}
-    {{- $content := $sectionPage.Content -}}
+    {{- $content := "" -}}
+    {{ if not $sectionPage.IsSection }}{{ $content = $sectionPage.Content }}{{ end -}}
     {{- $sectionTitle := strings.FirstUpper $sectionPage.Type -}}
     {{- $moreTitle := "" -}}
     {{- with (index site.Params.sections $section) -}}

layouts/shortcodes/card.html

@@ -23,7 +23,7 @@
 
 {{ $path := or (.Get "path") "" }}
 {{ $page := .Page }}
-{{ with $path }}
+{{ if $path }}
     {{ $page = $.Site.GetPage $path }}
     {{ if not $page }}
         {{ errorf "Invalid or missing value for param 'path': %s" .Position -}}

layouts/shortcodes/image.html

@@ -19,11 +19,22 @@
     "mode":         Optional flag indicating if the image should support color modes.
 -->
 
-{{- if isset .Params "src" -}}
-    {{ $error := false -}}
-    {{ $url := .Get "src" | default "" -}}
+{{- $url := "" -}}
+{{- $ratio := "" -}}
+{{- $wrapper := "" -}}
+{{- $class := "" -}}
+{{- $title := "" -}}
+{{- $caption := "" -}}
+{{- $mode := false -}}
+{{- $portrait := false -}}
+{{- $loading := "" -}}
+{{- $error := false -}}
+
+{{- if .IsNamedParams -}}
+    {{ $url = .Get "src" | default "" -}}
+    
     {{- $validRatios := slice "1x1" "3x2" "4x3" "16x9" "21x9" -}}
-    {{ $ratio := .Get "ratio" | default "" -}}
+    {{ $ratio = .Get "ratio" | default "" -}}
     {{ if $ratio -}}
         {{ if not (in $validRatios $ratio) -}}
             {{ errorf "Invalid value for param 'ratio': %s" .Position -}}
@@ -31,10 +42,10 @@
         {{ end -}}
     {{ end -}}
     
-    {{- $class := .Get "class" | default "" -}}
-    {{- $wrapper := .Get "wrapper" | default "" -}}
+    {{- $class = .Get "class" | default "" -}}
+    {{- $wrapper = .Get "wrapper" | default "" -}}
 
-    {{- $loading := .Get "loading" | default "" -}}
+    {{- $loading = .Get "loading" | default "" -}}
     {{- $validSettings := slice "lazy" "eager" -}}
     {{- if $loading -}}
         {{ if not (in $validSettings $loading) -}}
@@ -42,14 +53,12 @@
             {{ $error = true -}}
         {{ end -}}
     {{- end -}}
-    {{- $lazy := eq $loading "lazy" -}}
     
-    {{ $title := .Get "title" | default "" -}}
-    {{ $caption := .Get "caption" | default "" -}}
+    {{ $title = .Get "title" | default "" -}}
+    {{ $caption = .Get "caption" | default "" -}}
 
     {{ $supportedFlags := slice "true" "false" -}}
     {{ $modeParam := "false" -}}
-    {{ $mode := false -}}
     {{ with .Get "mode" }}{{ $modeParam = . }}{{ end -}}
     {{ if in $supportedFlags $modeParam -}}
         {{ if eq $modeParam "true" }}{{ $mode = true }}{{ else }}{{ $mode = false }}{{ end -}}
@@ -59,7 +68,6 @@
     {{ end -}}
 
     {{ $portraitParam := "false" -}}
-    {{ $portrait := false -}}
     {{ with .Get "portrait" }}{{ $portraitParam = . }}{{ end -}}
     {{ if in $supportedFlags $portraitParam -}}
         {{ if eq $portraitParam "true" }}{{ $portrait = true }}{{ else }}{{ $portrait = false }}{{ end -}}
@@ -67,21 +75,26 @@
         {{ errorf "Invalid value for param 'portrait': %s" $portraitParam -}}
         {{ $error = true -}}
     {{ end -}}
-    
-    {{- if not $error -}}
-        {{- partial "assets/image.html" (dict 
-            "url" $url
-            "ratio" $ratio
-            "outerClass" $wrapper
-            "innerClass" $class
-            "title" $title
-            "caption" $caption
-            "mode" $mode
-            "portrait" $portrait
-            "loading" $loading
-            "page" .Page)
-        -}} 
-    {{- end -}}
 {{ else -}}
+    {{ $url = .Get 0 }}
+{{ end -}}
+
+{{ if not $url }}
     {{ errorf "Missing value for param 'src': %s" .Position -}}
-{{ end -}}
+    {{- $error = true -}}
+{{ end }}
+
+{{- if not $error -}}
+    {{- partial "assets/image.html" (dict 
+        "url" $url
+        "ratio" $ratio
+        "outerClass" $wrapper
+        "innerClass" $class
+        "title" $title
+        "caption" $caption
+        "mode" $mode
+        "portrait" $portrait
+        "loading" $loading
+        "page" .Page)
+    -}} 
+{{- end -}}

layouts/shortcodes/timeline.html

@@ -50,7 +50,7 @@
     <div class="col-{{ $col }} d-flex justify-content-{{ $direction }} align-items-center">
         <div class="d-flex">
             <div class="d-flex timeline-semi-circle-{{ $direction }} fa-wrapper align-items-center justify-content-center">
-                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid" $icon)) }}
+                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid" $icon) "spacing" false) }}
             </div>
             <div class="timeline-connector-{{ $direction }} {{ if eq $direction "start" }} order-first{{ end }}"></div>
         </div>

layouts/shortcodes/youtube.html

@@ -4,7 +4,7 @@
 {{- $id := .Get "id" | default (.Get 0) -}}
 {{- $class := .Get "class" | default (.Get 1) -}}
 {{- $title := .Get "title" | default "YouTube Video" }}
-<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
-  <iframe src="https://{{ $ytHost }}/embed/{{ $id }}?origin={{ .Site.BaseURL }}{{ with .Get "autoplay" }}{{ if eq . "true" }}&autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="{{ $title }}"></iframe>
+<div class="youtube-embedded {{ $class }}">
+  <iframe src="https://{{ $ytHost }}/embed/{{ $id }}?origin={{ .Site.BaseURL }}{{ with .Get "autoplay" }}{{ if eq . "true" }}&autoplay=1{{ end }}{{ end }}" allowfullscreen title="{{ $title }}"></iframe>
 </div>
 {{ end -}}

layouts/tags/list.html

@@ -1,31 +1,35 @@
 {{ define "main" }}
     {{- $page := . -}}
     {{- $layout := $page.Params.layout -}}
+    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
 
     <div class="container-xxl flex-fill p-4 px-xxl-0">
-        <div class="row row-cols-1 row-cols-sm-3">
-            <div class="col col-md-2 d-none d-md-block"></div>
-            <div class="col col-sm-12 col-md-8">
+        <div class="row row-cols-1 row-cols-{{ $breakpoint.prev }}-3">
+            <div class="col col-{{ $breakpoint.current }}-2 d-none d-{{ $breakpoint.current }}-block"></div>
+            <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-8">
                 {{- if ne $layout "featured" -}}
                     {{ if and (not $page.IsHome) site.Params.navigation.breadcrumb }}
                         <div>{{ partial "assets/breadcrumb.html" $page }}</div>
                     {{ end -}}
                 {{- end -}}
 
-                <p class="display-4 mt-5">{{ .Name | humanize }}</p>
+                <p class="display-4 mt-5">{{ .Page.Title }}</p>
 
                 {{ if eq .Kind "taxonomy" }}
                     <div class="row mt-5"></div>
                     {{ range $.Site.Taxonomies.tags.ByCount }}
                         <div class="row mt-2">
-                            <div class="d-none d-sm-block col-sm-3 mt-auto text-right">
+                            <div class="col-3 mt-auto text-right">
                                 {{ .Count }} {{ if gt .Count 1 }} {{ T "articles" }} {{ else }} {{ T "article" }} {{ end }}
                             </div>
-                            <div class="col">
-                                <a href="{{ (path.Join .Page.RelPermalink) | relLangURL }}">{{ .Name | .Page.RenderString }}</a>
+                            <div class="col-9">
+                                <a href="{{ (path.Join .Page.RelPermalink) | relLangURL }}">{{ .Page.Title | .Page.RenderString }}</a>
                             </div>
                         </div>
                     {{ end }}
+                    {{ if eq $.Site.Taxonomies.tags 0 }}
+                        <p class="pt-4">{{- T "emptyTags" }}.</p>
+                    {{ end }}
                 {{ else }}
                     {{ $dateFormat := default "Jan 2" (index .Site.Params "date_format") }}
                     {{ $.Scratch.Set "lastYear" ""}}
@@ -33,7 +37,7 @@
                         {{ $year := .Date.Year }}
                         {{ $lastYear := $.Scratch.Get "lastYear"}}
                         <div class="row mt-2">
-                            <div class="d-none d-sm-block col-sm-3 mt-auto text-right">
+                            <div class="d-none d-{{ $breakpoint.prev }}-block col-{{ $breakpoint.prev }}-3 mt-auto text-right">
                                 <time class="post-date" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
                                     {{ (partial "utilities/date.html" (dict "date" .Date "format" "medium")) }}
                                 </time>
@@ -49,7 +53,7 @@
                     {{ end }}
                 {{ end }}
             </div>
-            <div class="col col-md-2 d-none d-md-block"></div>
+            <div class="col col-{{ $breakpoint.current }}-2 d-none d-{{ $breakpoint.current }}-block"></div>
         </div>
     </div>
 {{ end }}

netlify.toml

@@ -4,8 +4,8 @@
     command = "npm run build:example"
 
 [build.environment]
-    DART_SASS_VERSION = "1.69.0"
-    HUGO_VERSION = "0.119.0"
+    DART_SASS_VERSION = "1.69.5"
+    HUGO_VERSION = "0.120.3"
     HUGO_ENV = "production"
     HUGO_ENABLEGITINFO = "true"
     NODE_VERSION = "18.18.2"

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.21.0",
+  "version": "0.21.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.21.0",
+      "version": "0.21.7",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",
@@ -15,12 +15,12 @@
         "autoprefixer": "^10.4.16",
         "cssnano": "^6.0.1",
         "cssnano-preset-advanced": "^6.0.1",
-        "eslint": "^8.52.0",
+        "eslint": "^8.53.0",
         "eslint-config-standard": "^17.1.0",
         "eslint-plugin-import": "^2.29.0",
-        "eslint-plugin-n": "^16.2.0",
+        "eslint-plugin-n": "^16.3.1",
         "eslint-plugin-promise": "^6.1.1",
-        "hugo-bin": "^0.116.3",
+        "hugo-bin": "^0.116.4",
         "markdownlint-cli2": "^0.10.0",
         "netlify-plugin-hugo-cache-resources": "^0.2.1",
         "npm-run-all": "^4.1.5",
@@ -33,7 +33,10 @@
         "stylelint-config-standard-scss": "^11.1.0"
       },
       "optionalDependencies": {
-        "fsevents": "*"
+        "@gethinode/netlify-plugin-dartsass": "^0.2.0",
+        "@netlify/plugin-lighthouse": "*",
+        "fsevents": "*",
+        "netlify-plugin-hugo-cache-resources": "^0.2.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -334,9 +337,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
-      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz",
+      "integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -380,9 +383,9 @@
       "dev": true
     },
     "node_modules/@eslint/js": {
-      "version": "8.52.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.52.0.tgz",
-      "integrity": "sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.53.0.tgz",
+      "integrity": "sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1526,6 +1529,18 @@
         "node": "*"
       }
     },
+    "node_modules/builtin-modules": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/builtins": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
@@ -2716,15 +2731,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.52.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.52.0.tgz",
-      "integrity": "sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.53.0.tgz",
+      "integrity": "sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.2",
-        "@eslint/js": "8.52.0",
+        "@eslint/eslintrc": "^2.1.3",
+        "@eslint/js": "8.53.0",
         "@humanwhocodes/config-array": "^0.11.13",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -2935,9 +2950,9 @@
       "dev": true
     },
     "node_modules/eslint-plugin-n": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-16.2.0.tgz",
-      "integrity": "sha512-AQER2jEyQOt1LG6JkGJCCIFotzmlcCZFur2wdKrp1JX2cNotC7Ae0BcD/4lLv3lUAArM9uNS8z/fsvXTd0L71g==",
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-16.3.1.tgz",
+      "integrity": "sha512-w46eDIkxQ2FaTHcey7G40eD+FhTXOdKudDXPUO2n9WNcslze/i/HT2qJ3GXjHngYSGDISIgPNhwGtgoix4zeOw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
@@ -2945,6 +2960,7 @@
         "eslint-plugin-es-x": "^7.1.0",
         "get-tsconfig": "^4.7.0",
         "ignore": "^5.2.4",
+        "is-builtin-module": "^3.2.1",
         "is-core-module": "^2.12.1",
         "minimatch": "^3.1.2",
         "resolve": "^1.22.2",
@@ -4301,9 +4317,9 @@
       "dev": true
     },
     "node_modules/hugo-bin": {
-      "version": "0.116.3",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.116.3.tgz",
-      "integrity": "sha512-FgibDoYLJ0W7z81FA3sqC1XLds/fOzH8nreEo+1gxXGguewuYFk6k7X3FlbiADVWMCkZiY4J4rZfrHovlZbr7g==",
+      "version": "0.116.4",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.116.4.tgz",
+      "integrity": "sha512-MzTu7T2D88gadlADyCknACJFJXwr2KpzeJrez9RSu5rr0TMiWNJ5esaqnzoBqnptB/SU+qZNnPQ4Qe26sJf+mw==",
       "dev": true,
       "funding": [
         {
@@ -4573,6 +4589,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-builtin-module": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
+      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
+      "dev": true,
+      "dependencies": {
+        "builtin-modules": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.21.0",
+  "version": "0.21.7",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -73,12 +73,12 @@
     "autoprefixer": "^10.4.16",
     "cssnano": "^6.0.1",
     "cssnano-preset-advanced": "^6.0.1",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.2.0",
+    "eslint-plugin-n": "^16.3.1",
     "eslint-plugin-promise": "^6.1.1",
-    "hugo-bin": "^0.116.3",
+    "hugo-bin": "^0.116.4",
     "markdownlint-cli2": "^0.10.0",
     "netlify-plugin-hugo-cache-resources": "^0.2.1",
     "npm-run-all": "^4.1.5",
@@ -91,7 +91,10 @@
     "stylelint-config-standard-scss": "^11.1.0"
   },
   "optionalDependencies": {
-    "fsevents": "*"
+    "@gethinode/netlify-plugin-dartsass": "^0.2.0",
+    "@netlify/plugin-lighthouse": "*",
+    "fsevents": "*",
+    "netlify-plugin-hugo-cache-resources": "^0.2.1"
   },
   "hugo-bin": {
     "buildTags": "extended"