Merge pull request #625 from gethinode/develop

Add fetch priority support for images

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 "#" -}}
@@ -255,6 +269,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 +297,7 @@
     "title" $title
     "caption" $caption
     "lazy" $lazy
+    "priority" $priority
     "page" $page)
 -}}
 

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

@@ -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/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.4",
+  "version": "0.21.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.21.4",
+      "version": "0.21.5",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",
@@ -20,7 +20,7 @@
         "eslint-plugin-import": "^2.29.0",
         "eslint-plugin-n": "^16.3.0",
         "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",
@@ -4304,9 +4304,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": [
         {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.21.4",
+  "version": "0.21.5",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -78,7 +78,7 @@
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-n": "^16.3.0",
     "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",