Merge pull request #47 from markdumay/develop

Image processing

.github/workflows/lint.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x, 18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

README.md

@@ -41,7 +41,7 @@
 
 ## About
 
-![Logo](https://raw.githubusercontent.com/markdumay/hugo-theme-hinode/main/static/logo.png)
+![Logo](https://raw.githubusercontent.com/markdumay/hugo-theme-hinode/main/static/img/logo.png)
 
 - [Online Demo][demo]
 - [PageSpeed Insights][pagespeed]
@@ -55,6 +55,7 @@ Additional features include:
 - Social links
 - Blog pagination
 - Code highlighting
+- Command prompt
 - Color customization
 - i18n support
 
@@ -108,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 include 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
 
@@ -155,8 +156,8 @@ The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under
 <!-- MARKDOWN MAINTAINED LINKS -->
 <!-- TODO: add blog link
 [blog]: https://markdumay.com
--->
 [blog]: https://github.com/markdumay
+-->
 [demo]: https://hinode-demo.markdumay.org/
 [license]: https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE
 [repository]: https://github.com/markdumay/hugo-theme-hinode.git

assets/js/index.js

@@ -163,7 +163,7 @@ Source:
 */
 
 const svgCopy =
-  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
+  '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>';
 const svgCheck =
   '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
 

assets/scss/app.scss

@@ -9,6 +9,7 @@ $themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
 
 // Import Bootstrap configuration
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 
@@ -61,6 +62,7 @@ $themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
 @import "components/buttons.scss";
 @import "components/card.scss";
 @import "components/clipboard.scss";
+@import "components/command.scss";
 @import "components/comments.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";

assets/scss/components/_clipboard.scss

@@ -5,11 +5,9 @@
     right: 0;
     padding: 2px 7px 5px;
     margin: 5px;
-    color: #767676;
-    border-color: #767676;
-    background-color: #ededed;
-    border: 1px solid;
-    border-radius: 6px;
+    color: $secondary;
+    background-color: transparent;
+    border-style: none;
     font-size: 0.8em;
     z-index: 1;
     opacity: 0;
@@ -17,17 +15,16 @@
 }
 
 .clipboard-button > svg {
-    fill: #767676;
+    fill: $secondary;
 }
 
 .clipboard-button:hover {
     cursor: pointer;
-    border-color: #696969;
-    background-color: #e0e0e0;
+    color: $primary;
 }
 
 .clipboard-button:hover > svg {
-    fill: #696969;
+    fill: $primary;
 }
 
 .clipboard-button:focus {

assets/scss/components/_command.scss

@@ -0,0 +1,43 @@
+/* Adapted from PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&plugins=command-line */
+
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+.command-line-prompt {
+    border-right: 1px solid #999;
+    display: block;
+    float: left;
+    font-size: 100%;
+    letter-spacing: -1px;
+    margin-right: 1em;
+    pointer-events: none;
+    text-align: right;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.command-line-prompt > span::before {
+    opacity: 0.7;
+    content: " ";
+    display: block;
+    padding-right: 0.8em;
+}
+
+.command-line-prompt > span[data-prompt]::before {
+    content: attr(data-prompt);
+}
+
+.command-line-prompt > span[data-continuation-prompt]::before {
+    content: attr(data-continuation-prompt);
+}
+
+.command-line span.token.output {
+    /* Make shell output lines a bit lighter to distinguish them from shell commands */
+    opacity: 0.7;
+}

config/_default/params.toml

@@ -21,10 +21,10 @@ schemaAuthorTwitter = "https://twitter.com/markdumay"
 schemaAuthorLinkedIn = "https://www.linkedin.com/in/markdumay/"
 schemaAuthorGitHub = "https://github.com/markdumay"
 schemaLocale = "en-US"
-schemaLogo = "logo512x512.png"
+schemaLogo = "img/logo512x512.png"
 schemaLogoWidth = 512
 schemaLogoHeight = 512
-schemaImage = "logo1280x640.png"
+schemaImage = "img/logo1280x640.png"
 schemaImageWidth = 1280
 schemaImageHeight = 640
 # schemaTwitter = "https://twitter.com/gethinode"
@@ -48,8 +48,8 @@ schemaSection = "blog"
     themeOpacity = "10"
 
 [main]
-    featurePhoto = "img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
-    logo = "/logo_embedded.svg"
+    featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
+    logo = "/img/logo_embedded.svg"
 
 
 [comments]

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' \
         """

content/en/about.md

@@ -5,7 +5,7 @@ date: "2022-04-11"
 showComments: false
 ---
 
-<p class="text-center"><img src="/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
+<p class="text-center"><img src="/img/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
 
 <center>Hinode is a clean blog theme for Hugo, an open-source static site generator.</center>
 

content/en/blog/code-highlighting.md

@@ -55,3 +55,129 @@ func GetTitleFunc(style string) func(s string) string {
   }
 }
 {{< / highlight >}}
+
+## Command Prompt Shortcode
+
+The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages.
+
+### Bash (default shell)
+
+Use the `command` shortcode to generate a block with a default bash command prompt.
+
+```html
+{{%/* command */%}}
+export MY_VAR=123
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command %}}
+export MY_VAR=123
+{{% /command %}}
+
+Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
+
+```html
+{{%/* command user="user" host="localhost" */%}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command user="user" host="localhost" %}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{% /command %}}
+
+### PowerShell
+
+Set the `shell` argument to `powershell` to generate a PowerShell terminal. Override the `prompt` to add a directory if needed. Use the backtick `` ` `` symbol to denote a line continuation.
+
+```html
+{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{% /command %}}
+
+### SQL
+
+Set the `shell` argument to `sql` to generate a SQL terminal. Use the `(con)` suffix to denote a line continuation.
+
+```html
+{{%/* command prompt="mysql>" shell="sql" */%}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command prompt="mysql>" shell="sql" %}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{% /command %}}

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.jpg
 credits: Photo by <a href="https://unsplash.com/@timdegroot">Tim de Groot</a> on <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
 ---
 

layouts/partials/head/seo.html

@@ -1,35 +1,37 @@
-<!-- Copied from doks -->
-{{ with .Title }}
-    {{ $.Scratch.Set "title" . }}
-{{ else }}
-    {{ $.Scratch.Set "title" .Site.Params.title }}
-{{ end }}
+<!-- Adapted from doks -->
+{{ with .Title -}}
+    {{ $.Scratch.Set "title" . -}}
+{{ else -}}
+    {{ $.Scratch.Set "title" .Site.Params.title -}}
+{{ end -}}
 
 {{ with .Description -}}
-    {{ $.Scratch.Set "description" . }}
+    {{ $.Scratch.Set "description" . -}}
 {{ else -}}
     {{ with .Summary | plainify -}}
-        {{ $.Scratch.Set "description" . }}
+        {{ $.Scratch.Set "description" . -}}
     {{ else -}}
-        {{ $.Scratch.Set "description" .Site.Params.description }}
+        {{ $.Scratch.Set "description" .Site.Params.description -}}
     {{ end -}}
 {{ end -}}
 
-{{ with .Params.thumbnail }}
-    {{ $source := resources.Get . -}}
-    {{ $dim := "1280x640" -}}
-    {{ $img := ($source.Fill (printf "%s jpg" $dim)) -}}
-    {{ $.Scratch.Set "thumbnail" ($img.Permalink | absURL) -}}
-{{ else }}
+{{ with .Params.thumbnail -}}
+    {{ $source := partial "utilities/GetImage.html" (dict "url" .) -}}
+    {{ with $source -}}
+        {{ $dim := "1280x640" -}}
+        {{ $img := (.Fill (printf "%s jpg" $dim)) -}}
+        {{ $.Scratch.Set "thumbnail" ($img.Permalink | absURL) -}}
+    {{ end -}}
+{{ else -}}
     {{ with .Site.Params.schemaImage -}}    
-        {{ $.Scratch.Set "thumbnail" (. | absURL) }}
+        {{ $.Scratch.Set "thumbnail" (. | absURL) -}}
     {{ else -}}
         {{ $images := $.Resources.ByType "image" -}}
         {{ $featured := $images.GetMatch "*feature*" -}}
         {{ if not $featured -}}
             {{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" -}}
         {{ end -}}
-        {{ with $featured }}
+        {{ with $featured -}}
             {{ $.Scratch.Set "thumbnail" $featured.Permalink -}}
         {{ else -}}
             {{ with $.Site.Params.images -}}

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".
@@ -12,71 +12,75 @@
     "caption":      Optional figure caption.
 -->
 
-
-{{ $img := resources.Get .url -}}
+{{ $url := .url -}}
+{{ $ratio := .ratio -}}
+{{ $outerClass := .outerClass -}}
 {{ $innerClass := .innerClass -}}
 {{ $title := .title -}}
+{{ $caption := .caption -}}
 
-<!-- default ratio 4x3 -->
-{{ $smDim := "576x432" -}}
-{{ $mdDim := "768x576" -}}
-{{ $lgDim := "992x744" -}}
-{{ $xlDim := "1200x900" -}}
-{{ $xxlDim := "1400x1050" -}}
+{{ $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
+{{ 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 -}}
+    {{ 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)) -}}
+    {{ $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>
+    {{ 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 -}}
 {{ end -}}

layouts/partials/utilities/GetImage.html

@@ -0,0 +1,38 @@
+<!-- 
+    Retrieve a local or remote resource compatible with Hugo's image processing. The path of a remote image is
+    rewritten to ensure processed files are stored in the final '/img' folder. The 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"
+-->
+
+{{ $url := .url -}}
+{{ $supportedMediaTypes := slice "image/png" "image/jpeg" "image/gif" "image/tiff" "image/bmp" "image/webp" -}}
+{{ $remote := false -}}
+
+{{ $img := resources.GetMatch $url -}}
+{{ if (hasPrefix (lower $url) "http") -}}
+    {{ $img = resources.GetRemote $url -}}
+    {{ $remote = true -}}
+{{ end -}}
+
+{{ with $img -}}
+    {{ if in $supportedMediaTypes (string $img.MediaType) -}}
+        <!-- Rewrite the path of remote images to avoid storing processed files in the site's root -->
+        <!-- Add a file extension based on the media type if needed to avoid Hugo processing errors -->
+        {{ if $remote -}}
+            {{ $filename := index (last 1 (split (delimit (split $url "/") "," "") ",")) 0 -}}
+            {{ if not (path.Ext $filename) -}}
+                {{ $extension := string $img.MediaType.SubType -}}
+                {{ $filename = printf "%s.%s" $filename $extension -}}
+            {{ end -}}
+            {{ $img = $img.Content | resources.FromString (printf "/img/%s" $filename) -}}
+        {{ end -}}
+    {{ else -}}
+        {{ warnf "Image type '%s' is not supported: %s" $img.MediaType $url -}}
+        {{ $img = "" -}}
+    {{ end -}}
+{{ else -}}    
+    {{ warnf "Cannot find image resource: %q" $url -}}
+{{ end -}}
+
+{{ return $img -}}

layouts/shortcodes/command.html

@@ -0,0 +1,70 @@
+{{ $host := .Get "host" }}
+{{ $user := .Get "user" }}
+{{ $prompt := .Get "prompt" }}
+{{ $filter := "(out)" }}
+{{ $input := trim .Inner "\n" }}
+
+{{ $shell := lower (.Get "shell") }}
+{{ $continuationPrompt := ">" }}
+{{ $continuationStr := "\\" }}
+{{ if eq $shell "powershell" }}
+    {{ if not $prompt }}{{ $prompt = "PS>" }}{{ end }}
+    {{ $continuationPrompt = ">>" }}
+    {{ $continuationStr = "`" }}
+{{ else if eq $shell "sql" }}
+    {{ if not $prompt }}{{ $prompt = "sql>" }}{{ end }}
+    {{ $continuationPrompt = "->" }}
+    {{ $continuationStr = "(con)" }}
+{{ else }}
+    {{ $shell = "bash" }}
+    {{ if not $prompt }}{{ $prompt = "$" }}{{ end }}
+    {{ if (and ($host) ($user)) }}
+        {{ $prompt = printf "[%s@%s] %s" $user $host $prompt}}
+    {{ end }}
+{{ end }}
+
+
+
+
+{{ $lines := split $input "\n" }}
+{{ $prefix := ""}}
+{{ $prevLine := "" }}
+{{ $refined := "" }}
+{{ range $line := $lines }}
+    {{ if hasPrefix $line $filter }}
+        {{ $prefix = printf "%s<span></span>" $prefix }}
+        {{ if eq $shell "sql" }}
+            {{ $line = printf "--%s" (strings.TrimPrefix $filter $line) }}
+        {{ else }}
+            {{ $line = printf "#%s" (strings.TrimPrefix $filter $line) }}
+        {{ end }}
+    {{ else if (strings.HasSuffix $prevLine $continuationStr) }}
+        {{ $prefix = printf "%s<span data-prompt=\"%s\"></span>" $prefix $continuationPrompt }}
+    {{ else }}
+        {{ $prefix = printf "%s<span data-prompt=\"%s\"></span>" $prefix $prompt }}
+    {{ end }}
+    {{ $prevLine = $line }}
+    {{ if (and (eq $shell "sql") (strings.HasSuffix $line $continuationStr)) }}
+        {{ $line = strings.TrimSuffix $continuationStr $line }}
+    {{ end }}
+    {{ $refined = printf "%s\n%s" $refined $line }}
+{{ end }}
+
+{{ $refined := trim $refined "\n" }}
+
+{{ $output := (transform.Highlight $refined $shell | safeHTML) }}
+
+
+
+{{ $insert := printf "<span class=\"command-line-prompt\">%s</span><span class=\"line\">" $prefix }}
+
+{{ $output := (replace $output ("<span class=\"line\">" | safeHTML) $insert 1 | safeHTML) }}
+
+{{ if eq $shell "sql"}}
+    {{ $output = (replace $output "<span class=\"c1\">--" "<span class=\"c1\">" | safeHTML) }}
+{{ else }}        
+    {{ $output = (replace $output "<span class=\"c1\">#" "<span class=\"c1\">" | safeHTML) }}
+    {{ $output = (replace $output "<span class=\"c\">#" "<span class=\"c\">" | safeHTML) }}
+{{ end }}
+
+{{ $output }}

layouts/shortcodes/figure.html

@@ -13,7 +13,7 @@
     /><!-- Closing img tag -->
     {{- if .Get "link" }}</a>{{ end -}}
     {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
-        <figcaption>
+    <figcaption class="figure-caption">
             {{ with (.Get "title") -}}
                 <h4>{{ . }}</h4>
             {{- end -}}

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,72 @@
 {{ 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" }}
 
-    <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>    
+    {{ $img := resources.GetMatch $url }}
+    {{ if not $img }}
+        {{ $img = resources.GetRemote $url -}}
+        {{ if $img }}
+            {{ $filename := index (last 1 (split (delimit (split $url "/") "," "") ",")) 0 }}
+            {{ $img = $img.Content | resources.FromString (printf "/img/%s" $filename) }}
+        {{ end }}
+    {{ 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>   
+    {{ 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 }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.4.1",
+  "version": "0.5.3",
   "description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
   "main": "index.js",
   "publishConfig": {
@@ -31,6 +31,7 @@
     "copy:fonts": "shx cp ./node_modules/@fortawesome/fontawesome-free/webfonts/* ./static/fonts/",
     "create:syntax": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=monokailight > ./assets/scss/components/_syntax.scss",
     "postinstall": "hugo-installer --version otherDependencies.hugo --extended --destination node_modules/.bin/hugo",
+    "upgrade": "npx npm-check-updates -u",
     "version": "auto-changelog -p && git add CHANGELOG.md"
   },
   "repository": {
@@ -44,26 +45,26 @@
   },
   "homepage": "https://github.com/markdumay/hugo-theme-hinode#readme",
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.0.0",
-    "@fullhuman/postcss-purgecss": "^4.1.3",
-    "autoprefixer": "^10.4.2",
-    "bootstrap": "^5.1.3",
-    "eslint": "^7.32.0",
-    "eslint-config-standard": "^16.0.3",
+    "@fortawesome/fontawesome-free": "^6.2.0",
+    "@fullhuman/postcss-purgecss": "^5.0.0",
+    "autoprefixer": "^10.4.13",
+    "bootstrap": "^5.2.2",
+    "eslint": "^8.27.0",
+    "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-n": "^15.5.0",
+    "eslint-plugin-promise": "^6.1.1",
     "exec-bin": "^1.0.0",
-    "flexsearch": "^0.7.21",
-    "hugo-installer": "^3.1.0",
-    "markdownlint-cli2": "^0.4.0",
-    "postcss-cli": "^9.1.0",
+    "flexsearch": "^0.7.31",
+    "hugo-installer": "^4.0.1",
+    "markdownlint-cli2": "^0.5.1",
+    "postcss-cli": "^10.0.0",
     "purgecss-whitelister": "^2.4.0",
     "shx": "^0.3.4",
-    "stylelint": "^14.6.1",
-    "stylelint-config-standard-scss": "^3.0.0"
+    "stylelint": "^14.14.1",
+    "stylelint-config-standard-scss": "^6.1.0"
   },
   "otherDependencies": {
-    "hugo": "0.97.0"
+    "hugo": "0.105.0"
   }
 }