Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow users to provide a SCSS file that contains settings for GOV.UK Frontend #216

Merged
merged 1 commit into from
Dec 11, 2023
Merged

Allow users to provide a SCSS file that contains settings for GOV.UK Frontend #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/assets/sass/settings.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 @@ -14,20 +14,12 @@ const { ensureSlash } = require('../utils.js')
* @returns {Function} Eleventy event
*/
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
32 changes: 22 additions & 10 deletions lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,30 @@
const path = require('node:path')
const fs = require('node:fs/promises')

/**
* Ensure string ends with a slash.
* @param {string} string - String
* @returns {string} String ending with a `/`
* Read contents of SCSS settings file
* @param {object} dir - Eleventy directories
* @param {object} options - Plugin options
* @returns {Promise<string>} SCSS file contents
*/
const ensureSlash = (string) => {
if (typeof string !== 'string') {
throw new TypeError('Input must be a string')
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 && options.scssSettingsPath) {
console.error('Could not find SCSS settings at', error.path)
}
}

return `${string}/`
return settings
}

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

module.exports = {
ensureSlash,
getScssSettings,
normalise
}
144 changes: 0 additions & 144 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 1 addition & 15 deletions test/lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,8 @@
const assert = require('assert/strict')
const { describe, it } = require('node:test')
const { ensureSlash, normalise } = require('../../lib/utils.js')
const { normalise } = require('../../lib/utils.js')

describe('Utility', () => {
it('Ensures string ends with a slash', () => {
assert.equal(ensureSlash('path'), 'path/')
assert.equal(ensureSlash('path/'), 'path/')
})

it('Throws error ensuring anything not a string ends with a slash', () => {
assert.throws(() => {
ensureSlash({})
}, {
name: 'TypeError',
message: 'Input must be a string'
})
})

it('Normalises value provided to a filter', () => {
const usesValue = normalise('Dollars', 'Pounds')
const usesDefault = normalise(undefined, 'Pounds')
Expand Down