Merge 74f82dae95 into c22dbc06ee

CHANGELOG.md

@@ -6,15 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [2.7.0] - 2023-10-23
+
 ### Added
 
 - New portable locale picker that can be placed in any menu using the `locale` action ([#583](https://github.com/jpanther/congo/issues/583))
-- New icons for `chevron-down`, `chevron-up`, `globe` and `translate`
+- New icons for `chevron-down`, `chevron-up`, `globe`, `translate`, `coffee` and `x-twitter` ([#669](https://github.com/jpanther/congo/pull/669))
 - Plausible Analytics support ([#584](https://github.com/jpanther/congo/pull/584))
 - 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
 
@@ -743,7 +744,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Advanced customisation using simple Tailwind colour definitions and styles
 - Fully documented
 
-[Unreleased]: https://github.com/jpanther/congo/compare/v2.6.1...HEAD
+[Unreleased]: https://github.com/jpanther/congo/compare/v2.7.0...HEAD
+[2.7.0]: https://github.com/jpanther/congo/compare/v2.6.1...v2.7.0
 [2.6.1]: https://github.com/jpanther/congo/compare/v2.6.0...v2.6.1
 [2.6.0]: https://github.com/jpanther/congo/compare/v2.5.4...v2.6.0
 [2.5.4]: https://github.com/jpanther/congo/compare/v2.5.3...v2.5.4

assets/css/compiled/main.css

@@ -1,4 +1,4 @@
-/*! Congo v2.6.1 | MIT License | https://github.com/jpanther/congo */
+/*! Congo v2.7.0 | MIT License | https://github.com/jpanther/congo */
 
 /*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */
 

assets/css/main.css

@@ -1,4 +1,4 @@
-/*! Congo v2.6.1 | MIT License | https://github.com/jpanther/congo */
+/*! Congo v2.7.0 | MIT License | https://github.com/jpanther/congo */
 
 @tailwind base;
 @tailwind components;

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/installation/index.md

@@ -151,6 +151,10 @@ Hugo will automatically update any modules that are required for your project. I
 
 Then simply rebuild your site and check everything works as expected.
 
+{{< alert >}}
+When updating modules, sometimes Hugo will cache an older version of the theme. If this happens, clear your local cache by using the `hugo mod clean` command and then rebuild your site.
+{{< /alert >}}
+
 ### Update using git
 
 Git submodules can be updated using the `git` command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:

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.es.md

@@ -29,7 +29,6 @@ La lista a continuación es solo un puñado de sitios web creados con el tema Co
 | [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 @@ La lista a continuación es solo un puñado de sitios web creados con el tema Co
 | [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               |
@@ -68,6 +61,7 @@ La lista a continuación es solo un puñado de sitios web creados con el tema Co
 | [spiffyeight77.com](https://spiffyeight77.com/)                        | Personal blog                   |
 | [Tomy's Blog](https://blog.tomy.me)                                    | Personal site and Blog          |
 | [Beerjoa Blog](https://blog.beerjoa.dev)                               | Personal site and Blog          |
+| [simaosilva.com](https://simaosilva.com)                               | Personal Site                   |
+| [kom.al](https://kom.al)                                               | Personal Site                   |
 
-<!-- :shushing_face: -->
 **¿Usuaria de congo?** Para agregar tu sitio a esta lista, [haz un pull request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users/index.md).

exampleSite/content/users/index.ja.md

@@ -19,7 +19,7 @@ Congoを使用して構築された実際のウェブサイト。
 
 | Website                                                                | Details                         |
 | ---------------------------------------------------------------------- | ------------------------------- |
-| [jamespanther.com](https://jamespanther.com)                           | Personal site - **Theme author**|
+| [jamespanther.com](https://jamespanther.com)                           | Personal site - Theme author    |
 | [antoinesoetewey.com](https://antoinesoetewey.com/)                    | Personal site                   |
 | [leif.io](https://leif.io/)                                            | Personal site and Tech blog     |
 | [dr460nf1r3.org](https://dr460nf1r3.org/)                              | Personal site and Blog          |
@@ -29,7 +29,6 @@ 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 @@ 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               |
@@ -68,5 +61,7 @@ Congoを使用して構築された実際のウェブサイト。
 | [spiffyeight77.com](https://spiffyeight77.com/)                        | Personal blog                   |
 | [Tomy's Blog](https://blog.tomy.me)                                    | Personal site and Blog          |
 | [Beerjoa Blog](https://blog.beerjoa.dev)                               | Personal site and Blog          |
+| [simaosilva.com](https://simaosilva.com)                               | Personal Site                   |
+| [kom.al](https://kom.al)                                               | Personal Site                   |
 
 **Congoを使っていますか？** あなたのウェブサイトを加えるために[Pull Request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users/index.md)を投げてください。

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
-      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 }}
+  {{ partial "picture.html" (dict "context" . "src" .Destination "alt" .Text) }}
+  {{ with .Title }}<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
-            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 "" }}"
-          />
+          {{ $alt := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
+          {{ partial "picture.html" (dict "context" . "resource" $feature "alt" $alt "class" "mb-6 -mt-4 rounded-md") }}
           {{ with $.Params.coverCaption }}
             <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
           {{ end }}

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") }}
-  {{ $altText := .Get "alt" }}
+  {{ $src := .Get "src" }}
+  {{ $alt := .Get "alt" }}
   {{ $caption := .Get "caption" }}
   {{ $href := .Get "href" }}
   {{ $class := .Get "class" }}
   <figure{{ with $class }} class="{{ . }}"{{ end }}>
     {{ with $href }}<a href="{{ . }}">{{ end }}
-    <img
-      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 }}
-    />
+    {{ partial "picture.html" (dict "context" . "src" $src "alt" $alt) }}
     {{ with $href }}</a>{{ end }}
     {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
   </figure>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hugo-congo-theme",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Congo theme for Hugo",
   "scripts": {
     "preinstall": "rimraf assets/lib",