From 28a187895f06b75a4372bba1381d438099dc8f40 Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Tue, 17 Jan 2023 12:58:04 +1100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Allow=20appearance=20switcher=20to?= =?UTF-8?q?=20be=20placed=20in=20menus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 +- assets/css/compiled/main.css | 4 + assets/js/appearance.js | 6 +- config/_default/menus.en.toml | 1 - exampleSite/config/_default/menus.en.toml | 1 - .../content/docs/getting-started/index.md | 13 ++- layouts/_default/baseof.html | 1 + layouts/partials/footer.html | 29 ++++- layouts/partials/functions/init.html | 2 + layouts/partials/header/basic.html | 45 +++++++- layouts/partials/header/hamburger.html | 45 +++++++- layouts/partials/header/hybrid.html | 101 ++++++++++++++++-- 12 files changed, 218 insertions(+), 32 deletions(-) create mode 100644 layouts/partials/functions/init.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e3c9a48..8a72113b 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index b4a6c5c3..58aed06e 100644 --- a/assets/css/compiled/main.css +++ b/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; } diff --git a/assets/js/appearance.js b/assets/js/appearance.js index c5ffafbe..dd5ad69d 100644 --- 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"); }); - } + }); }); diff --git a/config/_default/menus.en.toml b/config/_default/menus.en.toml index cae9a785..300074b8 100644 --- a/config/_default/menus.en.toml +++ b/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 diff --git a/exampleSite/config/_default/menus.en.toml b/exampleSite/config/_default/menus.en.toml index 5bd2b9f7..9669505c 100644 --- a/exampleSite/config/_default/menus.en.toml +++ b/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 diff --git a/exampleSite/content/docs/getting-started/index.md b/exampleSite/content/docs/getting-started/index.md index 65243f34..0c0821ba 100644 --- a/exampleSite/content/docs/getting-started/index.md +++ b/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. diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 7fc925a8..dddd8656 100644 --- 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" . -}} {{/* 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 }} {{ end }} + {{ else if eq .Params.action "appearance" }} + {{ $.Scratch.Add "switchCount" 1 }} + {{ else }} {{ end }} - {{/* Appearance switch */}} + {{/* Appearance switcher */}} {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
- {{ end }} + {{ else if eq .Params.action "appearance" }} + {{ $.Scratch.Add "switchCount" 1 }} + {{ else }} {{ end }} - {{ if and ($.Site.Params.enableSearch | default false) (eq $searchCount 0) }} + {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
  • diff --git a/layouts/partials/header/hamburger.html b/layouts/partials/header/hamburger.html index 877aff75..39cee2cb 100644 --- a/layouts/partials/header/hamburger.html +++ b/layouts/partials/header/hamburger.html @@ -1,4 +1,3 @@ -{{ $searchCount := 0 }}