Merge 74f82dae95 into ea7087dd7b

📌 Bump mermaid from 10.5.0 to 10.5.1

CHANGELOG.md

@@ -14,13 +14,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Spanish translation of example site samples ([#606](https://github.com/jpanther/congo/pull/606))
 - Japanese translation of docs and example site ([#618](https://github.com/jpanther/congo/pull/618))
 - German translation of example site ([#631](https://github.com/jpanther/congo/pull/631))
+- New icons - `coffee` and `x-twitter` ([#669](https://github.com/jpanther/congo/pull/669))
 
 ### Changed
 
 - ⚠️ Renamed the `params.rtl` language parameter to `languageDirection` as this is now supported by Hugo ([#583](https://github.com/jpanther/congo/issues/583))
 - Robots.txt file now allows all by default without concern for whether the environment is set to production ([#620](https://github.com/jpanther/congo/pull/620))
-- Upgrade to Mermaid v10.4.0 ([#577](https://github.com/jpanther/congo/pull/577), [#582](https://github.com/jpanther/congo/pull/582), [#626](https://github.com/jpanther/congo/pull/626), [#638](https://github.com/jpanther/congo/pull/638))
+- Refactored the `head.html` partial to improve perceived performance on page load
-- Upgrade to KaTeX v0.16.8 ([#590](https://github.com/jpanther/congo/pull/590))
+- Upgrade to Mermaid v10.5.1 ([#577](https://github.com/jpanther/congo/pull/577), [#582](https://github.com/jpanther/congo/pull/582), [#626](https://github.com/jpanther/congo/pull/626), [#638](https://github.com/jpanther/congo/pull/638), [#663](https://github.com/jpanther/congo/pull/663), [#674](https://github.com/jpanther/congo/pull/674))
+- Upgrade to KaTeX v0.16.9 ([#590](https://github.com/jpanther/congo/pull/590), [#664](https://github.com/jpanther/congo/pull/664))
 - Upgrade to Tailwind v3.3.3 ([#602](https://github.com/jpanther/congo/pull/602))
 - Upgrade to ChartJS v4.3.3 ([#616](https://github.com/jpanther/congo/pull/616), [#627](https://github.com/jpanther/congo/pull/627), [#635](https://github.com/jpanther/congo/pull/635))
 - Upgrade to Typography v0.5.10 ([#641](https://github.com/jpanther/congo/pull/641))
@@ -33,13 +35,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Various typos in the docs and example site ([#608](https://github.com/jpanther/congo/pull/608), [#609](https://github.com/jpanther/congo/pull/609), [#613](https://github.com/jpanther/congo/pull/613))
 - Incorrect `render` value is used in the 'external' archetype ([#630](https://github.com/jpanther/congo/pull/630))
 - Images are missing `width` and `height` attributes ([#645](https://github.com/jpanther/congo/pull/645))
+- Extended head partial does not include page context ([#658](https://github.com/jpanther/congo/pull/658))
+- Taxonomy tags aren't padded when wrapping onto a new line ([#671](https://github.com/jpanther/congo/pull/671))
 - Minor CSS improvements, mainly relating to RTL styling
+- Minor typos
 
 ### Removed
 
 - Locales no longer appear next to the site name/logo as they are now part of the menu system ([#583](https://github.com/jpanther/congo/issues/583))
 - Language parameters `isoCode` and `displayName` are no longer supported ([#583](https://github.com/jpanther/congo/issues/583))
-- Meta `content-language` tag as it was not conveying the intended data (which is already inclded via the HTML `lang` attribute)
+- Meta `content-language` tag as it was not conveying the intended data (which is already included via the HTML `lang` attribute)
 
 ## [2.6.1] - 2023-06-04
 

assets/icons/coffee.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="0.89em" viewBox="0 0 512 512"><path fill="currentColor" d="M88 0C74.7 0 64 10.7 64 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C120.5 112.3 128 119.9 128 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C119.5 47.7 112 40.1 112 24c0-13.3-10.7-24-24-24zM32 192c-17.7 0-32 14.3-32 32V416c0 53 43 96 96 96H288c53 0 96-43 96-96h16c61.9 0 112-50.1 112-112s-50.1-112-112-112H352 32zm352 64h16c26.5 0 48 21.5 48 48s-21.5 48-48 48H384V256zM224 24c0-13.3-10.7-24-24-24s-24 10.7-24 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C232.5 112.3 240 119.9 240 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C231.5 47.7 224 40.1 224 24z"/></svg>

assets/icons/x-twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>

exampleSite/config/_default/params.toml

@@ -12,6 +12,7 @@ autoSwitchAppearance = true
 enableSearch = true
 enableCodeCopy = true
 enableImageLazyLoading = true
+enableWebp = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"

exampleSite/content/docs/hosting-deployment/index.md

@@ -75,7 +75,11 @@ jobs:
 
 Push the config file to GitHub and the action should automatically run. It may fail the first time and you'll need to visit the **Settings > Pages** section of your GitHub repo to check the source is correct. It should be set to use the `gh-pages` branch.
 
-{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
+{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source settings" >}}
+
+You should also visit the **Settings > Actions > General** section and check that the workflow permissions allow actions to make changes to your repo.
+
+{{< screenshot src="github-workflow-permissions.jpg" alt="Screen capture of GitHub Workflow Permissions settings" >}}
 
 Once the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.
 

exampleSite/content/samples/icons/index.de.md

@@ -27,6 +27,7 @@ Die vollständige Liste der integrierten Icons und ihre entsprechenden Namen fin
 | chevron-up           | {{< icon chevron-up >}}           |
 | circle-info          | {{< icon circle-info >}}          |
 | codepen              | {{< icon codepen >}}              |
+| coffee               | {{< icon coffee >}}               |
 | comment              | {{< icon comment >}}              |
 | dev                  | {{< icon dev >}}                  |
 | dribbble             | {{< icon dribbble >}}             |
@@ -77,5 +78,6 @@ Die vollständige Liste der integrierten Icons und ihre entsprechenden Namen fin
 | twitch               | {{< icon twitch >}}               |
 | twitter              | {{< icon twitter >}}              |
 | whatsapp             | {{< icon whatsapp >}}             |
+| x-twitter            | {{< icon x-twitter >}}            |
 | xmark                | {{< icon xmark >}}                |
 | youtube              | {{< icon youtube >}}              |

exampleSite/content/samples/icons/index.es.md

@@ -27,6 +27,7 @@ La lista completa de íconos incorporados y sus nombres correspondientes se pued
 | chevron-up           | {{< icon chevron-up >}}           |
 | circle-info          | {{< icon circle-info >}}          |
 | codepen              | {{< icon codepen >}}              |
+| coffee               | {{< icon coffee >}}               |
 | comment              | {{< icon comment >}}              |
 | dev                  | {{< icon dev >}}                  |
 | dribbble             | {{< icon dribbble >}}             |
@@ -77,5 +78,6 @@ La lista completa de íconos incorporados y sus nombres correspondientes se pued
 | twitch               | {{< icon twitch >}}               |
 | twitter              | {{< icon twitter >}}              |
 | whatsapp             | {{< icon whatsapp >}}             |
+| x-twitter            | {{< icon x-twitter >}}            |
 | xmark                | {{< icon xmark >}}                |
 | youtube              | {{< icon youtube >}}              |

exampleSite/content/samples/icons/index.ja.md

@@ -27,6 +27,7 @@ Congoは[FontAwesome 6](https://fontawesome.com/icons)のアイコンをサポ
 | chevron-up           | {{< icon chevron-up >}}           |
 | circle-info          | {{< icon circle-info >}}          |
 | codepen              | {{< icon codepen >}}              |
+| coffee               | {{< icon coffee >}}               |
 | comment              | {{< icon comment >}}              |
 | dev                  | {{< icon dev >}}                  |
 | dribbble             | {{< icon dribbble >}}             |
@@ -77,5 +78,6 @@ Congoは[FontAwesome 6](https://fontawesome.com/icons)のアイコンをサポ
 | twitch               | {{< icon twitch >}}               |
 | twitter              | {{< icon twitter >}}              |
 | whatsapp             | {{< icon whatsapp >}}             |
+| x-twitter            | {{< icon x-twitter >}}            |
 | xmark                | {{< icon xmark >}}                |
 | youtube              | {{< icon youtube >}}              |

exampleSite/content/samples/icons/index.md

@@ -27,6 +27,7 @@ The full list of built-in icons and their corresponding names can referenced bel
 | chevron-up           | {{< icon chevron-up >}}           |
 | circle-info          | {{< icon circle-info >}}          |
 | codepen              | {{< icon codepen >}}              |
+| coffee               | {{< icon coffee >}}               |
 | comment              | {{< icon comment >}}              |
 | dev                  | {{< icon dev >}}                  |
 | dribbble             | {{< icon dribbble >}}             |
@@ -77,5 +78,6 @@ The full list of built-in icons and their corresponding names can referenced bel
 | twitch               | {{< icon twitch >}}               |
 | twitter              | {{< icon twitter >}}              |
 | whatsapp             | {{< icon whatsapp >}}             |
+| x-twitter            | {{< icon x-twitter >}}            |
 | xmark                | {{< icon xmark >}}                |
 | youtube              | {{< icon youtube >}}              |

exampleSite/content/samples/markdown/index.md

@@ -9,6 +9,10 @@ This article offers a sample of basic Markdown formatting that can be used in Co
 
 <!--more-->
 
+## Image
+
+![sample image](thumb-surendran-mp-IhWYiwSxm8g-unsplash.jpg)
+
 ## Headings
 
 The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.

exampleSite/content/users/index.md

@@ -29,7 +29,6 @@ The list below is just a handful of the websites that are built using the Congo
 | [jeremic.ca](https://jeremic.ca)                                       | Personal site and Blog          |
 | [rohn.tech](https://rohn.tech)                                         | Personal site                   |
 | [klimafreundlicher-kochen.de](https://www.klimafreundlicher-kochen.de) | Food blog (in German)           |
-| [seyslee.github.io](https://seyslee.github.io)                         | Tech blog (in Korean)           |
 | [datanalyze.be](https://datanalyze.be/)                                | Professional site               |
 | [sneaky-potato.github.io](https://sneaky-potato.github.io/)            | Professional site and Blog      |
 | [kelset.dev](https://kelset.dev)                                       | Personal site                   |
@@ -39,24 +38,18 @@ The list below is just a handful of the websites that are built using the Congo
 | [Bible Multi Apps](https://hotlittlewhitedog.gitlab.io/biblemulti)     | Personal site and Blog          |
 | [Jh123x](https://jh123x.com/)                                          | Personal site and Blog          |
 | [sforzando LLC. and Inc.](https://sfz.dev/)                            | Corporate site and Blog         |
-| [aidansmith.me](https://aidansmith.me/)                                | Personal Site                   |
-| [nunocoracao.com](https://nunocoracao.com)                             | Personal site and Blog          |
 | [szegedkungfu.hu](https://balance-se.github.io/)                       | Sports association site         |
 | [jcransom.com](https://www.jcransom.com/)                              | Personal Site and Blog          |
 | [cbrincoveanu.com](https://www.cbrincoveanu.com/)                      | Personal site and Blog          |
 | [medical-humanities](https://medical-humanities.org)                   | Academic site                   |
 | [boyersnet.com](https://boyersnet.com)                                 | Personal site and Blog          |
 | [major.io](https://major.io)                                           | Personal site and Blog          |
-| [bayas.dev](https://bayas.dev)                                         | Personal site and Blog          |
 | [顾宇的博客](https://www.guyu.me/)                                     | Personal Blog (in Chinese)      |
 | [cgutierr-zgz.github.io](https://cgutierr-zgz.github.io/)              | Personal site and Tech blog     |
 | [adam.sr](https://adam.sr)                                             | Personal site and Blog          |
-| [datadi.murgi.org](https://datadi.murgi.org)                           | Personal site and Blog          |
-| [shim.web.id](https://shim.web.id)                                     | Personal Blog (in Indonesian)   |
 | [kpavlov.me](https://kpavlov.me)                                       | Personal site and Blog          |
 | [pfisterer.dev](https://pfisterer.dev)                                 | Personal site and Blog          |
 | [davidrothera.me](https://davidrothera.me)                             | Personal site and Blog          |
-| [ethantroy.com](https://ethantroy.com)                                 | Personal Site and Blog          |
 | [sug.bitprism.net](https://sug.bitprism.net)                           | Personal Site and Blog          |
 | [arjuns.me](https://arjuns.me)                                         | Personal Site and Blog          |
 | [statistix.be](https://statistix.be/)                                  | Professional site               |

layouts/_default/_markup/render-image.html

@@ -1,64 +1,4 @@
-{{ $url := urls.Parse .Destination }}
-{{ $altText := .Text }}
-{{ $caption := .Title }}
-{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
-{{ if findRE "^https?" $url.Scheme }}
 <figure>
-    <img
+  {{ partial "picture.html" (dict "context" . "src" .Destination "alt" .Text) }}
-      class="mx-auto my-0 rounded-md"
+  {{ with .Title }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-      src="{{ $url.String }}"
-      alt="{{ $altText }}" 
-      {{ if $lazyLoad }}
-        loading="lazy"
-      {{ end }}
-    />
-    {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
 </figure>
-{{ else }}
-  {{ $resource := "" }}
-  {{ if $.Page.Resources.GetMatch ($url.String) }}
-    {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
-  {{ else if resources.GetMatch ($url.String) }}
-    {{ $resource = resources.Get ($url.String) }}
-  {{ end }}
-  {{ with $resource }}
-    <figure>
-      <img
-        class="mx-auto my-0 rounded-md"
-        {{ if eq .MediaType.SubType "svg" }}
-          src="{{ .RelPermalink }}"
-        {{ else }}
-          width="{{ .Width }}"
-          height="{{ .Height }}"
-          {{ if lt .Width 660 }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            srcset="
-            {{- (.Resize "330x").RelPermalink }} 330w,
-            {{- (.Resize "660x").RelPermalink }} 660w,
-            {{- (.Resize "1024x").RelPermalink }} 1024w,
-            {{- (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
-          {{ end }}
-        {{ end }}
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-    </figure>
-  {{ else }}
-    <figure>
-      <img
-        class="mx-auto my-0 rounded-md"
-        src="{{ $url.String }}"
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-    </figure>
-  {{ end }}
-{{ end }}

layouts/_default/single.html

@@ -13,27 +13,10 @@
       <div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
         {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
       </div>
-      {{ with $feature }}
+      {{ if $feature }}
         <div class="prose">
-          <img
+          {{ $alt := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
-            class="mb-6 -mt-4 rounded-md"
+          {{ partial "picture.html" (dict "context" . "resource" $feature "alt" $alt "class" "mb-6 -mt-4 rounded-md") }}
-            {{ if eq .MediaType.SubType "svg" }}
-              src="{{ .RelPermalink }}"
-            {{ else }}
-              width="{{ .Width }}"
-              height="{{ .Height }}"
-              {{ if lt .Width 660 }}
-                src="{{ .RelPermalink }}"
-              {{ else }}
-                srcset="
-                {{- (.Resize "330x").RelPermalink }} 330w,
-                {{- (.Resize "660x").RelPermalink }} 660w,
-                {{- (.Resize "1024x").RelPermalink }} 1024w,
-                {{- (.Resize "1320x").RelPermalink }} 2x"
-              {{ end }}
-            {{ end }}
-            alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
-          />
           {{ with $.Params.coverCaption }}
             <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
           {{ end }}

layouts/partials/article-meta.html

@@ -50,13 +50,13 @@
     (and (ne $scope "single") (.Params.showTaxonomies | default (.Site.Params.list.showTaxonomies | default (.Site.Params.article.showTaxonomies | default false))))
     (and (eq $scope "single") (.Params.showTaxonomies | default (.Site.Params.article.showTaxonomies | default false)))
   }}
-    <div class="my-1 text-xs leading-relaxed text-neutral-500 dark:text-neutral-400 ">
+    <div class="flex flex-wrap my-1 text-xs leading-relaxed text-neutral-500 dark:text-neutral-400 ">
       {{ range $taxonomy, $terms := .Site.Taxonomies }}
         {{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
           {{ range $context.GetTerms $taxonomy }}
             <a
               href="{{ .RelPermalink }}"
-              class="rounded-md border border-neutral-200 px-1 py-[1px] hover:border-primary-300 hover:text-primary-700 dark:border-neutral-600 dark:hover:border-primary-600 dark:hover:text-primary-400"
+              class="mx-1 my-1 rounded-md border border-neutral-200 px-1 py-[1px] hover:border-primary-300 hover:text-primary-700 dark:border-neutral-600 dark:hover:border-primary-600 dark:hover:text-primary-400"
               >{{ .LinkTitle }}</a
             >
           {{ end }}

layouts/partials/head.html

@@ -1,8 +1,6 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="theme-color" content="rgb(255,255,255)" />
-  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   {{/* Title */}}
   {{ if .IsHome -}}
     <title>{{ .Site.Title | emojify }}</title>
@@ -11,24 +9,16 @@
     <title>{{ .Title | emojify }} &middot; {{ .Site.Title | emojify }}</title>
     <meta name="title" content="{{ .Title | emojify }} &middot; {{ .Site.Title | emojify }}" />
   {{- end }}
-  {{/* Metadata */}}
-  <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage }}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
-  {{ with union .Site.Params.keywords .Params.keywords -}}
-    <meta name="keywords" content="{{ delimit . `, ` }}" />
-  {{- end }}
-  {{ with .Site.Params.robots }}
-    <meta name="robots" content="{{ . }}" />
-  {{ end }}
-  {{ with .Params.robots }}
-    <meta name="robots" content="{{ . }}" />
-  {{ end }}
-  <link rel="canonical" href="{{ .Permalink }}" />
-  {{ range .AlternativeOutputFormats -}}
-    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .RelPermalink ($.Site.Title | emojify) | safeHTML }}
-  {{ end -}}
   {{/* Asset bundles */}}
   {{ $assets := newScratch }}
   {{ $algorithm := .Site.Params.fingerprintAlgorithm | default "sha256" }}
+  {{ $jsAppearance := resources.Get "js/appearance.js" }}
+  {{ $jsAppearance = $jsAppearance | resources.Minify | resources.Fingerprint $algorithm }}
+  <script
+    type="text/javascript"
+    src="{{ $jsAppearance.RelPermalink }}"
+    integrity="{{ $jsAppearance.Data.Integrity }}"
+  ></script>
   {{ $cssScheme := resources.Get (printf "css/schemes/%s.css" (lower .Site.Params.colorScheme | default "congo")) }}
   {{ if not $cssScheme }}
     {{ $cssScheme = resources.Get "css/schemes/congo.css" }}
@@ -47,9 +37,6 @@
     href="{{ $bundleCSS.RelPermalink }}"
     integrity="{{ $bundleCSS.Data.Integrity }}"
   />
-  {{ $jsAppearance := resources.Get "js/appearance.js" }}
-  {{ $jsAppearance = $jsAppearance | resources.Minify | resources.Fingerprint $algorithm }}
-  <script type="text/javascript" src="{{ $jsAppearance.RelPermalink }}" integrity="{{ $jsAppearance.Data.Integrity }}"></script>
   {{ if .Site.Params.enableSearch | default false }}
     {{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }}
     {{ $jsSearch := resources.Get "js/search.js" }}
@@ -65,8 +52,42 @@
   {{ end }}
   {{ if $assets.Get "js" }}
     {{ $bundleJS := $assets.Get "js" | resources.Concat "js/main.bundle.js" | resources.Minify | resources.Fingerprint $algorithm }}
-    <script defer type="text/javascript" id="script-bundle" src="{{ $bundleJS.RelPermalink }}" integrity="{{ $bundleJS.Data.Integrity }}" data-copy="{{ i18n "code.copy" }}" data-copied="{{ i18n "code.copied" }}"></script>
+    <script
+      defer
+      type="text/javascript"
+      id="script-bundle"
+      src="{{ $bundleJS.RelPermalink }}"
+      integrity="{{ $bundleJS.Data.Integrity }}"
+      data-copy="{{ i18n "code.copy" }}"
+      data-copied="{{ i18n "code.copied" }}"
+    ></script>
   {{ end }}
+  {{/* Metadata */}}
+  <meta
+    name="description"
+    content="{{ with .Description }}
+      {{ . }}
+    {{ else }}
+      {{ if .IsPage }}
+        {{ .Summary }}
+      {{ else }}
+        {{ with .Site.Params.description }}{{ . }}{{ end }}
+      {{ end }}
+    {{ end }}"
+  />
+  {{ with union .Site.Params.keywords .Params.keywords -}}
+    <meta name="keywords" content="{{ delimit . `, ` }}" />
+  {{- end }}
+  {{ with .Site.Params.robots }}
+    <meta name="robots" content="{{ . }}" />
+  {{ end }}
+  {{ with .Params.robots }}
+    <meta name="robots" content="{{ . }}" />
+  {{ end }}
+  <link rel="canonical" href="{{ .Permalink }}" />
+  {{ range .AlternativeOutputFormats -}}
+    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .RelPermalink ($.Site.Title | emojify) | safeHTML }}
+  {{ end -}}
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}
     {{ partialCached "favicons.html" .Site }}
@@ -76,6 +97,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | relURL }}" />
     <link rel="manifest" href="{{ "site.webmanifest" | relURL }}" />
   {{ end }}
+  <meta name="theme-color" content="rgb(255,255,255)" />
   {{/* Site Verification */}}
   {{ with .Site.Params.verification.google }}
     <meta name="google-site-verification" content="{{ . }}" />
@@ -107,6 +129,6 @@
   {{ partial "analytics.html" . }}
   {{/* Extend head - eg. for custom analytics scripts, etc. */}}
   {{ if templates.Exists "partials/extend-head.html" }}
-    {{ partial "extend-head.html" .Site }}
+    {{ partial "extend-head.html" . }}
   {{ end }}
 </head>

layouts/partials/picture.html

@@ -0,0 +1,82 @@
+{{ $url := urls.Parse .src }}
+{{ $altText := .alt }}
+{{ $class := .class | default "mx-auto my-0 rounded-md" }}
+
+{{ $lazyLoad := .context.Page.Site.Params.enableImageLazyLoading | default true }}
+{{ $webp := .context.Page.Site.Params.enableWebp | default true }}
+
+{{ if findRE "^https?" $url.Scheme }}
+  <img
+    class="{{ $class }}"
+    src="{{ $url.String }}"
+    alt="{{ $altText }}" 
+    {{ if $lazyLoad }}
+      loading="lazy"
+    {{ end }}
+  />
+{{ else }}
+  {{ $resource := "" }}
+  {{ if .resource }}
+    {{ $resource = .resource }}
+  {{ else if .context.Page.Resources.GetMatch ($url.String) }}
+    {{ $resource = .context.Page.Resources.GetMatch ($url.String) }}
+  {{ else if resources.GetMatch ($url.String) }}
+    {{ $resource = resources.Get ($url.String) }}
+  {{ end }}
+  {{ with $resource }}
+    <picture>
+      {{ if (and (ne .MediaType.SubType "svg") $webp) }}
+        <source 
+          {{ if lt .Width 660 }}
+            {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+              src="{{ .RelPermalink }}"
+            {{ end }}
+          {{ else }}
+            srcset="
+              {{- (.Resize "330x webp").RelPermalink }} 330w,
+              {{- (.Resize "660x webp").RelPermalink }} 660w,
+              {{- (.Resize "1024x webp").RelPermalink }} 1024w,
+              {{- (.Resize "1320x webp").RelPermalink }} 2x"
+            src="{{ (.Resize "660x webp").RelPermalink }}" 
+          {{ end }}
+          type="image/webp" 
+        />
+      {{ end }}
+      <img
+        class="{{ $class }}"
+        {{ if eq .MediaType.SubType "svg" }}
+          src="{{ .RelPermalink }}"
+        {{ else }}
+          width="{{ .Width }}"
+          height="{{ .Height }}"
+          decoding="async"
+          {{ if lt .Width 660 }}
+            src="{{ .RelPermalink }}"
+          {{ else }}
+            srcset="
+            {{- (.Resize "330x").RelPermalink }} 330w,
+            {{- (.Resize "660x").RelPermalink }} 660w,
+            {{- (.Resize "1024x").RelPermalink }} 1024w,
+            {{- (.Resize "1320x").RelPermalink }} 2x"
+            src="{{ (.Resize "660x").RelPermalink }}"
+          {{ end }}
+        {{ end }}
+        alt="{{ $altText }}"
+        {{ if $lazyLoad }}
+          loading="lazy"
+        {{ end }}
+      />
+    </picture>
+  {{ else }}
+    <img
+      class="{{ $class }}"
+      src="{{ $url.String }}"
+      alt="{{ $altText }}"
+      {{ if $lazyLoad }}
+        loading="lazy"
+      {{ end }}
+    />
+  {{ end }}
+{{ end }}
+
+

layouts/shortcodes/figure.html

@@ -1,50 +1,14 @@
 {{ if .Get "default" }}
   {{ template "_internal/shortcodes/figure.html" . }}
 {{ else }}
-  {{ $url := urls.Parse (.Get "src") }}
+  {{ $src := .Get "src" }}
-  {{ $altText := .Get "alt" }}
+  {{ $alt := .Get "alt" }}
   {{ $caption := .Get "caption" }}
   {{ $href := .Get "href" }}
   {{ $class := .Get "class" }}
   <figure{{ with $class }} class="{{ . }}"{{ end }}>
     {{ with $href }}<a href="{{ . }}">{{ end }}
-    <img
+    {{ partial "picture.html" (dict "context" . "src" $src "alt" $alt) }}
-      class="mx-auto my-0 rounded-md"
-      alt="{{ $altText }}"
-      {{ if .Site.Params.enableImageLazyLoading | default true }}
-        loading="lazy"
-      {{ end }}
-      {{ if findRE "^https?" $url.Scheme }}
-        src="{{ $url.String }}"
-      {{ else }}
-        {{ $resource := "" }}
-        {{ if $.Page.Resources.GetMatch ($url.String) }}
-          {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
-        {{ else if resources.GetMatch ($url.String) }}
-          {{ $resource = resources.Get ($url.String) }}
-        {{ end }}
-        {{ with $resource }}
-          {{ if eq .MediaType.SubType "svg" }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            width="{{ .Width }}"
-            height="{{ .Height }}"
-            {{ if lt .Width 660 }}
-              src="{{ .RelPermalink }}"
-            {{ else }}
-              srcset="
-              {{- (.Resize "330x").RelPermalink }} 330w,
-              {{- (.Resize "660x").RelPermalink }} 660w,
-              {{- (.Resize "1024x").RelPermalink }} 1024w,
-              {{- (.Resize "1320x").RelPermalink }} 2x"
-              src="{{ (.Resize "660x").RelPermalink }}"
-            {{ end }}
-          {{ end }}
-        {{ else }}
-          src="{{ $url.String }}"
-        {{ end }}
-      {{ end }}
-    />
     {{ with $href }}</a>{{ end }}
     {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
   </figure>

package-lock.json

@@ -13,8 +13,8 @@
         "@tailwindcss/typography": "^0.5.10",
         "chart.js": "^4.4.0",
         "fuse.js": "^6.6.2",
-        "katex": "^0.16.8",
+        "katex": "^0.16.9",
-        "mermaid": "^10.4.0",
+        "mermaid": "^10.5.1",
         "prettier": "^3.0.3",
         "prettier-plugin-go-template": "^0.0.15",
         "prettier-plugin-tailwindcss": "^0.5.6",
@@ -1352,9 +1352,9 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.8",
+      "version": "0.16.9",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.9.tgz",
-      "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
+      "integrity": "sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==",
       "dev": true,
       "funding": [
         "https://opencollective.com/katex",
@@ -1489,9 +1489,9 @@
       }
     },
     "node_modules/mermaid": {
-      "version": "10.4.0",
+      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.5.1.tgz",
-      "integrity": "sha512-4QCQLp79lvz7UZxow5HUX7uWTPJOaQBVExduo91tliXC7v78i6kssZOPHxLL+Xs30KU72cpPn3g3imw/xm/gaw==",
+      "integrity": "sha512-+4mkGW5PptHDSae4YZ/Jw1pEOf0irrB/aCL6BwZcJPhr5+84UJBrQnHTvyPqCUz67tXkrDvSzWv4B+J2hLO78g==",
       "dev": true,
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.1",
@@ -4111,9 +4111,9 @@
       "dev": true
     },
     "katex": {
-      "version": "0.16.8",
+      "version": "0.16.9",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.9.tgz",
-      "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
+      "integrity": "sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==",
       "dev": true,
       "requires": {
         "commander": "^8.3.0"
@@ -4221,9 +4221,9 @@
       "dev": true
     },
     "mermaid": {
-      "version": "10.4.0",
+      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.5.1.tgz",
-      "integrity": "sha512-4QCQLp79lvz7UZxow5HUX7uWTPJOaQBVExduo91tliXC7v78i6kssZOPHxLL+Xs30KU72cpPn3g3imw/xm/gaw==",
+      "integrity": "sha512-+4mkGW5PptHDSae4YZ/Jw1pEOf0irrB/aCL6BwZcJPhr5+84UJBrQnHTvyPqCUz67tXkrDvSzWv4B+J2hLO78g==",
       "dev": true,
       "requires": {
         "@braintree/sanitize-url": "^6.0.1",

package.json

@@ -32,8 +32,8 @@
     "@tailwindcss/typography": "^0.5.10",
     "chart.js": "^4.4.0",
     "fuse.js": "^6.6.2",
-    "katex": "^0.16.8",
+    "katex": "^0.16.9",
-    "mermaid": "^10.4.0",
+    "mermaid": "^10.5.1",
     "prettier": "^3.0.3",
     "prettier-plugin-go-template": "^0.0.15",
     "prettier-plugin-tailwindcss": "^0.5.6",