🔖 Release v2.5.0

2023-01-17 13:00:14 +11:00 · 2023-01-17 13:00:14 +11:00 · 5a22faacac
parent 572885c526 e998514a53
commit 5a22faacac
85 changed files with 1317 additions and 1479 deletions
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@ -10,7 +10,7 @@ jobs:
      issues: write
      pull-requests: write
    steps:
-      - uses: actions/stale@v6
+      - uses: actions/stale@v7
        with:
          days-before-stale: 30
          days-before-close: 14
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -6,6 +6,41 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

 ## [Unreleased]

+## [2.5.0] - 2023-01-17
+
+### Added
+
+- Support for icons in menus including support for links styled as an icon by itself or an icon with text
+- Search and appearance switcher links can now be fully customised and positioned anywhere in the menu
+- Front matter support for specifying article thumbnails, covers and featured image details (including filename pattern, alt text and caption)
+- Two new colour schemes - `cherry` and `sapphire`
+- Support for SVG assets as article thumbnails, covers and featured images
+- Front matter keywords support on a per article basis
+- Indonesian translation ([#398](https://github.com/jpanther/congo/pull/398))
+- Mastodon sharing links ([#405](https://github.com/jpanther/congo/pull/405))
+- `homepage.recentLimit` parameter to adjust the maximum number of recent items listed on the homepage ([#411](https://github.com/jpanther/congo/pull/411))
+
+### Changed
+
+- Images smaller than the article width are no longer resized to fill the content area and will now simply align centre ([#394](https://github.com/jpanther/congo/pull/394))
+- Upgrade to KaTeX v0.16.4 ([#414](https://github.com/jpanther/congo/pull/414))
+- Upgrade to Mermaid v9.3.0 ([#419](https://github.com/jpanther/congo/pull/419))
+- Upgrade to Chart.js v4.1.2 ([#420](https://github.com/jpanther/congo/pull/420), [#434](https://github.com/jpanther/congo/pull/434))
+- Upgrade to Typography v0.5.9 ([#437](https://github.com/jpanther/congo/pull/437))
+
+### Fixed
+
+- `mainSections` parameter is language dependent and is not referenced from `params.toml` ([#376](https://github.com/jpanther/congo/pull/376))
+- Code highlight background cut off in Google Chrome when overflowing content area ([#383](https://github.com/jpanther/congo/pull/383))
+- Social icons shift position during CSS transition when hovered in Safari ([#396](https://github.com/jpanther/congo/pull/396))
+- Hamburger navigation menu is misaligned in mobile browsers ([#399](https://github.com/jpanther/congo/pull/399))
+- Error when attempting to resize SVG assets in page bundles ([#427](https://github.com/jpanther/congo/pull/427))
+- Appearance switcher missing `aria-label` ([#438](https://github.com/jpanther/congo/pull/438))
+- Article links missing `alt` text and `aria-label` ([#439](https://github.com/jpanther/congo/pull/439))
+- Line height in article tag list would cause overlap when wrapping to a new line ([#444](https://github.com/jpanther/congo/pull/444))
+- Figure shortcode would not apply `class` or `href` attribtues in some cases
+- Charts displaying with incorrect theme colours
+
 ## [2.4.2] - 2022-11-22

 ### Added
@ -570,7 +605,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.4.2...HEAD
+[Unreleased]: https://github.com/jpanther/congo/compare/v2.5.0...HEAD
+[2.5.0]: https://github.com/jpanther/congo/compare/v2.4.2...v2.5.0
 [2.4.2]: https://github.com/jpanther/congo/compare/v2.4.1...v2.4.2
 [2.4.1]: https://github.com/jpanther/congo/compare/v2.4.0...v2.4.1
 [2.4.0]: https://github.com/jpanther/congo/compare/v2.3.1...v2.4.0
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@ -1,4 +1,4 @@
-/*! Congo v2.4.2 | MIT License | https://github.com/jpanther/congo */
+/*! Congo v2.5.0 | MIT License | https://github.com/jpanther/congo */

 /*! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com */

@ -518,6 +518,11 @@ video {
  max-width: 65ch;
 }

+.prose :where(p):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
 .prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
@ -878,11 +883,6 @@ video {
  line-height: 1.75;
 }

-.prose :where(p):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
-
 .prose :where(video):not(:where([class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
@ -1020,6 +1020,7 @@ body button {
 /* Hamburger menu */

 body:has(#menu-controller:checked) {
+  position: fixed;
  overflow-y: hidden;
 }

@ -1173,64 +1174,37 @@ body:has(#menu-controller:checked) {

 /* Background */

-.prose .chroma {
-  position: static;
+.chroma {
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity));
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
  --tw-text-opacity: 1;
  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
 }

-.dark .prose .chroma {
+.dark .chroma {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-neutral-700), var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
 }

-/* LineTableTD */
-
-.chroma .lntd,
-.chroma .lntd pre {
+.chroma pre {
  margin: 0px;
-  overflow: hidden;
-  border-style: none;
  padding: 0px;
-  vertical-align: top;
 }

 /* LineTable */

 .chroma .lntable {
+  margin: 0px;
  display: block;
  width: auto;
-  overflow-x: auto;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  overflow: auto;
  font-size: 1rem;
  line-height: 1.5rem;
-  border-spacing: 0;
-}
-
-/* LineTable Line */
-
-.chroma .lntable .line {
-  padding-right: 1rem;
-}
-
-/* LineHighlight */
-
-.chroma .hl {
-  display: block;
-  width: auto;
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
-}
-
-.dark .chroma .hl {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
 }

 /* LineNumbersTable */
@ -1239,11 +1213,9 @@ body:has(#menu-controller:checked) {

 .chroma .lnt,
 .chroma .ln {
-  margin-right: 0.4em;
-  padding-left: 0.4em;
-  padding-right: 0.4em;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  margin-right: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
  --tw-text-opacity: 1;
  color: rgba(var(--color-neutral-600), var(--tw-text-opacity));
 }
@ -1254,6 +1226,29 @@ body:has(#menu-controller:checked) {
  color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
 }

+.chroma .lntd {
+  padding: 0px;
+  vertical-align: top;
+}
+
+.chroma .lntd:last-of-type {
+  width: 100%;
+}
+
+/* LineHighlight */
+
+.chroma .hl {
+  display: block;
+  width: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
+}
+
+.dark .chroma .hl {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
+}
+
 /* Keyword */

 /* KeywordDeclaration */
@ -1803,6 +1798,10 @@ body:has(#menu-controller:checked) {
  margin-top: -1rem;
 }

+.-mt-3 {
+  margin-top: -0.75rem;
+}
+
 .mr-2 {
  margin-right: 0.5rem;
 }
@ -1891,6 +1890,10 @@ body:has(#menu-controller:checked) {
  height: 9rem;
 }

+.max-h-\[4\.5rem\] {
+  max-height: 4.5rem;
+}
+
 .max-h-\[10rem\] {
  max-height: 10rem;
 }
@ -1951,6 +1954,10 @@ body:has(#menu-controller:checked) {
  max-width: 65ch;
 }

+.max-w-\[6rem\] {
+  max-width: 6rem;
+}
+
 .max-w-\[10rem\] {
  max-width: 10rem;
 }
@ -2343,6 +2350,10 @@ body:has(#menu-controller:checked) {
  line-height: 1.75rem;
 }

+.leading-relaxed {
+  line-height: 1.625;
+}
+
 .leading-6 {
  line-height: 1.5rem;
 }
@ -2441,6 +2452,12 @@ body:has(#menu-controller:checked) {
  transition-duration: 150ms;
 }

+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -2568,6 +2585,14 @@ body:has(#menu-controller:checked) {
  text-decoration-color: rgba(var(--color-primary-500), 1);
 }

+.group:hover .group-hover\:decoration-2 {
+  text-decoration-thickness: 2px;
+}
+
+.group:hover .group-hover\:underline-offset-2 {
+  text-underline-offset: 2px;
+}
+
 .group:hover .group-hover\:opacity-100 {
  opacity: 1;
 }
@ -2692,6 +2717,10 @@ body:has(#menu-controller:checked) {
  text-align: left;
 }

+.dark .dark\:inline {
+  display: inline;
+}
+
 .dark .dark\:flex {
  display: flex;
 }
@ -2884,6 +2913,10 @@ body:has(#menu-controller:checked) {
    display: none;
  }

+  .sm\:max-h-\[7\.5rem\] {
+    max-height: 7.5rem;
+  }
+
  .sm\:w-1\/2 {
    width: 50%;
  }
@ -2892,6 +2925,10 @@ body:has(#menu-controller:checked) {
    width: 10rem;
  }

+  .sm\:max-w-\[10rem\] {
+    max-width: 10rem;
+  }
+
  .sm\:flex-row {
    flex-direction: row;
  }
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -1,4 +1,4 @@
-/*! Congo v2.4.2 | MIT License | https://github.com/jpanther/congo */
+/*! Congo v2.5.0 | MIT License | https://github.com/jpanther/congo */

@tailwind base;
@tailwind components;
@ -23,7 +23,7 @@ body button {

 /* Hamburger menu */
 body:has(#menu-controller:checked) {
-  @apply overflow-y-hidden;
+  @apply fixed overflow-y-hidden;
 }
 #menu-button:has(#menu-controller:checked) {
  @apply invisible;
@ -98,32 +98,31 @@ body:has(#menu-controller:checked) {

 /* -- Chroma Highlight -- */
 /* Background */
-.prose .chroma {
-  @apply static rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
+.chroma {
+  @apply py-3 rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
 }
-/* LineTableTD */
-.chroma .lntd,
-.chroma .lntd pre {
-  @apply p-0 m-0 overflow-hidden align-top border-none;
+.chroma pre {
+  @apply p-0 m-0;
 }
 /* LineTable */
 .chroma .lntable {
-  @apply block w-auto py-3 overflow-x-auto text-base;
-  border-spacing: 0;
-}
-/* LineTable Line */
-.chroma .lntable .line {
-  @apply pr-4;
-}
-/* LineHighlight */
-.chroma .hl {
-  @apply block w-auto bg-primary-100 dark:bg-primary-900;
+  @apply block w-auto m-0 overflow-auto text-base;
 }
 /* LineNumbersTable */
 /* LineNumbers */
 .chroma .lnt,
 .chroma .ln {
-  @apply mr-[0.4em] px-[0.4em] py-0 text-neutral-600 dark:text-neutral-300;
+  @apply px-2 mr-2 text-neutral-600 dark:text-neutral-300;
+}
+.chroma .lntd {
+  @apply p-0 align-top;
+}
+.chroma .lntd:last-of-type {
+  @apply w-full;
+}
+/* LineHighlight */
+.chroma .hl {
+  @apply block w-full bg-primary-100 dark:bg-primary-900;
 }
 /* Keyword */
 /* KeywordDeclaration */
--- a/assets/css/schemes/cherry.css
+++ b/assets/css/schemes/cherry.css
@ -0,0 +1,37 @@
+/* Cherry scheme */
+:root {
+  --color-neutral: 255, 255, 255;
+  /* Neutral */
+  --color-neutral-50: 250, 250, 250;
+  --color-neutral-100: 245, 245, 245;
+  --color-neutral-200: 229, 229, 229;
+  --color-neutral-300: 212, 212, 212;
+  --color-neutral-400: 163, 163, 163;
+  --color-neutral-500: 115, 115, 115;
+  --color-neutral-600: 82, 82, 82;
+  --color-neutral-700: 64, 64, 64;
+  --color-neutral-800: 38, 38, 38;
+  --color-neutral-900: 23, 23, 23;
+  /* Rose */
+  --color-primary-50: 255, 241, 242;
+  --color-primary-100: 255, 228, 230;
+  --color-primary-200: 254, 205, 211;
+  --color-primary-300: 253, 164, 175;
+  --color-primary-400: 251, 113, 133;
+  --color-primary-500: 244, 63, 94;
+  --color-primary-600: 225, 29, 72;
+  --color-primary-700: 190, 18, 60;
+  --color-primary-800: 159, 18, 57;
+  --color-primary-900: 136, 19, 55;
+  /* Green */
+  --color-secondary-50: 240, 253, 244;
+  --color-secondary-100: 220, 252, 231;
+  --color-secondary-200: 187, 247, 208;
+  --color-secondary-300: 134, 239, 172;
+  --color-secondary-400: 74, 222, 128;
+  --color-secondary-500: 34, 197, 94;
+  --color-secondary-600: 22, 163, 74;
+  --color-secondary-700: 21, 128, 61;
+  --color-secondary-800: 22, 101, 52;
+  --color-secondary-900: 20, 83, 45;
+}
--- a/assets/css/schemes/ocean.css
+++ b/assets/css/schemes/ocean.css
@ -1,7 +1,7 @@
 /* Ocean scheme */
 :root {
  --color-neutral: 255, 255, 255;
-  /* Gray */
+  /* Slate */
  --color-neutral-50: 248, 250, 252;
  --color-neutral-100: 241, 245, 249;
  --color-neutral-200: 226, 232, 240;
--- a/assets/css/schemes/sapphire.css
+++ b/assets/css/schemes/sapphire.css
@ -0,0 +1,37 @@
+/* Sapphire scheme */
+:root {
+  --color-neutral: 255, 255, 255;
+  /* Slate */
+  --color-neutral-50: 248, 250, 252;
+  --color-neutral-100: 241, 245, 249;
+  --color-neutral-200: 226, 232, 240;
+  --color-neutral-300: 203, 213, 225;
+  --color-neutral-400: 148, 163, 184;
+  --color-neutral-500: 100, 116, 139;
+  --color-neutral-600: 71, 85, 105;
+  --color-neutral-700: 51, 65, 85;
+  --color-neutral-800: 30, 41, 59;
+  --color-neutral-900: 15, 23, 42;
+  /* Indigo */
+  --color-primary-50: 238, 242, 255;
+  --color-primary-100: 224, 231, 255;
+  --color-primary-200: 199, 210, 254;
+  --color-primary-300: 165, 180, 252;
+  --color-primary-400: 129, 140, 248;
+  --color-primary-500: 99, 102, 241;
+  --color-primary-600: 79, 70, 229;
+  --color-primary-700: 67, 56, 202;
+  --color-primary-800: 55, 48, 163;
+  --color-primary-900: 49, 46, 129;
+  /* Pink */
+  --color-secondary-50: 253, 242, 248;
+  --color-secondary-100: 252, 231, 243;
+  --color-secondary-200: 251, 207, 232;
+  --color-secondary-300: 249, 168, 212;
+  --color-secondary-400: 244, 114, 182;
+  --color-secondary-500: 236, 72, 153;
+  --color-secondary-600: 219, 39, 119;
+  --color-secondary-700: 190, 24, 93;
+  --color-secondary-800: 157, 23, 77;
+  --color-secondary-900: 131, 24, 67;
+}
--- a/assets/js/appearance.js
+++ b/assets/js/appearance.js
@ -39,8 +39,8 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
 }

 window.addEventListener("DOMContentLoaded", (event) => {
-  const switcher = document.getElementById("appearance-switcher");
-  if (switcher) {
+  var switchers = document.querySelectorAll("[id^='appearance-switcher']");
+  switchers.forEach((switcher) => {
    switcher.addEventListener("click", () => {
      document.documentElement.classList.toggle("dark");
      setThemeColor();
@ -53,5 +53,5 @@ window.addEventListener("DOMContentLoaded", (event) => {
      event.preventDefault();
      localStorage.removeItem("appearance");
    });
-  }
+  });
 });
--- a/assets/js/chart.js
+++ b/assets/js/chart.js
@ -3,6 +3,7 @@ function css(name) {
 }

 Chart.defaults.font.size = 14;
+Chart.defaults.plugins.colors.enabled = false;
 Chart.defaults.backgroundColor = css("--color-primary-300");
 Chart.defaults.elements.point.borderColor = css("--color-primary-400");
 Chart.defaults.elements.bar.borderColor = css("--color-primary-500");
--- a/assets/lib/chart/chart.umd.js
+++ b/assets/lib/chart/chart.umd.js
--- a/assets/lib/katex/katex.min.css
+++ b/assets/lib/katex/katex.min.css
--- a/assets/lib/katex/katex.min.js
+++ b/assets/lib/katex/katex.min.js
--- a/assets/lib/mermaid/mermaid.min.js
+++ b/assets/lib/mermaid/mermaid.min.js
--- a/config/_default/languages.en.toml
+++ b/config/_default/languages.en.toml
@ -6,12 +6,14 @@ weight = 1
 rtl = false

 title = "Congo"
-# logo = "img/logo.jpg"
 # description = "My awesome website"
 # copyright = "Copy, _right?_ :thinking_face:"

 dateFormat = "2 January 2006"

+[params]
+  # mainSections = ["section1", "section2"]
+
 [author]
  # name = "Your name here"
  # image = "img/author.jpg"
--- a/config/_default/menus.en.toml
+++ b/config/_default/menus.en.toml
@ -1,7 +1,7 @@
 # -- Main Menu --
 # The main menu is displayed in the header at the top of the page.
 # Acceptable parameters are name, pageRef, page, url, title, weight.
-# 
+#
 # The simplest menu configuration is to provide:
 #   name = The name to be displayed for this menu link
 #   pageRef = The identifier of the page or section to link to
@ -25,6 +25,11 @@
  pageRef = "tags"
  weight = 30

+[[main]]
+  identifier = "search"
+  weight = 99
+  [main.params]
+    action = "search"

 # -- Footer Menu --
 # The footer menu is displayed at the bottom of the page, just before
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@ -12,7 +12,6 @@ autoSwitchAppearance = true
 enableSearch = false
 enableCodeCopy = false

-# mainSections = ["section1", "section2"]
 # robots = ""

 [header]
@ -29,6 +28,7 @@ enableCodeCopy = false
 [homepage]
  layout = "page" # valid options: page, profile, custom
  showRecent = false
+  recentLimit = 5

 [article]
  showDate = true
@ -47,7 +47,7 @@ enableCodeCopy = false
  showTaxonomies = false
  showWordCount = false
  showComments = false
-  # sharingLinks = ["facebook", "twitter", "pinterest", "reddit", "linkedin", "email"]
+  # sharingLinks = ["facebook", "twitter", "mastodon", "pinterest", "reddit", "linkedin", "email"]

 [list]
  showBreadcrumbs = false
--- a/data/sharing.json
+++ b/data/sharing.json
@ -14,6 +14,11 @@
    "title": "sharing.linkedin",
    "url": "https://www.linkedin.com/shareArticle?mini=true&url=%s&title=%s"
  },
+  "mastodon": {
+    "icon": "mastodon",
+    "title": "sharing.mastodon",
+    "url": "https://tootpick.org/#text=%s %s"
+  },
  "pinterest": {
    "icon": "pinterest",
    "title": "sharing.pinterest",
--- a/exampleSite/config/_default/languages.en.toml
+++ b/exampleSite/config/_default/languages.en.toml
@ -6,12 +6,14 @@ weight = 1
 rtl = false

 title = "Congo"
-# logo = "img/logo.jpg"
 description = "A powerful, lightweight theme for Hugo built with Tailwind CSS."
-copyright = "&copy; 2022 Congo contributors"
+copyright = "&copy; 2023 Congo contributors"

 dateFormat = "2 January 2006"

+[params]
+  mainSections = ["samples"]
+
 [author]
  name = "Congo"
  image = "img/author.jpg"
--- a/exampleSite/config/_default/markup.toml
+++ b/exampleSite/config/_default/markup.toml
@ -10,4 +10,4 @@

 [tableOfContents]
  startLevel = 2
-  endLevel = 4
+  endLevel = 3
--- a/exampleSite/config/_default/menus.en.toml
+++ b/exampleSite/config/_default/menus.en.toml
@ -1,7 +1,7 @@
 # -- Main Menu --
 # The main menu is displayed in the header at the top of the page.
 # Acceptable parameters are name, pageRef, page, url, title, weight.
-# 
+#
 # The simplest menu configuration is to provide:
 #   name = The name to be displayed for this menu link
 #   pageRef = The identifier of the page or section to link to
@ -24,12 +24,21 @@
  name = "Users"
  pageRef = "users"
  weight = 30
-  
+
 [[main]]
  name = "GitHub"
  url = "https://github.com/jpanther/congo"
  weight = 40
+  [main.params]
+    icon = "github"
+    showName = false
+    target = "_blank"

+[[main]]
+  identifier = "search"
+  weight = 99
+  [main.params]
+    action = "search"

 # -- Footer Menu --
 # The footer menu is displayed at the bottom of the page, just before
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@ -12,7 +12,6 @@ autoSwitchAppearance = true
 enableSearch = true
 enableCodeCopy = true

-mainSections = ["samples"]
 # robots = ""

 [header]
@ -29,6 +28,7 @@ mainSections = ["samples"]
 [homepage]
  layout = "custom" # valid options: page, profile, custom
  showRecent = true
+  recentLimit = 5

 [article]
  showDate = true
@ -47,7 +47,7 @@ mainSections = ["samples"]
  showTaxonomies = false
  showWordCount = false
  showComments = false
-  # sharingLinks = ["facebook", "twitter", "pinterest", "reddit", "linkedin", "email"]
+  # sharingLinks = ["facebook", "twitter", "mastodon", "pinterest", "reddit", "linkedin", "email"]

 [list]
  showBreadcrumbs = true
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@ -24,6 +24,6 @@ This is a demo site built entirely using Congo. It also contains a complete set
  </span>
 </div>

-Explore the [sample pages]({{< ref "samples" >}}) to get a feel for what Congo can do. If you like what you see, check out the project on [Github](https://github.com/jpanther/congo) or read the [Installation guide]({{< ref "docs/installation" >}}) to get started.
+{{< figure src="festivities.svg" class="m-auto mt-6 max-w-prose" >}}

-![A stylised photograph of a purple squid on a pink backdrop.](squid.jpg "Photo by [Jippe Joosten](https://unsplash.com/@jippe_joosten?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/vibrant-purple?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).")
+Explore the [sample pages]({{< ref "samples" >}}) to get a feel for what Congo can do. If you like what you see, check out the project on [Github](https://github.com/jpanther/congo) or read the [Installation guide]({{< ref "docs/installation" >}}) to get started.
--- a/exampleSite/content/docs/_index.md
+++ b/exampleSite/content/docs/_index.md
@ -5,6 +5,7 @@ description: "Learn how to use Congo and its features."
 cascade:
  showDate: false
  showAuthor: false
+  showSummary: true
  invertPagination: true
 ---

@ -16,4 +17,6 @@ Simple, yet powerful. Learn how to use Congo and its features.

 This section contains everything you need to know about Congo. If you're new, check out the [Installation]({{< ref "docs/installation" >}}) guide to begin or visit the [Samples]({{< ref "samples" >}}) section to see what Congo can do.

+_Special thanks to [Katerina Limpitsouni](https://ninalimpi.com) for the excellent illustrations that are used throughout these docs!_
+
 ---
--- a/exampleSite/content/docs/advanced-customisation/index.md
+++ b/exampleSite/content/docs/advanced-customisation/index.md
@ -3,6 +3,7 @@ title: "Advanced Customisation"
 date: 2020-08-08
 draft: false
 description: "Learn how to build Congo manually."
+summary: "Congo supports advanced customisations that include modifying the underlying Tailwind configuration, building the theme manually and providing custom CSS."
 slug: "advanced-customisation"
 tags: ["advanced", "css", "docs"]
 ---
--- a/exampleSite/content/docs/advanced-customisation/thumb-static-website.svg
+++ b/exampleSite/content/docs/advanced-customisation/thumb-static-website.svg
--- a/exampleSite/content/docs/configuration/index.md
+++ b/exampleSite/content/docs/configuration/index.md
@ -3,6 +3,7 @@ title: "Configuration"
 date: 2020-08-14
 draft: false
 description: "All the configuration variables available in Congo."
+summary: "Discover all the site, language and theme configurations that are available in Congo and how they can be used to customise your project."
 slug: "configuration"
 tags: ["config", "docs"]
 ---
@ -59,6 +60,7 @@ The theme currently supports the following languages out of the box:
 | :de: German                             | `de`    |
 | :israel: Hebrew                         | `he`    |
 | :hungary: Hungarian                     | `hu`    |
+| :indonesia: Indonesian                  | `id`    |
 | :it: Italian                            | `it`    |
 | :jp: Japanese                           | `ja`    |
 | :brazil: Portuguese (Brazil)            | `pt-br` |
@ -88,10 +90,11 @@ The default file can be used as a template to create additional languages, or re
 |`isoCode`|`"en"`|The ISO language code for HTML metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`).|
 |`weight`|`1`|The weight determines the order of languages when building multilingual sites.|
 |`rtl`|`false`|Whether or not this is a RTL language. Set to `true` to reflow content from right-to-left. Congo fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.|
-|`dateFormat`|`"2 January 2006"`|How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.|
 |`title`|`"Congo"`|The title of the website. This will be displayed in the site header and footer.|
 |`description`|_Not set_|The website description. This will be used in the site metadata.|
 |`copyright`|_Not set_|A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site `title`.|
+|`dateFormat`|`"2 January 2006"`|How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.|
+|`params.mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|
 |`author.name`|_Not set_|The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.|
 |`author.image`|_Not set_|Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site's `assets/` folder.|
 |`author.headline`|_Not set_|A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name.|
@ -116,12 +119,11 @@ Many of the article defaults here can be overridden on a per article basis by sp
 <!-- prettier-ignore-start -->
 |Name|Default|Description|
 |---|---|---|
-|`colorScheme`|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.|
+|`colorScheme`|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `cherry`, `fire`, `ocean`, `sapphire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.|
 |`defaultAppearance`|`"light"`|The default theme appearance, either `light` or `dark`.|
 |`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.|
 |`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.|
 |`enableCodeCopy`|`false`|Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below.|
-|`mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|
 |`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.|
 |`header.layout`|`"basic"`|The layout of the page header and menu. Valid values are `basic`, `hamburger`, `hybrid` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/header/custom.html` file.|
 |`header.logo`|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.|
@ -132,6 +134,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`footer.showScrollToTop`|`true`|When set to `true` the scroll to top arrow is displayed.|
 |`homepage.layout`|`"page"`|The layout of the homepage. Valid values are `page`, `profile` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.|
 |`homepage.showRecent`|`false`|Whether or not to display the recent articles list on the homepage.|
+|`homepage.recentLimit`|`5`|The maximum number of recent articles to display when `homepage.showRecent` is `true`.|
 |`article.showDate`|`true`|Whether or not article dates are displayed.|
 |`article.showDateUpdated`|`false`|Whether or not the dates articles were updated are displayed.|
 |`article.showAuthor`|`true`|Whether or not the author box is displayed in the article footer.|
--- a/exampleSite/content/docs/configuration/thumb-setup.svg
+++ b/exampleSite/content/docs/configuration/thumb-setup.svg
--- a/exampleSite/content/docs/content-examples/index.md
+++ b/exampleSite/content/docs/content-examples/index.md
@ -2,7 +2,8 @@
 title: "Content Examples"
 date: 2020-08-09
 draft: false
-description: "All the partials available in Congo."
+description: "Some examples that demonstrate how content should be created and structured."
+summary: "It's time to bring everything together with some examples that demonstrate how content should be created and structured."
 slug: "content-examples"
 tags: ["content", "example"]
 ---
--- a/exampleSite/content/docs/content-examples/thumb-inspiration.svg
+++ b/exampleSite/content/docs/content-examples/thumb-inspiration.svg
--- a/exampleSite/content/docs/front-matter/index.md
+++ b/exampleSite/content/docs/front-matter/index.md
@ -3,6 +3,7 @@ title: "Front Matter"
 date: 2020-08-12
 draft: false
 description: "All the front matter variables available in Congo."
+summary: "While supporting most Hugo defaults, Congo adds a number of front matter parameters to customise the presentation of individual articles."
 slug: "front-matter"
 tags: ["front matter", "config", "docs"]
 ---
@ -16,10 +17,18 @@ Front matter parameter default values are inherited from the theme's [base confi
 |---|---|---|
 |`title`|_Not set_|The name of the article.|
 |`description`|_Not set_|The text description for the article. It is used in the HTML metadata.|
+|`feature`|`"*feature*"`|The text pattern to match the feature image filename for this article.|
+|`featureAlt`|`""`|The alternative text description for the feature image.|
+|`cover`|`"*cover*"`|The text pattern to match the cover image filename for this article.|
+|`coverAlt`|`featureAlt`|The alternative text description for the cover image.|
+|`coverCaption`|_Not set_|The figure caption text to be displayed beneath the cover image.|
+|`thumbnail`|`"*thumb*"`_|The text pattern to match the thumbnail image filename for this article.|
+|`thumbnailAlt`|`featureAlt`|The alternative text description for the thumbnail image.|
 |`externalUrl`|_Not set_|If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website.|
 |`editURL`|`article.editURL`|When `showEdit` is active, the URL for the edit link.|
 |`editAppendPath`|`article.editAppendPath`|When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.|
 |`groupByYear`|`list.groupByYear`|Whether or not articles are grouped by year on list pages.|
+|`keywords`|_Not set_|Any keywords that should be included in the article metadata.|
 |`menu`|_Not set_|When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`.|
 |`robots`|_Not set_|String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.|
 |`sharingLinks`|`article.sharingLinks`|Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed.|
--- a/exampleSite/content/docs/front-matter/thumb-file-analysis.svg
+++ b/exampleSite/content/docs/front-matter/thumb-file-analysis.svg
--- a/exampleSite/content/docs/getting-started/index.md
+++ b/exampleSite/content/docs/getting-started/index.md
@ -2,7 +2,8 @@
 title: "Getting Started"
 date: 2020-08-15
 draft: false
-description: "All the front matter variables available in Congo."
+description: "Learn how to get started using the Congo theme."
+summary: "This section assumes you have already installed the Congo theme and are ready to start with basic configuration tasks like selecting a colour scheme, menu and content structure."
 slug: "getting-started"
 tags: ["installation", "docs"]
 ---
@ -29,7 +30,7 @@ The next step is to configure the language settings. Although Congo supports mul
 Locate the `languages.en.toml` file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to `languages.fr.toml`.

 {{< alert >}}
-Note that the language code in the language config filename should match the `languageCode` setting in `config.toml`.
+The language code in the language config filename should match the `languageCode` setting in `config.toml`.
 {{< /alert >}}

 ```toml
@ -53,7 +54,11 @@ If you need extra detail, further information about each of these configuration

 ## Colour schemes

-Congo ships with a number of colour schemes out of the box. To change the scheme, simply set the `colorScheme` theme parameter. Valid options are `congo` (default), `avocado`, `fire`, `ocean` and `slate`.
+Congo ships with a number of colour schemes out of the box. To change the scheme, simply set the `colorScheme` theme parameter. Valid options are `congo` (default), `avocado`, `cherry`, `fire`, `ocean`, `sapphire` and `slate`.
+
+{{< alert >}}
+The `colourScheme` value should be provided in lowercase.
+{{< /alert >}}

 ```toml
 # config/_default/params.toml
@ -71,6 +76,10 @@ Congo defines a three-colour palette that is used throughout the theme. Each mai

 {{< swatches "#78716c" "#84cc16" "#10b981" >}}

+#### Cherry
+
+{{< swatches "#737373" "#f43f5e" "#22c55e" >}}
+
 #### Fire

 {{< swatches "#78716c" "#f97316" "#f43f5e" >}}
@ -79,6 +88,10 @@ Congo defines a three-colour palette that is used throughout the theme. Each mai

 {{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}

+#### Sapphire
+
+{{< swatches "#64748b" "#6366f1" "#ec4899" >}}
+
 #### Slate

 {{< swatches "#6B7280" "#64748b" "#6B7280" >}}
@ -170,10 +183,10 @@ When you create a new taxonomy, you will need to adjust the navigation links on

 Congo has two menus that can be customised to suit the content and layout of your site. The `main` menu appears in the site header and the `footer` menu appears at the bottom of the page just above the copyright notice.

-Both menus are configured in the `menus.en.toml` file. Similarly to the languages config file, if you wish to use another language, rename this file and replace `en` with the language code you wish to use.
+Both menus are configured in the `menus.en.toml` file. Similarly to the languages config file, if you wish to use another language, rename this file and replace `en` with the language code you wish to use. Menu links will be sorted from lowest to highest `weight`, and then alphabetically by `name`.

 ```toml
-# config/_default/menus.toml
+# config/_default/menus.en.toml

 [[main]]
  name = "Blog"
@ -185,18 +198,45 @@ Both menus are configured in the `menus.en.toml` file. Similarly to the language
  pageRef = "topics"
  weight = 20

+[[main]]
+  name = "GitHub"
+  url = "https://github.com/jpanther/congo"
+  weight = 30
+  [main.params]
+    icon = "github"
+    showName = false
+    target = "_blank"
+
+[[main]]
+  identifier = "search"
+  weight = 99
+  [main.params]
+    action = "search"
+    icon = "search"
+
 [[footer]]
  name = "Privacy"
-  url = "https://external-link"
+  pageRef = "privacy"
 ```

+### Basic links
+
 The `name` parameter specifies the text that is used in the menu link. You can also optionally provide a `title` which fills the HTML title attribute for the link.

 The `pageRef` parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the `url` parameter can be used.

-Menu links will be sorted from lowest to highest `weight`, and then alphabetically by `name`.
+Further customisation can be achieved through the use of special theme parameters. Providing `params` within a link allows the addition of an `icon`, the ability to toggle the link text with `showName` and to optionally set a `target` for the URL. In the example above, the GitHub link will only display as an icon and will open the link in a new window.

-Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.
+### Action links
+
+There is a special case for creating menu items for links that take theme actions. These are denoted using the `action` parameter, and a value of the action the link should perform. Action links allow for all the same custom parameters as other links and can be styled with an icon or text name.
+
+There are two valid theme actions:
+
+- `appearance` will create a link to the appearance switcher
+- `search` will create a link to the site search
+
+Both menus are completely optional and can be commented out if not required. Use the template provided in the default file as a guide.

 ## Detailed configuration

--- a/exampleSite/content/docs/getting-started/thumb-choose.svg
+++ b/exampleSite/content/docs/getting-started/thumb-choose.svg
--- a/exampleSite/content/docs/homepage-layout/index.md
+++ b/exampleSite/content/docs/homepage-layout/index.md
@ -3,6 +3,7 @@ title: "Homepage Layout"
 date: 2020-08-13
 draft: false
 description: "Configuring the homepage layout in the Congo theme."
+summary: "Congo provides a fully flexible homepage layout with built-in templates and the ability to provide your own."
 slug: "homepage-layout"
 tags: ["homepage", "layouts", "docs"]
 ---
--- a/exampleSite/content/docs/homepage-layout/thumb-heatmap.svg
+++ b/exampleSite/content/docs/homepage-layout/thumb-heatmap.svg
--- a/exampleSite/content/docs/hosting-deployment/index.md
+++ b/exampleSite/content/docs/hosting-deployment/index.md
@ -3,6 +3,7 @@ title: "Hosting & Deployment"
 date: 2020-08-07
 draft: false
 description: "Learn how to deploy a Congo site."
+summary: "Congo is designed to be flexible in almost any deployment scenario. Learn more about how to deploy your project to some common hosting platforms."
 slug: "hosting-deployment"
 tags: ["hosting", "deployment", "docs", "github", "netlify", "render"]
 ---
@ -95,15 +96,15 @@ Then in the root of your site repository, create a `netlify.toml` file:

 [build.environment]
  NODE_ENV = "production"
-  GO_VERSION = "1.16"
+  GO_VERSION = "1.19"
  TZ = "UTC"  # Set to preferred timezone

 [context.production.environment]
-  HUGO_VERSION = "0.105.0"
+  HUGO_VERSION = "0.109.0"
  HUGO_ENV = "production"

 [context.deploy-preview.environment]
-  HUGO_VERSION = "0.105.0"
+  HUGO_VERSION = "0.109.0"
 ```

 This configuration assumes you are deploying Congo as a Hugo module. If you have installed the theme using another method, change the build command to simply `hugo --gc --minify -b $URL`.
--- a/exampleSite/content/docs/hosting-deployment/thumb-server-down.svg
+++ b/exampleSite/content/docs/hosting-deployment/thumb-server-down.svg
--- a/exampleSite/content/docs/installation/index.md
+++ b/exampleSite/content/docs/installation/index.md
@ -3,6 +3,7 @@ title: "Installation"
 date: 2020-08-16
 draft: false
 description: "How to install the Congo theme."
+summary: "Learn how to get up and running using Hugo and Congo from a completely blank state. It's the best place to start if you're a new user."
 slug: "installation"
 tags: ["installation", "docs"]
 ---
--- a/exampleSite/content/docs/installation/thumb-cloud-files.svg
+++ b/exampleSite/content/docs/installation/thumb-cloud-files.svg
--- a/exampleSite/content/docs/partials/index.md
+++ b/exampleSite/content/docs/partials/index.md
@ -3,6 +3,7 @@ title: "Partials"
 date: 2020-08-10
 draft: false
 description: "All the partials available in Congo."
+summary: "Partials are used to add special functionality to the theme including analytics, comments, favicons, custom scripts and more."
 slug: "partials"
 tags: ["partials", "analytics", "privacy", "comments", "favicons", "icon", "docs"]
 ---
--- a/exampleSite/content/docs/partials/thumb-charts.svg
+++ b/exampleSite/content/docs/partials/thumb-charts.svg
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@ -3,6 +3,7 @@ title: "Shortcodes"
 date: 2020-08-11
 draft: false
 description: "All the shortcodes available in Congo."
+summary: Congo includes several shortcodes for adding rich content to articles including images, charts, diagrams, buttons and more.
 slug: "shortcodes"
 tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
 ---
--- a/exampleSite/content/docs/shortcodes/thumb-website-builder.svg
+++ b/exampleSite/content/docs/shortcodes/thumb-website-builder.svg
--- a/exampleSite/content/docs/version-2/_index.md
+++ b/exampleSite/content/docs/version-2/_index.md
@ -3,6 +3,7 @@ title: "What's New in 2.0 ✨"
 date: 2022-01-19
 draft: false
 description: "Discover what's new in Congo version 2.0."
+summary: "Version 2 takes Congo to new heights, making the theme even more powerful while still maintaining its lightweight footprint."
 tags: ["new", "docs"]
 ---

--- a/exampleSite/content/docs/version-2/thumb-online-party.svg
+++ b/exampleSite/content/docs/version-2/thumb-online-party.svg
--- a/exampleSite/content/festivities.svg
+++ b/exampleSite/content/festivities.svg
--- a/exampleSite/content/samples/rich-content/index.md
+++ b/exampleSite/content/samples/rich-content/index.md
@ -3,6 +3,8 @@ title: "Rich Content"
 date: 2019-03-10
 description: "A brief description of Hugo Shortcodes"
 summary: "This is an _example_ of a **rich** content summary."
+coverAlt: "An example cover image depicting icons of some popular media organisations."
+coverCaption: "This is an example cover image with a caption."
 tags: ["shortcodes", "privacy", "sample", "gist", "twitter", "youtube", "vimeo"]
 ---

--- a/exampleSite/content/squid.jpg
+++ b/exampleSite/content/squid.jpg
--- a/exampleSite/content/users/cover-true-love.svg
+++ b/exampleSite/content/users/cover-true-love.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="888" height="475.27072" viewBox="0 0 888 475.27072" xmlns:xlink="http://www.w3.org/1999/xlink"><title>true_love</title><rect x="402.54442" y="219.17275" width="2.57298" height="13.89411" transform="translate(-11.71503 -369.44906) rotate(26.64397)" fill="#fff"/><path d="M426.98456,248.842a66.00006,66.00006,0,0,0-93.33814,0l-.01788.01788a65.982,65.982,0,0,0-93.30231,93.30237l-.01788.01788,93.33807,93.33807,93.33814-93.33807A66,66,0,0,0,426.98456,248.842Z" transform="translate(-156 -212.36464)" fill="#ff6584"/><path d="M709.42956,621.81706h-489.679a9.98831,9.98831,0,0,1-1.82989-.145l231.59565-401.157a16.2157,16.2157,0,0,1,28.22705,0L633.17308,489.72253l7.44637,12.8816Z" transform="translate(-156 -212.36464)" fill="#8b5cf6"/><polygon points="553.43 409.452 386.241 409.452 468.314 290.239 474.22 281.652 477.173 277.358 484.619 290.239 553.43 409.452" opacity="0.2"/><path d="M982.07935,621.36464H558.54722l82.07223-119.21293,5.9062-8.58777L753.47313,338.20663c7.01145-10.182,23.87881-10.81607,32.12223-1.92044a19.328,19.328,0,0,1,1.54006,1.92044Z" transform="translate(-156 -212.36464)" fill="#3f3d56"/><rect y="407.93322" width="888" height="2.24072" fill="#3f3d56"/><ellipse cx="570.05705" cy="586.26729" rx="32.34192" ry="10.15313" transform="translate(-329.28848 33.15083) rotate(-21.1763)" fill="#2f2e41"/><circle cx="349.2698" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="319.79361" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><rect x="359.09519" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><ellipse cx="336.16927" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="375.47085" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="350.90736" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="350.90736" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M442.52428,534.95878c-5.22292-23.39065,11.47266-47.02591,37.29064-52.79083s50.9816,8.52354,56.20452,31.91418-11.88759,32.01752-37.70556,37.78245S447.74721,558.34942,442.52428,534.95878Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><ellipse cx="440.41422" cy="603.0993" rx="32.34192" ry="10.15313" transform="translate(-453.46127 275.69894) rotate(-45)" fill="#2f2e41"/><path d="M473.49729,618.44821c0,6.33082,16.30083,18.832,34.38888,18.832s35.04764-17.82327,35.04764-24.15409-16.95958,1.22817-35.04764,1.22817S473.49729,612.11739,473.49729,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><ellipse cx="623.94295" cy="586.26729" rx="10.15313" ry="32.34192" transform="translate(-304.12811 743.93025) rotate(-68.8237)" fill="#2f2e41"/><circle cx="532.7302" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="698.5556" y="645.87743" width="19.65079" height="35.20766" transform="translate(1260.76198 1114.59789) rotate(-180)" fill="#2f2e41"/><rect x="659.25402" y="645.87743" width="19.65079" height="35.20766" transform="translate(1182.15883 1114.59789) rotate(-180)" fill="#2f2e41"/><ellipse cx="545.83073" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="506.52915" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="531.09264" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="531.09264" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M751.47572,534.95878c5.22292-23.39065-11.47266-47.02591-37.29064-52.79083s-50.9816,8.52354-56.20452,31.91418,11.88759,32.01752,37.70556,37.78245S746.25279,558.34942,751.47572,534.95878Z" transform="translate(-156 -212.36464)" fill="#8b5cf6"/><ellipse cx="753.58578" cy="603.0993" rx="10.15313" ry="32.34192" transform="translate(-361.73544 497.14467) rotate(-45)" fill="#2f2e41"/><path d="M720.50271,618.44821c0,6.33082-16.30083,18.832-34.38888,18.832s-35.04764-17.82327-35.04764-24.15409,16.95958,1.22817,35.04764,1.22817S720.50271,612.11739,720.50271,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><path d="M1044,527.22724c0,41.80115-24.85012,56.39655-55.5043,56.39655s-55.5043-14.5954-55.5043-56.39655,55.5043-94.97881,55.5043-94.97881S1044,485.42608,1044,527.22724Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><polygon points="830.474 364.865 831.042 329.881 854.699 286.601 831.131 324.393 831.387 308.663 847.691 277.35 831.454 304.5 831.454 304.5 831.914 276.209 849.373 251.28 831.986 271.76 832.273 219.884 830.469 288.559 830.617 285.726 812.866 258.555 830.332 291.164 828.678 322.761 828.629 321.922 808.166 293.329 828.567 324.885 828.36 328.836 828.323 328.896 828.34 329.22 824.144 409.383 829.751 409.383 830.423 367.977 850.775 336.499 830.474 364.865" fill="#3f3d56"/></svg>
--- a/exampleSite/content/users/index.md
+++ b/exampleSite/content/users/index.md
@ -12,41 +12,50 @@ showEdit: false
 ---

 {{< lead >}}
-Real websites that are built with Congo.
+Real websites that have been built using Congo.
 {{< /lead >}}

-| Website                                                                | Details                      |
-| ---------------------------------------------------------------------- | ---------------------------- |
-| [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       |
-| [OCram85.com](https://ocram85.com)                                     | Personal site and Blog       |
-| [mackiser.github.io](https://mackiser.github.io)                       | Personal site and Blog       |
-| [jamesmillner.dev](https://jamesmillner.dev)                           | Personal site and Blog       |
-| [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                |
-| [docteurelsavancaster.com](https://docteurelsavancaster.com/)          | Professional site            |
-| [ruihao-li.github.io](https://ruihao-li.github.io/)                    | Personal site and Blog       |
-| [phalanxhead.dev](https://phalanxhead.dev)                             | Personal site and Blog       |
-| [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  |
+The list below is just a handful of the websites that are built using the Congo theme. Check them out to discover some great exampels of what the theme can do.
+
+| Website                                                                | Details                       |
+| ---------------------------------------------------------------------- | ----------------------------- |
+| [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        |
+| [OCram85.com](https://ocram85.com)                                     | Personal site and Blog        |
+| [mackiser.github.io](https://mackiser.github.io)                       | Personal site and Blog        |
+| [jamesmillner.dev](https://jamesmillner.dev)                           | Personal site and Blog        |
+| [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                 |
+| [docteurelsavancaster.com](https://docteurelsavancaster.com/)          | Professional site             |
+| [ruihao-li.github.io](https://ruihao-li.github.io/)                    | Personal site and Blog        |
+| [phalanxhead.dev](https://phalanxhead.dev)                             | Personal site and Blog        |
+| [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        |

 **Congo user?** To add your site to this list, [submit a pull request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users.md).
--- a/exampleSite/layouts/shortcodes/swatches.html
+++ b/exampleSite/layouts/shortcodes/swatches.html
@ -1,14 +1,14 @@
 <div class="flex justify-between">
  <span
-    class="w-full py-6 mr-3 rounded-md"
+    class="w-full py-6 mr-2 rounded-md"
    {{ with .Get 0 }}style="background-color: {{ . }}"{{ end }}
  ></span>
  <span
-    class="w-full py-6 mr-3 rounded-md"
+    class="w-full py-6 mr-2 rounded-md"
    {{ with .Get 1 }}style="background-color: {{ . }}"{{ end }}
  ></span>
  <span
-    class="w-full py-6 mr-3 rounded-md"
+    class="w-full py-6 mr-2 rounded-md"
    {{ with .Get 2 }}style="background-color: {{ . }}"{{ end }}
  ></span>
 </div>
--- a/i18n/bn.yaml
+++ b/i18n/bn.yaml
@ -47,6 +47,7 @@ sharing:
  email: "ইমেল করুন"
  facebook: "ফেসবুকে শেয়ার করুন"
  linkedin: "লিংকডইনে শেয়ার করুন"
+  # mastodon: "Toot on Mastodon"
  pinterest: "পিন্টারেস্টে পিন করুন"
  reddit: "রেড্ডিটে জমা দিন"
  twitter: "ট্যুইট করুন"
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@ -10,8 +10,8 @@ article:
  reading_time_title: "Lesezeit"
  table_of_contents: "Inhaltsverzeichnis"
  word_count:
-   one: "{{ .Count }} Wort"
-   other: "{{ .Count }} Wörter"
+    one: "{{ .Count }} Wort"
+    other: "{{ .Count }} Wörter"

 author:
  byline_title: "Autor"
@ -35,18 +35,19 @@ list:
  no_articles: "Es gibt hier noch keine Beiträge."

 nav:
-   scroll_to_top_title: "Zum Anfang scrollen"
-   skip_to_main: "Zum Hauptinhalt springen"
+  scroll_to_top_title: "Zum Anfang scrollen"
+  skip_to_main: "Zum Hauptinhalt springen"

 search:
-   open_button_title: "Suche (/)"
-   close_button_title: "Schließen (Esc)"
-   input_placeholder: "Suchen"
+  open_button_title: "Suche (/)"
+  close_button_title: "Schließen (Esc)"
+  input_placeholder: "Suchen"

 sharing:
  email: "Per E-Mail teilen"
  facebook: "Auf Facebook teilen"
  linkedin: "Auf LinkedIn teilen"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Auf Pinterest pinnen"
  reddit: "An Reddit senden"
  twitter: "Auf Twitter teilen"
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -47,6 +47,7 @@ sharing:
  email: "Send via email"
  facebook: "Share on Facebook"
  linkedin: "Share on LinkedIn"
+  mastodon: "Toot on Mastodon"
  pinterest: "Pin on Pinterest"
  reddit: "Submit to Reddit"
  twitter: "Tweet on Twitter"
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@ -47,6 +47,7 @@ sharing:
  email: "Enviar vía email"
  facebook: "Compartir en Facebook"
  linkedin: "Compartir en LinkedIn"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Pinear en Pinterest"
  reddit: "Publicar en Reddit"
  twitter: "Tuitear en Twitter"
--- a/i18n/fi.yaml
+++ b/i18n/fi.yaml
@ -47,6 +47,7 @@ sharing:
  email: "Lähetä sähköpostilla"
  facebook: "Jaa Facebookissa"
  linkedin: "Jaa LinkedInissä"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Kiinnitä Pinterestiin"
  reddit: "Lähetä Reddittiin"
  twitter: "Twiittaa Twitterissä"
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@ -47,6 +47,7 @@ sharing:
  email: "Envoyer par email"
  facebook: "Poster sur Facebook"
  linkedin: "Poster sur LinkedIn"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Poster sur Pinterest"
  reddit: "Poster sur Reddit"
  twitter: "Tweeter"
--- a/i18n/he.yaml
+++ b/i18n/he.yaml
@ -47,6 +47,7 @@ sharing:
  email: "שליחת אימייל"
  facebook: "שיתוף בפייסבוק"
  linkedin: "שיתוף בלינקדאין"
+  # mastodon: "Toot on Mastodon"
  pinterest: "שיתוף בפינטרסט"
  reddit: "שליחה לרדיט"
  twitter: "ציוץ בטוויטר"
--- a/i18n/hu.yaml
+++ b/i18n/hu.yaml
@ -47,6 +47,7 @@ sharing:
  email: "Küldés emailben"
  facebook: "Megosztás a Facebookon"
  linkedin: "Megosztás a LinkedInen"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Megosztás a Pinteresten"
  reddit: "Megosztás a Redditen"
  twitter: "Megosztás a Twitteren"
--- a/i18n/id.yaml
+++ b/i18n/id.yaml
@ -0,0 +1,56 @@
+article:
+  anchor_label: "Anchor"
+  date: "{{ .Date }}"
+  date_updated: "Diperbarui: {{ .Date }}"
+  draft: "Draft"
+  edit_title: "Edit konten"
+  reading_time:
+    one: "{{ .Count }} menit"
+    other: "{{ .Count }} menit"
+  reading_time_title: "Waktu membaca"
+  table_of_contents: "Daftar isi"
+  word_count:
+    one: "{{ .Count }} kata"
+    other: "{{ .Count }} kata"
+
+author:
+  byline_title: "Penulis"
+
+code:
+  copy: "Salin"
+  copied: "Disalin"
+
+error:
+  404_title: "Halaman Tidak Ditemukan :confused:"
+  404_error: "Kesalahan 404"
+  404_description: "Tampaknya halaman yang Anda minta tidak ada."
+
+footer:
+  dark_appearance: "Beralih ke tampilan gelap"
+  light_appearance: "Beralih ke tampilan terang"
+  powered_by: "Dipersembahkan oleh {{ .Hugo }} &amp; {{ .Congo }}"
+
+list:
+  externalurl_title: "Tautan ke situs eksternal"
+  no_articles: "Belum ada artikel untuk dicantumkan di sini."
+
+nav:
+  scroll_to_top_title: "Gulir ke atas"
+  skip_to_main: "Lewati ke konten utama"
+
+search:
+  open_button_title: "Cari (/)"
+  close_button_title: "Tutup (Esc)"
+  input_placeholder: "Pencarian"
+
+sharing:
+  email: "Kirim lewat surel"
+  facebook: "Bagikan ke Facebook"
+  linkedin: "Bagikan ke LinkedIn"
+  mastodon: "Toot di Mastodon"
+  pinterest: "Pin di Pinterest"
+  reddit: "Kirim ke Reddit"
+  twitter: "Tweet di Twitter"
+
+shortcode:
+  recent_articles: "Terbaru"
--- a/i18n/it.yaml
+++ b/i18n/it.yaml
@ -47,6 +47,7 @@ sharing:
  email: "Invia tramite email"
  facebook: "Condividi su Facebook"
  linkedin: "Condividi su LinkedIn"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Pinna su Pinterest"
  reddit: "Invia a Reddit"
  twitter: "Tweetta su Twitter"
--- a/i18n/ja.yaml
+++ b/i18n/ja.yaml
@ -12,7 +12,7 @@ article:
  word_count:
    one: "{{ .Count }} 文字"
    other: "{{ .Count }} 文字"
-  
+
 author:
  byline_title: "著者"

@ -47,6 +47,7 @@ sharing:
  email: " Eメールを送る"
  facebook: "Facebookでシェアする"
  linkedin: "LinkedInでシェアする"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Pinterestでピンする"
  reddit: "Redditに投稿する"
  twitter: "Twitterに投稿する"
--- a/i18n/nl.yaml
+++ b/i18n/nl.yaml
@ -47,9 +47,10 @@ sharing:
  email: "Verstuur via email"
  facebook: "Deel op Facebook"
  linkedin: "Deel op LinkedIn"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Pin op Pinterest"
  reddit: "Verzend naar Reddit"
  twitter: "Tweet op Twitter"

 shortcode:
-  recent_articles: "Recent"
+  recent_articles: "Recent"
--- a/i18n/pt-BR.yaml
+++ b/i18n/pt-BR.yaml
@ -47,6 +47,7 @@ sharing:
  email: "Enviar por email"
  facebook: "Compartilhar pelo Facebook"
  linkedin: "Compartilhar pelo LinkedIn"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Pin no Pinterest"
  reddit: "Postar no Reddit"
  twitter: "Tweet no Twitter"
--- a/i18n/pt-PT.yaml
+++ b/i18n/pt-PT.yaml
@ -47,6 +47,7 @@ sharing:
  email: "Partilhar por email"
  facebook: "Partilhar pelo Facebook"
  linkedin: "Partilhar pelo LinkedIn"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Partilhar no Pinterest"
  reddit: "Partilhar no Reddit"
  twitter: "Partilhar no Twitter"
--- a/i18n/ro.yaml
+++ b/i18n/ro.yaml
@ -47,6 +47,7 @@ sharing:
  email: "Trimite pe email"
  facebook: "Postează pe Facebook"
  linkedin: "Postează LinkedIn"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Pune pe Pinterest"
  reddit: "Postează pe Reddit"
  twitter: "Scrie pe Twitter"
--- a/i18n/tr.yaml
+++ b/i18n/tr.yaml
@ -46,6 +46,7 @@ sharing:
  email: "Email ile gönder"
  facebook: "Facebook'ta paylaş"
  linkedin: "LinkedIn'te paylaş"
+  # mastodon: "Toot on Mastodon"
  pinterest: "Pinterest'te pinle"
  reddit: "Reddit'te gönder"
  twitter: "Twitter'da Tweetle"
--- a/i18n/zh-CN.yaml
+++ b/i18n/zh-CN.yaml
@ -46,6 +46,7 @@ sharing:
  email: "通过电子邮件发送"
  facebook: "分享到 Facebook"
  linkedin: "分享到 LinkedIn"
+  # mastodon: "Toot on Mastodon"
  pinterest: "钉到 Pinterest"
  reddit: "提交到 Reddit"
  twitter: "分享到 Twitter"
--- a/i18n/zh-TW.yaml
+++ b/i18n/zh-TW.yaml
@ -46,9 +46,10 @@ sharing:
  email: "以電子郵件發送"
  facebook: "分享到 Facebook"
  linkedin: "分享到 LinkedIn"
+  # mastodon: "Toot on Mastodon"
  pinterest: "釘到 Pinterest"
  reddit: "發送到 Reddit"
  twitter: "推到 Twitter"

 shortcode:
-  recent_articles: "最近的文章"
+  recent_articles: "最近的文章"
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@ -3,8 +3,8 @@
 {{ $caption := .Title }}
 {{ if findRE "^https?" $url.Scheme }}
  <figure>
-    <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-    {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+    <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+    {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
  </figure>
 {{ else }}
  {{ $resource := "" }}
@ -16,21 +16,29 @@
  {{ with $resource }}
    <figure>
      <img
-        class="my-0 rounded-md"
-        srcset="
-          {{ (.Resize "330x").RelPermalink }} 330w,
-          {{ (.Resize "660x").RelPermalink }} 660w,
-          {{ (.Resize "1024x").RelPermalink }} 1024w,
-          {{ (.Resize "1320x").RelPermalink }} 2x"
-        src="{{ (.Resize "660x").RelPermalink }}"
+        class="mx-auto my-0 rounded-md"
+        {{ if eq .MediaType.SubType "svg" }}
+          src="{{ .RelPermalink }}"
+        {{ else }}
+          {{ 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 }}"
      />
-      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
    </figure>
  {{ else }}
    <figure>
-      <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+      <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
    </figure>
  {{ end }}
 {{ end }}
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -1,4 +1,5 @@
 {{- partial "partials/functions/warnings.html" .Site -}}
+{{- partial "partials/functions/init.html" . -}}
 <!DOCTYPE html>
 <html
  lang="{{ with .Site.Params.isoCode | default (.Site.LanguageCode | default "en") }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,7 +1,7 @@
 {{ define "main" }}
  {{- $images := .Resources.ByType "image" }}
-  {{- $cover := $images.GetMatch "*cover*" }}
-  {{- $feature := $images.GetMatch "*feature*" | default $cover }}
+  {{- $cover := $images.GetMatch (.Params.cover | default "*cover*") }}
+  {{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $cover }}
  <article>
    <header class="max-w-prose">
      {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
@ -14,15 +14,27 @@
        {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
      </div>
      {{ with $feature }}
-        <img
-          class="mb-6 -mt-4 rounded-md"
-          srcset="
-                {{- (.Resize "330x").RelPermalink }} 330w,
-                {{- (.Resize "660x").RelPermalink }} 660w,
-                {{- (.Resize "1024x").RelPermalink }} 1024w,
-                {{- (.Resize "1320x").RelPermalink }} 2x"
-          src="{{ (.Resize "660x").RelPermalink }}"
-        />
+        <div class="prose">
+          <img
+            class="mb-6 -mt-4 rounded-md"
+            {{ if eq .MediaType.SubType "svg" }}
+              src="{{ .RelPermalink }}"
+            {{ else }}
+              {{ 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="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
+          />
+          {{ with $.Params.coverCaption }}
+            <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
+          {{ end }}
+        </div>
      {{ end }}
    </header>
    <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
--- a/layouts/partials/article-link.html
+++ b/layouts/partials/article-link.html
@ -1,7 +1,7 @@
 <article class="flex flex-row mt-6 max-w-prose">
  {{- $images := $.Resources.ByType "image" }}
-  {{- $thumbnail := $images.GetMatch "*thumb*" }}
-  {{- $feature := $images.GetMatch "*feature*" | default $thumbnail }}
+  {{- $thumbnail := $images.GetMatch (.Params.thumbnail | default "*thumb*") }}
+  {{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $thumbnail }}
  {{- with $feature }}
    <div class="flex-none pr-4 sm:pr-6 ">
      <a
@ -10,13 +10,19 @@
        {{ else }}
          {{ $.RelPermalink }}
        {{ end }}"
+        aria-label="{{ $.Title | emojify }}"
      >
        <img
-          class="w-24 rounded-md sm:w-40"
-          srcset="
-          {{- (.Fill "160x120 smart").RelPermalink }} 160w,
-          {{- (.Fill "320x240 smart").RelPermalink }} 2x"
-          src="{{ (.Fill "160x120 smart").RelPermalink }}"
+          alt="{{ $.Params.featureAlt | default $.Params.thumbnailAlt | default "" }}"
+          {{ if eq .MediaType.SubType "svg" }}
+            class="w-24 max-w-[6rem] max-h-[4.5rem] rounded-md sm:max-h-[7.5rem] sm:w-40
+            sm:max-w-[10rem]" src="{{ .RelPermalink }}"
+          {{ else }}
+            class="w-24 rounded-md sm:w-40" srcset="
+            {{- (.Fill "160x120 smart").RelPermalink }}
+            160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
+            src="{{ (.Fill "160x120 smart").RelPermalink }}"
+          {{ end }}
        />
      </a>
    </div>
--- a/layouts/partials/article-meta.html
+++ b/layouts/partials/article-meta.html
@ -49,7 +49,7 @@
    (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 text-neutral-500 dark:text-neutral-400 ">
+    <div class="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/layouts/partials/author-links.html
+++ b/layouts/partials/author-links.html
@ -4,6 +4,7 @@
      {{ range $name, $url := $links }}
        <a
          class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400"
+          style="will-change:transform;"
          href="{{ $url }}"
          target="_blank"
          aria-label="{{ $name | title }}"
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -5,14 +5,68 @@
      <ul class="flex flex-col list-none sm:flex-row">
        {{ range .Site.Menus.footer }}
          <li
-            class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
+            class="mb-1 group ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
          >
-            <a
-              class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-              href="{{ .URL }}"
-              title="{{ .Title }}"
-              >{{ .Name | markdownify | emojify }}</a
-            >
+            {{ if eq .Params.action "search" }}
+              {{ $.Scratch.Add "searchCount" 1 }}
+              {{ if $.Site.Params.enableSearch | default false }}
+                <button
+                  id="search-button-{{ $.Scratch.Get "searchCount" }}"
+                  title="{{ .Title | default (i18n "search.open_button_title") }}"
+                >
+                  {{ with .Params.icon }}
+                    <span
+                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                    >
+                      {{ partial "icon.html" . }}
+                    </span>
+                  {{ end }}{{ if .Params.showName | default true }}
+                    <span
+                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                      >{{ .Name | markdownify | emojify }}</span
+                    >
+                  {{ end }}
+                </button>
+              {{ end }}
+            {{ else if eq .Params.action "appearance" }}
+              {{ $.Scratch.Add "switchCount" 1 }}
+              <button
+                id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
+                type="button"
+                aria-label="appearance switcher"
+              >
+                <span
+                  class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+                  title="{{ i18n "footer.dark_appearance" }}"
+                >
+                  {{ partial "icon.html" "moon" }}
+                </span>
+                <span
+                  class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+                  title="{{ i18n "footer.light_appearance" }}"
+                >
+                  {{ partial "icon.html" "sun" }}
+                </span>
+              </button>
+            {{ else }}
+              <a
+                href="{{ .URL }}"
+                title="{{ .Title }}"
+                {{ with .Params.target }}target="{{ . }}"{{ end }}
+                >{{ with .Params.icon }}
+                  <span
+                    class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                  >
+                    {{ partial "icon.html" . }}
+                  </span>
+                {{ end }}{{ if .Params.showName | default true }}
+                  <span
+                    class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                    >{{ .Name | markdownify | emojify }}</span
+                  >
+                {{ end }}</a
+              >
+            {{ end }}
          </li>
        {{ end }}
      </ul>
@ -43,14 +97,14 @@
        </p>
      {{ end }}
    </div>
-    {{/* Appearance switch */}}
+    {{/* Appearance switcher */}}
    {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
      <div
        class="{{ if .Site.Params.footer.showScrollToTop | default true -}}
          ltr:mr-14 rtl:ml-14
        {{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
      >
-        <button id="appearance-switcher" type="button">
+        <button id="appearance-switcher-0" type="button" aria-label="appearance switcher">
          <div
            class="flex items-center justify-center w-12 h-12 dark:hidden"
            title="{{ i18n "footer.dark_appearance" }}"
--- a/layouts/partials/functions/init.html
+++ b/layouts/partials/functions/init.html
@ -0,0 +1,2 @@
+{{ $.Scratch.Set "searchCount" 0 }}
+{{ $.Scratch.Set "switchCount" 0 }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -16,8 +16,8 @@
  {{- end }}
  {{/* Metadata */}}
  <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage }}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
-  {{ with .Site.Params.keywords -}}
-    <meta name="keywords" content="{{ . }}" />
+  {{ with union .Site.Params.keywords .Params.keywords -}}
+    <meta name="keywords" content="{{ delimit . `, `}}" />
  {{- end }}
  {{ with .Site.Params.robots }}
    <meta name="robots" content="{{ . }}" />
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@ -7,29 +7,103 @@
    </div>
    {{/* Main menu */}}
    {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
-      <ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row">
+      <ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row">
        {{ if .Site.Menus.main }}
          {{ range .Site.Menus.main }}
-            <li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
-              <a
-                class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-                href="{{ .URL }}"
-                title="{{ .Title }}"
-                >{{ .Name | markdownify | emojify }}</a
-              >
+            <li
+              class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
+            >
+              {{ if eq .Params.action "search" }}
+                {{ $.Scratch.Add "searchCount" 1 }}
+                {{ if $.Site.Params.enableSearch | default false }}
+                  <button
+                    id="search-button-{{ $.Scratch.Get "searchCount" }}"
+                    title="{{ .Title | default (i18n "search.open_button_title") }}"
+                  >
+                    {{ with .Params.icon | default "search" }}
+                      <span
+                        class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                      >
+                        {{ partial "icon.html" . }}
+                      </span>
+                    {{ end }}{{ if .Params.showName | default true }}
+                      <span
+                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                        >{{ .Name | markdownify | emojify }}</span
+                      >
+                    {{ end }}
+                  </button>
+                {{ end }}
+              {{ else if eq .Params.action "appearance" }}
+                {{ $.Scratch.Add "switchCount" 1 }}
+                <button
+                  id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
+                  type="button"
+                  aria-label="appearance switcher"
+                >
+                  <span
+                    class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+                    title="{{ i18n "footer.dark_appearance" }}"
+                  >
+                    {{ with .Params.icon | default "moon" }}
+                      {{ partial "icon.html" . }}
+                    {{ end }}
+                    {{ if .Params.showName | default true }}
+                      <span
+                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                        >{{ .Name | markdownify | emojify }}</span
+                      >
+                    {{ end }}
+                  </span>
+                  <span
+                    class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+                    title="{{ i18n "footer.light_appearance" }}"
+                  >
+                    {{ with .Params.icon | default "sun" }}
+                      {{ partial "icon.html" . }}
+                    {{ end }}
+                    {{ if .Params.showName | default true }}
+                      <span
+                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                        >{{ .Name | markdownify | emojify }}</span
+                      >
+                    {{ end }}
+                  </span>
+                </button>
+              {{ else }}
+                <a
+                  href="{{ .URL }}"
+                  title="{{ .Title }}"
+                  {{ with .Params.target }}target="{{ . }}"{{ end }}
+                  >{{ with .Params.icon }}
+                    <span
+                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                    >
+                      {{ partial "icon.html" . }}
+                    </span>
+                  {{ end }}{{ if .Params.showName | default true }}
+                    <span
+                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                      >{{ .Name | markdownify | emojify }}</span
+                    >
+                  {{ end }}</a
+                >
+              {{ end }}
            </li>
          {{ end }}
-        {{ end }}
-        {{ if .Site.Params.enableSearch | default false }}
-          <li class="ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
-            <button
-              id="search-button"
-              class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-              title="{{ i18n "search.open_button_title" }}"
+          {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
+            <li
+              class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
            >
-              {{ partial "icon.html" "search" }}
-            </button>
-          </li>
+              <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
+                <span
+                  class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                >
+                  {{ partial "icon.html" "search" }}
+                </span>
+              </button>
+            </li>
+          {{ end }}
        {{ end }}
      </ul>
    {{ end }}
--- a/layouts/partials/header/hamburger.html
+++ b/layouts/partials/header/hamburger.html
@ -14,10 +14,10 @@
        </div>
        <div
          id="menu-wrapper"
-          class="invisible fixed inset-0 z-30 m-auto h-screen w-screen cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
+          class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
        >
          <ul
-            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
          >
            <li class="mb-1">
              <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
@ -26,26 +26,96 @@
            </li>
            {{ if .Site.Menus.main }}
              {{ range .Site.Menus.main }}
-                <li class="mb-1">
-                  <a
-                    class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-                    href="{{ .URL }}"
-                    title="{{ .Title }}"
-                    >{{ .Name | markdownify | emojify }}</a
-                  >
+                <li class="mb-1 group">
+                  {{ if eq .Params.action "search" }}
+                    {{ $.Scratch.Add "searchCount" 1 }}
+                    {{ if $.Site.Params.enableSearch | default false }}
+                      <button
+                        id="search-button-{{ $.Scratch.Get "searchCount" }}"
+                        title="{{ .Title | default (i18n "search.open_button_title") }}"
+                      >
+                        {{ with .Params.icon | default "search" }}
+                          <span
+                            class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                          >
+                            {{ partial "icon.html" . }}
+                          </span>
+                        {{ end }}{{ if .Params.showName | default true }}
+                          <span
+                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                            >{{ .Name | markdownify | emojify }}</span
+                          >
+                        {{ end }}
+                      </button>
+                    {{ end }}
+                  {{ else if eq .Params.action "appearance" }}
+                    {{ $.Scratch.Add "switchCount" 1 }}
+                    <button
+                      id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
+                      type="button"
+                      aria-label="appearance switcher"
+                    >
+                      <span
+                        class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+                        title="{{ i18n "footer.dark_appearance" }}"
+                      >
+                        {{ with .Params.icon | default "moon" }}
+                          {{ partial "icon.html" . }}
+                        {{ end }}
+                        {{ if .Params.showName | default true }}
+                          <span
+                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                            >{{ .Name | markdownify | emojify }}</span
+                          >
+                        {{ end }}
+                      </span>
+                      <span
+                        class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+                        title="{{ i18n "footer.light_appearance" }}"
+                      >
+                        {{ with .Params.icon | default "sun" }}
+                          {{ partial "icon.html" . }}
+                        {{ end }}
+                        {{ if .Params.showName | default true }}
+                          <span
+                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                            >{{ .Name | markdownify | emojify }}</span
+                          >
+                        {{ end }}
+                      </span>
+                    </button>
+                  {{ else }}
+                    <a
+                      href="{{ .URL }}"
+                      title="{{ .Title }}"
+                      {{ with .Params.target }}target="{{ . }}"{{ end }}
+                      >{{ with .Params.icon }}
+                        <span
+                          class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                        >
+                          {{ partial "icon.html" . }}
+                        </span>
+                      {{ end }}{{ if .Params.showName | default true }}
+                        <span
+                          class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                          >{{ .Name | markdownify | emojify }}</span
+                        >
+                      {{ end }}</a
+                    >
+                  {{ end }}
+                </li>
+              {{ end }}
+              {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
+                <li class="mb-1 group">
+                  <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
+                    <span
+                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                    >
+                      {{ partial "icon.html" "search" }}
+                    </span>
+                  </button>
                </li>
              {{ end }}
-            {{ end }}
-            {{ if .Site.Params.enableSearch | default false }}
-              <li>
-                <button
-                  id="search-button"
-                  class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-                  title="{{ i18n "search.open_button_title" }}"
-                >
-                  {{ partial "icon.html" "search" }}
-                </button>
-              </li>
            {{ end }}
          </ul>
        </div>
--- a/layouts/partials/header/hybrid.html
+++ b/layouts/partials/header/hybrid.html
@ -14,10 +14,10 @@
        </div>
        <div
          id="menu-wrapper"
-          class="invisible fixed inset-0 z-30 m-auto h-screen w-screen cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
+          class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
        >
          <ul
-            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
          >
            <li class="mb-1">
              <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
@ -26,54 +26,199 @@
            </li>
            {{ if .Site.Menus.main }}
              {{ range .Site.Menus.main }}
-                <li class="mb-1">
-                  <a
-                    class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-                    href="{{ .URL }}"
-                    title="{{ .Title }}"
-                    >{{ .Name | markdownify | emojify }}</a
-                  >
+                <li class="mb-1 group">
+                  {{ if eq .Params.action "search" }}
+                    {{ $.Scratch.Add "searchCount" 1 }}
+                    {{ if $.Site.Params.enableSearch | default false }}
+                      <button
+                        id="search-button-{{ $.Scratch.Get "searchCount" }}"
+                        title="{{ .Title | default (i18n "search.open_button_title") }}"
+                      >
+                        {{ with .Params.icon | default "search" }}
+                          <span
+                            class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                          >
+                            {{ partial "icon.html" . }}
+                          </span>
+                        {{ end }}{{ if .Params.showName | default true }}
+                          <span
+                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                            >{{ .Name | markdownify | emojify }}</span
+                          >
+                        {{ end }}
+                      </button>
+                    {{ end }}
+                  {{ else if eq .Params.action "appearance" }}
+                    {{ $.Scratch.Add "switchCount" 1 }}
+                    <button
+                      id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
+                      type="button"
+                      aria-label="appearance switcher"
+                    >
+                      <span
+                        class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+                        title="{{ i18n "footer.dark_appearance" }}"
+                      >
+                        {{ with .Params.icon | default "moon" }}
+                          {{ partial "icon.html" . }}
+                        {{ end }}
+                        {{ if .Params.showName | default true }}
+                          <span
+                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                            >{{ .Name | markdownify | emojify }}</span
+                          >
+                        {{ end }}
+                      </span>
+                      <span
+                        class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+                        title="{{ i18n "footer.light_appearance" }}"
+                      >
+                        {{ with .Params.icon | default "sun" }}
+                          {{ partial "icon.html" . }}
+                        {{ end }}
+                        {{ if .Params.showName | default true }}
+                          <span
+                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                            >{{ .Name | markdownify | emojify }}</span
+                          >
+                        {{ end }}
+                      </span>
+                    </button>
+                  {{ else }}
+                    <a
+                      href="{{ .URL }}"
+                      title="{{ .Title }}"
+                      {{ with .Params.target }}target="{{ . }}"{{ end }}
+                      >{{ with .Params.icon }}
+                        <span
+                          class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                        >
+                          {{ partial "icon.html" . }}
+                        </span>
+                      {{ end }}{{ if .Params.showName | default true }}
+                        <span
+                          class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                          >{{ .Name | markdownify | emojify }}</span
+                        >
+                      {{ end }}</a
+                    >
+                  {{ end }}
+                </li>
+              {{ end }}
+              {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
+                <li class="mb-1 group">
+                  <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
+                    <span
+                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                    >
+                      {{ partial "icon.html" "search" }}
+                    </span>
+                  </button>
                </li>
              {{ end }}
-            {{ end }}
-            {{ if .Site.Params.enableSearch | default false }}
-              <li>
-                <button
-                  id="search-button-2"
-                  class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-                  title="{{ i18n "search.open_button_title" }}"
-                >
-                  {{ partial "icon.html" "search" }}
-                </button>
-              </li>
            {{ end }}
          </ul>
        </div>
      </label>
      {{/* Basic menu */}}
-      <ul class="hidden list-none flex-row ltr:text-right rtl:text-left sm:flex">
+      <ul class="flex-row hidden list-none ltr:text-right rtl:text-left sm:flex">
        {{ if .Site.Menus.main }}
          {{ range .Site.Menus.main }}
-            <li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
-              <a
-                class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-                href="{{ .URL }}"
-                title="{{ .Title }}"
-                >{{ .Name | markdownify | emojify }}</a
-              >
+            <li
+              class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
+            >
+              {{ if eq .Params.action "search" }}
+                {{ $.Scratch.Add "searchCount" 1 }}
+                {{ if $.Site.Params.enableSearch | default false }}
+                  <button
+                    id="search-button-{{ $.Scratch.Get "searchCount" }}"
+                    title="{{ .Title | default (i18n "search.open_button_title") }}"
+                  >
+                    {{ with .Params.icon | default "search" }}
+                      <span
+                        class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                      >
+                        {{ partial "icon.html" . }}
+                      </span>
+                    {{ end }}{{ if .Params.showName | default true }}
+                      <span
+                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                        >{{ .Name | markdownify | emojify }}</span
+                      >
+                    {{ end }}
+                  </button>
+                {{ end }}
+              {{ else if eq .Params.action "appearance" }}
+                {{ $.Scratch.Add "switchCount" 1 }}
+                <button
+                  id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
+                  type="button"
+                  aria-label="appearance switcher"
+                >
+                  <span
+                    class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+                    title="{{ i18n "footer.dark_appearance" }}"
+                  >
+                    {{ with .Params.icon | default "moon" }}
+                      {{ partial "icon.html" . }}
+                    {{ end }}
+                    {{ if .Params.showName | default true }}
+                      <span
+                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                        >{{ .Name | markdownify | emojify }}</span
+                      >
+                    {{ end }}
+                  </span>
+                  <span
+                    class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+                    title="{{ i18n "footer.light_appearance" }}"
+                  >
+                    {{ with .Params.icon | default "sun" }}
+                      {{ partial "icon.html" . }}
+                    {{ end }}
+                    {{ if .Params.showName | default true }}
+                      <span
+                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                        >{{ .Name | markdownify | emojify }}</span
+                      >
+                    {{ end }}
+                  </span>
+                </button>
+              {{ else }}
+                <a
+                  href="{{ .URL }}"
+                  title="{{ .Title }}"
+                  {{ with .Params.target }}target="{{ . }}"{{ end }}
+                  >{{ with .Params.icon }}
+                    <span
+                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                    >
+                      {{ partial "icon.html" . }}
+                    </span>
+                  {{ end }}{{ if .Params.showName | default true }}
+                    <span
+                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                      >{{ .Name | markdownify | emojify }}</span
+                    >
+                  {{ end }}</a
+                >
+              {{ end }}
            </li>
          {{ end }}
-        {{ end }}
-        {{ if .Site.Params.enableSearch | default false }}
-          <li class="ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
-            <button
-              id="search-button-1"
-              class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-              title="{{ i18n "search.open_button_title" }}"
+          {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
+            <li
+              class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
            >
-              {{ partial "icon.html" "search" }}
-            </button>
-          </li>
+              <button id="search-button-m1" title="{{ i18n "search.open_button_title" }}">
+                <span
+                  class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                >
+                  {{ partial "icon.html" "search" }}
+                </span>
+              </button>
+            </li>
+          {{ end }}
+
        {{ end }}
      </ul>
    {{ end }}
--- a/layouts/partials/recent-articles.html
+++ b/layouts/partials/recent-articles.html
@ -1,6 +1,6 @@
 {{ if .Site.Params.homepage.showRecent | default false }}
  <h2 class="mt-8 text-2xl font-extrabold">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
-  {{ range first 5 (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) 5).Pages }}
+  {{ range first .Site.Params.homepage.recentLimit (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) .Site.Params.homepage.recentLimit).Pages }}
    {{ partial "article-link.html" . }}
  {{ end }}
 {{ end }}
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@ -6,39 +6,41 @@
  {{ $caption := .Get "caption" }}
  {{ $href := .Get "href" }}
  {{ $class := .Get "class" }}
-  {{ if findRE "^https?" $url.Scheme }}
-    <figure>
-      <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-      {{ with $caption }}<figcaption>{{ . | 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 {{ with $class }}class="{{ . }}"{{ end }}>
-        {{ with $href }}<a href="{{ . }}">{{ end }}
-          <img
-            class="my-0 rounded-md"
-            srcset="
-            {{ (.Resize "330x").RelPermalink }} 330w,
-            {{ (.Resize "660x").RelPermalink }} 660w,
-            {{ (.Resize "1024x").RelPermalink }} 1024w,
-            {{ (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
-            alt="{{ $altText }}"
-          />
-        {{ if $href }}</a>{{ end }}
-        {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
-      </figure>
-    {{ else }}
-      <figure>
-        <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-        {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
-      </figure>
-    {{ end }}
-  {{ end }}
+  <figure{{ with $class }} class="{{ . }}"{{ end }}>
+    {{ with $href }}<a href="{{ . }}">{{ end }}
+    <img
+      class="mx-auto my-0 rounded-md"
+      alt="{{ $altText }}"
+      {{ 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 }}
+            {{ 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>
 {{ end }}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "hugo-congo-theme",
-  "version": "2.4.2",
+  "version": "2.5.0",
  "description": "Congo theme for Hugo",
  "scripts": {
    "preinstall": "rimraf assets/lib",
@ -8,7 +8,7 @@
    "assets": "rimraf assets/lib && vendor-copy",
    "dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
    "build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit",
-    "example": "hugo server --source exampleSite --themesDir ../.. --buildDrafts -b http://localhost/congo/ -p 8008",
+    "example": "hugo server --bind 0.0.0.0 -p 8008 --source exampleSite --themesDir ../.. --buildDrafts -b http://localhost/congo/ ",
    "lighthouse": "lhci autorun"
  },
  "repository": {
@ -29,15 +29,15 @@
  },
  "homepage": "https://github.com/jpanther/congo#readme",
  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.8",
-    "chart.js": "^4.0.1",
+    "@tailwindcss/typography": "^0.5.9",
+    "chart.js": "^4.1.2",
    "fuse.js": "^6.6.2",
-    "katex": "^0.16.3",
-    "mermaid": "^9.2.2",
-    "prettier": "^2.7.1",
+    "katex": "^0.16.4",
+    "mermaid": "^9.3.0",
+    "prettier": "^2.8.3",
    "prettier-plugin-go-template": "^0.0.13",
-    "prettier-plugin-tailwindcss": "^0.1.13",
-    "rimraf": "^3.0.2",
+    "prettier-plugin-tailwindcss": "^0.2.1",
+    "rimraf": "^4.0.7",
    "tailwindcss": "^3.2.4",
    "vendor-copy": "^3.0.1"
  },
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="888" height="475.27072" viewBox="0 0 888 475.27072" xmlns:xlink="http://www.w3.org/1999/xlink"><title>true_love</title><rect x="402.54442" y="219.17275" width="2.57298" height="13.89411" transform="translate(-11.71503 -369.44906) rotate(26.64397)" fill="#fff"/><path d="M426.98456,248.842a66.00006,66.00006,0,0,0-93.33814,0l-.01788.01788a65.982,65.982,0,0,0-93.30231,93.30237l-.01788.01788,93.33807,93.33807,93.33814-93.33807A66,66,0,0,0,426.98456,248.842Z" transform="translate(-156 -212.36464)" fill="#ff6584"/><path d="M709.42956,621.81706h-489.679a9.98831,9.98831,0,0,1-1.82989-.145l231.59565-401.157a16.2157,16.2157,0,0,1,28.22705,0L633.17308,489.72253l7.44637,12.8816Z" transform="translate(-156 -212.36464)" fill="#8b5cf6"/><polygon points="553.43 409.452 386.241 409.452 468.314 290.239 474.22 281.652 477.173 277.358 484.619 290.239 553.43 409.452" opacity="0.2"/><path d="M982.07935,621.36464H558.54722l82.07223-119.21293,5.9062-8.58777L753.47313,338.20663c7.01145-10.182,23.87881-10.81607,32.12223-1.92044a19.328,19.328,0,0,1,1.54006,1.92044Z" transform="translate(-156 -212.36464)" fill="#3f3d56"/><rect y="407.93322" width="888" height="2.24072" fill="#3f3d56"/><ellipse cx="570.05705" cy="586.26729" rx="32.34192" ry="10.15313" transform="translate(-329.28848 33.15083) rotate(-21.1763)" fill="#2f2e41"/><circle cx="349.2698" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="319.79361" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><rect x="359.09519" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><ellipse cx="336.16927" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="375.47085" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="350.90736" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="350.90736" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M442.52428,534.95878c-5.22292-23.39065,11.47266-47.02591,37.29064-52.79083s50.9816,8.52354,56.20452,31.91418-11.88759,32.01752-37.70556,37.78245S447.74721,558.34942,442.52428,534.95878Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><ellipse cx="440.41422" cy="603.0993" rx="32.34192" ry="10.15313" transform="translate(-453.46127 275.69894) rotate(-45)" fill="#2f2e41"/><path d="M473.49729,618.44821c0,6.33082,16.30083,18.832,34.38888,18.832s35.04764-17.82327,35.04764-24.15409-16.95958,1.22817-35.04764,1.22817S473.49729,612.11739,473.49729,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><ellipse cx="623.94295" cy="586.26729" rx="10.15313" ry="32.34192" transform="translate(-304.12811 743.93025) rotate(-68.8237)" fill="#2f2e41"/><circle cx="532.7302" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="698.5556" y="645.87743" width="19.65079" height="35.20766" transform="translate(1260.76198 1114.59789) rotate(-180)" fill="#2f2e41"/><rect x="659.25402" y="645.87743" width="19.65079" height="35.20766" transform="translate(1182.15883 1114.59789) rotate(-180)" fill="#2f2e41"/><ellipse cx="545.83073" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="506.52915" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="531.09264" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="531.09264" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M751.47572,534.95878c5.22292-23.39065-11.47266-47.02591-37.29064-52.79083s-50.9816,8.52354-56.20452,31.91418,11.88759,32.01752,37.70556,37.78245S746.25279,558.34942,751.47572,534.95878Z" transform="translate(-156 -212.36464)" fill="#8b5cf6"/><ellipse cx="753.58578" cy="603.0993" rx="10.15313" ry="32.34192" transform="translate(-361.73544 497.14467) rotate(-45)" fill="#2f2e41"/><path d="M720.50271,618.44821c0,6.33082-16.30083,18.832-34.38888,18.832s-35.04764-17.82327-35.04764-24.15409,16.95958,1.22817,35.04764,1.22817S720.50271,612.11739,720.50271,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><path d="M1044,527.22724c0,41.80115-24.85012,56.39655-55.5043,56.39655s-55.5043-14.5954-55.5043-56.39655,55.5043-94.97881,55.5043-94.97881S1044,485.42608,1044,527.22724Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><polygon points="830.474 364.865 831.042 329.881 854.699 286.601 831.131 324.393 831.387 308.663 847.691 277.35 831.454 304.5 831.454 304.5 831.914 276.209 849.373 251.28 831.986 271.76 832.273 219.884 830.469 288.559 830.617 285.726 812.866 258.555 830.332 291.164 828.678 322.761 828.629 321.922 808.166 293.329 828.567 324.885 828.36 328.836 828.323 328.896 828.34 329.22 824.144 409.383 829.751 409.383 830.423 367.977 850.775 336.499 830.474 364.865" fill="#3f3d56"/></svg>