Generate navigation dynamically

config/navigation.json

@@ -0,0 +1,18 @@
+[
+  {
+    "label": "About",
+    "url": ""
+  },
+  {
+    "label": "Styles",
+    "url": "styles"
+  },
+  {
+    "label": "Components",
+    "url": "components"
+  },
+  {
+    "label": "Patterns",
+    "url": "patterns"
+  }
+]

lib/file-helper.js

@@ -1,6 +1,7 @@
 'use strict'
 
 const fs = require('fs')
+const path = require('path')
 const nunjucks = require('nunjucks')
 
 // This helper function takes a path of a file and
@@ -52,3 +53,23 @@ exports.getHTMLCode = path => {
 
   return html
 }
+
+// This helper function takes a path and
+// returns the directories found under that path
+exports.getDirectories = itemPath => {
+  let files
+  let directories
+  try {
+    files = fs.readdirSync(itemPath)
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      console.log(err.message)
+    } else {
+      throw err
+    }
+  }
+  if (files) {
+    directories = files.filter(filePath => fs.statSync(path.join(itemPath, filePath)).isDirectory())
+  }
+  return directories
+}

lib/metalsmith.js

@@ -9,6 +9,8 @@ const permalinks = require('metalsmith-permalinks') // apply a permalink pattern
 const sass = require('metalsmith-sass')             // convert Sass files to CSS using LibSass
 
 const debug = require('./debug')                    // debug plugin
+const navigation = require('./navigation.js')       // navigation plugin
+
 const paths = require('../config/paths.json')       // specify paths to main working directories
 const fileHelper = require('../lib/file-helper.js') // helper function to operate on files
 
@@ -103,6 +105,9 @@ module.exports = metalsmith(__dirname) // __dirname defined by node.js: name of
   // apply a permalink pattern to files
   .use(permalinks())
 
+  // apply navigation
+  .use(navigation())
+
   // apply layouts to source files
   .use(layouts({
     engine: 'nunjucks',

lib/navigation.js

@@ -0,0 +1,54 @@
+// Navgation metalsmith plugin
+// builds a navigation object based on config file and folder structure
+
+// files: array containing information about every page
+// metalsmith: object containing global information such as meta data
+// done: function which must be called when the plugin has finished working
+
+const paths = require('../config/paths.json')
+const navigation = require('../config/navigation.json')
+
+const fileHelper = require('../lib/file-helper.js')
+
+module.exports = function () {
+  return function (files, metalsmith, done) {
+    // iterate main navigation item defined in navigation.json
+    for (let item in navigation) {
+      // if we have a navigation url and it is not homepage then look for subitems
+      if (navigation[item].url && navigation[item].url !== '') {
+        // define source path
+        let itemPath = paths.source + navigation[item].url
+        // get directories under main navigation item (e.g. ['breadcrumbs', 'checkboxes', ...])
+        let directories = fileHelper.getDirectories(itemPath)
+        // if we have directories convert them into menu items
+        if (directories) {
+          // initialise child navigation items as array
+          navigation[item].items = []
+          // convert directory into a navigation item adding url, label and theme
+          for (let dir in directories) {
+            let url = navigation[item].url + '/' + directories[dir]
+            let frontmatter = files[url + '/index.html']
+            // if we have frontmatter for that file, create subitem
+            if (frontmatter) {
+              let subitem = {
+                'url': url,
+                'label': frontmatter.title
+              }
+              // if frontmatter contains `theme` data, attach it to navigation item for grouping
+              if (frontmatter.theme) {
+                subitem.theme = frontmatter.theme
+              }
+              // add subitem to navigation
+              navigation[item].items.push(subitem)
+            }
+          }
+        }
+      }
+    }
+
+    // add navigation to global variables
+    metalsmith.metadata().navigation = navigation
+
+    done()
+  }
+}

src/components/back-link/index.md.njk

@@ -3,7 +3,7 @@ title: Back link
 description: Use the Back link component to help users go back to the previous page in a multi-page transaction.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/breadcrumbs/index.md.njk

@@ -3,7 +3,7 @@ title: Breadcrumbs
 description: Help users orientate themselves and navigate pages within a hierarchical structure.
 section: Components
 aliases: navigation path, cookie crumb
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/button/index.md.njk

@@ -3,7 +3,7 @@ title: Button
 description: GOV.UK Button
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/checkboxes/index.md.njk

@@ -3,7 +3,7 @@ title: Checkboxes
 description: Let users select one or more options by using the Checkboxes component.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/date-input/index.md.njk

@@ -3,7 +3,7 @@ title: Date input
 description: Use the Date input component to help users enter a memorable date.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/fieldset/index.md.njk

@@ -3,7 +3,7 @@ title: Fieldset
 description: Use the Fieldset component to group related form inputs.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/file-upload/index.md.njk

@@ -3,7 +3,7 @@ title: File upload
 description: Help users select and upload a file.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/index.md.njk

@@ -1,5 +1,5 @@
 ---
-layout: layout-components.njk
+layout: layout-pane.njk
 title: Components
 ---
 

src/components/panel/index.md.njk

@@ -3,7 +3,7 @@ title: Panel
 description: The Panel component is a visible container used on confirmation or results pages.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/phase-banner/index.md.njk

@@ -3,7 +3,7 @@ title: Phase banner
 description: Use the Phase banner component to show users your service is still being worked on.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/radios/index.md.njk

@@ -3,7 +3,7 @@ title: Radios
 description: Let users select a single option from a list using the Radios component.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/select/index.md.njk

@@ -3,7 +3,7 @@ title: Select
 description: Help users select an item from a dropdown list.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/skip-link/index.md.njk

@@ -3,7 +3,7 @@ title: Skip link
 description: Use the Skip link component to help keyboard-only users skip to the main content on a page.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/tag/index.md.njk

@@ -3,7 +3,7 @@ title: Tag
 description: indicate the status of something, such as an item on a Task list or a Phase banner.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/text-input/index.md.njk

@@ -3,7 +3,7 @@ title: Text input
 description: Help users enter information with the Text input component.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/components/textarea/index.md.njk

@@ -3,7 +3,7 @@ title: Textarea
 description: Help users provide detailed information using the Textarea component.
 section: Components
 aliases:
-layout: layout-components.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/patterns/addresses/index.md.njk

@@ -4,7 +4,7 @@ description: Help users provide an address.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/patterns/check-a-service-is-suitable/index.md.njk

@@ -4,7 +4,7 @@ description: Ask users questions to help them work out if they can or should use
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Ask users questions to help them work out if they can or should use your service.

src/patterns/check-answers/index.md.njk

@@ -4,7 +4,7 @@ description: Let users check their answers before submitting information to a se
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Let users check their answers before submitting information to a service.

src/patterns/confirm-an-email-address/index.md.njk

@@ -4,7 +4,7 @@ description: Use an email confirmation loop to check that a user has access to a
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Use an email confirmation loop to check that a user has access to a specific email account.

src/patterns/confirmation-pages/index.md.njk

@@ -4,7 +4,7 @@ description: Let users know they’ve completed a transaction.
 section: Patterns
 theme: Pages
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/patterns/create-a-username/index.md.njk

@@ -4,7 +4,7 @@ description: Help users to create a unique and memorable username to sign into a
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Help users to create a unique and memorable username to sign into a service with.

src/patterns/create-accounts/index.md.njk

@@ -4,7 +4,7 @@ description: Help users create an account for your service.
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Help users create an account for your service.

src/patterns/dates/index.md.njk

@@ -4,7 +4,7 @@ description: Help users enter or select a date.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/patterns/email-addresses/index.md.njk

@@ -4,7 +4,7 @@ description: Help users enter a valid email address.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/patterns/fill-in-a-form/index.md.njk

@@ -4,7 +4,7 @@ description: Help users complete a form by only asking for critical information,
 section: Patterns
 theme: Help users to...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/patterns/index.md.njk

@@ -1,5 +1,5 @@
 ---
-layout: layout-patterns.njk
+layout: layout-pane.njk
 title: Patterns
 ---
 

src/patterns/names/index.md.njk

@@ -4,7 +4,7 @@ description: Help users correctly enter their name.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/patterns/national-insurance-numbers/index.md.njk

@@ -4,7 +4,7 @@ description: Ask users to provide their National Insurance number.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}

src/patterns/passwords/index.md.njk

@@ -4,7 +4,7 @@ description: Help users to create and enter secure and memorable passwords.
 section: Patterns
 theme: Ask users for...
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 Help users to create and enter secure and memorable passwords.

src/patterns/question-pages/index.md.njk

@@ -4,7 +4,7 @@ description: Follow this pattern whenever you need to ask users questions within
 section: Patterns
 theme: Pages
 aliases:
-layout: layout-patterns.njk
+layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}