diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 6a49d058..d157eac2 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,10 +1,10 @@ version: 2 updates: - - package-ecosystem: "github-actions" - directory: "/" + - package-ecosystem: 'github-actions' + directory: '/' schedule: - interval: "monthly" - - package-ecosystem: "npm" - directory: "/" + interval: 'monthly' + - package-ecosystem: 'npm' + directory: '/' schedule: - interval: "monthly" + interval: 'monthly' diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 9935a5b8..961ffebe 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -23,16 +23,16 @@ jobs: build: runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Setup Pages - uses: actions/configure-pages@v3 - - name: Install dependencies - run: npm ci - - name: Build with Eleventy - run: npm run-script build - - name: Upload artifact - uses: actions/upload-pages-artifact@v2 + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v3 + - name: Install dependencies + run: npm ci + - name: Build with Eleventy + run: npm run-script build + - name: Upload artifact + uses: actions/upload-pages-artifact@v2 deploy: environment: diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index e109abd0..0e247ce5 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -23,7 +23,7 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: "${{ steps.nvm.outputs.NVMRC }}" + node-version: '${{ steps.nvm.outputs.NVMRC }}' cache: 'npm' - name: Install dependencies diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..bd15fa53 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +# JavaScript (formatted with Standard) +**/*.js +**/*.mjs diff --git a/README.md b/README.md index 59afcdbb..79862783 100644 --- a/README.md +++ b/README.md @@ -4,16 +4,16 @@ Build documentation websites using Markdown and GOV.UK styles. You’re welcome to use the plugin even if your service isn’t considered part of GOV.UK, but your site or service must not: -* identify itself as being part of GOV.UK -* use the crown or GOV.UK logotype in the header -* use the GDS Transport typeface -* suggest that it’s an official UK government website if it’s not +- identify itself as being part of GOV.UK +- use the crown or GOV.UK logotype in the header +- use the GDS Transport typeface +- suggest that it’s an official UK government website if it’s not ## Requirements -* [Node.js](https://nodejs.org) v16.0.0 or above -* [npm CLI](https://docs.npmjs.com/cli) v8.0.0 or above -* [Eleventy](https://www.11ty.dev) v2.0.0 or above +- [Node.js](https://nodejs.org) v16.0.0 or above +- [npm CLI](https://docs.npmjs.com/cli) v8.0.0 or above +- [Eleventy](https://www.11ty.dev) v2.0.0 or above ## Installation diff --git a/components/link/_link.scss b/components/link/_link.scss index d690f6ba..1b6ae19f 100644 --- a/components/link/_link.scss +++ b/components/link/_link.scss @@ -13,7 +13,7 @@ font-variant: all-small-caps; font-weight: normal; margin-left: govuk-spacing(1); - opacity: .5; + opacity: 0.5; } } diff --git a/components/prose-scope/_prose-scope.scss b/components/prose-scope/_prose-scope.scss index 224a70fe..242a9687 100644 --- a/components/prose-scope/_prose-scope.scss +++ b/components/prose-scope/_prose-scope.scss @@ -34,11 +34,11 @@ } sup { - top: -.4em; + top: -0.4em; } sub { - bottom: -.4em; + bottom: -0.4em; } img { @@ -56,7 +56,7 @@ // Show outline around linked images within figures img { display: block; - outline: 1px solid rgba($govuk-border-colour, .5); + outline: 1px solid rgba($govuk-border-colour, 0.5); } > .govuk-link img { diff --git a/components/site-search/_site-search.scss b/components/site-search/_site-search.scss index e08970f4..100117d7 100644 --- a/components/site-search/_site-search.scss +++ b/components/site-search/_site-search.scss @@ -115,7 +115,7 @@ $icon-size: 40px; } .app-site-search__menu--overlay { - box-shadow: rgba(govuk-colour("black"), .25) 0 2px 6px; + box-shadow: rgba(govuk-colour("black"), 0.25) 0 2px 6px; left: 0; position: absolute; top: 100%; diff --git a/docs/get-started.md b/docs/get-started.md index 3db8e3bb..63d5559b 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -9,23 +9,23 @@ You can use this plugin to create and publish documentation and other simple web This plugin includes the following features: -* a set of [layouts](../layouts) that use [`govuk-frontend`](https://github.com/alphagov/govuk-frontend) components and styles +- a set of [layouts](../layouts) that use [`govuk-frontend`](https://github.com/alphagov/govuk-frontend) components and styles -* includes [`markdown-it-govuk`](https://github.com/x-govuk/markdown-it-govuk) to ensure pages uses the same typography and styles as those used on GOV.UK +- includes [`markdown-it-govuk`](https://github.com/x-govuk/markdown-it-govuk) to ensure pages uses the same typography and styles as those used on GOV.UK -* support for an [extended Markdown syntax](../markdown-advanced) +- support for an [extended Markdown syntax](../markdown-advanced) -* [full configuration](../options) of your website’s header and footer +- [full configuration](../options) of your website’s header and footer -* site search +- site search -* SCSS compilation (for any files with the `.scss` extension) +- SCSS compilation (for any files with the `.scss` extension) ## Requirements -* [Node.js](https://nodejs.org/en/) v16.0.0 or above -* [npm CLI](https://docs.npmjs.com/cli) v8.0.0 or above -* [Eleventy](https://www.11ty.dev) v2.0.0 or above +- [Node.js](https://nodejs.org/en/) v16.0.0 or above +- [npm CLI](https://docs.npmjs.com/cli) v8.0.0 or above +- [Eleventy](https://www.11ty.dev) v2.0.0 or above [Node version manager](https://github.com/nvm-sh/nvm) is recommended if you are working across multiple projects that use different versions of Node.js. @@ -97,11 +97,11 @@ The first page in your site should also have a `homepage` value set to `true`[^1 [^1]: Using `homepage: true` is equivalent to writing the following: - ```yaml - eleventyComputed: - eleventyNavigation: - key: "{% raw %}{{ config.homeKey }}{% endraw %}" - ``` + ```yaml + eleventyComputed: + eleventyNavigation: + key: "{% raw %}{{ config.homeKey }}{% endraw %}" + ``` Open the preview URL in your browser to see this new page appear using GOV.UK styles. @@ -111,6 +111,6 @@ This plugin provides {{ collections.layout | length }} different layouts, each w {% for page in collections.layout %} -* [{{ page.data.title }}]({{ page.url | url }}) – {{ page.data.description }} +- [{{ page.data.title }}]({{ page.url | url }}) – {{ page.data.description }} {% endfor %} diff --git a/docs/includes/front-matter-options.md b/docs/includes/front-matter-options.md index 8272c5a4..f0cc4387 100644 --- a/docs/includes/front-matter-options.md +++ b/docs/includes/front-matter-options.md @@ -1,41 +1,41 @@ Use these options to customise the appearance, content and behaviour of any layout. -| Name | Type | Description | -| :--- | :--- | :---------- | -| **layout** | string | Page layout. | -| **includeInBreadcrumbs** | boolean | Include page as the last item in any breadcrumbs. Default is `false`. | -| **order** | number | Ranking of page in navigation. Lower numbers appear before pages with a higher number. | -| **title** | string | Page title. | -| **description** | string | Page description. | -| **opengraphImage** | object | Open Graph image that appears on social media networks. | -| **opengraphImage.src** | string | Path to Open Graph image. Can be a relative or absolute URL. This value overrides `opengraphImageUrl` in plugin options. | -| **opengraphImage.alt** | string | Alternative text for Open Graph image. | -| **aside** | object | Small portion of content that is indirectly related to the main content. | -| **aside.title** | string | Title for aside. | -| **aside.content** | string | Content for aside. Accepts Markdown. | -| **related** | object | Related links. See [related](#options-for-related). | +| Name | Type | Description | +| :----------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------- | +| **layout** | string | Page layout. | +| **includeInBreadcrumbs** | boolean | Include page as the last item in any breadcrumbs. Default is `false`. | +| **order** | number | Ranking of page in navigation. Lower numbers appear before pages with a higher number. | +| **title** | string | Page title. | +| **description** | string | Page description. | +| **opengraphImage** | object | Open Graph image that appears on social media networks. | +| **opengraphImage.src** | string | Path to Open Graph image. Can be a relative or absolute URL. This value overrides `opengraphImageUrl` in plugin options. | +| **opengraphImage.alt** | string | Alternative text for Open Graph image. | +| **aside** | object | Small portion of content that is indirectly related to the main content. | +| **aside.title** | string | Title for aside. | +| **aside.content** | string | Content for aside. Accepts Markdown. | +| **related** | object | Related links. See [related](#options-for-related). | ### Options for related With one section: -| Name | Type | Description | -| :--- | :--- | :---------- | -| **title** | string | Title for group of related links. Default is `'Related content'`. | -| **items** | array | See [items](#options-for-items). | -| **subsections** | array | Title for sub-group of related links. | -| **subsections.title** | string | | -| **subsections.items** | array | See [items](#options-for-items). | +| Name | Type | Description | +| :-------------------- | :----- | :---------------------------------------------------------------- | +| **title** | string | Title for group of related links. Default is `'Related content'`. | +| **items** | array | See [items](#options-for-items). | +| **subsections** | array | Title for sub-group of related links. | +| **subsections.title** | string | | +| **subsections.items** | array | See [items](#options-for-items). | With multiple sections: -| Name | Type | Description | -| :--- | :--- | :---------- | +| Name | Type | Description | +| :----------- | :---- | :--------------------------------- | | **sections** | array | See [items](#options-for-related). | ### Options for items -| Name | Type | Description | -| :--- | :--- | :---------- | -| **text** | string | Title of related content. | +| Name | Type | Description | +| :------- | :----- | :---------------------------- | +| **text** | string | Title of related content. | | **href** | string | Link for the related content. | diff --git a/docs/index.md b/docs/index.md index da7774ef..82e8c9c1 100644 --- a/docs/index.md +++ b/docs/index.md @@ -11,6 +11,7 @@ startButton: eleventyComputed: title: "{{ pkg.description }}" --- +
{% for item in collections.homepage %}
diff --git a/docs/layouts.md b/docs/layouts.md index 9fbfb811..a151c5ae 100644 --- a/docs/layouts.md +++ b/docs/layouts.md @@ -4,9 +4,10 @@ order: 3 title: Layouts description: The plugin offers a number of layouts to match the type of content you want write. --- + {% for page in collections.layout %} -* [{{ page.data.title }}]({{ page.url | url }}) – {{ page.data.description }} +- [{{ page.data.title }}]({{ page.url | url }}) – {{ page.data.description }} {% endfor %} @@ -31,7 +32,7 @@ module.exports = function(eleventyConfig) { }; ``` -If you want to use your own layouts, remove this value and set a value for [`dir.includes`](https://www.11ty.dev/docs/config/#directory-for-includes) (and optionally [`dir.layouts`](https://www.11ty.dev/docs/config/#directory-for-layouts-(optional))). +If you want to use your own layouts, remove this value and set a value for [`dir.includes`](https://www.11ty.dev/docs/config/#directory-for-includes) (and optionally [`dir.layouts`]()). You can use layouts provided by this plugin as a basis for your own. For example, to show a notification banner at the top of a page, extend the `page` layout: @@ -45,7 +46,7 @@ You can use layouts provided by this plugin as a basis for your own. For example {% block content %} {# Templates can include front matter data #} {{ govukNotificationBanner({ - text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ". + text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ". It needs to be reviewed again on " + (reviewAgain | date("d LLLL y")) + "." }) if reviewed and reviewAgain }} diff --git a/docs/layouts/collection.md b/docs/layouts/collection.md index 7d5ad2e0..f658a3ff 100644 --- a/docs/layouts/collection.md +++ b/docs/layouts/collection.md @@ -46,6 +46,7 @@ related: - text: Front matter data href: https://www.11ty.dev/docs/data-frontmatter/ --- + Use front matter options to customise the appearance, content and behaviour of this layout. For example, this page has the following options: @@ -82,7 +83,7 @@ example: description: What we learnt from our first round of user research. aside: title: Aside - content: | + content: | A small portion of content that is **indirectly** related to the main content. related: sections: @@ -108,7 +109,7 @@ related: In addition to the common front matter options, this layout also accepts the following options: -| Name | Type | Description | -| :--- | :--- | :---------- | -| **paginationHeading** | string | Heading for the list of paginated pages. | -| **pagination** | object | **Required.** Pages to show in the paginated list. Learn more about [pagination](https://www.11ty.dev/docs/pagination/) in the documentation for Eleventy. | +| Name | Type | Description | +| :-------------------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **paginationHeading** | string | Heading for the list of paginated pages. | +| **pagination** | object | **Required.** Pages to show in the paginated list. Learn more about [pagination](https://www.11ty.dev/docs/pagination/) in the documentation for Eleventy. | diff --git a/docs/layouts/page.md b/docs/layouts/page.md index dce6eeb8..b9cdc282 100644 --- a/docs/layouts/page.md +++ b/docs/layouts/page.md @@ -21,6 +21,7 @@ related: - text: Front matter data href: https://www.11ty.dev/docs/data-frontmatter/ --- + Use front matter options to customise the appearance, content and behaviour of this layout. For example, this page has the following options: @@ -32,7 +33,7 @@ title: Page description: Simple layout designed for maximum flexibility of content. aside: title: Aside - content: | + content: | A small portion of content that is **indirectly** related to the main content. related: sections: diff --git a/docs/layouts/post.md b/docs/layouts/post.md index e676a69d..26c56241 100644 --- a/docs/layouts/post.md +++ b/docs/layouts/post.md @@ -35,6 +35,7 @@ related: tags: - example tag --- + Use front matter options to customise the appearance, content and behaviour of this layout. For example, this page has the following options: @@ -57,7 +58,7 @@ authors: url: https://www.gov.uk/government/history/past-prime-ministers/benjamin-disraeli-the-earl-of-beaconsfield aside: title: Aside - content: | + content: | A small portion of content that is **indirectly** related to the main content. related: sections: @@ -85,19 +86,19 @@ tags: In addition to the common front matter options, this layout also accepts the following options: -| Name | Type | Description | -| :--- | :--- | :---------- | -| **author** | string or object | Post author. | -| **author.name** | string | Name of post author. Overrides any single value given for author. | -| **author.url** | string | URL for website of post author. | -| **authors** | array | Post authors. Overrides any value(s) given for author. | -| **authors.name** | string | Name of post author. | -| **authors.url** | string | URL for website of post author. | -| **date** | string | Date post was published. Use [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601), for example `{{ "now" | date("yyyy-MM-dd") }}`. | -| **image** | object | Image shown above post content. | -| **image.src** | string | Path to post image. | -| **image.alt** | string | Alternative text for post image. | -| **image.caption** | string | Caption shown below post image. | -| **image.opengraphImage** | boolean | Whether image should also be used as the page’s Open Graph share image. | -| **modified** | string | Date post was updated. Use [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601), for example `{{ "now" | date("yyyy-MM-dd") }}`. | -| **tags** | Array | List of tags post relates to | +| Name | Type | Description | +| :----------------------- | :------------------------- | :------------------------------------------------------------------------------------------------------------ | ----------------------- | +| **author** | string or object | Post author. | +| **author.name** | string | Name of post author. Overrides any single value given for author. | +| **author.url** | string | URL for website of post author. | +| **authors** | array | Post authors. Overrides any value(s) given for author. | +| **authors.name** | string | Name of post author. | +| **authors.url** | string | URL for website of post author. | +| **date** | string | Date post was published. Use [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601), for example `{{ "now" | date("yyyy-MM-dd") }}`. | +| **image** | object | Image shown above post content. | +| **image.src** | string | Path to post image. | +| **image.alt** | string | Alternative text for post image. | +| **image.caption** | string | Caption shown below post image. | +| **image.opengraphImage** | boolean | Whether image should also be used as the page’s Open Graph share image. | +| **modified** | string | Date post was updated. Use [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601), for example `{{ "now" | date("yyyy-MM-dd") }}`. | +| **tags** | Array | List of tags post relates to | diff --git a/docs/layouts/product.md b/docs/layouts/product.md index 11ac6a68..f400de1d 100644 --- a/docs/layouts/product.md +++ b/docs/layouts/product.md @@ -27,6 +27,7 @@ related: - text: Front matter data href: https://www.11ty.dev/docs/data-frontmatter/ --- + Use front matter options to customise the appearance, content and behaviour of this layout. For example, this page has the following options: @@ -44,7 +45,7 @@ image: alt: Eleventy’s possum mascot hanging on a red balloon and floating above a laptop. aside: title: Aside - content: | + content: | A small portion of content that is **indirectly** related to the main content. related: sections: @@ -72,11 +73,11 @@ related: In addition to the common front matter options, this layout also has the following options: -| Name | Type | Description | -| :--- | :--- | :---------- | -| **startButton** | string | Start button. Appears below the title and any description. | -| **startButton.text** | string | Text for the start button. Default is `'Get started'`. | -| **startButton.href** | string | The URL that the start button should link to. | -| **image** | object | Product image. Appears to the right of the page title, and is hidden on mobile. | -| **image.src** | string | Path to product image. | -| **image.alt** | string | Alternative text for product image. | +| Name | Type | Description | +| :------------------- | :----- | :------------------------------------------------------------------------------ | +| **startButton** | string | Start button. Appears below the title and any description. | +| **startButton.text** | string | Text for the start button. Default is `'Get started'`. | +| **startButton.href** | string | The URL that the start button should link to. | +| **image** | object | Product image. Appears to the right of the page title, and is hidden on mobile. | +| **image.src** | string | Path to product image. | +| **image.alt** | string | Alternative text for product image. | diff --git a/docs/layouts/sub-navigation.md b/docs/layouts/sub-navigation.md index 60e1f65b..66a2b693 100644 --- a/docs/layouts/sub-navigation.md +++ b/docs/layouts/sub-navigation.md @@ -21,6 +21,7 @@ related: - text: Front matter data href: https://www.11ty.dev/docs/data-frontmatter/ --- + The `sub-navigation` layout offers a page with sub navigation, appearing to the left of content on wider viewports, and above on narrower ones. Use front matter options to customise the appearance, content and behaviour of this layout. @@ -34,7 +35,7 @@ title: Page with sub navigation description: Layout with sub navigation. aside: title: Aside - content: | + content: | A small portion of content that is **indirectly** related to the main content. related: sections: diff --git a/docs/markdown-advanced.md b/docs/markdown-advanced.md index 9bfe76aa..911f6690 100644 --- a/docs/markdown-advanced.md +++ b/docs/markdown-advanced.md @@ -9,6 +9,7 @@ related: - text: Markdown Guide href: https://www.markdownguide.org --- + [[toc]] ## Tables @@ -51,16 +52,16 @@ You can align text in the columns to the left, right, or center by adding a colo The rendered output looks like this: -| Syntax | Description | Test Text | +| Syntax | Description | Test Text | | :-------- | :---------: | ----------: | -| Header | Title | Here's this | -| Paragraph | Text | And more | +| Header | Title | Here's this | +| Paragraph | Text | And more | ## Fenced code The basic Markdown syntax allows you to create [code blocks](../markdown#code-blocks) by indenting lines by 4 spaces or one tab. If you find that inconvenient, try using fenced code blocks. You can use 3 backticks (` ``` `) or 3 tildes (`~~~`) on the lines before and after the code block. -~~~markdown +````markdown ``` { "firstName": "William", @@ -68,7 +69,7 @@ The basic Markdown syntax allows you to create [code blocks](../markdown#code-bl "age": 24 } ``` -~~~ +```` The rendered output looks like this: @@ -84,7 +85,7 @@ The rendered output looks like this: This feature allows you to add color highlighting for whatever language your code was written in. To add syntax highlighting, specify a language next to the backticks before the fenced code block. -~~~markdown +````markdown ```json { "firstName": "William", @@ -92,7 +93,7 @@ This feature allows you to add color highlighting for whatever language your cod "age": 24 } ``` -~~~ +```` The rendered output looks like this: @@ -137,7 +138,6 @@ The rendered output looks like this: Here's a simple footnote,[^1] and here's a longer one.[^bignote] [^1]: This is the first footnote. - [^bignote]: Here's one with multiple paragraphs and code. Indent paragraphs to include them in the footnote. @@ -162,11 +162,11 @@ This policy is the responsibility of the DWP. This policy is the responsibility of the DWP. -*[DWP]: Department for Work and Pensions +\*[DWP]: Department for Work and Pensions ## Definition lists -To create a definition list, type the term on the first line. On the next line, type a colon followed by a space and the definition. +To create a definition list, type the term on the first line. On the next line, type a colon followed by a space and the definition. ```markdown First Term diff --git a/docs/markdown.md b/docs/markdown.md index d5055786..dbb44911 100644 --- a/docs/markdown.md +++ b/docs/markdown.md @@ -245,7 +245,7 @@ Visit [GOV.UK](https://www.gov.uk). To quickly turn a URL or email address into a link, enclose it in angle brackets. ```markdown - + ``` @@ -259,7 +259,7 @@ The rendered output looks like this: To [emphasize](../markdown#emphasis) links, add asterisks before and after the brackets and parentheses. To denote links as [code](../markdown#code), add backticks in the brackets. ```markdown -Visit the **[Markdown Guide](https://www.markdownguide.org)**. +Visit the **[Markdown Guide](https://www.markdownguide.org)**. See the section on [`code`](../markdown#code). ``` diff --git a/docs/options.md b/docs/options.md index 2d2edf46..99873167 100644 --- a/docs/options.md +++ b/docs/options.md @@ -7,7 +7,7 @@ description: The plugin has a number of options that allow you to customise the You can add options to the second parameter of the `addPlugin` function in Eleventy config file. -For example, to add a product name to the right of the GOV.UK text in the header, you would add the following: +For example, to add a product name to the right of the GOV.UK text in the header, you would add the following: ```js const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin') @@ -23,59 +23,59 @@ 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 | +| :-------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **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). | ### Options for header In addition to the [options available for the header component](https://design-system.service.gov.uk/components/header/), the following options can also be set: -| Name | Type | Description | -| :--- | :--- | :---------- | -| **homepageUrl** | string | URL organisation name is linked to. Default is `'/'` | +| Name | Type | Description | +| :------------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **homepageUrl** | string | URL organisation name is linked to. Default is `'/'` | | **organisationLogo** | string | Logo that appears before the organisation name. If set to `crown` the GOV.UK logo is shown. If set to `royal-arms`, the Royal Coat of Arms is shown. Default is `'crown'` | -| **organisationName** | string | Organisation name. Default is `'GOV.UK'` | -| **productName** | string | Product name that appears after the organisation name. Default is `false`. | -| **search** | object | See [header.search](#options-for-header.search). | +| **organisationName** | string | Organisation name. Default is `'GOV.UK'` | +| **productName** | string | Product name that appears after the organisation name. Default is `false`. | +| **search** | object | See [header.search](#options-for-header.search). | ### Options for header.search Options for site search. See [adding a site search](../search). -| Name | Type | Description | -| :--- | :--- | :---------- | -| **label** | string | Text to show in the search field. Default is `'Search site'` | -| **indexPath** | string | Path to search index file. If set, a search input will be shown in the header. | -| **sitemapPath** | string | Path to sitemap page. | +| Name | Type | Description | +| :-------------- | :----- | :----------------------------------------------------------------------------- | +| **label** | string | Text to show in the search field. Default is `'Search site'` | +| **indexPath** | string | Path to search index file. If set, a search input will be shown in the header. | +| **sitemapPath** | string | Path to sitemap page. | ### Options for footer In addition to the [options available for the footer component](https://design-system.service.gov.uk/components/footer/), the following options can also be set: -| Name | Type | Description | -| :--- | :--- | :---------- | -| **contentLicence** | object | Licence description. If no value is provided, the OGL logo is shown alongside the words `All content is available under the Open Government Licence v3.0, except where otherwise stated`. | -| **contentLicence.text** | string | If `html` is set, this is not required. If `html` is provided, the `text` option will be ignored. | -| **contentLicence.html** | string | If `text` is set, this is not required. If `html` is provided, the `text` option will be ignored. | -| **copyright** | object | Copyright statement. If no value is provided, `© Crown copyright` is displayed below an image of the Royal Coat of Arms. | -| **copyright.text** | string | If `html` is set, this is not required. If `html` is provided, the `text` option will be ignored. | -| **copyright.html** | string | If `text` is set, this is not required. If `html` is provided, the `text` option will be ignored. | +| Name | Type | Description | +| :---------------------- | :----- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **contentLicence** | object | Licence description. If no value is provided, the OGL logo is shown alongside the words `All content is available under the Open Government Licence v3.0, except where otherwise stated`. | +| **contentLicence.text** | string | If `html` is set, this is not required. If `html` is provided, the `text` option will be ignored. | +| **contentLicence.html** | string | If `text` is set, this is not required. If `html` is provided, the `text` option will be ignored. | +| **copyright** | object | Copyright statement. If no value is provided, `© Crown copyright` is displayed below an image of the Royal Coat of Arms. | +| **copyright.text** | string | If `html` is set, this is not required. If `html` is provided, the `text` option will be ignored. | +| **copyright.html** | string | If `text` is set, this is not required. If `html` is provided, the `text` option will be ignored. | diff --git a/package-lock.json b/package-lock.json index 1f139aff..354ac433 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "@x-govuk/govuk-eleventy-plugin": "file:./", "ava": "^5.1.0", "c8": "^8.0.0", + "prettier": "^3.0.0", "standard": "^17.0.0", "stylelint": "^ 15.10.3", "stylelint-config-gds": "^1.0.0" @@ -8769,6 +8770,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-ms": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-8.0.0.tgz", diff --git a/package.json b/package.json index 58f0f927..7ea8bcbf 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "predev": "rimraf _site", "dev": "eleventy --serve --watch", "start": "eleventy --serve", - "lint": "standard && stylelint '**/*.scss'", + "lint": "prettier . --check && standard && stylelint '**/*.scss'", "test": "ava", "test:watch": "ava --watch", "coverage": "c8 ava" @@ -71,6 +71,7 @@ "@x-govuk/govuk-eleventy-plugin": "file:./", "ava": "^5.1.0", "c8": "^8.0.0", + "prettier": "^3.0.0", "standard": "^17.0.0", "stylelint": "^ 15.10.3", "stylelint-config-gds": "^1.0.0" @@ -88,6 +89,26 @@ "lcovonly" ] }, + "prettier": { + "semi": false, + "singleQuote": true, + "trailingComma": "none", + "overrides": [ + { + "files": "*.md", + "options": { + "embeddedLanguageFormatting": "off", + "singleQuote": false + } + }, + { + "files": "*.scss", + "options": { + "singleQuote": false + } + } + ] + }, "stylelint": { "extends": "stylelint-config-gds/scss" }