diff --git a/CHANGELOG.md b/CHANGELOG.md index 34719d1e..a0d8c47d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,8 @@ 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 - Front matter support for specifying article thumbnails, covers and featured image details (including filename pattern, alt text and caption) - Support for SVG assets as article thumbnails, covers and featured images - Front matter keywords support on a per article basis diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 08cb9bdb..5efb4226 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -2448,6 +2448,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); @@ -2575,6 +2581,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; } diff --git a/config/_default/menus.en.toml b/config/_default/menus.en.toml index 16298213..cae9a785 100644 --- 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,12 @@ pageRef = "tags" weight = 30 +[[main]] + identifier = "search" + 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 e51dda49..5bd2b9f7 100644 --- 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,22 @@ 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" + 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 9ec70013..19b815bb 100644 --- a/exampleSite/content/docs/getting-started/index.md +++ b/exampleSite/content/docs/getting-started/index.md @@ -3,7 +3,7 @@ title: "Getting Started" date: 2020-08-15 draft: false 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." +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"] --- @@ -174,7 +174,7 @@ Congo has two menus that can be customised to suit the content and layout of you 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. ```toml -# config/_default/menus.toml +# config/_default/menus.en.toml [[main]] name = "Blog" @@ -186,18 +186,38 @@ 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" ``` 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. + Menu links will be sorted from lowest to highest `weight`, and then alphabetically by `name`. -Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide. +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 diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 192a6258..e884d51b 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,4 @@ +{{ $searchCount := 0 }}