Skip to content

Commit

Permalink
Merge pull request #97 from alphagov/generate-navigation-dynamically
Browse files Browse the repository at this point in the history
Generate navigation dynamically
  • Loading branch information
alex-ju authored Jan 5, 2018
2 parents e339252 + fe8780f commit 8c85662
Show file tree
Hide file tree
Showing 50 changed files with 201 additions and 245 deletions.
18 changes: 18 additions & 0 deletions config/navigation.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
[
{
"label": "About",
"url": ""
},
{
"label": "Styles",
"url": "styles"
},
{
"label": "Components",
"url": "components"
},
{
"label": "Patterns",
"url": "patterns"
}
]
21 changes: 21 additions & 0 deletions lib/file-helper.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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
}
5 changes: 5 additions & 0 deletions lib/metalsmith.js
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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',
Expand Down
54 changes: 54 additions & 0 deletions lib/navigation.js
Original file line number Diff line number Diff line change
@@ -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()
}
}
2 changes: 1 addition & 1 deletion src/components/back-link/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/breadcrumbs/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/button/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/checkboxes/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/date-input/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/fieldset/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/file-upload/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/index.md.njk
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
layout: layout-components.njk
layout: layout-pane.njk
title: Components
---

Expand Down
2 changes: 1 addition & 1 deletion src/components/panel/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/phase-banner/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/radios/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/select/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/skip-link/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/tag/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/text-input/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/textarea/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/addresses/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/check-a-service-is-suitable/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/check-answers/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/confirm-an-email-address/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/confirmation-pages/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/create-a-username/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/create-accounts/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/dates/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/email-addresses/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/fill-in-a-form/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/index.md.njk
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
layout: layout-patterns.njk
layout: layout-pane.njk
title: Patterns
---

Expand Down
2 changes: 1 addition & 1 deletion src/patterns/names/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/national-insurance-numbers/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/passwords/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/question-pages/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
Loading

0 comments on commit 8c85662

Please sign in to comment.