@x-govuk/govuk-eleventy-plugin 7.0.1 → 7.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-govuk/govuk-eleventy-plugin",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "description": "Write documentation using Markdown and publish it using GOV.UK styles",
   "keywords": [
     "govuk",
@@ -34,6 +34,7 @@
     "build:example": "eleventy --config=example.config.js",
     "predev": "npm run build",
     "dev": "eleventy --serve --watch",
+    "dev:example": "eleventy --serve --watch --config=example.config.js",
     "start": "eleventy --serve",
     "lint:prettier": "prettier . --check",
     "lint:prettier:fix": "prettier . --write",
@@ -57,15 +58,15 @@
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@x-govuk/govuk-prototype-components": "^4.0.0",
+    "@x-govuk/govuk-prototype-components": "^5.0.0",
     "deepmerge": "^4.2.2",
-    "govuk-frontend": "^5.6.0",
-    "luxon": "^3.0.1",
+    "govuk-frontend": "^5.11.0",
     "markdown-it-abbr": "^2.0.0",
     "markdown-it-anchor": "^9.0.0",
+    "markdown-it-attrs": "^4.3.1",
     "markdown-it-deflist": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
-    "markdown-it-govuk": "^0.5.0",
+    "markdown-it-govuk": "^0.6.0",
     "markdown-it-image-figures": "^2.0.0",
     "markdown-it-ins": "^4.0.0",
     "markdown-it-mark": "^4.0.0",

package/src/application.scss

@@ -1,9 +1,9 @@
-// GOV.UK Frontend components
+// Use GOV.UK Frontend
 @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
+// Use GOV.UK Eleventy Plugin components
 @forward "pkg:@x-govuk/govuk-eleventy-plugin";

package/src/components/_index.scss

@@ -1,6 +1,5 @@
 @forward "aside";
 @forward "contents-list";
-@forward "definition-list";
 @forward "document-header";
 @forward "document-list";
 @forward "footnotes-list";

package/src/components/aside/_index.scss

@@ -2,15 +2,17 @@
 
 @include govuk-exports("govuk-eleventy-plugin/component/aside") {
   .app-aside {
+    border-top: 2px solid $govuk-brand-colour;
+
     @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);
+
+    @include govuk-font(19, $weight: bold);
   }
 
   .app-aside__body {

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

@@ -6,20 +6,21 @@
   .app-contents-list {
     @include govuk-responsive-margin(8, "bottom");
 
-    ul {
+    ol {
       list-style-type: none;
       margin-top: 0;
       padding-left: 0;
     }
 
-    ul ul {
+    ol ol {
       margin-bottom: 0;
     }
 
     li {
+      padding-top: govuk-spacing(2);
+
       @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;
@@ -48,8 +49,9 @@
   }
 
   .app-contents-list__title {
+    margin: 0;
+
     @include govuk-text-colour;
     @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);
-    margin: 0;
   }
 }

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

@@ -2,9 +2,10 @@
 
 @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;
+
+    @include govuk-font($size: 16, $line-height: 1.5);
   }
 
   .app-document-header__description {

package/src/components/document-header/template.njk

@@ -30,10 +30,10 @@
         <span aria-hidden="true">&ensp;•&ensp;</span>
       {%- endif -%}
       {%- if params.date -%}
-        <span class="govuk-visually-hidden">Posted on </span><time datetime="{{ params.date | date }}">{{ params.date | date("d LLLL y") }}</time>
+        <span class="govuk-visually-hidden">Posted on </span><time datetime="{{ params.date | isoDate }}">{{ params.date | govukDate}}</time>
       {%- endif -%}
       {%- if params.modified -%}
-        <span aria-hidden="true">&ensp;•&ensp;</span>Last updated <time datetime="{{ params.modified | date }}">{{ params.modified | date("d LLLL y") }}</time>
+        <span aria-hidden="true">&ensp;•&ensp;</span>Last updated <time datetime="{{ params.modified | isoDate }}">{{ params.modified | govukDate }}</time>
       {%- endif -%}
       {%- if params.tags | length > 0 -%}
         <span aria-hidden="true">&ensp;•&ensp;</span>Tags:

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

@@ -14,8 +14,9 @@
   }
 
   .app-document-list__item-title {
-    @include govuk-font($size: 19, $weight: "bold");
     margin: 0 0 govuk-spacing(1);
+
+    @include govuk-font($size: 19, $weight: "bold");
   }
 
   .app-document-list__item-metadata {
@@ -24,16 +25,18 @@
   }
 
   .app-document-list__item-description {
-    @include govuk-font($size: 16);
     margin: govuk-spacing(1) 0;
+
+    @include govuk-font($size: 16);
   }
 
   .app-document-list__attribute {
-    @include govuk-font($size: 16);
     color: $govuk-secondary-text-colour;
     display: inline-block;
     margin: 0;
 
+    @include govuk-font($size: 16);
+
     & + .app-document-list__attribute::before {
       content: "\2002•\2002";
     }

package/src/components/document-list/template.njk

@@ -16,7 +16,7 @@
       <ul class="app-document-list__item-metadata">
         {% if item.data.date %}
         <li class="app-document-list__attribute">
-          <time datetime="{{ item.date | date }}">{{ item.date | date("d LLLL y") }}</time>
+          <time datetime="{{ item.date | isoDate }}">{{ item.date | govukDate }}</time>
         </li>
         {% endif %}
         {% if item.data.tags %}

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

@@ -19,11 +19,12 @@
 
   // Footnotes
   .app-footnotes-list {
-    @include govuk-font($size: 19);
     counter-reset: footnotes;
     list-style-type: none;
     padding-left: 0;
 
+    @include govuk-font($size: 19);
+
     li {
       counter-increment: footnotes;
       padding: govuk-spacing(3);
@@ -32,17 +33,19 @@
     }
 
     li::before {
-      @include govuk-font(19, $tabular: true);
       content: counter(footnotes) ".";
       left: govuk-spacing(4);
       position: absolute;
+
+      @include govuk-font(19, $tabular: true);
     }
 
     a[aria-label="Back to content"] {
-      @include govuk-link-style-no-visited-state;
       position: relative;
       text-underline-offset: 0;
       top: 2px;
+
+      @include govuk-link-style-no-visited-state;
     }
 
     :target {

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

@@ -35,12 +35,6 @@
       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;
@@ -67,18 +61,21 @@
       bottom: -0.4em;
     }
 
-    img {
+    iframe,
+    img,
+    video {
       height: auto;
       max-width: 100%;
       width: auto;
     }
 
     figure {
-      @include govuk-responsive-margin(6, "bottom");
       margin-left: 0;
       margin-right: 0;
       width: 100%;
 
+      @include govuk-responsive-margin(6, "bottom");
+
       // Show outline around linked images within figures
       img {
         display: block;
@@ -101,9 +98,10 @@
     }
 
     figcaption {
-      @include govuk-font($size: 19);
       color: $govuk-secondary-text-colour;
       margin-top: govuk-spacing(1);
+
+      @include govuk-font($size: 19);
     }
 
     // Responsive tables
@@ -111,17 +109,10 @@
       display: block;
       overflow-x: auto;
       scrollbar-color: $govuk-border-colour govuk-colour("light-grey");
+      scrollbar-width: thin;
 
-      &::-webkit-scrollbar {
-        height: govuk-spacing(1);
-        width: govuk-spacing(1);
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: $govuk-border-colour;
-      }
-
-      &:focus {
+      &:focus,
+      &:focus-visible {
         box-shadow:
           0 0 0 #{$govuk-focus-width * 3} govuk-colour("black"),
           0 0 0 #{$govuk-focus-width * 4} $govuk-focus-colour;
@@ -132,17 +123,10 @@
         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 {
+    .app-code__language--shell {
       background-color: govuk-colour("black");
       border: $govuk-focus-width solid govuk-colour("white");
       -webkit-font-smoothing: auto;

package/src/components/service-navigation/template.njk

@@ -2,7 +2,7 @@
 {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
 
 {{ govukServiceNavigation({
-  classes: "app-service-navigation" + (" " + params.classes if params.classes),
+  classes: "app-service-navigation" + (" govuk-service-navigation--inverse" if inverseServiceNavigation) + (" " + params.classes if params.classes),
   attributes: params.attributes,
   ariaLabel: params.ariaLabel,
   menuButtonText: params.menuButtonText,

package/src/components/site-search/_index.scss

@@ -26,13 +26,13 @@ $_icon-size: 40px;
   }
 
   .app-site-search__link {
-    @include govuk-link-style-inverse;
-
     display: inline-block;
     padding-bottom: govuk-spacing(1);
     padding-top: govuk-spacing(1);
     text-decoration: none;
 
+    @include govuk-link-style-inverse;
+
     &:hover {
       text-decoration: underline;
       text-decoration-thickness: 3px;
@@ -44,24 +44,23 @@ $_icon-size: 40px;
   }
 
   .app-site-search__wrapper {
+    background-color: govuk-colour("white");
     display: block;
     position: relative;
 
-    .app-service-navigation & {
+    .govuk-service-navigation & {
       outline: 1px solid $govuk-border-colour;
     }
+
+    .govuk-service-navigation--inverse & {
+      outline: 1px solid transparent;
+    }
   }
 
   .app-site-search__hint,
   .app-site-search__input {
-    -webkit-appearance: none;
     appearance: none;
-    border: $govuk-border-width-form-element solid transparent;
-    border-radius: 0; // Safari 10 on iOS adds implicit border rounding.
-    box-sizing: border-box;
-    height: govuk-px-to-rem($_icon-size);
-    margin-bottom: 0; // BUG: Safari 10 on macOS seems to add an implicit margin.
-    padding: govuk-spacing(1);
+    border-color: transparent;
     padding-left: $_icon-size - govuk-spacing(1);
     width: 100%;
   }
@@ -72,6 +71,7 @@ $_icon-size: 40px;
   }
 
   .app-site-search__input {
+    background-color: transparent;
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'><path d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='%23505a5f'></path></svg>");
     background-position: center left -2px;
     background-repeat: no-repeat;
@@ -189,26 +189,9 @@ $_icon-size: 40px;
   }
 
   .app-site-search--section {
-    @include govuk-font($size: 16);
     color: $govuk-secondary-text-colour;
     display: block;
-  }
 
-  .app-site-search__aliases {
-    margin-left: govuk-spacing(1);
-
-    &::before {
-      content: "(";
-    }
-
-    &::after {
-      content: ")";
-    }
-  }
-
-  .app-site-search__separator {
-    display: inline-block;
-    margin-left: govuk-spacing(1);
-    margin-right: govuk-spacing(1);
+    @include govuk-font($size: 16);
   }
 }

package/src/components/site-search/site-search.js

@@ -1,4 +1,4 @@
-import accessibleAutocomplete from 'accessible-autocomplete/dist/accessible-autocomplete.min.js'
+import accessibleAutocomplete from 'accessible-autocomplete'
 
 export class SiteSearchElement extends HTMLElement {
   constructor() {
@@ -83,17 +83,17 @@ export class SiteSearchElement extends HTMLElement {
     return searchElement
   }
 
-  resultTemplate(result) {
+  suggestionTemplate(result) {
     if (result) {
       const element = document.createElement('span')
       element.textContent = result.title
 
-      if (result.hasFrontmatterDate || result.section) {
+      if (result.hasFrontMatterDate || result.section) {
         const section = document.createElement('span')
         section.className = 'app-site-search--section'
 
         section.innerHTML =
-          result.hasFrontmatterDate && result.section
+          result.hasFrontMatterDate && result.section
             ? `${result.section}<br>${result.date}`
             : result.section || result.date
 
@@ -119,6 +119,7 @@ export class SiteSearchElement extends HTMLElement {
     accessibleAutocomplete({
       element: search,
       id: this.searchInputId,
+      inputClasses: 'govuk-input',
       cssNamespace: 'app-site-search',
       displayMenu: 'overlay',
       minLength: 2,
@@ -129,7 +130,7 @@ export class SiteSearchElement extends HTMLElement {
       onConfirm: this.handleOnConfirm,
       templates: {
         inputValue: this.inputValueTemplate,
-        suggestion: this.resultTemplate
+        suggestion: this.suggestionTemplate
       },
       tNoResults: this.handleNoResults.bind(this)
     })

package/src/data/eleventy-computed.js

@@ -1,38 +1,4 @@
-/**
- * Get navigation key for page
- *
- * @param {object} data - Page data
- * @returns {string|undefined} Page navigation key
- */
-const getKey = (data) => {
-  const { homepage, eleventyExcludeFromCollections, eleventyNavigation } = data
-
-  if (homepage) {
-    // Use explicit navigation `key`, or `homeKey` set in plugin options
-    return eleventyNavigation.key || data.options.homeKey
-  } else if (!eleventyExcludeFromCollections) {
-    // Use explicit navigation `key`, or page title
-    return eleventyNavigation.key || data.title
-  }
-}
-
-/**
- * Get navigation parent for page
- *
- * @param {object} data - Page data
- * @returns {string|undefined} Parent page key
- */
-const getParent = (data) => {
-  const { homepage, eleventyExcludeFromCollections, eleventyNavigation } = data
-
-  if (homepage) {
-    // The homepage has no parent
-    return false
-  } else if (!eleventyExcludeFromCollections) {
-    // Use explicit navigation `parent`, or `homeKey` set in plugin options
-    return eleventyNavigation.parent || data.options.homeKey
-  }
-}
+import { getNavigationKey, getNavigationParent } from '../utils.js'
 
 /**
  * Set sensible defaults for eleventyNavigation
@@ -41,8 +7,8 @@ const getParent = (data) => {
  */
 export const eleventyComputed = {
   eleventyNavigation: {
-    key: (data) => getKey(data),
-    parent: (data) => getParent(data),
+    key: (data) => getNavigationKey(data),
+    parent: (data) => getNavigationParent(data),
     excerpt: (data) => data.eleventyNavigation.excerpt || data.description
   }
 }

package/src/data/options.js

@@ -16,6 +16,7 @@ const defaults = {
   },
   homeKey: 'Home',
   parentSite: false,
+  rebrand: true,
   stylesheets: [],
   titleSuffix: 'GOV.UK',
   url: false

package/src/events/generate-govuk-assets.js

@@ -48,7 +48,7 @@ export async function generateAssets(dir, options) {
       ]
     })
 
-    const { output } = await bundle.generate({ format: 'iife' })
+    const { output } = await bundle.generate({ format: 'es' })
     const { code } = output[0]
     fs.writeFile(jsFile, code)
   } catch (error) {

package/src/filters/date.js

@@ -1,32 +1,48 @@
-import { DateTime } from 'luxon'
+import { normalise } from '../utils.js'
 
 /**
- * Format a data using tokens
+ * Format ISO 8601 date string into a date with the GOV.UK style
  *
- * @param {string} string - Date to convert
- * @param {string} [format] - Optional token-based formatting
- * @returns {string} Formatted date
- * @example date('2022-03-16', 'yyyy') // 2022
+ * @param {string} string - Date
+ * @returns {string} `string` as a date with the GOV.UK style
  */
-export function date(string, format) {
-  // Enable special `now` value
-  const dateObject = string === 'now' ? DateTime.local().toJSDate() : string
-
-  // Convert dateObj to Luxon DateTime object, using UTC
-  // See: https://11ty.dev/docs/dates/#dates-off-by-one-day
-  let date = DateTime.fromJSDate(dateObject, {
-    locale: 'en-GB',
-    zone: 'utc'
-  })
-
-  if (format) {
-    // Format date if formatting tokens provided
-    // See: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
-    date = DateTime.fromISO(date).toFormat(format)
-  } else {
-    // Format date as ISO 8601
-    date = date.toISO()
+export function govukDate(string) {
+  string = normalise(string, '')
+
+  try {
+    const date = Date.parse(string)
+
+    // 2021-08-17 => 17 August 2021
+    const formattedDate = new Intl.DateTimeFormat('en-GB', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    }).format(date)
+
+    return formattedDate
+  } catch (error) {
+    return error.message.split(':')[0]
+  }
+}
+
+/**
+ * Format string into an ISO 8601 date
+ *
+ * @param {string} string - String
+ * @returns {string} ISO 8601 date
+ */
+export function isoDate(string) {
+  string = normalise(string, '')
+
+  if (!string) {
+    return
   }
 
-  return date
+  try {
+    const date = new Date(string)
+
+    return date.toISOString()
+  } catch (error) {
+    return error.message.split(':')[0]
+  }
 }

package/src/filters/index.js

@@ -1,5 +1,5 @@
 export { canonicalUrl } from './canonical-url.js'
-export { date } from './date.js'
+export { govukDate, isoDate } from './date.js'
 export {
   dateToRfc3339,
   getNewestCollectionItemDate
@@ -7,7 +7,6 @@ export {
 export { currentPage } from './current-page.js'
 export { includes } from './includes.js'
 export { sliceFromCollection } from './slice-from-collection.js'
-export { itemsFromCollection } from './items-from-collection.js'
 export { itemsFromNavigation } from './items-from-navigation.js'
 export { itemsFromPagination } from './items-from-pagination.js'
 export { markdown } from './markdown.js'

package/src/filters/items-from-navigation.js

@@ -7,12 +7,14 @@ import { smart } from './smart.js'
  * @param {Array} eleventyNavigation - Eleventy navigation data
  * @param {string} [pageUrl] - URL of current page
  * @param {object} [options] - Plugin options
+ * @param {boolean} [sort] - Sort navigation items
  * @returns {Array} `items` array
  */
 export function itemsFromNavigation(
   eleventyNavigation,
   pageUrl = false,
-  options = {}
+  options = {},
+  sort = false
 ) {
   const items = []
 
@@ -23,6 +25,8 @@ export function itemsFromNavigation(
       parent: pageUrl && pageUrl.startsWith(item.url),
       href: item.url,
       text: smart(item.title),
+      order: item.data?.order,
+      theme: item.data?.theme,
       children: item.children
         ? item.children.map((child) => ({
             current: pageUrl && child.url === pageUrl,
@@ -47,5 +51,23 @@ export function itemsFromNavigation(
     })
   }
 
+  if (sort) {
+    items.sort((a, b) => {
+      if (typeof a.order !== 'undefined' && typeof b.order !== 'undefined') {
+        // Sort by order value, if given
+        return (a.order || 0) - (b.order || 0)
+      }
+
+      // Sort by title
+      if (a.text < b.text) {
+        return -1
+      } else if (a.text > b.text) {
+        return 1
+      }
+
+      return 0
+    })
+  }
+
   return items
 }

package/src/filters/tokenize.js

@@ -12,18 +12,18 @@ export function tokenize(string) {
   content = content.toLowerCase()
 
   // Remove HTML elements
-  // Remove words with apostrophes (’)
-  // Remove ampersands (&), punctuation and newlines
-  // Remove short and less meaningful words
   let tokens = content.replace(
     /<script.*?<\/script>|<!--.*?-->|<style.*?<\/style>|<.*?>/g,
     ' '
   )
-  tokens = tokens.replace(/(?=\S*[’])([a-zA-Z’]+)/gi, '')
-  tokens = tokens.replace(
-    /\.\s|,|;|‘|“|”|\?|\(|\)|\[|\]|\/|-|–|§|&amp;|\n/g,
-    ' '
-  )
+
+  // Remove HTML entities
+  tokens = tokens.replace(/&[a-zA-Z0-9#]+;/gi, ' ')
+
+  // Remove special characters
+  tokens = tokens.replace(/[^0-9a-zA-Z]+/gi, ' ')
+
+  // Remove short and less meaningful words
   tokens = tokens.replace(
     /\b(the|a|an|and|am|you|I|to|if|of|off|me|my|on|in|it|is|at|as|we|do|be|has|but|was|so|no|not|or|up|for)\b/gi,
     ' '

package/src/layouts/base.njk

@@ -45,7 +45,7 @@
 {% endblock %}
 
 {% block head %}
-  <script src="/assets/application.js" type="module" defer></script>
+  <script src="/assets/application.js" type="module"></script>
 
   {% for stylesheet in options.stylesheets %}
   <link rel="stylesheet" href="{{ stylesheet | canonicalUrl }}">
@@ -58,8 +58,7 @@
   {% if options.url %}<meta property="og:url" content="{{ page.url | canonicalUrl }}">{% endif %}
   <meta property="og:title" content="{{ title }}">
   {% if description %}<meta property="og:description" name="description" content="{{ description | markdown("inline") | striptags(true) }}">{% endif %}
-  {% if opengraphImage %}<meta name="twitter:card" content="summary_large_image">{% endif %}
-  {% if opengraphImage.src %}<meta name="twitter:image" content="{{ opengraphImage.src | canonicalUrl }}">
+  {% if opengraphImage.src %}<meta name="og:image" content="{{ opengraphImage.src | canonicalUrl }}">
   {% endif %}
   {% if opengraphImage.alt %}<meta property="og:image:alt" content="{{ opengraphImage.alt }}">{% endif %}
 {% endblock %}

package/src/layouts/product.njk

@@ -1,22 +1,19 @@
 {% extends "layouts/base.njk" %}
 
+{% set inverseServiceNavigation = true %}
+
 {% block main %}
   <main id="main-content" role="main" {%- if mainLang %} lang="{{ mainLang }}"{% endif %}>
     {{ xGovukMasthead({
+      inverse: true,
       title: {
         html: title | smart
       } if title,
       description: {
         html: description | markdown("inline") | noOrphans
       } if description,
-      startButton: {
-        href: startButton.href,
-        text: startButton.text
-      } if startButton,
-      image: {
-        alt: image.alt,
-        src: image.src
-      } if image,
+      startButton: startButton,
+      image: image,
       breadcrumbs: {
         classes: "govuk-!-display-none-print",
         items: breadcrumbItems

package/src/layouts/search-index.njk

@@ -2,10 +2,10 @@
   {
     "title": {{ item.data.title | default("") | dump | safe }},
     {% if item.data.description %}"description": {{ item.data.description | dump | safe }},{% endif %}
-    {% if item.data.eleventyNavigation.parent %}"section": {{ item.data.eleventyNavigation.parent | dump | safe }},{% endif %}
+    {% if item.data.eleventyNavigation.parent and item.data.eleventyNavigation.parent != item.data.options.homeKey %}"section": {{ item.data.eleventyNavigation.parent | dump | safe }},{% endif %}
     "layout": {{ item.data.layout | default("") | dump | safe }},
-    "hasFrontmatterDate": {{ item.data.date !== undefined }},
-    "date": {{ item.date | date("d LLLL y") | default("") | dump | safe }},
+    "hasFrontMatterDate": {{ item.data.date !== undefined }},
+    "date": {{ item.date | govukDate | default("") | dump | safe }},
     "templateContent": {{ item.templateContent | tokenize | default([]) | dump | safe }},
     "url": {{ item.url | canonicalUrl | pretty | default("") | dump | safe }}
   }{% if not loop.last %},{% endif %}

package/src/layouts/sub-navigation.njk

@@ -11,7 +11,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-one-quarter-from-desktop">
       {{ xGovukSubNavigation({
-        items: collections.navigation | eleventyNavigation(sectionKey or options.homeKey) | itemsFromNavigation(page.url, { pathPrefix: options.pathPrefix })
+        items: collections.navigation | eleventyNavigation(sectionKey or options.homeKey) | itemsFromNavigation(page.url, { pathPrefix: options.pathPrefix }, true)
       }) }}
     </div>
     <div class="govuk-grid-column-three-quarters-from-desktop">

package/src/layouts/tags.njk

@@ -14,6 +14,7 @@
       title: title or "Tags"
     }) }}
 
+    {% if collections.tags | length > 0 %}
     <ul class="govuk-list govuk-list--bullet">
       {% for tag in collections.tags %}
       <li>
@@ -22,6 +23,9 @@
       </li>
       {% endfor %}
     </ul>
+    {% else %}
+    <p class="govuk-body">No tags found.</p>
+    {% endif %}
   </div>
 </div>
 {% endblock %}

package/src/markdown-it/deflist.js

@@ -6,5 +6,11 @@
 export function defListRules(md) {
   const { rules } = md.renderer
 
-  rules.dl_open = () => '<dl class="app-definition-list">\n'
+  rules.dl_open = () => '<dl class="govuk-body">\n'
+
+  rules.dt_open = () =>
+    '<dt class="govuk-!-font-weight-bold govuk-!-margin-bottom-2">\n'
+
+  rules.dd_open = () =>
+    '<dd class="govuk-!-margin-bottom-2 govuk-!-margin-left-4">\n'
 }

package/src/markdown-it.js

@@ -2,6 +2,7 @@ import slugify from '@sindresorhus/slugify'
 import MarkdownIt from 'markdown-it'
 import markdownItAbbr from 'markdown-it-abbr'
 import markdownItAnchor from 'markdown-it-anchor'
+import markdownItAttrs from 'markdown-it-attrs'
 import markdownItDeflist from 'markdown-it-deflist'
 import markdownItFootnote from 'markdown-it-footnote'
 import markdownItGovuk from 'markdown-it-govuk'
@@ -15,7 +16,6 @@ import markdownItTableOfContents from 'markdown-it-table-of-contents'
 
 import { defListRules } from './markdown-it/deflist.js'
 import { footnotesRules } from './markdown-it/footnote.js'
-import { tableOfContentsRules } from './markdown-it/table-of-contents.js'
 import { tableRules } from './markdown-it/table.js'
 
 /**
@@ -49,6 +49,7 @@ export function md(options = {}) {
         : false,
       slugify: (string) => slugify(string).replaceAll(/[*+~.()'"!:@]/g, '')
     })
+    .use(markdownItAttrs)
     .use(markdownItDeflist)
     .use(defListRules)
     .use(markdownItFootnote)
@@ -62,9 +63,15 @@ export function md(options = {}) {
     .use(markdownItSup)
     .use(tableRules)
     .use(markdownItTableOfContents, {
-      includeLevel: [2, 3]
+      includeLevel: [2, 3],
+      listType: 'ol',
+      transformContainerOpen: () => {
+        return '<nav class="app-contents-list"><h2 class="app-contents-list__title">Contents</h2>'
+      },
+      transformContainerClose: () => {
+        return '</nav>'
+      }
     })
-    .use(tableOfContentsRules)
 
   return md
 }

package/src/utils.js

@@ -27,6 +27,42 @@ export const layoutNames = [
   'tags'
 ]
 
+/**
+ * Get navigation key for page
+ *
+ * @param {object} data - Page data
+ * @returns {string|undefined} Page navigation key
+ */
+export const getNavigationKey = (data) => {
+  const { homepage, eleventyExcludeFromCollections, eleventyNavigation } = data
+
+  if (homepage) {
+    // Use explicit navigation `key`, or `homeKey` set in plugin options
+    return eleventyNavigation.key || data.options.homeKey
+  } else if (!eleventyExcludeFromCollections) {
+    // Use explicit navigation `key`, or page title
+    return eleventyNavigation.key || data.title
+  }
+}
+
+/**
+ * Get navigation parent for page
+ *
+ * @param {object} data - Page data
+ * @returns {string|undefined} Parent page key
+ */
+export const getNavigationParent = (data) => {
+  const { homepage, eleventyExcludeFromCollections, eleventyNavigation } = data
+
+  if (homepage) {
+    // The homepage has no parent
+    return false
+  } else if (!eleventyExcludeFromCollections) {
+    // Use explicit navigation `parent`, or `homeKey` set in plugin options
+    return eleventyNavigation.parent || data.options.homeKey
+  }
+}
+
 /**
  * Get virtual templates
  * Uses users own named layout if exists, else provides a virtual template

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

@@ -1,19 +0,0 @@
-@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/filters/items-from-collection.js

@@ -1,15 +0,0 @@
-import { smart } from './smart.js'
-
-/**
- * Transform list of posts in a collection to `items` array that can be
- * consumed by GOV.UK Frontend components
- *
- * @param {Array} array - Eleventy collection data
- * @returns {Array} `items` array
- */
-export function itemsFromCollection(array) {
-  return array.map((item) => ({
-    text: smart(item.data.title),
-    href: item.data.url
-  }))
-}

package/src/markdown-it/table-of-contents.js

@@ -1,14 +0,0 @@
-/**
- * Render a table of contents
- *
- * @param {Function} md - markdown-it instance
- */
-export function tableOfContentsRules(md) {
-  const { rules } = md.renderer
-
-  rules.toc_open =
-    () => `<nav class="app-contents-list" aria-label="Contents" role="navigation">
-    <h2 class="app-contents-list__title">Contents</h2>\n`
-
-  rules.toc_close = () => '</nav>'
-}