✨ Add footer menu

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Footer menu
 - Slate colour scheme ([#9](https://github.com/jpanther/congo/pull/9))
 - Icons for ORCID and ResearchGate ([#9](https://github.com/jpanther/congo/pull/9))
 

assets/css/compiled/main.css

@@ -2341,6 +2341,10 @@ body a, body button {
   padding-top: 0.75rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }

config/_default/menus.toml

@@ -1,5 +1,5 @@
 # -- Main Menu --
-# The main menu is displayed at the top of the theme.
+# 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:
@@ -24,3 +24,13 @@
   name = "Tags"
   pageRef = "tags"
   weight = 30
+
+
+# -- Footer Menu --
+# The footer menu is displayed at the bottom of the page, just before
+# the copyright notice. Configure as per the main menu above.
+
+# [[footer]]
+#   name = "Tags"
+#   pageRef = "tags"
+#   weight = 10

exampleSite/content/docs/front-matter.md

@@ -20,6 +20,7 @@ Front matter parameter default values are inherited from the theme's [base confi
 |`showEdit`|boolean|`article.showEdit`|Whether or not the link to edit the article content should be displayed.|
 |`editURL`|string|`article.editURL`|When `showEdit` is active, the URL for the edit link.|
 |`editAppendPath`|boolean|`article.editAppendPath`|When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.|
+|`menu`|string or array|_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`|string|_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.|
 |`showHeadingAnchors`|boolean|`article.showHeadingAnchors`|Whether or not heading anchor links are displayed alongside headings within this article.|
 |`showPagination`|boolean|`article.showPagination`|Whether or not the next/previous article links are displayed in the article footer.|

exampleSite/content/docs/getting-started.md

@@ -84,7 +84,13 @@ topic = "topics"
 
 This will replace the default _tags_ and _categories_ with _topics_. Refer to the [Hugo Taxonomy docs](https://gohugo.io/content-management/taxonomies/) for more information on naming taxonomies.
 
-When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the new sections:
+When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections.
+
+## Menus
+
+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.toml` file.
 
 ```toml
 # config/_default/menus.toml
@@ -98,6 +104,20 @@ When you create a new taxonomy, you will need to adjust the navigation links on
   name = "Topics"
   pageRef = "topics"
   weight = 20
+
+[[footer]]
+  name = "Privacy"
+  url = "https://external-link"
 ```
 
-These steps are the bare minimum configuration. If you now run `hugo server` you will be presented with a blank Congo website. Detailed configuration is covered in the [Configuration]({{< ref "configuration" >}}) section.
+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`.
+
+Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.
+
+## Detailed configuration
+
+The steps above are the bare minimum configuration. If you now run `hugo server` you will be presented with a blank Congo website. Detailed configuration is covered in the [Configuration]({{< ref "configuration" >}}) section.

layouts/partials/footer.html

@@ -1,6 +1,23 @@
-<footer class="py-10 text-sm">
+<footer class="py-10">
+  {{/* Footer menu */}}
+  {{ if .Site.Menus.footer }}
+    <nav class="pb-4 text-base font-medium text-neutral-400 dark:text-neutral-500">
+      <ul class="flex flex-col list-none sm:flex-row">
+        {{ range .Site.Menus.footer }}
+          <li class="mb-1 sm:mb-0 sm:mr-7 sm:last:mr-0">
+            <a
+              class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
+              href="{{ .URL }}"
+              title="{{ .Title }}"
+              >{{ .Name }}</a
+            >
+          </li>
+        {{ end }}
+      </ul>
+    </nav>
+  {{ end }}
   {{/* Copyright */}}
-  <p class="text-neutral-400 dark:text-neutral-500">
+  <p class="text-sm text-neutral-400 dark:text-neutral-500">
     {{- with .Site.Copyright }}
       {{ . | emojify | markdownify }}
     {{- else }}