Merge pull request #430 from gethinode/develop

Improve references and page resource handling

exampleSite/hugo_stats.json

@@ -315,7 +315,6 @@
       "py-md-1",
       "ratio",
       "ratio-16x9",
-      "ratio-21x9",
       "rounded",
       "rounded-2",
       "rounded-bottom",

i18n/fr.yaml

@@ -94,7 +94,7 @@
 
 # 404 page
 - id: pageNotFound
-  translation: "La page que vous recherchez n'existe pas ou une autre erreur s'est produite.Essayez de revenir à notre {{ . }}."
+  translation: "La page que vous recherchez n'existe pas ou une autre erreur s'est produite. Essayez de revenir à notre {{ . }}."
 - id: pageNotFoundTitle
   translation: "Page non trouvée"
 - id: pageNotFoundHome
@@ -112,4 +112,4 @@
 - id: show
   translation: "Afficher"
 - id: comments
-  translation: "Commentaires" 
+  translation: "Commentaires"

layouts/partials/assets/image.html

@@ -6,18 +6,28 @@
     partial supports the following arguments:
     "url":          Required relative url of the image, e.g. "img/example.jpg"
     "mode":         Optional flag indicating if the image should support color modes.
-    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is
+    "ratio":        Optional ratio of the image, either "1x1", "3x2", "4x3", "16x9", or "21x9". If set, the image is
                     resized and cropped to match the ratio. Else the original aspect ratio of the image is kept.
+    "portrait":     Optional flag to adjust the ratio from landscape to portrait. The image itself is not rotated, only
+                    the crop area is adjusted.
     "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.
     "caption":      Optional figure caption.
+    "page":         Optional page context, used to match page resources.
 -->
 
-{{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" -}}
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
+{{- $validRatios := slice "1x1" "3x2" "4x3" "16x9" "21x9" -}}
 {{- $ratio := .ratio -}}
+{{- if $ratio -}}
+    {{ if not (in $validRatios $ratio) -}}
+        {{- errorf "partial [assets/image.html] - Invalid value for param 'ratio'" -}}
+    {{ end -}}
+{{- end -}}
+{{- $portrait := .portrait -}}
 {{- $url := .url -}}
+
 {{- $mode := false -}}
 {{- with .mode -}}
     {{ $mode = . -}}
@@ -30,12 +40,37 @@
     {{- errorf "partial [assets/image.html] - Invalid value for param 'mode'" -}}
 {{- end -}}
 {{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}
+{{- $page := .page -}}
 
 
+{{- define "partials/image-portrait.html" -}}
+    {{- $dimensions := slice }}
+    {{- $dim := .dim -}}
+    {{- $dimensions = $dimensions | append $dim -}}
+    {{- $portraits := slice }}
+    {{- range $d := $dimensions -}}
+        {{- $p := split $d "x" }}
+        {{ if ne (len $p) 2 }}
+            {{- warnf "partial [assets/image.html] - Invalid dimension: %s" $d -}}
+            {{- $portraits = $portraits | append $d -}}
+        {{- else -}}
+            {{- $portraits = $portraits | append (printf "%sx%s" (index $p 1) (index $p 0)) -}}
+        {{- end -}}
+    {{- end -}}
+    {{- $ret := "" }}
+    {{- if reflect.IsSlice $dim -}}
+        {{ $ret = $portraits -}}
+    {{- else if gt (len $portraits) 0 -}}
+        {{- $ret = index $portraits 0 -}}
+    {{- end -}}
+    {{- return $ret -}}
+{{- end -}}
+
 <!-- Generate a fallback image of type jpg -->
 {{- define "partials/image-default.html" -}}
     {{- $img := .img -}}
     {{- $ratio := .ratio -}}
+    {{- $portrait := and .portrait .ratio -}}
     {{- $width := "1400" -}}
     {{- $dim := "" -}}
     {{- $fallback := "" -}}
@@ -43,6 +78,8 @@
     {{- with $img -}}
         {{- if eq $ratio "4x3" -}}
             {{- $dim  = "1400x1050" }}
+        {{- else if eq $ratio "3x2" -}}
+            {{- $dim  = "1400x933" }}
         {{- else if eq $ratio "1x1" -}}
             {{- $dim  = "1400x1400" }}
         {{- else if eq $ratio "16x9" -}}
@@ -53,6 +90,10 @@
             {{- $dim = printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height))) -}}
         {{- end -}}
 
+        {{- if $portrait -}}
+            {{- $dim = partial "partials/image-portrait.html" (dict "dim" $dim) -}}
+        {{- end -}}
+
         {{- if $ratio -}}
             {{- $fallback = ($img.Fill (printf "%s jpg" $dim)) -}}
         {{- else -}}
@@ -72,6 +113,7 @@
     {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
     {{- $img := .img -}}
     {{- $ratio := .ratio -}}
+    {{- $portrait := and .portrait .ratio -}}
     {{- $imgset := "" -}}
 
     {{- $widths := slice "576" "768" "992" "1200" "1400" -}}
@@ -79,6 +121,8 @@
     {{- with $img -}}
         {{- if eq $ratio "4x3" -}}
             {{- $dims  = slice "576x432" "768x576" "992x744" "1200x900"  "1400x1050" -}}
+        {{- else if eq $ratio "3x2" -}}
+            {{- $dims = slice "576x384"  "768x512" "992x661" "1200x800"  "1400x933" -}}
         {{- else if eq $ratio "1x1" -}}
             {{- $dims  = slice "576x576" "768x768" "992x992" "1200x1200" "1400x1400" -}}
         {{- else if eq $ratio "16x9" -}}
@@ -91,6 +135,10 @@
             {{- end -}}
         {{- end -}}
 
+        {{- if $portrait -}}
+            {{- $dims = partial "partials/image-portrait.html" (dict "dim" $dims) -}}
+        {{- end -}}
+
         {{- $scaled := "" -}}
         {{- range $index, $dim := $dims -}}
             {{- $clean := path.Ext $img.RelPermalink -}}
@@ -116,6 +164,7 @@
 {{- define "partials/image-definition.html" -}}
     {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
     {{- $ratio := .ratio -}}
+    {{- $portrait := .portrait -}}
     {{- $url := .url -}}
     {{- $outerClass := .outerClass -}}
     {{- $innerClass := .innerClass -}}
@@ -125,19 +174,20 @@
     {{- $imgset := "" -}}
     {{- $mode := .mode -}}
     {{- $modes := .modes -}}
+    {{- $page := .page -}}
 
     {{- if hasSuffix $url "svg" -}}
         {{- $fallbackURL = $url -}}
     {{- else -}}
-        {{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
+        {{- $img := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
         {{- if $img -}}
-            {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio) -}}
+            {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
                 {{- if $absoluteURL -}}
                     {{- $fallbackURL = $fallback.Permalink -}}
                 {{- else -}}
                     {{- $fallbackURL = $fallback.RelPermalink -}}
                 {{- end -}}
-            {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio) -}}
+            {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
         {{- end -}}
     {{- end -}}
 
@@ -150,7 +200,7 @@
     {{- if $caption -}}
         <figure {{ with $outerClass }}class="{{ . }}"{{ end }}>
     {{ end }}
-        <div class="{{ with $ratio }}ratio ratio-{{ . }}{{ end }}{{ if not $caption }} {{ $outerClass }}{{ end }}">
+        <div class="{{ if not $caption }}{{ $outerClass }}{{ end }}">
             <img class="img-fluid {{ $innerClass }}"
                 {{ with $imgset -}}
                 srcset="{{ . }}"
@@ -162,7 +212,7 @@
     {{- if $caption -}}
         <figcaption class="figure-caption">{{ $caption | safeHTML }}</figcaption>
     </figure>
-{{- end -}}
+    {{- end -}}
 {{- end -}}
 
 <!-- Initiate the regular or color-mode image -->
@@ -177,22 +227,26 @@
         {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
         {{- partial "partials/image-definition.html" (dict 
             "ratio" $ratio
+            "portrait" $portrait
             "url" $image
             "outerClass" $outerClass
             "innerClass" $innerClass
             "title" $title
             "caption" $caption
             "mode" $suffix
-            "modes" $modes)
+            "modes" $modes
+            "page" $page)
         -}}
     {{- end -}}
 {{- else -}}
     {{- partial "partials/image-definition.html" (dict 
         "ratio" $ratio
+        "portrait" $portrait
         "url" $url
         "outerClass" $outerClass
         "innerClass" $innerClass
         "title" $title
-        "caption" $caption)
+        "caption" $caption
+        "page" $page)
     -}}
 {{- end -}}

layouts/partials/utilities/GetImage.html

@@ -1,18 +1,28 @@
 <!-- 
-    Retrieve a local or remote resource compatible with Hugo's image processing. The path of a remote image is
+    Retrieve a local or remote resource compatible with Hugo's image processing. If the url starts with 'http', the
-    rewritten to ensure processed files are stored in the final '/img' folder. The partial returns nil if the
+    image is retrieved from an external location. Else, the url is matched with a page resource and site asset (in that
-    resource cannot be found or is incompatibile. The partial supports the following arguments:
+    order). The path of a remote image is rewritten to ensure processed files are stored in the final '/img' folder. The
-    "url":          Required path or url of the image, e.g. "img/example.jpg" or "https://example.com/img.jpg"
+    partial returns nil if the resource cannot be found or is incompatibile. The partial supports the following
+    arguments:
+    "url"           Required path or url of the image, e.g. "img/example.jpg" or "https://example.com/img.jpg"
+    "page"          Optional page context, used to retrieve an image from page resources.
 -->
 
 {{ $url := .url -}}
+{{ $page := .page -}}
+
 {{ $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 }}
-    {{ $img = resources.GetMatch $url -}}
+    {{ if $page }}
+        {{ $img = $page.Resources.Get $url -}}
+    {{ end }}
+    {{ if not $img }}
+        {{ $img = resources.GetMatch $url }}
+    {{ end }}
 {{ end }}
 
 {{ with $img -}}

layouts/partials/utilities/link.html

@@ -9,24 +9,16 @@
 {{- $cue := .cue | default site.Params.main.externalLinks.cue -}}
 {{- $tab := .tab | default site.Params.main.externalLinks.tab -}}
 {{- $isExternal := ne (urls.Parse (absURL $destination)).Host (urls.Parse site.BaseURL).Host -}}
-
+{{- $page := .page -}}
-{{ $text := .text }}
+{{- $anchor := "" -}}
-{{- if not $text -}}
+{{- $text := .text -}}
-    {{ if $isExternal }}
+{{- $class := .class -}}
-        {{ $text = (urls.Parse (absURL $destination)).Host }}
-    {{ else }}
-        {{ $target := site.GetPage $destination }}
-        {{ if not $target }}
-            {{- errorf "partial [utilities/link.html] - Cannot find page: %s" $destination -}}
-        {{ else }}
-            {{ $text = $target.Title }}
-            {{ if not $case }}{{ $text = lower $text }}{{ end }}
-            {{ $destination = $target.RelPermalink }}
-        {{ end }}
-    {{ end }}
-{{- end -}}
 
 {{- if $isExternal -}}
+    {{- if not $text -}}
+        {{- $text = (urls.Parse (absURL $destination)).Host -}}
+    {{- end -}}
+
     {{- if $tab -}}
         {{- $target = "_blank" -}}
         {{- $rel = "noopener noreferrer" -}}
@@ -36,10 +28,31 @@
         {{ $suffix := partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}
         {{- $text = printf "%s %s" $text $suffix | safeHTML -}}
     {{- end -}}
-{{ else }}
+{{- else -}}
-    {{ $destination = relLangURL $destination }}
+    {{- if strings.Contains $destination "#" }}
+        {{ $segments := split $destination "#" }}
+        {{- if ne (len $segments) 2 }}
+            {{- errorf "partial [utilities/link.html] - Malformed path, expected one anchor '#' only: %s" $destination -}}
+        {{ else }}
+            {{- $destination = index $segments 0 -}}            
+            {{- $anchor = index $segments 1 -}}            
+        {{ end }}
+    {{ end }}
+    {{- $ref := $page.GetPage $destination -}}
+    {{- if not $ref -}}
+        {{- errorf "partial [utilities/link.html] - Cannot find page: %s" $destination -}}
+    {{- else -}}
+        {{- $destination = $ref.RelPermalink -}}
+        {{- with $anchor }}{{ $destination = printf "%s#%s" (strings.TrimSuffix "/" $destination) . -}}{{ end -}}
+        {{- if not $text -}}
+            {{- if $anchor -}}
+                {{- $text = $anchor -}}
+            {{- else -}}
+                {{- $text = $ref.LinkTitle -}}
+            {{- end -}}
+        {{ end -}}
+        {{- if not $case }}{{ $text = lower $text }}{{ end -}}
+    {{- end -}}
 {{- end -}}
 
-{{- $class := .class -}}
-
 <a {{ with $class }}class="{{ . }}" {{ end }}href="{{ $destination | safeURL }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{ $text }}</a>

layouts/shortcodes/carousel.html

@@ -2,8 +2,10 @@
     Displays a carousel of several responsive images (see the image shortcode for more details). Add inner <img> 
     elements to define individual image slides. The shortcode supports the following arguments:
     "id":           Optional id of the carousel, defaults to "carousel-" with a sequential number.
-    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
+    "ratio":        Optional ratio of the images, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
                     Instead, the original aspect ratio of the image is preserved.
+    "portrait":     Optional flag to adjust the ratio from landscape to portrait. The images themselves are not rotated,
+                    only the crop area is adjusted.
     "class":        Optional class attribute of the carousel element, e.g. “w-75”.
 -->
 
@@ -12,7 +14,6 @@
     {{ $id = . }}
 {{ end }}
 
-{{ $ratio := .Get "ratio" -}}
 {{ $class := .Get "class" -}}
 {{ $images := .Inner -}}
 {{ $items := len (findRE "carousel-item" $images) -}}

layouts/shortcodes/example.html

@@ -21,7 +21,7 @@
 
 {{ $preprocess := slice "hugo" "markdown" }}
 {{- if in $preprocess $lang -}}
-    {{- $content = (trim $content "\r\n") | markdownify }}
+    {{- $content = (trim $content "\r\n") | .Page.RenderString }}
     {{ $lang = "markdown" }}
 {{- end -}}
 

layouts/shortcodes/image.html

@@ -4,8 +4,11 @@
     section of the main config file (defaults to 75). A fallback image is provided for older browsers. The partial
     supports the following arguments:
     "src":          Required relative url of the image, e.g. "img/example.jpg"
-    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Leave empty to keep the
+    "ratio":        Optional ratio of the image, either "1x1", "3x2", "4x3", "16x9", or "21x9". Leave empty to keep the
                     original aspect ratio of the image.
+    "portrait":     Optional flag to adjust the ratio from landscape to portrait. The image itself is not rotated, only
+                    the crop area is adjusted.
+    "wrapper":      Optional class attributes of the wrapper element, e.g. "mx-auto".
     "class":        Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
     "caption":      Optional figure caption.
@@ -14,7 +17,7 @@
 
 {{- if isset .Params "src" -}}
     {{ $url := .Get "src" -}}
-    {{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" -}}
+    {{- $validRatios := slice "1x1" "3x2" "4x3" "16x9" "21x9" -}}
     {{ $ratio := .Get "ratio" -}}
     {{ if $ratio -}}
         {{ if not (in $validRatios $ratio) -}}
@@ -23,6 +26,7 @@
     {{ end -}}
     
     {{- $class := .Get "class" -}}
+    {{- $wrapper := .Get "wrapper" -}}
     {{ $title := .Get "title" -}}
     {{ $caption := .Get "caption" -}}
     {{ $supportedFlags := slice "true" "false" -}}
@@ -34,14 +38,25 @@
     {{ else -}}
         {{ errorf "Invalid value for param 'mode': %s" $modeParam -}}
     {{ end -}}
+    {{ $portraitParam := "false" -}}
+    {{ $portrait := false -}}
+    {{ with .Get "portrait" }}{{ $portraitParam = . }}{{ end -}}
+    {{ if in $supportedFlags $portraitParam -}}
+        {{ if eq $portraitParam "true" }}{{ $portrait = true }}{{ else }}{{ $portrait = false }}{{ end -}}
+    {{ else -}}
+        {{ errorf "Invalid value for param 'portrait': %s" $portraitParam -}}
+    {{ end -}}
     
     {{- partial "assets/image.html" (dict 
         "url" $url
         "ratio" $ratio
+        "outerClass" $wrapper
         "innerClass" $class
         "title" $title
         "caption" $caption
-        "mode" $mode)
+        "mode" $mode
+        "portrait" $portrait
+        "page" .Page)
     -}} 
 {{ else -}}
     {{ errorf "Missing value for param 'src': %s" .Position -}}

layouts/shortcodes/img.html

@@ -2,8 +2,10 @@
     Renders a carousel item with a responsive image (see the image shortcode for more details). The shortcode
     supports the following arguments:
     "src":          Required relative url of the image, e.g. "img/example.jpg"
-    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
+    "ratio":        Optional ratio of the image, either "1x1", "3x2", "4x3", "16x9", or "21x9". Other values are
-                    Instead, the original aspect ratio of the image is preserved.
+                    ignored. Instead, the original aspect ratio of the image is preserved.
+    "portrait":     Optional flag to adjust the ratio from landscape to portrait. The image itself is not rotated, only
+                    the crop area is adjusted.
     "caption":      Optional carousel slide caption.
 -->
 
@@ -15,10 +17,16 @@
 {{ else }}
     {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
 {{ end -}}
+{{- $portrait := false -}}
+{{ with .Parent -}}
+    {{ with .Get "portrait" }}{{ $portrait = . }}{{ end -}}
+{{ else }}
+    {{ with .Get "portrait" }}{{ $portrait = . }}{{ end -}}
+{{ end -}}
 
 {{- if $src -}}
     <div class="carousel-item {{ if eq .Ordinal 0 }}active{{ end }}">
-        {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "innerClass" "d-block w-100") }}
+        {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" .Page "innerClass" "d-block w-100" "portrait" $portrait) }}
         <div class="carousel-caption gradient"></div>
         {{ with $caption }}
             <div class="carousel-caption d-none d-md-block">

layouts/shortcodes/link.html

@@ -1,8 +1,9 @@
 <!-- 
     Generates a link for a given named link or url. The shortcode supports a single unnamed parameter, or various named
-    parameters. The unnamed parameter is recognized as a named link if it does not contain any "/", otherwise it is
+    parameters. The unnamed parameter is recognized as a url if it starts with "http", else it is treated as either a
-    treated as a url. Any inner text is rendered as the link title, otherwise it uses the host name (for external links)
+    named link or internal reference (in that order). Any inner text is rendered as the link title, otherwise it uses
-    or page name (for internal links). The shortcode supports the following named arguments:
+    the host name (for external links), link title (for internal links), or anchor name (for any local references
+    containing a `#`). The shortcode supports the following named arguments:
     "name"          Optional name of the link maintained in the "links" section of the site's parameters. If omitted,
                     the "url" argument should be provided instead.
     "url"           Optional url of the link, including the scheme ("http" or "https"). If omitted, the "name" argument
@@ -22,6 +23,8 @@
 {{ $case := true }}
 {{ $cue := site.Params.main.externalLinks.cue }}
 {{ $tab := site.Params.main.externalLinks.tab }}
+{{ $text := trim .Inner " \r\n" | markdownify | safeHTML }}
+{{- $anchor := "" -}}
 
 {{ if .IsNamedParams }}
     {{ $name = .Get "name" }}
@@ -43,16 +46,38 @@
 {{ if $name }}
     {{ $url = index site.Params.links $name }}
     {{ if not $url }}
-        {{ errorf "Cannot find link '%s': %s" $name .Position -}}
+        {{ $url = $name }}
-        {{ $error = true -}}
+        {{- if strings.Contains $url "#" }}
+            {{ $segments := split $url "#" }}
+            {{- if ne (len $segments) 2 }}
+                {{ errorf "Malformed path, expected one anchor '#' only: '%s' at %s" $url .Position -}}
+            {{ else }}
+                {{- $url = index $segments 0 -}}            
+                {{- $anchor = index $segments 1 -}}            
+                {{ if not $url }}
+                    {{- $url = strings.TrimSuffix "/" .Page.RelPermalink -}}
+                    {{- with .Page.Language }}{{ $url = strings.TrimPrefix (path.Join "/" .Lang) $url}}{{ end -}}
+                {{ end }}
+            {{ end }}
+        {{ end }}
     {{ end }}
 {{ end }}
 
-{{ $text := trim .Inner " \r\n" | markdownify | safeHTML }}
-
 {{- $class := .Get "class" -}}
 
-{{- if not $error -}}
+{{- $isExternal := ne (urls.Parse (absURL $url)).Host (urls.Parse site.BaseURL).Host -}}
-    {{ partial "utilities/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case "class" $class) }}
+{{- if not $isExternal -}}
+    {{- $ref := .Page.GetPage $url -}}
+    {{- if not $ref -}}
+        {{- errorf "Cannot find page: '%s' at %s" $url .Position -}}
+        {{- $error = true -}}
+    {{- end -}}
+{{- end -}}
+
+{{ with $anchor }}
+    {{ $url = printf "%s#%s" $url .}}
+{{ end }}
+{{- if not $error -}}
+    {{ partial "utilities/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case "class" $class "page" .Page) }}
 {{- end -}}
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.18.1",
+      "version": "0.18.3",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",