Merge pull request #44 from markdumay/develop

External links
gethinode · Nov 3, 2022 · 14b6d25 · 14b6d25
2 parents 9d1a5ad + 2ed6e0a
commit 14b6d25
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 132 deletions.
diff --git a/README.md b/README.md
@@ -109,7 +109,7 @@ The main site configuration is available in `./config/_default`. Some remarks:
 - **Content** - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
 - **Theme color** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility.
 - **Comments** - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`.
-- **Security headings** - The local development server uses the header configuration as provided by `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
+- **Security policy** - The theme uses rather strict security policies by default. Be sure to allow references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
 
 ## Contributing
 

diff --git a/config/_default/server.toml b/config/_default/server.toml
@@ -16,7 +16,7 @@ for = '/**'
         connect-src 'self' localhost:1313 ws://localhost:1313/livereload; \
         font-src 'self' https://fonts.gstatic.com; \
         frame-src 'self' localhost:1313 https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' https://i.vimeocdn.com https://i.ytimg.com; \
+        img-src 'self' https: data:; \
         manifest-src 'self'; \
         media-src 'self' \
         """

diff --git a/content/en/blog/emoji-support.md b/content/en/blog/emoji-support.md
@@ -4,7 +4,8 @@ title: "Emoji Support"
 date: 2021-07-15
 description: "Guide to emoji usage in Hugo"
 tags: ["emoji"]
-thumbnail: img/dunes.jpg # https://picsum.photos/id/184/4288/2848
+# thumbnail: img/dunes.jpg
+thumbnail: https://picsum.photos/id/184/4288/2848
 credits: Photo by <a href="https://unsplash.com/@timdegroot">Tim de Groot</a> on <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
 ---
 

diff --git a/layouts/partials/head/seo.html b/layouts/partials/head/seo.html
@@ -17,9 +17,16 @@
 
 {{ with .Params.thumbnail }}
     {{ $source := resources.Get . -}}
-    {{ $dim := "1280x640" -}}
-    {{ $img := ($source.Fill (printf "%s jpg" $dim)) -}}
-    {{ $.Scratch.Set "thumbnail" ($img.Permalink | absURL) -}}
+    {{ if not $source }}
+        {{ $source = resources.GetRemote . -}}
+    {{ end }}
+    {{ with $source }}
+        {{ $dim := "1280x640" -}}
+        {{ $img := (.Fill (printf "%s jpg" $dim)) -}}
+        {{ $.Scratch.Set "thumbnail" ($img.Permalink | absURL) -}}
+    {{ else }}
+        {{ warnf "Cannot find thumbnail: %q" . }}
+    {{ end }}
 {{ else }}
     {{ with .Site.Params.schemaImage -}}    
         {{ $.Scratch.Set "thumbnail" (. | absURL) }}

diff --git a/layouts/partials/image.html b/layouts/partials/image.html
@@ -1,9 +1,9 @@
 <!-- 
-    Render an image with responsive image sizing. The image should be available as resource stored in the "assets"
-    folder. Images are resized using default media breakpoints and are converted to webp format. The image is
-    processed using the quality setting specified in the [imaging] section of the main config file (defaults to 75).
-    A fallback image is provided for older browsers. The image is wrapped in a figure if a caption is provided, else
-    the image is wrapped in a div with a ratio constraint. The partial supports the following arguments:
+    Render a local or remote image with responsive image sizing. Images are resized using default media breakpoints
+    and are converted to webp format. The image is processed using the quality setting specified in the [imaging]
+    section of the main config file (defaults to 75). A fallback image is provided for older browsers. The image is
+    wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint. The
+    partial supports the following arguments:
     "url":          Required relative url of the image, e.g. "img/example.jpg"
     "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
     "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
@@ -13,70 +13,81 @@
 -->
 
 
-{{ $img := resources.Get .url -}}
+{{ $img := resources.GetMatch .url -}}
+{{ $ratio := .ratio}}
+{{ $outerClass := .outerClass -}}
 {{ $innerClass := .innerClass -}}
 {{ $title := .title -}}
+{{ $caption := .caption -}}
 
-<!-- default ratio 4x3 -->
-{{ $smDim := "576x432" -}}
-{{ $mdDim := "768x576" -}}
-{{ $lgDim := "992x744" -}}
-{{ $xlDim := "1200x900" -}}
-{{ $xxlDim := "1400x1050" -}}
+{{ if not $img }}
+    {{ $img = resources.GetRemote .url -}}
+{{ end}}
 
-{{ if eq .ratio "1x1" -}}
-    {{ $smDim = "576x576" -}}
-    {{ $mdDim = "768x768" -}}
-    {{ $lgDim = "992x992" -}}
-    {{ $xlDim = "1200x1200" -}}
-    {{ $xxlDim = "1400x1400" -}}
-{{ else if eq .ratio "16x9" -}}
-    {{ $smDim = "576x324" -}}
-    {{ $mdDim = "768x432" -}}
-    {{ $lgDim = "992x558" -}}
-    {{ $xlDim = "1200x675" -}}
-    {{ $xxlDim = "1400x788" -}}
-{{ else if eq .ratio "21x9" -}}
-    {{ $smDim = "576x247" -}}
-    {{ $mdDim = "768x329" -}}
-    {{ $lgDim = "992x425" -}}
-    {{ $xlDim = "1200x514" -}}
-    {{ $xxlDim = "1400x600" -}}
-{{ end -}}
+{{ with $img }}
+    <!-- default ratio 4x3 -->
+    {{ $smDim := "576x432" -}}
+    {{ $mdDim := "768x576" -}}
+    {{ $lgDim := "992x744" -}}
+    {{ $xlDim := "1200x900" -}}
+    {{ $xxlDim := "1400x1050" -}}
 
-{{ $sm := ($img.Fill (printf "%s webp" $smDim)) -}}
-{{ $md := ($img.Fill (printf "%s webp" $mdDim)) -}}
-{{ $lg := ($img.Fill (printf "%s webp" $lgDim)) -}}
-{{ $xl := ($img.Fill (printf "%s webp" $xlDim)) -}}
-{{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) -}}
-{{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) -}}
+    {{ if eq $ratio "1x1" -}}
+        {{ $smDim = "576x576" -}}
+        {{ $mdDim = "768x768" -}}
+        {{ $lgDim = "992x992" -}}
+        {{ $xlDim = "1200x1200" -}}
+        {{ $xxlDim = "1400x1400" -}}
+    {{ else if eq $ratio "16x9" -}}
+        {{ $smDim = "576x324" -}}
+        {{ $mdDim = "768x432" -}}
+        {{ $lgDim = "992x558" -}}
+        {{ $xlDim = "1200x675" -}}
+        {{ $xxlDim = "1400x788" -}}
+    {{ else if eq $ratio "21x9" -}}
+        {{ $smDim = "576x247" -}}
+        {{ $mdDim = "768x329" -}}
+        {{ $lgDim = "992x425" -}}
+        {{ $xlDim = "1200x514" -}}
+        {{ $xxlDim = "1400x600" -}}
+    {{ end -}}
 
+    {{ $sm := ($img.Fill (printf "%s webp" $smDim)) -}}
+    {{ $md := ($img.Fill (printf "%s webp" $mdDim)) -}}
+    {{ $lg := ($img.Fill (printf "%s webp" $lgDim)) -}}
+    {{ $xl := ($img.Fill (printf "%s webp" $xlDim)) -}}
+    {{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) -}}
+    {{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) -}}
 
-{{ with .caption -}}
-    <figure class="figure">
-        <img class="figure-img img-fluid {{ $innerClass }}"
-            srcset="
-                {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
-                {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
-                {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
-                {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
-                {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
-            sizes="100vw"
-            src="{{ $fallback.RelPermalink }}"
-            alt="{{ $title }}">
-        <figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>
-    </figure>
-{{ else -}}
-    <div class="ratio ratio-{{ .ratio }} {{ .outerClass }}">
-        <img class="img-fluid {{ $innerClass }}"
-            srcset="
-                {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
-                {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
-                {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
-                {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
-                {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
-            sizes="100vw"
-            src="{{ $fallback.RelPermalink }}"
-            alt="{{ $title }}">
-    </div>
-{{ end -}}
+
+    {{ with $caption -}}
+        <figure class="figure">
+            <img class="figure-img img-fluid {{ $innerClass }}"
+                srcset="
+                    {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
+                    {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
+                    {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
+                    {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
+                    {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
+                sizes="100vw"
+                src="{{ $fallback.RelPermalink }}"
+                alt="{{ $title }}">
+            <figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>
+        </figure>
+    {{ else -}}
+        <div class="ratio ratio-{{ $ratio }} {{ $outerClass }}">
+            <img class="img-fluid {{ $innerClass }}"
+                srcset="
+                    {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
+                    {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
+                    {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
+                    {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
+                    {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
+                sizes="100vw"
+                src="{{ $fallback.RelPermalink }}"
+                alt="{{ $title }}">
+        </div>
+    {{ end -}}
+{{ else }}
+    {{ warnf "Cannot find image resource: %q" .url }}
+{{ end }}
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
@@ -1,8 +1,8 @@
 <!-- 
-    Render an image with responsive image sizing. The image should be available as resource stored in the "assets"
-    folder. Images are resized using default media breakpoints and are converted to webp format. The image is
-    processed using the quality setting specified in the [imaging] section of the main config file (defaults to 75).
-    A fallback image is provided for older browsers. The partial supports the following arguments:
+    Render a local or remote image with responsive image sizing. Images are resized using default media breakpoints
+    and are converted to webp format. The image is processed using the quality setting specified in the [imaging]
+    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":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
     "class":        Optional class attribute of the inner img element, e.g. "rounded".
@@ -13,64 +13,68 @@
 {{ if isset .Params "src" }}
     {{ $url := .Get "src" }}
     {{ $ratio := "4x3" }}
-    {{ $class := "" }}
-    {{ $title := "" }}
-    {{ $caption := "" }}
-
-    {{ $img := resources.Get $url }}
     {{ with .Get "ratio" }}{{ $ratio = . }}{{ end }}
-    {{ with .Get "class" }}{{ $class = . }}{{ end }}
-    {{ with .Get "title" }}{{ $title = . }}{{ end }}
-    {{ with .Get "caption" }}{{ $caption = . }}{{ end }}
-
-    <!-- default ratio 4x3 -->
-    {{ $smDim := "576x432" }}
-    {{ $mdDim := "768x576" }}
-    {{ $lgDim := "992x744" }}
-    {{ $xlDim := "1200x900" }}
-    {{ $xxlDim := "1400x1050" }}
-
-    {{ if eq $ratio "1x1"}}
-        {{ $smDim = "576x576" }}
-        {{ $mdDim = "768x768" }}
-        {{ $lgDim = "992x992" }}
-        {{ $xlDim = "1200x1200" }}
-        {{ $xxlDim = "1400x1400" }}
-    {{ else if eq $ratio "16x9"}}
-        {{ $smDim = "576x324" }}
-        {{ $mdDim = "768x432" }}
-        {{ $lgDim = "992x558" }}
-        {{ $xlDim = "1200x675" }}
-        {{ $xxlDim = "1400x788" }}
-    {{ else if eq $ratio "21x9"}}
-        {{ $smDim = "576x247" }}
-        {{ $mdDim = "768x329" }}
-        {{ $lgDim = "992x425" }}
-        {{ $xlDim = "1200x514" }}
-        {{ $xxlDim = "1400x600" }}
-    {{ end }}
-
-    {{ $sm := ($img.Fill (printf "%s webp" $smDim)) }}
-    {{ $md := ($img.Fill (printf "%s webp" $mdDim)) }}
-    {{ $lg := ($img.Fill (printf "%s webp" $lgDim)) }}
-    {{ $xl := ($img.Fill (printf "%s webp" $xlDim)) }}
-    {{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) }}
-    {{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) }}
+    {{ $class := .Get "class" }}
+    {{ $title := .Get "title" }}
+    {{ $caption := .Get "caption" }}
+
+    {{ $img := resources.GetMatch $url }}
+    {{ if not $img }}
+        {{ $img = resources.GetRemote $url -}}
+    {{ end}}
 
+    {{ with $img }}
+        <!-- default ratio 4x3 -->
+        {{ $smDim := "576x432" }}
+        {{ $mdDim := "768x576" }}
+        {{ $lgDim := "992x744" }}
+        {{ $xlDim := "1200x900" }}
+        {{ $xxlDim := "1400x1050" }}
+
+        {{ if eq $ratio "1x1"}}
+            {{ $smDim = "576x576" }}
+            {{ $mdDim = "768x768" }}
+            {{ $lgDim = "992x992" }}
+            {{ $xlDim = "1200x1200" }}
+            {{ $xxlDim = "1400x1400" }}
+        {{ else if eq $ratio "16x9"}}
+            {{ $smDim = "576x324" }}
+            {{ $mdDim = "768x432" }}
+            {{ $lgDim = "992x558" }}
+            {{ $xlDim = "1200x675" }}
+            {{ $xxlDim = "1400x788" }}
+        {{ else if eq $ratio "21x9"}}
+            {{ $smDim = "576x247" }}
+            {{ $mdDim = "768x329" }}
+            {{ $lgDim = "992x425" }}
+            {{ $xlDim = "1200x514" }}
+            {{ $xxlDim = "1400x600" }}
+        {{ end }}
+
+        {{ $sm := ($img.Fill (printf "%s webp" $smDim)) }}
+        {{ $md := ($img.Fill (printf "%s webp" $mdDim)) }}
+        {{ $lg := ($img.Fill (printf "%s webp" $lgDim)) }}
+        {{ $xl := ($img.Fill (printf "%s webp" $xlDim)) }}
+        {{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) }}
+        {{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) }}
+
 
-    <figure class="figure">
-        <img class="figure-img img-fluid {{ $class}}"
-        srcset="
-            {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
-            {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
-            {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
-            {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
-            {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
-        sizes="100vw"
-        src="{{ $fallback.RelPermalink }}"
-        alt="{{ $title }}">
-        <figcaption class="figure-caption">{{ $caption }}</figcaption>
-    </figure>    
+        <figure class="figure">
+            <img class="figure-img img-fluid {{ $class}}"
+            srcset="
+                {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
+                {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
+                {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
+                {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
+                {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
+            sizes="100vw"
+            src="{{ $fallback.RelPermalink }}"
+            alt="{{ $title }}">
+            <figcaption class="figure-caption">{{ $caption }}</figcaption>
+        </figure>   
+    {{ else }}
+        {{ warnf "Cannot find image resource: %q" $url }}
+    {{ end }}    
 {{ else }}
-    {{ errorf "missing value for param 'src': %s" .Position }}
+    {{ errorf "Missing value for param 'src': %s" .Position }}
 {{ end }}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
   "main": "index.js",
   "publishConfig": {