@x-govuk/govuk-eleventy-plugin 6.7.2 → 7.0.0

package/README.md

@@ -11,8 +11,8 @@ You’re welcome to use the plugin even if your service isn’t considered part
 
 ## Requirements
 
-- [Node.js](https://nodejs.org) v18.17 or later
-- [Eleventy](https://www.11ty.dev) v2 or later
+- [Node.js](https://nodejs.org) v22 or later
+- [Eleventy](https://www.11ty.dev) v3 or later
 
 ## Installation
 
@@ -21,11 +21,13 @@ You’re welcome to use the plugin even if your service isn’t considered part
 ## Usage
 
 ```js
-const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')
+import { govukEleventyPlugin } from '@x-govuk/govuk-eleventy-plugin'
 
-eleventyConfig.addPlugin(govukEleventyPlugin, {
-  // Options
-})
+export default function(eleventyConfig) {
+  eleventyConfig.addPlugin(govukEleventyPlugin, {
+    // Options
+  })
+}
 ```
 
 Learn more about how to [get started](https://x-govuk.github.io/govuk-eleventy-plugin/get-started/) and which [options you can provide](https://x-govuk.github.io/govuk-eleventy-plugin/options/).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-govuk/govuk-eleventy-plugin",
-  "version": "6.7.2",
+  "version": "7.0.0",
   "description": "Write documentation using Markdown and publish it using GOV.UK styles",
   "keywords": [
     "govuk",
@@ -10,7 +10,7 @@
   ],
   "homepage": "https://x-govuk.github.io/govuk-eleventy-plugin/",
   "bugs": {
-    "url": "https://github.com/x-govuk/govuk-eleventy-plugin/issues"
+    "url": "git+https://github.com/x-govuk/govuk-eleventy-plugin/issues"
   },
   "contributors": [
     {
@@ -20,19 +20,18 @@
   ],
   "license": "MIT",
   "files": [
-    "components",
-    "layouts",
-    "lib"
+    "src"
   ],
-  "main": "index.js",
-  "sass": "lib/govuk.scss",
+  "main": "src/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/x-govuk/govuk-eleventy-plugin.git"
   },
   "scripts": {
     "prebuild": "rimraf _site",
+    "postbuild": "npm run build:example",
     "build": "eleventy",
+    "build:example": "eleventy --config=example.config.js",
     "predev": "rimraf _site",
     "dev": "eleventy --serve --watch",
     "start": "eleventy --serve",
@@ -52,12 +51,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@11ty/eleventy": "^2.0.0",
-    "@11ty/eleventy-navigation": "^0.3.2",
-    "@11ty/eleventy-plugin-rss": "^1.0.0",
+    "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy-navigation": "^1.0.0",
+    "@11ty/eleventy-plugin-rss": "^2.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
-    "@x-govuk/govuk-prototype-components": "^3.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@x-govuk/govuk-prototype-components": "^4.0.0",
     "deepmerge": "^4.2.2",
     "govuk-frontend": "^5.6.0",
     "luxon": "^3.0.1",
@@ -65,14 +65,14 @@
     "markdown-it-anchor": "^9.0.0",
     "markdown-it-deflist": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
-    "markdown-it-govuk": "^0.4.0",
+    "markdown-it-govuk": "^0.5.0",
     "markdown-it-image-figures": "^2.0.0",
     "markdown-it-ins": "^4.0.0",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-sub": "^2.0.0",
     "markdown-it-sup": "^2.0.0",
-    "markdown-it-table-of-contents": "^0.8.0",
-    "rimraf": "^5.0.0",
+    "markdown-it-table-of-contents": "^0.9.0",
+    "rimraf": "^6.0.0",
     "rollup": "^4.1.0",
     "sass": "^1.45.1",
     "smartypants": "^0.2.0"
@@ -84,9 +84,16 @@
     "prettier": "^3.1.0",
     "stylelint": "^16.0.0",
     "stylelint-config-gds": "^2.0.0",
-    "stylelint-order": "^6.0.0"
+    "stylelint-order": "^7.0.0"
   },
   "engines": {
-    "node": ">=18.17"
+    "node": ">=22"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "sass": "./src/index.scss",
+      "import": "./src/index.js"
+    }
   }
 }

package/{lib/govuk.js → src/application.js}

@@ -1,6 +1,6 @@
 import { initAll as GOVUKFrontend } from 'govuk-frontend'
 
-import { SiteSearchElement } from '../components/site-search/site-search.js'
+import { SiteSearchElement } from './components/site-search/site-search.js'
 
 // Initiate custom elements
 customElements.define('site-search', SiteSearchElement)

package/src/application.scss

@@ -0,0 +1,9 @@
+// GOV.UK Frontend components
+@use "pkg:govuk-frontend/dist/govuk" with (
+  $govuk-global-styles: true,
+  $govuk-new-organisation-colours: true,
+  $govuk-new-typography-scale: true
+);
+
+// GOV.UK Eleventy Plugin components
+@forward "pkg:@x-govuk/govuk-eleventy-plugin";

package/{lib → src}/collections/all.js

@@ -1,2 +1,2 @@
-module.exports = (collection) =>
+export const all = (collection) =>
   collection.getAllSorted().filter((item) => !item.inputPath.includes('.scss'))

package/src/collections/index.js

@@ -0,0 +1,21 @@
+export async function addCollections(eleventyConfig) {
+  if (!eleventyConfig.collections.all) {
+    const { all } = await import('./all.js')
+    eleventyConfig.addCollection('all', all)
+  }
+
+  if (!eleventyConfig.collections.navigation) {
+    const { navigation } = await import('./navigation.js')
+    eleventyConfig.addCollection('navigation', navigation)
+  }
+
+  if (!eleventyConfig.collections.sitemap) {
+    const { sitemap } = await import('./sitemap.js')
+    eleventyConfig.addCollection('sitemap', sitemap)
+  }
+
+  if (!eleventyConfig.collections.tag) {
+    const { tags } = await import('./tags.js')
+    eleventyConfig.addCollection('tags', tags)
+  }
+}

package/{lib → src}/collections/navigation.js

@@ -1,4 +1,4 @@
-module.exports = (collection) =>
+export const navigation = (collection) =>
   collection
     .getFilteredByGlob(['**/*.md', '**/*.njk'])
     .filter((item) => !/^tag/.test(item.data.layout))

package/{lib → src}/collections/sitemap.js

@@ -1,4 +1,4 @@
-module.exports = (collection) => {
+export const sitemap = (collection) => {
   return collection.getAllSorted().filter((item) => {
     // Only return content that was originally a Markdown file
     const extension = item.inputPath.split('.').pop()

package/{lib → src}/collections/tags.js

@@ -1,4 +1,4 @@
-module.exports = (collection) => {
+export const tags = (collection) => {
   const items = collection.getAll()
   let tags = []
 

package/src/components/_index.scss

@@ -0,0 +1,11 @@
+@forward "aside";
+@forward "contents-list";
+@forward "definition-list";
+@forward "document-header";
+@forward "document-list";
+@forward "footnotes-list";
+@forward "header";
+@forward "link";
+@forward "prose-scope";
+@forward "service-navigation";
+@forward "site-search";

package/src/components/aside/_index.scss

@@ -0,0 +1,21 @@
+@use "govuk-frontend/dist/govuk" as *;
+
+@include govuk-exports("govuk-eleventy-plugin/component/aside") {
+  .app-aside {
+    @include govuk-responsive-margin(6, "bottom");
+    @include govuk-text-colour;
+    border-top: 2px solid $govuk-brand-colour;
+  }
+
+  .app-aside__heading {
+    @include govuk-font(19, $weight: bold);
+    margin-bottom: govuk-spacing(2);
+    margin-top: govuk-spacing(3);
+  }
+
+  .app-aside__body {
+    > * {
+      @include govuk-font(16);
+    }
+  }
+}

package/src/components/contents-list/_index.scss

@@ -0,0 +1,55 @@
+@use "govuk-frontend/dist/govuk" as *;
+
+// Based on the GOV.UK ‘Contents list’ component
+// https://components.publishing.service.gov.uk/component-guide/contents_list
+@include govuk-exports("govuk-eleventy-plugin/component/contents-list") {
+  .app-contents-list {
+    @include govuk-responsive-margin(8, "bottom");
+
+    ul {
+      list-style-type: none;
+      margin-top: 0;
+      padding-left: 0;
+    }
+
+    ul ul {
+      margin-bottom: 0;
+    }
+
+    li {
+      @include govuk-font($size: 16, $weight: bold);
+      @include govuk-text-colour;
+      padding-top: govuk-spacing(2);
+
+      @include govuk-media-query($from: tablet) {
+        padding-top: govuk-spacing(6) / 4;
+      }
+    }
+
+    li li {
+      font-weight: normal;
+      padding-left: govuk-spacing(5);
+      position: relative;
+
+      &::before {
+        content: "—";
+        left: 0;
+        overflow: hidden;
+        position: absolute;
+        width: govuk-spacing(4);
+      }
+    }
+
+    a {
+      @include govuk-link-common;
+      @include govuk-link-style-no-visited-state;
+      @include govuk-link-style-no-underline;
+    }
+  }
+
+  .app-contents-list__title {
+    @include govuk-text-colour;
+    @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);
+    margin: 0;
+  }
+}

package/src/components/definition-list/_index.scss

@@ -0,0 +1,19 @@
+@use "govuk-frontend/dist/govuk" as *;
+
+@include govuk-exports("govuk-eleventy-plugin/component/definition-list") {
+  .app-definition-list {
+    dt {
+      @include govuk-font($size: 19, $weight: bold);
+      margin-bottom: govuk-spacing(1);
+    }
+
+    dd + dt {
+      margin-top: govuk-spacing(4);
+    }
+
+    dd {
+      @include govuk-font($size: 19);
+      margin-left: govuk-spacing(5);
+    }
+  }
+}

package/src/components/document-header/_index.scss

@@ -0,0 +1,13 @@
+@use "govuk-frontend/dist/govuk" as *;
+
+@include govuk-exports("govuk-eleventy-plugin/component/document-header") {
+  .app-document-header__metadata {
+    @include govuk-font($size: 16, $line-height: 1.5);
+    color: $govuk-secondary-text-colour;
+    max-width: 45em;
+  }
+
+  .app-document-header__description {
+    max-width: 30em;
+  }
+}

package/src/components/document-list/_index.scss

@@ -0,0 +1,55 @@
+@use "govuk-frontend/dist/govuk" as *;
+
+@include govuk-exports("govuk-eleventy-plugin/component/document-list") {
+  .app-document-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .app-document-list__item {
+    border-top: 1px solid $govuk-border-colour;
+    margin-bottom: govuk-spacing(5);
+    padding-top: govuk-spacing(2);
+  }
+
+  .app-document-list__item-title {
+    @include govuk-font($size: 19, $weight: "bold");
+    margin: 0 0 govuk-spacing(1);
+  }
+
+  .app-document-list__item-metadata {
+    margin: 0;
+    padding: 0;
+  }
+
+  .app-document-list__item-description {
+    @include govuk-font($size: 16);
+    margin: govuk-spacing(1) 0;
+  }
+
+  .app-document-list__attribute {
+    @include govuk-font($size: 16);
+    color: $govuk-secondary-text-colour;
+    display: inline-block;
+    margin: 0;
+
+    & + .app-document-list__attribute::before {
+      content: "\2002•\2002";
+    }
+  }
+
+  .app-document-list--large {
+    .app-document-list__item-title {
+      @include govuk-font($size: 24, $weight: "bold");
+    }
+
+    .app-document-list__item-description {
+      @include govuk-font($size: 19);
+    }
+
+    .app-document-list__attribute {
+      @include govuk-font($size: 16);
+    }
+  }
+}

package/{components → src/components}/footer/template.njk

@@ -1,5 +1,27 @@
+{% from "macros/x-govuk-logo.njk" import xGovukLogo -%}
+{% from "govuk/macros/logo.njk" import govukLogo -%}
+
+{%- set _rebrand = params.rebrand | default(govukRebrand() if govukRebrand is callable else govukRebrand) -%}
+
 <footer class="govuk-footer app-footer {{ params.classes if params.classes }}" role="contentinfo"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="govuk-width-container {{ params.containerClasses if params.containerClasses }}">
+    {% if xGovuk %}
+      {{ xGovukLogo({
+        classes: "govuk-footer__crown x-govuk-footer__crown",
+        attributes: {
+          width: "45",
+          height: "45"
+        },
+        useCrown: true,
+        useLogotype: false
+      }) | trim | indent(10) }}
+    {% elif _rebrand and params.logo != false %}
+      {{- govukLogo({
+        classes: "govuk-footer__crown",
+        rebrand: true,
+        useLogotype: false
+      }) }}
+    {% endif %}
     {% if params.navigation | length %}
       <div class="govuk-footer__navigation">
         {% for nav in params.navigation %}

package/src/components/footnotes-list/_index.scss

@@ -0,0 +1,56 @@
+@use "govuk-frontend/dist/govuk" as *;
+
+@include govuk-exports("govuk-eleventy-plugin/component/footnotes-list") {
+  // Link to footnote
+  a[aria-describedby="footnotes-label"] {
+    @include govuk-font(16, $tabular: true);
+    @include govuk-link-style-no-visited-state;
+  }
+
+  a[aria-describedby="footnotes-label"]::before {
+    color: currentcolor;
+    content: "[";
+  }
+
+  a[aria-describedby="footnotes-label"]::after {
+    color: currentcolor;
+    content: "]";
+  }
+
+  // Footnotes
+  .app-footnotes-list {
+    @include govuk-font($size: 19);
+    counter-reset: footnotes;
+    list-style-type: none;
+    padding-left: 0;
+
+    li {
+      counter-increment: footnotes;
+      padding: govuk-spacing(3);
+      padding-left: govuk-spacing(8);
+      position: relative;
+    }
+
+    li::before {
+      @include govuk-font(19, $tabular: true);
+      content: counter(footnotes) ".";
+      left: govuk-spacing(4);
+      position: absolute;
+    }
+
+    a[aria-label="Back to content"] {
+      @include govuk-link-style-no-visited-state;
+      position: relative;
+      text-underline-offset: 0;
+      top: 2px;
+    }
+
+    :target {
+      background-color: govuk-tint($govuk-focus-colour, 75%);
+    }
+
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/src/components/header/_index.scss

@@ -0,0 +1,17 @@
+@use "govuk-frontend/dist/govuk" as *;
+
+@include govuk-exports("govuk-eleventy-plugin/component/header") {
+  .app-header__container {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .app-header__logo {
+    width: auto;
+  }
+
+  .app-header--no-border {
+    border-bottom: 0;
+  }
+}

package/{components → src/components}/header/template.njk

@@ -1,21 +1,35 @@
-{%- from "components/site-search/macro.njk" import appSiteSearch with context -%}
-{%- if options.navigation -%}
+{% from "components/site-search/macro.njk" import appSiteSearch with context -%}
+{% from "macros/x-govuk-logo.njk" import xGovukLogo -%}
+{% from "govuk/macros/logo.njk" import govukLogo -%}
+
+{%- set _rebrand = params.rebrand | default(govukRebrand() if govukRebrand is callable else govukRebrand) -%}
+
+{%- if options.serviceNavigation -%}
   {%- set headerClasses = " govuk-header--full-width-border" -%}
 {% elif layout == "product" or layout == "collection" %}
   {%- set headerClasses = " app-header--no-border" -%}
 {%- endif -%}
+
 <header class="govuk-header app-header{{ headerClasses }}" role="banner" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container app-header__container">
     <div class="govuk-header__logo app-header__logo">
       <a href="{{ params.homepageUrl | default("/") }}" class="govuk-header__link govuk-header__link--homepage">
-        {% if params.logotype == "x-govuk" %}
-          {% include "./_x-govuk.svg" %}
+        {% if xGovuk %}
+          {{ xGovukLogo({
+            classes: "govuk-header__logotype x-govuk-header__logotype",
+            ariaLabelText: "X-GOVUK"
+          }) | trim | indent(10) }}
         {% elif params.logotype.html %}
           {{ params.logotype.html }}
         {% elif params.logotype.text %}
           <span class="app-header__logotype">{{ params.logotype.text }}</span>
         {% else %}
-          {% include "./_govuk.svg" %}
+          {{ govukLogo({
+            classes: "govuk-header__logotype",
+            ariaLabelText: "GOV.UK",
+            useTudorCrown: params.useTudorCrown,
+            rebrand: _rebrand
+          }) | trim | indent(10) }}
         {% endif %}
         {% if params.productName %}
         <span class="govuk-header__product-name">

package/{components/link/_link.scss → src/components/link/_index.scss}

@@ -1,3 +1,5 @@
+@use "govuk-frontend/dist/govuk" as *;
+
 .govuk-link.app-link--heading {
   @include govuk-link-style-text;
   @include govuk-link-style-no-underline;

package/src/components/prose-scope/_index.scss

@@ -0,0 +1,157 @@
+@use "govuk-frontend/dist/govuk" as *;
+
+@include govuk-exports("govuk-eleventy-plugin/component/prose-scope") {
+  .app-prose-scope {
+    @include govuk-responsive-margin(8, "bottom");
+
+    > *:first-child {
+      margin-top: 0;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+
+    h1 {
+      max-width: 15em;
+    }
+
+    h2 {
+      max-width: 20em;
+    }
+
+    h3 {
+      max-width: 30em;
+    }
+
+    h4,
+    h5,
+    h6,
+    p,
+    ul:not([class]),
+    ol,
+    img,
+    video {
+      max-width: 38em;
+    }
+
+    // Indicate abbreviations which have a title
+    abbr {
+      border-bottom: 1px dotted $govuk-secondary-text-colour;
+      cursor: help;
+    }
+
+    // Distinguish inserted text from that inside links
+    ins {
+      text-decoration-style: double;
+    }
+
+    // Use GOV.UK yellow colour for highlighted text
+    mark {
+      background-color: govuk-tint($govuk-focus-colour, 50%);
+    }
+
+    // Ensure sub- and superscript text doesn’t disrupt vertical rhythm
+    sub,
+    sup {
+      line-height: 0;
+      position: relative;
+      vertical-align: baseline;
+    }
+
+    sup {
+      top: -0.4em;
+    }
+
+    sub {
+      bottom: -0.4em;
+    }
+
+    img {
+      height: auto;
+      max-width: 100%;
+      width: auto;
+    }
+
+    figure {
+      @include govuk-responsive-margin(6, "bottom");
+      margin-left: 0;
+      margin-right: 0;
+      width: 100%;
+
+      // Show outline around linked images within figures
+      img {
+        display: block;
+        outline: 1px solid rgba($govuk-border-colour, 0.5);
+      }
+
+      > .govuk-link img {
+        &:hover {
+          outline-color: $govuk-link-hover-colour;
+        }
+
+        &:active {
+          outline-color: $govuk-link-active-colour;
+        }
+      }
+
+      :focus & {
+        background-color: $govuk-focus-colour;
+      }
+    }
+
+    figcaption {
+      @include govuk-font($size: 19);
+      color: $govuk-secondary-text-colour;
+      margin-top: govuk-spacing(1);
+    }
+
+    // Responsive tables
+    .govuk-table[tabindex] {
+      display: block;
+      overflow-x: auto;
+      scrollbar-color: $govuk-border-colour govuk-colour("light-grey");
+
+      &::-webkit-scrollbar {
+        height: govuk-spacing(1);
+        width: govuk-spacing(1);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: $govuk-border-colour;
+      }
+
+      &:focus {
+        box-shadow:
+          0 0 0 #{$govuk-focus-width * 3} govuk-colour("black"),
+          0 0 0 #{$govuk-focus-width * 4} $govuk-focus-colour;
+        outline: #{$govuk-focus-width * 2} solid govuk-colour("white");
+      }
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+        outline: none;
+      }
+
+      &:focus-visible {
+        box-shadow:
+          0 0 0 #{$govuk-focus-width * 3} govuk-colour("black"),
+          0 0 0 #{$govuk-focus-width * 4} $govuk-focus-colour;
+        outline: #{$govuk-focus-width * 2} solid govuk-colour("white");
+      }
+    }
+
+    // Reverse the colour of code that uses shell highlighting
+    .x-govuk-code__language--shell {
+      background-color: govuk-colour("black");
+      border: $govuk-focus-width solid govuk-colour("white");
+      -webkit-font-smoothing: auto;
+      margin-left: $govuk-focus-width * -1;
+      margin-right: $govuk-focus-width * -1;
+
+      code {
+        filter: invert(100%);
+      }
+    }
+  }
+}