Merge pull request #1056 from gethinode/develop

Add anchor support to cards

.gitignore

@@ -1,4 +1,4 @@
-/_vendor
+_vendor/
 public/
 resources/
 node_modules/

assets/scss/common/_styles.scss

@@ -146,6 +146,24 @@ $utilities: map-merge(
     }    
 }
 
+.main-cover {
+    min-height: 100vh;
+}    
+
+@include media-breakpoint-up(xxl) {
+    .main-cover {
+        min-height: calc(min(100vh, 1000px));
+    }    
+}
+
+/* stylelint-disable media-feature-range-notation */
+@media (min-height: 1400px) { 
+    .main-cover {
+        min-height: calc(min(100vh, 1000px));
+    }
+}
+/* stylelint-enable media-feature-range-notation */
+
 $utilities: map-merge(
     $utilities,
     (

data/structures/card-group.yml

@@ -122,6 +122,13 @@ arguments:
       Enables horizontal scrolling of the cards. By default, the card group
       wraps any cards beyond the amount of defined columns to a new line. When
       `scroll` is set to true, a horizontal scroll bar is added instead.
+  spacer:
+    type: bool
+    optional: true
+    comment: >-
+      Inserts a spacer before the card.
+    release: v0.24.16
+    group: partial
   hook:
     type: string
     optional: true

data/structures/card.yml

@@ -90,6 +90,18 @@ arguments:
         - publication
         - tags
         - none
+  body:
+    type: select
+    optional: true
+    default: full
+    parent: cascade
+    release: v0.24.16
+    comment: >-
+      Body of the card. 
+    options:
+      values:
+        - full
+        - none
   footer:
     type: select
     optional: true
@@ -146,6 +158,16 @@ arguments:
         - 16x9
         - 21x9
     group: partial
+  portrait:
+    type: bool
+    parent: cascade
+    optional: true
+    default: false
+    release: v0.24.16
+    comment: >-
+      Flag to adjust the ratio from landscape to portrait. The image itself is
+      not rotated, only the crop area is adjusted. Not applicable to vector
+      graphics.
   alt:
     type: string
     optional: true
@@ -249,6 +271,25 @@ arguments:
       One or more strings separated by commas, indicating the source sizes of an
       image set.
     group: partial
+  anchor:
+    type: select
+    optional: true
+    comment: 
+      Anchor of the thumbnail's crop box, defaults to anchor value set in
+      `imaging` section of the site configuration (usually `Smart`).
+    options:
+      values:
+        - TopLeft
+        - Top
+        - TopRight
+        - Left
+        - Center
+        - Right
+        - BottomLeft
+        - Bottom
+        - BottomRight
+        - Smart
+    release: v0.24.23
 body:
   optional: true
   comment: >-

data/structures/image-adapter.yml

@@ -60,3 +60,20 @@ arguments:
     type: int
     optional: false
     comment: Width of the image in pixels.
+  anchor:
+    type: select
+    optional: true
+    comment: Anchor of the crop box.
+    options:
+      values:
+        - TopLeft
+        - Top
+        - TopRight
+        - Left
+        - Center
+        - Right
+        - BottomLeft
+        - Bottom
+        - BottomRight
+        - Smart
+

data/structures/image.yml

@@ -138,3 +138,22 @@ arguments:
       Flag to indicate if the image should render a plain image instead of an
       image set. When set, no transformations are applied to the image.
     release: v0.24.0
+  anchor:
+    type: select
+    optional: true
+    comment: 
+      Anchor of the crop box, defaults to anchor value set in `imaging` section
+      of the site configuration (usually `Smart`).
+    options:
+      values:
+        - TopLeft
+        - Top
+        - TopRight
+        - Left
+        - Center
+        - Right
+        - BottomLeft
+        - Bottom
+        - BottomRight
+        - Smart
+    release: v0.24.22

exampleSite/config/_default/languages.toml

@@ -22,6 +22,8 @@ reference = "More Projects"
 languageName = "Nederlands"
 contentDir = "content/nl"
 weight = 2
+[nl.params.opengraph]
+locale = "nl_NL"
 [nl.params.head]
 tagline = "Een Hugo Thema"
 [nl.params.social]
@@ -39,6 +41,8 @@ reference = "Meer projecten"
 languageName = "Français"
 contentDir = "content/fr"
 weight = 2
+[fr.params.opengraph]
+locale = "fr_FR"
 [fr.params.head]
 tagline = "Un thème Hugo"
 [fr.params.social]

exampleSite/content/en/blog/image.md

@@ -26,7 +26,7 @@ As an example, the following shortcode displays an image with rounded corners an
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* image src="https://ik.imagekit.io/demo/default-image.jpg"
-    ratio="21x9" caption="ImageKit.io image" class="rounded" */>}}
+    ratio="21x9" caption="ImageKit.io image" class="rounded" anchor="Center" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -37,6 +37,6 @@ As an example, the following shortcode displays an image with rounded corners an
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* image src="https://assets.imgix.net/examples/bluehat.jpg"
-    ratio="21x9" caption="imgix image" class="rounded" */>}}
+    ratio="21x9" caption="imgix image" class="rounded" anchor="Top" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

exampleSite/hugo_stats.json

@@ -239,6 +239,7 @@
       "fs-3",
       "fs-5",
       "fs-6",
+      "fs-lg-5",
       "fs-md-5",
       "fw-30",
       "fw-bold",

go.mod

@@ -10,7 +10,7 @@ require (
 	github.com/gethinode/mod-katex v1.1.0 // indirect
 	github.com/gethinode/mod-leaflet v1.1.0 // indirect
 	github.com/gethinode/mod-lottie v1.5.5 // indirect
-	github.com/gethinode/mod-simple-datatables v1.0.2 // indirect
+	github.com/gethinode/mod-simple-datatables v1.0.3 // indirect
 	github.com/gethinode/mod-utils/v2 v2.3.10 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect

go.sum

@@ -188,6 +188,8 @@ github.com/gethinode/mod-simple-datatables v1.0.0 h1:Dj4WGw12OkaimwkCpLn5Jhmd49d
 github.com/gethinode/mod-simple-datatables v1.0.0/go.mod h1:K8T7fIdb8pMOB+OSW4A5lz5IW99+HyzcTgx764fvOGw=
 github.com/gethinode/mod-simple-datatables v1.0.2 h1:zhqxHet3iLQWYCBbGROALpOY9zQlptMycFkz1Tto5bA=
 github.com/gethinode/mod-simple-datatables v1.0.2/go.mod h1:mmrcvAJU2i3SMU56VmQ5PW43uDXBcsJKcZwCHrvl3Kc=
+github.com/gethinode/mod-simple-datatables v1.0.3 h1:JL2nBlEHWMmkE7EZrpfpmzka47dklJUh23/xKJkOQoI=
+github.com/gethinode/mod-simple-datatables v1.0.3/go.mod h1:mmrcvAJU2i3SMU56VmQ5PW43uDXBcsJKcZwCHrvl3Kc=
 github.com/gethinode/mod-utils v1.0.0 h1:cqHm2xS5uDiJzRm1KfHaNbq6uMVDKLhQa8/BuTZ1nhY=
 github.com/gethinode/mod-utils v1.0.0/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
 github.com/gethinode/mod-utils v1.0.1 h1:jhZGlGFHHL1f5HXbBMXfiZ2gCz4TVafAzjnRPTIBSEE=

layouts/partials/assets/adapters/cloudinary.html

@@ -6,6 +6,19 @@
 
 {{ $error := false }}
 
+{{ $anchorMap := dict
+    "TopLeft" "north_west"
+    "Top" "north"
+    "TopRight" "north_east"
+    "Left" "west"
+    "Center" "center"
+    "Right" "east"
+    "BottomLeft" "south_west"
+    "Bottom" "south"
+    "BottomRight" "south_east"
+    "Smart" "auto"
+}}
+
 <!-- Validate arguments -->
 {{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
     {{ errorf "partial [assets/adapter/cloudinary.html] - Invalid arguments" -}}
@@ -20,6 +33,8 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := "" }}
+{{ with .anchor }}{{ $anchor = index $anchorMap . }}{{ end }}
 {{ if eq $transform "fill" }}{{ $transform = "c_fill" }}{{ else }}{{ $transform = "c_fit" }}{{ end }}
 {{ $element := "" }}
 
@@ -37,6 +52,9 @@
     {{ else }}
         {{ $operation = printf "f_auto,%s,h_%d,w_%d" $transform $height $width }}
     {{ end }}
+    {{ with $anchor }}
+        {{ $operation = printf "%s,g_%s" $operation . }}
+    {{ end }}
     {{- $element = urls.JoinPath (slice "https://" $host $dir $operation $file) -}}
 {{ end }}
 

layouts/partials/assets/adapters/hugo.html

@@ -20,6 +20,7 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := .anchor | default "" }}
 {{ $element := "" }}
 {{ $absoluteURL := .absoluteURL }}
 {{ $url := urls.JoinPath $dir $file }}
@@ -46,13 +47,20 @@
 {{ if not $error }}
     {{ $scaled := "" }}
     {{ if eq $transform "fill" }}
-        {{- $scaled = $img.Fill (printf "%dx%d %s" $width $height $format) -}}
+        {{- $scaled = $img.Fill (printf "%dx%d %s %s" $width $height $anchor $format) -}}
     {{ else }}
         {{- $scaled = $img.Fit (printf "%dx%d %s" $width $height $format) -}}
     {{ end }}
 
     {{- $clean := path.Ext $img.RelPermalink -}}
-    {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%dx%d.%s" $width $height $format)) -}}
+    {{ $destination := "" }}
+    {{ if $anchor }}
+        {{ $destination = printf "-%dx%d-%s.%s" $width $height (lower $anchor) $format }}
+    {{ else }}
+        {{ $destination = printf "-%dx%d.%s" $width $height $format }}
+    {{ end }}
+
+    {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean $destination) -}}
     {{- if $absoluteURL -}}
         {{- $element = $scaled.Permalink -}}
     {{- else -}}

layouts/partials/assets/adapters/imagekit.html

@@ -6,6 +6,19 @@
 
 {{ $error := false }}
 
+{{ $anchorMap := dict
+    "TopLeft" "top_left"
+    "Top" "top"
+    "TopRight" "top_right"
+    "Left" "left"
+    "Center" "center"
+    "Right" "right"
+    "BottomLeft" "bottom_left"
+    "Bottom" "bottom"
+    "BottomRight" "bottom_right"
+    "Smart" "auto"
+}}
+
 <!-- Validate arguments -->
 {{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
     {{ errorf "partial [assets/adapter/imagekit.html] - Invalid arguments" -}}
@@ -20,6 +33,8 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := "" }}
+{{ with .anchor }}{{ $anchor = index $anchorMap . }}{{ end }}
 {{ if eq $transform "fill" }}{{ $transform = "c-maintain_ratio" }}{{ else }}{{ $transform = "c-at_max" }}{{ end }}
 {{ $element := "" }}
 
@@ -42,6 +57,9 @@
     {{ else }}
         {{ $operation = printf "tr:f-auto,%s,h-%d,w-%d" $transform $height $width }}
     {{ end }}
+    {{ with $anchor }}
+        {{ $operation = printf "%s,fo-%s" $operation . }}
+    {{ end }}
     {{- $element = urls.JoinPath (slice "https://" $host $dir $operation $file) -}}
 {{ end }}
 

layouts/partials/assets/adapters/imgix.html

@@ -6,6 +6,19 @@
 
 {{ $error := false }}
 
+{{ $anchorMap := dict
+    "TopLeft" "top,left"
+    "Top" "top"
+    "TopRight" "top,right"
+    "Left" "left"
+    "Center" "center"
+    "Right" "right"
+    "BottomLeft" "bottom,left"
+    "Bottom" "bottom"
+    "BottomRight" "bottom,right"
+    "Smart" "faces,edges,center"
+}}
+
 <!-- Validate arguments -->
 {{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
     {{ errorf "partial [assets/adapter/imgix.html] - Invalid arguments" -}}
@@ -20,6 +33,8 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := "" }}
+{{ with .anchor }}{{ $anchor = index $anchorMap . }}{{ end }}
 {{ if eq $transform "fill" }}{{ $transform = "crop" }}{{ else }}{{ $transform = "max" }}{{ end }}
 {{ $element := "" }}
 
@@ -37,6 +52,9 @@
     {{ else }}
         {{ $operation = printf "f_auto&fit=%s&h=%d&w=%d" $transform $height $width }}
     {{ end }}
+    {{ with $anchor }}
+        {{ $operation = printf "%s&crop=%s" $operation . }}
+    {{ end }}
     {{- $element = printf "%s?%s" (urls.JoinPath (slice "https://" $host $dir $file)) $operation -}}
 {{ end }}
 

layouts/partials/assets/card-group.html

@@ -23,9 +23,11 @@
 {{- $color := .color -}}
 {{- $padding := .padding -}}
 {{- $header := .header -}}
+{{- $body := .body -}}
 {{- $footer := .footer -}}
 {{- $orientation := .orientation -}}
 {{- $ratio := .ratio -}}
+{{- $portrait := .portrait | default false -}}
 {{- $wrapper := .wrapper | default "p-0" -}}
 {{- $style := .style -}}
 {{- $align := .align -}}
@@ -36,7 +38,9 @@
 {{- $buttonType := .buttonType -}}
 {{- $iconRounded := .iconRounded }}
 {{- $scroll := .scroll | default false }}
+{{- $spacer := .spacer | default false }}
 {{- $hook := .hook | default "assets/card.html" }}
+{{- $cols := string .cols | default "3" -}}
 
 <!-- Override arguments -->
 {{ $isPages := in (slice "page.Pages" "resource.Resources") (printf "%T" $pages) }}
@@ -50,6 +54,13 @@
     {{ $pages = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $pages) }}
 {{ end }}
 
+{{ $cardWrapper := "" }}
+{{ if $scroll }}
+    {{ $cardWrapper = printf "card-block card-block-%d" (int $cols) }}
+{{ end }}
+
+{{ if not $spacer }}{{ $class = printf "%s h-100" $class }}{{ end }}
+
 {{ $list := slice }}
 {{ if $isPages }}
     {{ range $index, $element := $pages }}
@@ -60,11 +71,13 @@
         <!-- headless page -->
         {{- else -}}
             {{- $thumbnail := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.url) $element.Params.Thumbnail) -}}
+            {{- $anchor := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.anchor) "") -}}
             {{- $params = merge $params (dict
                 "title" $element.Title
                 "href" $element.RelPermalink
                 "description" (partial "utilities/GetDescription.html" (dict "page" $element "raw" true))
                 "thumbnail" $thumbnail
+                "anchor" $anchor
                 "icon" $element.Params.icon
             ) -}}
         {{- end -}}
@@ -79,13 +92,10 @@
 {{- $max := $count -}}
 {{- $max = math.Min (.max | default $count) $count -}}
 {{- $responsive := .responsive | default true -}}
-{{- $cols := string .cols | default "3" -}}
 
 {{- $sizes := "100vw" }}
 {{- $colGrid := "" -}}
-{{ if $scroll }}
+{{ if not $scroll }}
-    {{- $colGrid = (printf "card-block-%d" $cols) -}}
-{{ else }}
     {{ $colGrid = printf "row-cols-%s" $cols }}
     {{- if eq $cols "1" }}
         {{ $colGrid = "row-cols-1" -}}
@@ -119,19 +129,21 @@
 {{- if and (eq $cols "1") (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}
 
 <!-- Main code -->
-<div class="container {{ $wrapper }} {{ if $scroll }}card-container-wrapper{{ end }}">
+<div class="container-fluid {{ $wrapper }} {{ if $scroll }}card-container-wrapper{{ end }}">
-    <div class="row g-{{ $gutter }} {{ if $scroll }}d-flex flex-row flex-nowrap card-container scrollbar-horizontal pb-4 w-100{{ else }}{{ $colGrid }}{{ end }}">
+    <div class="row g-{{ $gutter }} {{ if $scroll }}d-flex flex-row flex-nowrap card-container scrollbar-horizontal pb-4 w-100 {{ end  }} {{ $colGrid }}">
         {{ range $index, $element := $list }}
             {{- $params := (dict
-                "class" (printf "h-100 %s" $class)
+                "class" (printf " %s" $class)
                 "color" $color
                 "footer" $footer
+                "body" $body
                 "header" $header
                 "loading" $loading
                 "sizes" $sizes
                 "orientation" $orientation
                 "padding" $padding
                 "ratio" $ratio
+                "portrait" $portrait
                 "subtle" $subtle
                 "style" $style
                 "align" $align
@@ -142,7 +154,8 @@
             ) -}}
             {{- $params = merge $element $params }}
 
-            <div class="col">
+            <div class="{{ with $cardWrapper }}{{ . }}{{ else }}col{{ end }}">
+                {{ if $spacer }}<div class="spacer"></div>{{ end }}
                 {{- partial $hook $params -}}
             </div>
             {{- if and (lt $index (sub $max 1)) $separator -}}

layouts/partials/assets/card.html

@@ -15,6 +15,7 @@
 {{- $class := .class -}}
 {{- $color := .color -}}
 {{- $description := .description -}}
+{{- $body := .body | default "full" -}}
 {{- $footer := .footer | default "none" -}}
 {{- $gutter := .gutter | default "0" -}}
 {{- $header := .header | default "full" -}}
@@ -29,7 +30,9 @@
 {{- $orientation := .orientation | default "stacked" -}}
 {{- $padding := (string .padding) | default "auto" -}}
 {{- $ratio := .ratio -}}
+{{- $portrait := .portrait | default false -}}
 {{- $thumbnail := .thumbnail -}}
+{{- $anchor := .anchor | default "" -}}
 {{- $title := .title -}}
 {{- $subtle := .subtle -}}
 {{- $button := .button -}}
@@ -57,8 +60,12 @@
     {{- if not $title }}{{ $title = .Title }}{{ end -}}
     {{- if not $href }}{{ $href = .RelPermalink  }}{{ end -}}
     {{- if not $description }}{{ $description = partial "utilities/GetDescription.html" (dict "page" .) }}{{ end -}}
-    {{- if not $thumbnail }}{{ $thumbnail = (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) }}{{ end -}}
+    {{- if and (not $thumbnail) (not $icon) }}{{ $thumbnail = (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) }}{{ end -}}
+    {{ if not $ratio }}
+        {{- if and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.ratio }}{{ $ratio = .Params.Thumbnail.ratio }}{{ end -}}
+    {{ end }}
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
+    {{- if not $anchor }}{{ $anchor = (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.anchor) "") }}{{ end -}}
 {{- end -}}
 
 {{ if (hasPrefix $orientation "horizontal") }}
@@ -69,6 +76,7 @@
 {{ end }}
 
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
+{{- if eq $body "none" }}{{ $description = "" }}{{ end -}}
 
 <!-- Inline partial to render the card's body -->
 {{- define "partials/card-body.html" -}}
@@ -80,7 +88,7 @@
     
     {{- if $href -}}
         <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
-                <p class="card-title fs-5 fw-bold">{{ $title }}</p>
+                <p class="card-title fs-lg-5 fs-6 fw-bold">{{ $title }}</p>
             {{ with $description }}
                 <div class="card-text {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">
                 {{ . | safeHTML }}
@@ -89,7 +97,7 @@
         </a>
     {{- else -}}
         <div>
-            {{ with $title }}<p class="card-title fs-5 fw-bold">{{ . }}</p>{{ end -}}
+            {{ with $title }}<p class="card-title fs-lg-5 fs-6 fw-bold">{{ . }}</p>{{ end -}}
             {{ with $description }}<div class="card-text">{{ . | safeHTML }}</div>{{ end -}}
         </div>
     {{- end -}}
@@ -161,7 +169,7 @@
         <div class="row g-0 row-cols-2 h-100{{ if $button }} pb-5{{ end }}">
             {{- if $thumbnail -}}
                 <div class="{{ $col1 }}">
-                    {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "sizes" $sizes "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100 card-img-bg" "title" $title "loading" $loading) -}}
+                    {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "portrait" $portrait "sizes" $sizes "anchor" $anchor "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100 card-img-bg" "title" $title "loading" $loading) -}}
                 </div>
             {{- else if $icon -}}
                 <div class="{{ $col1 }} p-{{ $padding }}">
@@ -206,7 +214,7 @@
     <!-- Render stacked / default card -->
     <div class="card {{ $colorStyle }} {{ $class }} text-{{ $align }}">
         {{- if $thumbnail -}}
-            {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "sizes" $sizes "wrapper" "card-img-wrap" "class" "card-img-top card-img-bg" "title" (or $alt $title) "loading" $loading) -}}
+            {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "portrait" $portrait "anchor" $anchor "sizes" $sizes "wrapper" "card-img-wrap" "class" "card-img-top card-img-bg" "title" (or $alt $title) "loading" $loading) -}}
         {{- else if $icon -}}
             <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }} {{ if $iconRounded }}fa-stack {{ $stack }}{{ end }} w-100">
                 {{ if $iconRounded }}

layouts/partials/assets/helpers/image-definition.html

@@ -15,15 +15,16 @@
 {{- $mode := .mode -}}
 {{- $modes := .modes -}}
 {{- $plain := .plain | default false }}
+{{- $anchor := .anchor }}
 
 <!-- Split url into base and anchor when applicable (only relevant for vector images) -->
-{{- $anchor := "" -}}
+{{- $fileAnchor := "" -}}
 {{- $segments := split $url "#" -}}
 {{- if gt (len $segments) 2 -}}
     {{- errorf "Invalid path or url: %q" $url -}}
 {{- else if eq (len $segments) 2 }}
     {{- $url = index $segments 0 -}}
-    {{- $anchor = index $segments 1 -}}
+    {{- $fileAnchor = index $segments 1 -}}
 {{- end -}}
 
 <!-- Obtain fallback URL and imageset definition -->
@@ -34,6 +35,7 @@
     "portrait" $portrait
     "plain" $plain 
     "imageset" true
+    "anchor" $anchor
 ) }}
 {{ $fallbackURL := index $target "target" }}
 {{ $imgset := index $target "set" }}
@@ -50,9 +52,10 @@
 <!-- Generate image definition -->
 {{- if $caption -}}
     <figure {{ with $wrapper }}class="{{ . }}"{{ end }}>
+{{ else }}
+    {{ with $wrapper }}<div class="{{ . }}">{{ end }}
 {{ end }}
-<div class="{{ if not $caption }}{{ $wrapper }}{{ end }}">        
+{{- if not $fileAnchor -}}
-    {{- if not $anchor -}}
     <img class="img-fluid {{ $class }}"
         src="{{ $fallbackURL }}"
         {{ if $lazy }}loading="lazy"{{ end }}
@@ -63,11 +66,12 @@
         {{ with (or $title $caption) }}alt="{{ . }}"{{ end }}>
 {{- else }}
     <svg class="{{ $class }}">
-            <use href="{{ $fallbackURL }}#{{ $anchor }}"></use>
+        <use href="{{ $fallbackURL }}#{{ $fileAnchor }}"></use>
     </svg>
 {{ end }}
-</div>
 {{- if $caption -}}
         <figcaption class="figure-caption{{ with $figclass }} {{ . }}{{ end }}">{{ $caption | safeHTML }}</figcaption>
     </figure>
+{{ else if $wrapper }}
+    </div>
 {{- end -}}

layouts/partials/assets/helpers/image-dimension.html

@@ -9,6 +9,7 @@
 {{- $targetURL := "" -}}
 {{- $set := "" -}}
 {{- $imageset := .imageset | default false }}
+{{- $anchor := .anchor | default "" -}}
 
 <!-- Split url into base and anchor when applicable (only relevant for vector images) -->
 {{- $segments := split $url "#" -}}
@@ -118,13 +119,21 @@
         "url" $url
         "img" $img
         "dims" ($dims | last 1)
+        "anchor" $anchor
         "transform" $transform
         "hook" $hook
-        "format" "jpg"
+        "format" "png"
         "includeWidth" false
     )}}
     {{ if $imageset }}
-        {{- $set = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" $dims "transform" $transform "hook" $hook) -}}
+        {{- $set = partial "assets/helpers/image-set.html" (dict 
+            "url" $url
+            "img" $img
+            "dims" $dims
+            "anchor" $anchor
+            "transform" $transform
+            "hook" $hook
+        ) -}}
     {{ end }}
 {{ end }}
 

layouts/partials/assets/helpers/image-set.html

@@ -7,6 +7,7 @@
 {{ $transform := .transform }}
 {{ $format := .format }}
 {{ $includeWidth := .includeWidth | default true }}
+{{ $anchor := .anchor | default "" }}
 
 {{ $host := (urls.Parse $url).Hostname }}
 {{ $dir := (urls.Parse $url).Path }}
@@ -35,6 +36,7 @@
         "width" $width
         "height" $height
         "format" $format
+        "anchor" $anchor
     )}}
     {{ if $includeWidth }}
         {{ $imgset = $imgset | append (printf "%s %dw" $element $width) }}

layouts/partials/assets/image.html

@@ -27,6 +27,7 @@
 {{- if eq $priority "auto" }}{{ $priority = "" }}{{ end -}}
 {{- $sizes := .sizes | default "100vw" -}}
 {{- $plain := .plain | default false -}}
+{{- $anchor := .anchor | default "" -}}
 
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{- $url := .url -}}
@@ -49,6 +50,7 @@
     "sizes" $sizes
     "absoluteURL" $absoluteURL
     "plain" $plain
+    "anchor" $anchor
     )
 -}}
 

layouts/partials/assets/navbar-item.html

@@ -24,7 +24,7 @@
 {{- $menuURL := "" -}}
 {{ if or (strings.HasPrefix $menu.PageRef "http") (strings.HasPrefix $menu.URL "http") }}
     {{ $menuURL = or $menu.PageRef $menu.URL }}
-{{ else }}
+{{ else if (or $menu.PageRef $menu.URL) }}
     {{- $menuURL = urls.JoinPath $baseURL ((or $menu.PageRef $menu.URL) | relLangURL) -}}
 {{ end }}
 {{- $pageURL := $page.RelPermalink -}}
@@ -47,6 +47,11 @@
     {{- if $cue -}}
         {{ $suffix = partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}
     {{- end -}}
+{{ else if $menuURL }}
+    {{ $ref := partial "utilities/GetPage.html" (dict "url" $url.Path "page" $page) }}
+    {{- if not $ref -}}
+        {{- warnf "partial [assets/navbar-item.html] - Cannot find page of menu item '%s': %s" $menu.Name $url -}}
+    {{ end }}
 {{ end -}}
 
 {{- $mainNav := urlize (lower $menu.Name) -}}
@@ -82,7 +87,7 @@
         <a class="{{ $anchorClass }}{{ if $isActive }} active{{ end }}{{ with $class }} {{ . }}{{ end }}" 
             {{ if $isIcon }}aria-label="{{ $menu.Name }}"{{ end }}
             data-nav="main" data-nav-main="{{ $mainNav }}"{{ with $childNav }} data-nav-child="{{ . }}"{{ end }} 
-            href="{{ $menuURL }}{{ $params | safeHTMLAttr }}"{{ with $externalHref }} {{ . | safeHTMLAttr }}{{ end }} {{ $button | safeHTMLAttr }}>
+            {{ if $menuURL }} href="{{ $menuURL }}{{ $params | safeHTMLAttr }}"{{ with $externalHref }} {{ . | safeHTMLAttr }}{{ end }}{{ end }} {{ $button | safeHTMLAttr }}>
             
             {{- with $menu.Pre }}
                 {{ if hasPrefix . "<i" }}

layouts/shortcodes/card.html

@@ -32,6 +32,7 @@
 {{- $page := .Page -}}
 {{- $path := .Get "path" -}}
 {{- $thumbnail := .Get "thumbnail" -}}
+{{- $anchor := .Get "anchor" -}}
 {{- $title := .Get "title" -}}
 {{- $button := partial "utilities/GetArgParent" (dict "page" . "arg" "button") | default false -}}
 {{- $buttonType := partial "utilities/GetArgParent" (dict "page" . "arg" "buttonType") | default "" -}}
@@ -81,6 +82,7 @@
         "wrapper" $wrapper
         "thumbnail" $thumbnail
         "loading" $loading
+        "anchor" $anchor
         "alt" $alt
         "button" $button
         "buttonType" $buttonType

layouts/shortcodes/image.html

@@ -25,6 +25,7 @@
 {{- $loading := "" -}}
 {{- $error := false -}}
 {{- $plain := false -}}
+{{- $anchor := "" -}}
 
 {{- if .IsNamedParams -}}
     {{ $url = .Get "src" | default "" -}}
@@ -39,6 +40,7 @@
     {{ with .Get "mode" }}{{ $mode = partial "utilities/CastBool.html" . }}{{ end -}}
     {{ with .Get "portrait" }}{{ $portrait = partial "utilities/CastBool.html" . }}{{ end -}}
     {{ with .Get "plain" }}{{ $plain = partial "utilities/CastBool.html" . }}{{ end -}}
+    {{ $anchor = .Get "anchor" | default "" -}}
 {{ else -}}
     {{ $url = .Get 0 }}
 {{ end -}}
@@ -61,6 +63,7 @@
         "mode" $mode
         "portrait" $portrait
         "plain" $plain
+        "anchor" $anchor
         "loading" $loading
         "page" .Page)
     -}} 

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.24.15",
+  "version": "0.24.23",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.24.14",
+      "version": "0.24.23",
       "license": "MIT",
       "dependencies": {
         "@fullhuman/postcss-purgecss": "^6.0.0",
         "autoprefixer": "^10.4.19",
         "cssnano": "^7.0.4",
         "cssnano-preset-advanced": "^7.0.4",
-        "hugo-bin": "0.125.2",
+        "hugo-bin": "0.126.0",
         "purgecss-whitelister": "^2.4.0"
       },
       "devDependencies": {
@@ -22,7 +22,7 @@
         "eslint-config-standard": "^17.1.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-n": "^16.6.2",
-        "eslint-plugin-promise": "^6.4.0",
+        "eslint-plugin-promise": "^6.6.0",
         "markdownlint-cli2": "^0.13.0",
         "netlify-plugin-hugo-cache-resources": "^0.2.1",
         "npm-run-all": "^4.1.5",
@@ -2296,9 +2296,9 @@
       }
     },
     "node_modules/eslint-plugin-promise": {
-      "version": "6.4.0",
+      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.6.0.tgz",
-      "integrity": "sha512-/KWWRaD3fGkVCZsdR0RU53PSthFmoHVhZl+y9+6DqeDLSikLdlUVpVEAmI6iCRR5QyOjBYBqHZV/bdv4DJ4Gtw==",
+      "integrity": "sha512-57Zzfw8G6+Gq7axm2Pdo3gW/Rx3h9Yywgn61uE/3elTCOePEHVrn2i5CdfBwA1BLK0Q0WqctICIUSqXZW/VprQ==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3313,9 +3313,9 @@
       }
     },
     "node_modules/hugo-bin": {
-      "version": "0.125.2",
+      "version": "0.126.0",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.125.2.tgz",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.126.0.tgz",
-      "integrity": "sha512-JNjhuoGFBwJo6qDOeYUiXSoD7rPbwY36wyHJaqbRe9APNY1nPGO1Yy/Ut7rLcriKTBWKPZrh5Hz+9PzGnLV5Lw==",
+      "integrity": "sha512-tncBaQ1Gku3eVKB7PUiubj1VGXdTVB7OCYgrRqwlxxYMaIte9weg+uvEkZLJZJItNMv2wV2GpfIXblS5mLlvvg==",
       "funding": [
         {
           "type": "github",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.24.15",
+  "version": "0.24.23",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -71,7 +71,7 @@
     "autoprefixer": "^10.4.19",
     "cssnano": "^7.0.4",
     "cssnano-preset-advanced": "^7.0.4",
-    "hugo-bin": "0.125.2",
+    "hugo-bin": "0.126.0",
     "purgecss-whitelister": "^2.4.0"
   },
   "devDependencies": {
@@ -80,7 +80,7 @@
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-promise": "^6.4.0",
+    "eslint-plugin-promise": "^6.6.0",
     "markdownlint-cli2": "^0.13.0",
     "netlify-plugin-hugo-cache-resources": "^0.2.1",
     "npm-run-all": "^4.1.5",