Skip to content

Commit

Permalink
Load GOV.UK Frontend settings via SCSS settings file
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulrobertlloyd
paulrobertlloyd committed Dec 9, 2023
1 parent a144c0f commit 7ab0695
Show file tree
Hide file tree
Showing 7 changed files with 2,891 additions and 3,553 deletions.
2 changes: 2 additions & 0 deletions docs/assets/sass/settings.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
$govuk-brand-colour: #2288aa;
$govuk-font-family: system-ui, sans-serif;
38 changes: 17 additions & 21 deletions docs/options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,27 +23,23 @@ module.exports = function(eleventyConfig) {

## Plugin options

| Name | Type | Description |
| :-------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **brandColour** | string | Override default value for `$govuk-brand-colour`. Must be a hex value (i.e. `#1d70b8`). |
| **fontFamily** | string | Override default value for `$govuk-font-family`. Must be a list of one or more font family names (i.e. `"GDS Transport", arial, sans-serif`). |
| **assetsPath** | string | Override default value for `$govuk-assets-path`. |
| **fontsPath** | string | Override default value for `$govuk-fonts-path`. |
| **imagesPath** | string | Override default value for `$govuk-images-path`. |
| **icons.mask** | string | Override default GOV.UK SVG mask icon. |
| **icons.shortcut** | string | Override default GOV.UK favicon. |
| **icons.touch** | string | Override default GOV.UK touch icon. |
| **opengraphImageUrl** | string | URL for default Open Graph share image. |
| **themeColour** | string | Browser theme colour. Must be a hex value, i.e. `#0b0c0c` |
| **headingPermalinks** | boolean | Add links to headings, making it easier to share sections of a page. |
| **homeKey** | string | Label to use for first item in pagination and key to use when referring to the home page for [`eleventyNavigation.parent`](https://www.11ty.dev/docs/plugins/navigation/). Default is `'Home'` |
| **parentSite** | object | Website to show as first item in breadcrumbs. |
| **parentSite.url** | string | URL for parent site. |
| **parentSite.name** | string | Name of parent site. |
| **stylesheets** | Array | Additional stylesheets to load after application styles. |
| **url** | string | The URL of your website. Optional, but required to have valid canonical URLs in Open Graph meta data. |
| **header** | object | See [header](#options-for-header). |
| **footer** | object | See [footer](#options-for-footer). |
| Name | Type | Description |
| :-------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **icons.mask** | string | Override default GOV.UK SVG mask icon. |
| **icons.shortcut** | string | Override default GOV.UK favicon. |
| **icons.touch** | string | Override default GOV.UK touch icon. |
| **opengraphImageUrl** | string | URL for default Open Graph share image. |
| **themeColour** | string | Browser theme colour. Must be a hex value, i.e. `#0b0c0c` |
| **headingPermalinks** | boolean | Add links to headings, making it easier to share sections of a page. |
| **homeKey** | string | Label to use for first item in pagination and key to use when referring to the home page for [`eleventyNavigation.parent`](https://www.11ty.dev/docs/plugins/navigation/). Default is `'Home'` |
| **parentSite** | object | Website to show as first item in breadcrumbs. |
| **parentSite.url** | string | URL for parent site. |
| **parentSite.name** | string | Name of parent site. |
| **scssSettingsPath** | string | Path to SCSS file, relative to input directory, containing [GOV.UK Frontend settings](https://frontend.design-system.service.gov.uk/sass-api-reference/). Defaults to `{dir.input}/assets/sass/settings.scss`. |
| **stylesheets** | Array | Additional stylesheets to load after application styles. |
| **url** | string | The URL of your website. Optional, but required to have valid canonical URLs in Open Graph meta data. |
| **header** | object | See [header](#options-for-header). |
| **footer** | object | See [footer](#options-for-footer). |

### Options for header

Expand Down
2 changes: 0 additions & 2 deletions eleventy.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ const process = require('node:process')
module.exports = function (eleventyConfig) {
// Plugins
eleventyConfig.addPlugin(require('./index.js'), {
brandColour: '#28a',
fontFamily: 'system-ui, sans-serif',
icons: {
mask: 'https://raw.githubusercontent.com/x-govuk/logo/main/images/x-govuk-mask-icon.svg?raw=true',
shortcut: 'https://raw.githubusercontent.com/x-govuk/logo/main/images/x-govuk-favicon.ico',
Expand Down
18 changes: 5 additions & 13 deletions lib/events/generate-govuk-assets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const sass = require('sass')
const rollup = require('rollup')
const commonJs = require('@rollup/plugin-commonjs')
const { nodeResolve } = require('@rollup/plugin-node-resolve')
const { ensureSlash } = require('../utils.js')
const { getScssSettings } = require('../utils.js')

/**
* Generate GOV.UK Frontend assets
Expand All @@ -15,20 +15,12 @@ const { ensureSlash } = require('../utils.js')
* @returns {function}
*/
module.exports = async function (dir, pathPrefix, options) {
const { imagesPath, fontsPath, brandColour, fontFamily } = options
const assetsPath = options.assetsPath || path.join(pathPrefix, 'assets')

// Get plugin options and set GOV.UK Frontend variables if provided
const inputFilePath = path.join(__dirname, '../govuk.scss')
const inputFile = await fs.readFile(inputFilePath)
const source = [
assetsPath ? `$govuk-assets-path: "${ensureSlash(assetsPath)}";` : [],
fontsPath ? `$govuk-fonts-path: "${ensureSlash(fontsPath)}";` : [],
imagesPath ? `$govuk-images-path: "${ensureSlash(imagesPath)}";` : [],
brandColour ? `$govuk-brand-colour: ${brandColour};` : [],
fontFamily ? `$govuk-font-family: ${fontFamily};` : [],
inputFile
].join('\n')

// Prepend contents from GOV.UK Frontend settings file, if provided
const settingsFile = await getScssSettings(dir, options)
const source = [settingsFile, inputFile].join('\n')

// Generate CSS
try {
Expand Down
36 changes: 24 additions & 12 deletions lib/utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,31 @@
const path = require('node:path')
const fs = require('node:fs/promises')

/**
* Ensure string ends with a slash
*
* @param {string} string - String
* @return {string} String ending with a `/`
*/
const ensureSlash = (string) => {
if (typeof string !== 'string') {
throw new TypeError('Input must be a string')
* Read contents of SCSS settings file
*
* @param {object} dir - Eleventy directories
* @param {object} options - Plugin options
* @return {Promise<string>} String ending with a `/`
*/
const getScssSettings = async (dir, options) => {
let settings
let settingsPath = path.join(dir.input, 'assets', 'sass', 'settings.scss')

if (options.scssSettingsPath) {
settingsPath = path.join(dir.input, options.scssSettingsPath)
}

if (string.charAt(string.length - 1) === '/') {
return string
try {
await fs.access(settingsPath, fs.constants.R_OK | fs.constants.W_OK)
settings = fs.readFile(settingsPath)
} catch (error) {
if (error) {
console.error('Could not find SCSS settings at', error.path)
}
}

return `${string}/`
return settings
}

/**
Expand All @@ -33,6 +45,6 @@ const normalise = (value, defaultValue) => {
}

module.exports = {
ensureSlash,
getScssSettings,
normalise
}
Loading

0 comments on commit 7ab0695

Please sign in to comment.