carpentries / tnd-carpentries-working

The Carpentries new website BEFORE the Hugo theme was packaged out. Not currently maintained.
https://tnd-carpentries-website.netlify.app/
0 stars 0 forks source link

Modularize tabbed navigation? #27

Closed maneesha closed 5 months ago

maneesha commented 5 months ago

Can tabbed navigation be modularized? For example on the preview About page there are several tabs. If we change any one of them, we have to change it on ~5 pages.

regisphilibert commented 5 months ago

There's two options for this.

  1. We use directory structure and pages form the same directory are considered siblings and share the same subnav. This does mean page's location int he content directory need to follow a certain behaviour.
  2. We create a menu in the site's menus.yaml file and reference it in front matter.

I think 2. gives you the most control with minimal effort. (Just adding one front-matter key to the pages).

maneesha commented 5 months ago

With option 2, we would be able to do this with any page that has tabbed navigation? Currently, for example, currently that would include (but not be limited to) the About section and the Workshops section.

regisphilibert commented 5 months ago

The page would only sport a tabbed navigation if a menu is referenced in the front matter. That could be any pages with any menus you would have added to the site settings.

AdamChlan commented 5 months ago

@maneesha are you okay with us moving forward with option 2?

regisphilibert commented 5 months ago

The advantage of this is that you can use hugo's cascade to pass down to a section's children the same menu, without having to re-add it to all of them.

For example let's say we have to about menu set in config/_default/menus.yaml  as such:

about:
- name: About us
  url: /about-us
  weight: 10
- name: Our impact
  url: /about-us/impact
  weight: 20
- name: Our funding
  url: /about-us/funding
  weight: 30
- name: Our team
  url: /about-us/team
  weight: 40
- name: Our community
  url: /about-us/community
  weight: 50
- name: Contact us
  url: /about-us/contact
  weight: 60

We could set it once on the sections landing page:

---
# content/about-us/_index.md
title: About Us
layout: single
cascade:
  nav: about
---

The about would ensure that menu is called on the about page itself and all its descendent (living in the /content/about-us/ directory). If for some reason one of the descendant needs another menu or no menu at all its own front-matter would overwrite the cascade's.