Merge pull request #630 from gethinode/develop

Improve list overview of subsections

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/_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;

i18n/en.yaml

@@ -30,6 +30,16 @@
 - 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
   translation: "Share via {{ . }}"

i18n/nl.yaml

@@ -28,6 +28,16 @@
 - 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
   translation: "Delen via {{ . }}"

layouts/_default/single/panel-toc.html

@@ -21,9 +21,18 @@
 
 <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" (T "download" ) "color" "primary" "outline" "true" "icon" "fas download" "size" "sm" "attributes" $attr) }}
+            {{ partial "assets/button.html" (dict "href" . "title" $title "color" "primary" "outline" "true" "icon" "fas download" "size" "sm" "attributes" $attr) }}
         </div>
     {{ 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,6 +223,12 @@
     {{- 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 -}}
         {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
         {{- $img := "" -}}
@@ -255,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 }}
@@ -282,6 +303,7 @@
     "title" $title
     "caption" $caption
     "lazy" $lazy
+    "priority" $priority
     "page" $page)
 -}}
 

layouts/partials/assets/section-list.html

@@ -84,6 +84,8 @@
         {{ $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 }}

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,6 +1,6 @@
 {{- $page := .page -}}
 {{- $class := printf "img-wrap" -}}
-{{- with .class }}{{ $class := printf "img-wrap %s" . }}{{ end -}}
+{{- with .class }}{{ $class = printf "img-wrap %s" . }}{{ end -}}
 {{- $ratio := .ratio | default "21x9" -}}
 {{- $thumbnail := "" -}}
 {{- $credits := "" -}}
@@ -35,5 +35,5 @@
 {{- end -}}
 
 {{ if $thumbnail -}}
-    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" $ratio "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/GetImage.html

@@ -13,18 +13,8 @@
 {{ $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) -}}

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/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/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 -}}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.21.3",
+  "version": "0.21.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.21.3",
+      "version": "0.21.6",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",
@@ -18,9 +18,9 @@
         "eslint": "^8.53.0",
         "eslint-config-standard": "^17.1.0",
         "eslint-plugin-import": "^2.29.0",
-        "eslint-plugin-n": "^16.3.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",
@@ -1529,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",
@@ -2938,9 +2950,9 @@
       "dev": true
     },
     "node_modules/eslint-plugin-n": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-16.3.0.tgz",
-      "integrity": "sha512-/XZLH5CUXGK3laz3xYFNza8ZxLCq8ZNW6MsVw5z3d5hc2AwZzi0fPiySFZHQTdVDOHGs2cGv91aqzWmgBdq2gQ==",
+      "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",
@@ -2948,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",
@@ -4304,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": [
         {
@@ -4576,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.3",
+  "version": "0.21.6",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -76,9 +76,9 @@
     "eslint": "^8.53.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.3.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",