✨ Allow appearance switcher to be placed in menus

CHANGELOG.md

@@ -9,7 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - Support for icons in menus including support for links styled as an icon by itself or an icon with text
-- Search link can now be fully customised and positioned anywhere in the menu
+- 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

assets/css/compiled/main.css

@@ -2717,6 +2717,10 @@ body:has(#menu-controller:checked) {
   text-align: left;
 }
 
+.dark .dark\:inline {
+  display: inline;
+}
+
 .dark .dark\:flex {
   display: flex;
 }

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");
+  var switchers = document.querySelectorAll("[id^='appearance-switcher']");
-  if (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");
     });
-  }
+  });
 });

config/_default/menus.en.toml

@@ -30,7 +30,6 @@
   weight = 99
   [main.params]
     action = "search"
-    icon = "search"
 
 # -- Footer Menu --
 # The footer menu is displayed at the bottom of the page, just before

exampleSite/config/_default/menus.en.toml

@@ -39,7 +39,6 @@
   weight = 99
   [main.params]
     action = "search"
-    icon = "search"
 
 # -- Footer Menu --
 # The footer menu is displayed at the bottom of the page, just before

exampleSite/content/docs/getting-started/index.md

@@ -183,7 +183,7 @@ 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.en.toml
@@ -219,15 +219,22 @@ Both menus are configured in the `menus.en.toml` file. Similarly to the language
   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.
 
 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.
 
-Finally, there is a special case for theme links, which are denoted using the `action` parameter. When this parameter has the value of `search` it will be replaced with a link to the site search. It allows all the same custom parameters as other links and can be styled with an icon or text name.
+### Action links
 
-Menu links will be sorted from lowest to highest `weight`, and then alphabetically by `name`.
+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.
 

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") }}

layouts/partials/footer.html

@@ -1,4 +1,3 @@
-{{ $searchCount := 0 }}
 <footer class="py-10 print:hidden">
   {{/* Footer menu */}}
   {{ if .Site.Menus.footer }}
@@ -9,10 +8,10 @@
             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"
           >
             {{ if eq .Params.action "search" }}
-              {{ $searchCount = add $searchCount 1 }}
+              {{ $.Scratch.Add "searchCount" 1 }}
               {{ if $.Site.Params.enableSearch | default false }}
                 <button
-                  id="search-button-f{{ $searchCount }}"
+                  id="search-button-{{ $.Scratch.Get "searchCount" }}"
                   title="{{ .Title | default (i18n "search.open_button_title") }}"
                 >
                   {{ with .Params.icon }}
@@ -29,6 +28,26 @@
                   {{ 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 }}"
@@ -78,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" aria-label="appearance switcher">
+        <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" }}"

layouts/partials/functions/init.html

@@ -0,0 +1,2 @@
+{{ $.Scratch.Set "searchCount" 0 }}
+{{ $.Scratch.Set "switchCount" 0 }}

layouts/partials/header/basic.html

@@ -1,4 +1,3 @@
-{{ $searchCount := 0 }}
 <header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
   <nav class="flex items-start justify-between sm:items-center">
     {{/* Site logo/title */}}
@@ -15,13 +14,13 @@
               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" }}
-                {{ $searchCount = add $searchCount 1 }}
+                {{ $.Scratch.Add "searchCount" 1 }}
                 {{ if $.Site.Params.enableSearch | default false }}
                   <button
-                    id="search-button-m{{ $searchCount }}"
+                    id="search-button-{{ $.Scratch.Get "searchCount" }}"
                     title="{{ .Title | default (i18n "search.open_button_title") }}"
                   >
-                    {{ with .Params.icon }}
+                    {{ with .Params.icon | default "search" }}
                       <span
                         class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
                       >
@@ -35,6 +34,42 @@
                     {{ 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 }}"
@@ -56,7 +91,7 @@
               {{ end }}
             </li>
           {{ end }}
-          {{ if and ($.Site.Params.enableSearch | default false) (eq $searchCount 0) }}
+          {{ 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"
             >

layouts/partials/header/hamburger.html

@@ -1,4 +1,3 @@
-{{ $searchCount := 0 }}
 <header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
   <nav class="flex items-start justify-between sm:items-center">
     {{/* Site logo/title */}}
@@ -29,13 +28,13 @@
               {{ range .Site.Menus.main }}
                 <li class="mb-1 group">
                   {{ if eq .Params.action "search" }}
-                    {{ $searchCount = add $searchCount 1 }}
+                    {{ $.Scratch.Add "searchCount" 1 }}
                     {{ if $.Site.Params.enableSearch | default false }}
                       <button
-                        id="search-button-m{{ $searchCount }}"
+                        id="search-button-{{ $.Scratch.Get "searchCount" }}"
                         title="{{ .Title | default (i18n "search.open_button_title") }}"
                       >
-                        {{ with .Params.icon }}
+                        {{ with .Params.icon | default "search" }}
                           <span
                             class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
                           >
@@ -49,6 +48,42 @@
                         {{ 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 }}"
@@ -70,7 +105,7 @@
                   {{ end }}
                 </li>
               {{ end }}
-              {{ if and ($.Site.Params.enableSearch | default false) (eq $searchCount 0) }}
+              {{ 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

layouts/partials/header/hybrid.html

@@ -1,4 +1,3 @@
-{{ $searchCount := 0 }}
 <header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
   <nav class="flex items-start justify-between sm:items-center">
     {{/* Site logo/title */}}
@@ -29,13 +28,13 @@
               {{ range .Site.Menus.main }}
                 <li class="mb-1 group">
                   {{ if eq .Params.action "search" }}
-                    {{ $searchCount = add $searchCount 1 }}
+                    {{ $.Scratch.Add "searchCount" 1 }}
                     {{ if $.Site.Params.enableSearch | default false }}
                       <button
-                        id="search-button-m{{ $searchCount }}"
+                        id="search-button-{{ $.Scratch.Get "searchCount" }}"
                         title="{{ .Title | default (i18n "search.open_button_title") }}"
                       >
-                        {{ with .Params.icon }}
+                        {{ with .Params.icon | default "search" }}
                           <span
                             class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
                           >
@@ -49,6 +48,42 @@
                         {{ 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 }}"
@@ -70,7 +105,7 @@
                   {{ end }}
                 </li>
               {{ end }}
-              {{ if and ($.Site.Params.enableSearch | default false) (eq $searchCount 0) }}
+              {{ 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
@@ -93,13 +128,13 @@
               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" }}
-                {{ $searchCount = add $searchCount 1 }}
+                {{ $.Scratch.Add "searchCount" 1 }}
                 {{ if $.Site.Params.enableSearch | default false }}
                   <button
-                    id="search-button-m{{ $searchCount }}"
+                    id="search-button-{{ $.Scratch.Get "searchCount" }}"
                     title="{{ .Title | default (i18n "search.open_button_title") }}"
                   >
-                    {{ with .Params.icon }}
+                    {{ with .Params.icon | default "search" }}
                       <span
                         class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
                       >
@@ -113,6 +148,42 @@
                     {{ 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 }}"
@@ -134,6 +205,20 @@
               {{ end }}
             </li>
           {{ end }}
+          {{ 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"
+            >
+              <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 }}