@x-govuk/nhsuk-eleventy-plugin 1.0.0

package/src/components/metadata/template.njk

@@ -0,0 +1,50 @@
+{%- macro _authorLink(author) -%}
+  {%- if author.url -%}
+    <a class="nhsuk-link" href="{{ author.url }}">{{ author.name }}</a>
+  {%- else -%}
+    {{- author.name or author -}}
+  {%- endif -%}
+{% endmacro -%}
+
+<dl class="app-metadata nhsuk-u-reading-width">
+  {% if params.author %}
+  <div class="app-metadata__item">
+    <dt class="app-metadata__term">Posted by</dt>
+    <dd class="app-metadata__definition">
+    {%- if params.author is string or params.author is mapping -%}
+      {{- _authorLink(params.author) -}}
+    {%- else -%}
+      {%- for author in params.author -%}
+        {{- " and " if loop.last and loop.length > 1 else (", " if not loop.first) -}}
+        {{- _authorLink(author) -}}
+      {%- endfor -%}
+    {%- endif -%}
+    </dd>
+  </div>
+  {% endif %}
+  {% if params.date %}
+  <div class="app-metadata__item">
+    <dt class="app-metadata__term">Published</dt>
+    <dd class="app-metadata__definition">
+      <time datetime="{{ params.date | isoDate }}">{{ params.date | nhsukDate }}</time>
+    </dd>
+  </div>
+  {% endif %}
+  {% if params.modified %}
+  <div class="app-metadata__item">
+    <dt class="app-metadata__term">Last updated</dt>
+    <dd class="app-metadata__definition">
+      <time datetime="{{ params.modified | isoDate }}">{{ params.modified | nhsukDate }}</time>
+    </dd>
+  </div>
+  {% endif %}
+  {% if params.tags | length > 0 %}
+  <div class="app-metadata__item">
+    <dt class="app-metadata__term">Tagged</dt>
+    <dd class="app-metadata__definition">{% for tag in params.tags -%}
+      <a href="/tags/{{ tag | slug }}" class="nhsuk-link">{{ tag }}</a>
+      {%- if not loop.last %}, {% endif -%}
+    {%- endfor %}</dd>
+  </div>
+  {% endif %}
+</dl>

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

@@ -0,0 +1,72 @@
+@use "../../vendor/nhsuk-frontend" as *;
+
+@include nhsuk-exports("nhsuk-eleventy-plugin/components/prose-scope") {
+  .app-prose-scope {
+    @include nhsuk-responsive-margin(7, "bottom");
+
+    // Distinguish inserted text from that inside links
+    ins {
+      text-decoration-style: double;
+    }
+
+    // Use NHS.UK pale yellow colour for highlighted text
+    mark {
+      background-color: nhsuk-colour("pale-yellow");
+    }
+
+    // Use sensible defaults for embedded media
+    iframe,
+    img,
+    video {
+      height: auto;
+      max-width: 100%;
+      width: auto;
+    }
+
+    a:focus > img {
+      @include nhsuk-focused-box;
+    }
+
+    // Heading anchor
+    [class^="nhsuk-heading"][tabindex] {
+      outline: none;
+    }
+
+    [class^="nhsuk-heading"][tabindex] .nhsuk-link {
+      text-decoration: none;
+
+      @include nhsuk-link-style-text;
+
+      &:hover::after,
+      :target &::after {
+        color: nhsuk-colour("grey-1");
+        content: "#";
+        font-variant: all-small-caps;
+        font-weight: normal;
+        margin-left: nhsuk-spacing(1);
+        opacity: 0.5;
+      }
+    }
+
+    // Responsive table
+    .nhsuk-table[tabindex] {
+      display: block;
+      overflow-x: auto;
+      scrollbar-color: nhsuk-colour("grey-1") $nhsuk-border-colour;
+      scrollbar-width: thin;
+
+      &:focus,
+      &:focus-visible {
+        box-shadow:
+          0 0 0 #{$nhsuk-focus-width * 3} nhsuk-colour("black"),
+          0 0 0 #{$nhsuk-focus-width * 4} $nhsuk-focus-colour;
+        outline: #{$nhsuk-focus-width * 2} solid nhsuk-colour("grey-5");
+      }
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+        outline: none;
+      }
+    }
+  }
+}

package/src/components/prose-scope/macro.njk

@@ -0,0 +1,3 @@
+{% macro appProseScope(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/src/components/prose-scope/template.njk

@@ -0,0 +1,4 @@
+<div class="app-prose-scope nhsuk-u-reading-width">
+  {{- params if params -}}
+  {{- caller() if caller -}}
+</div>

package/src/components/related/_index.scss

@@ -0,0 +1,10 @@
+@use "../../vendor/nhsuk-frontend" as *;
+
+@include nhsuk-exports("nhsuk-eleventy-plugin/components/related") {
+  .app-related {
+    border-top: 1px solid $nhsuk-border-colour;
+
+    @include nhsuk-responsive-margin(7, "bottom");
+    @include nhsuk-responsive-padding(4, "top");
+  }
+}

package/src/components/related/macro.njk

@@ -0,0 +1,3 @@
+{% macro appRelated(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/src/components/related/template.njk

@@ -0,0 +1,17 @@
+<aside class="app-related{% if layout == "collection" or layout == "page" or layout == "post" or layout == "sub-navigation" %} nhsuk-u-reading-width{% endif %}">
+{% for related in ([params] if params is mapping else params) %}
+  <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">
+    {{- related.title or "Related" -}}
+  </h2>
+  {{ related.description | markdown if related.description }}
+  {% if related.items %}
+  <ul class="nhsuk-list">
+  {% for item in related.items %}
+    <li>
+      <a class="nhsuk-link" href="{{ item.href }}">{{ item.text }}</a>
+    </li>
+  {% endfor %}
+  </ul>
+  {% endif %}
+{% endfor %}
+</aside>

package/src/components/search/_index.scss

@@ -0,0 +1,120 @@
+@use "../../vendor/nhsuk-frontend" as *;
+
+// Site search using Accessible autocomplete
+// Styles below are based on the default accessible autocomplete style sheet
+
+$_icon-size: 28px;
+$_input-padding-right: nhsuk-px-to-rem(12px + $_icon-size);
+
+@include nhsuk-exports("nhsuk-eleventy-plugin/components/search") {
+  .nhsuk-header__search-form[hidden] {
+    display: none;
+  }
+
+  .app-search__wrapper {
+    background-color: $nhsuk-input-background-colour;
+    border-radius: $nhsuk-border-radius;
+    min-width: 260px;
+    position: relative;
+  }
+
+  .nhsuk-header__search-input.app-search__hint,
+  .nhsuk-header__search-input.app-search__input {
+    background-color: transparent;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z' fill='%23#{str-slice(#{$nhsuk-brand-colour}, 2)}'/></svg>");
+    background-position: top nhsuk-px-to-rem(4px) right nhsuk-px-to-rem(7px);
+    background-repeat: no-repeat;
+    background-size: nhsuk-px-to-rem($_icon-size);
+    border-radius: $nhsuk-border-radius;
+    padding-right: $_input-padding-right;
+    width: 100%;
+
+    &:focus {
+      background-position: top nhsuk-px-to-rem(3px) right nhsuk-px-to-rem(6px);
+      padding-right: $_input-padding-right;
+    }
+  }
+
+  .nhsuk-header__search-input.app-search__hint {
+    color: nhsuk-colour("grey-2");
+    position: absolute;
+  }
+
+  .app-search__menu {
+    background-color: nhsuk-colour("white");
+    border-radius: $nhsuk-border-radius;
+    color: $nhsuk-text-colour;
+    margin: 0;
+    max-height: 560px;
+    overflow-x: hidden;
+    padding: 0;
+    width: 100%;
+  }
+
+  .app-search__menu--visible {
+    display: block;
+  }
+
+  .app-search__menu--hidden {
+    display: none;
+  }
+
+  .app-search__menu--overlay {
+    box-shadow: 0 0 3px 0 rgba(nhsuk-colour("grey-1"), 0.5);
+    left: 0;
+    position: absolute;
+    top: 100%;
+    z-index: 100;
+  }
+
+  .app-search__option {
+    border-bottom: 1px solid nhsuk-colour("grey-5");
+    color: $nhsuk-secondary-text-colour;
+    cursor: pointer;
+    display: block;
+    margin: 0;
+    padding: nhsuk-spacing(3);
+    position: relative;
+
+    @include nhsuk-font($size: 16);
+
+    & > * {
+      pointer-events: none;
+    }
+  }
+
+  // Add a transparent outline for when users change their colours.
+  .app-search__option--focused {
+    border-bottom-color: transparent;
+    outline: $nhsuk-focus-width solid transparent;
+    outline-offset: -$nhsuk-focus-width;
+
+    @include nhsuk-focused-text;
+  }
+
+  .app-search__option--no-results {
+    cursor: default;
+  }
+
+  .app-search__option-title {
+    text-decoration: underline;
+
+    @include nhsuk-link-style-default;
+
+    .app-search__option:hover & {
+      text-decoration: none;
+
+      @include nhsuk-link-style-hover;
+    }
+
+    .app-search__option--focused & {
+      color: $nhsuk-focus-text-colour;
+      text-decoration: none;
+    }
+  }
+
+  .app-search__option-title,
+  .app-search__option-metadata {
+    display: block;
+  }
+}

package/src/components/search/search.js

@@ -0,0 +1,133 @@
+import accessibleAutocomplete from 'accessible-autocomplete'
+
+export class SearchElement extends HTMLElement {
+  constructor() {
+    super()
+
+    this.statusMessage = null
+    this.$container = this.querySelector('.nhsuk-header__search')
+    this.$searchForm = this.querySelector('.nhsuk-header__search-form')
+    this.$searchInput = this.querySelector('.nhsuk-header__search-input')
+    this.searchIndex = null
+    this.searchIndexUrl = this.getAttribute('index')
+    this.searchResults = []
+    this.searchTimeout = 10
+  }
+
+  async fetchSearchIndex(indexUrl) {
+    this.statusMessage = 'Loading search index'
+
+    try {
+      const response = await fetch(indexUrl, {
+        signal: AbortSignal.timeout(this.searchTimeout * 1000)
+      })
+
+      if (!response.ok) {
+        throw Error('Search index not found')
+      }
+
+      const json = await response.json()
+      this.statusMessage = 'No results found'
+      this.searchIndex = json
+    } catch (error) {
+      this.statusMessage = 'Failed to load search index'
+      console.error(this.statusMessage, error.message)
+    }
+  }
+
+  findResults(searchQuery, searchIndex) {
+    return searchIndex.filter((item) => {
+      const regex = new RegExp(searchQuery, 'gi')
+      return (
+        item?.title?.match(regex) ||
+        item?.description?.match(regex) ||
+        item?.tokens?.match(regex)
+      )
+    })
+  }
+
+  renderResults(query, populateResults) {
+    if (!this.searchIndex) {
+      return populateResults(this.searchResults)
+    }
+
+    this.searchResults = this.findResults(query, this.searchIndex).reverse()
+
+    populateResults(this.searchResults)
+  }
+
+  handleOnConfirm(result) {
+    const path = result.url
+    if (!path) {
+      return
+    }
+
+    window.location.href = path
+  }
+
+  handleNoResults() {
+    return this.statusMessage
+  }
+
+  inputValueTemplate(result) {
+    if (result) {
+      return result.title
+    }
+  }
+
+  suggestionTemplate(result) {
+    if (result) {
+      const container = document.createElement('span')
+
+      // Add title of result to container
+      const title = document.createElement('span')
+      title.className = 'app-search__option-title'
+      title.textContent = result.title
+
+      container.appendChild(title)
+
+      // Add section and/or data to container
+      if (result.date || result.section) {
+        const section = document.createElement('span')
+        section.className = 'app-search__option-metadata'
+
+        section.innerHTML =
+          result.date && result.section
+            ? `${result.section}<br>${result.date}`
+            : result.section || result.date
+
+        container.appendChild(section)
+      }
+
+      return container.innerHTML
+    }
+  }
+
+  async connectedCallback() {
+    if (!this.searchIndexUrl) {
+      return
+    }
+
+    await this.fetchSearchIndex(this.searchIndexUrl)
+
+    this.$searchForm.hidden = true
+
+    return accessibleAutocomplete({
+      element: this.$container,
+      id: this.$searchInput.id,
+      cssNamespace: 'app-search',
+      inputClasses: 'nhsuk-header__search-input nhsuk-input',
+      displayMenu: 'overlay',
+      minLength: 2,
+      confirmOnBlur: false,
+      placeholder: this.$searchInput.placeholder,
+      source: this.renderResults.bind(this),
+      onConfirm: this.handleOnConfirm,
+      templates: {
+        inputValue: this.inputValueTemplate,
+        suggestion: (value) => this.suggestionTemplate(value)
+      },
+      tNoResults: this.handleNoResults.bind(this)
+    })
+  }
+}

package/src/components/sub-navigation/_index.scss

@@ -0,0 +1,71 @@
+@use "../../vendor/nhsuk-frontend" as *;
+
+@include nhsuk-exports("nhsuk-eleventy-plugin/components/sub-navigation") {
+  .app-sub-navigation {
+    @include nhsuk-responsive-margin(7, "bottom");
+  }
+
+  .app-sub-navigation__heading {
+    color: $nhsuk-secondary-text-colour;
+    margin-bottom: 12px;
+    padding-top: nhsuk-spacing(1);
+
+    @include nhsuk-font(19, $line-height: 1.25, $weight: bold);
+  }
+
+  .app-sub-navigation__list {
+    @include nhsuk-font(16, $line-height: 1.25);
+    @include nhsuk-responsive-margin(4, "bottom");
+  }
+
+  .app-sub-navigation__item {
+    padding-bottom: nhsuk-spacing(1);
+    padding-top: nhsuk-spacing(1);
+  }
+
+  .app-sub-navigation__item--current {
+    border-left: $nhsuk-border-width solid $nhsuk-brand-colour;
+    margin-left: #{$nhsuk-gutter-half * -1};
+    padding-left: #{$nhsuk-gutter-half - $nhsuk-border-width};
+
+    .app-sub-navigation__link {
+      font-weight: $nhsuk-font-bold;
+    }
+  }
+
+  .app-sub-navigation__link {
+    @include nhsuk-link-style-default;
+    @include nhsuk-link-style-no-visited-state;
+
+    &:link {
+      text-decoration: none;
+    }
+  }
+
+  .app-sub-navigation__list--nested {
+    @include nhsuk-responsive-margin(2, "bottom");
+    @include nhsuk-responsive-margin(3, "top");
+
+    .app-sub-navigation__item {
+      display: flex;
+      gap: nhsuk-spacing(1);
+      list-style: none;
+
+      @include nhsuk-font(16, $line-height: 1.3);
+
+      &::before {
+        color: nhsuk-colour("grey-3");
+        content: "—";
+        margin-left: nhsuk-spacing(-3);
+      }
+    }
+
+    .app-sub-navigation__link {
+      font-weight: 400;
+    }
+  }
+
+  .app-sub-navigation__link[aria-current] {
+    font-weight: bold;
+  }
+}

package/src/components/sub-navigation/macro.njk

@@ -0,0 +1,3 @@
+{% macro appSubNavigation(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

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

@@ -0,0 +1,27 @@
+<nav class="app-sub-navigation{%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="sub-navigation-heading"
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{value}}"{% endfor %}>
+  <h2 class="nhsuk-u-visually-hidden" id="sub-navigation-heading">{{ params.visuallyHiddenTitle or "Pages in this section" }}</h2>
+{% for theme, items in params.items | groupby("theme") %}
+  {% if theme != "undefined" %}
+  <h3 class="app-sub-navigation__heading">{{ theme }}</h3>
+  {% endif %}
+  <ul class="nhsuk-list app-sub-navigation__list">
+  {% for item in items %}
+    {% if item %}
+    <li class="app-sub-navigation__item{% if item.parent or item.current %} app-sub-navigation__item--current{% endif %}">
+      <a class="app-sub-navigation__link" href="{{ item.href }}"{% if item.current %} aria-current="true"{% endif %}>{{ item.text }}</a>
+      {% if item.parent and item.children | length > 0 %}
+      <ul class="app-sub-navigation__list--nested">
+      {% for child in item.children %}
+        <li class="app-sub-navigation__item">
+          <a class="app-sub-navigation__link" href="{{ child.href }}"{% if child.current %} aria-current="true"{% endif %}>{{ child.text }}</a>
+        </li>
+      {% endfor %}
+      </ul>
+      {% endif %}
+    </li>
+    {% endif %}
+  {% endfor %}
+  </ul>
+{% endfor %}
+</nav>

package/src/data/eleventy-computed.js

@@ -0,0 +1,17 @@
+import {
+  getNavigationKey,
+  getNavigationParent
+} from '@x-govuk/govuk-eleventy-plugin/utils'
+
+/**
+ * Set sensible defaults for eleventyNavigation
+ *
+ * @see {@link https://www.11ty.dev/docs/plugins/navigation/}
+ */
+export const eleventyComputed = {
+  eleventyNavigation: {
+    key: (data) => getNavigationKey(data),
+    parent: (data) => getNavigationParent(data),
+    excerpt: (data) => data.eleventyNavigation.excerpt || data.description
+  }
+}

package/src/data/options.js

@@ -0,0 +1,49 @@
+import deepmerge from 'deepmerge'
+
+/**
+ * Default option values
+ *
+ * @see {@link https://x-govuk.github.io/nhsuk-eleventy-plugin/options/}
+ */
+const defaults = {
+  homeKey: 'Home',
+  icons: {
+    mask: '/assets/favicons/favicon.svg',
+    shortcut: '/assets/favicons/favicon.ico',
+    touch: '/assets/favicons/apple-touch-icon.png'
+  },
+  stylesheets: [],
+  titleSuffix: 'NHS',
+  url: false,
+  templates: {
+    error404: true,
+    sitemap: true // Linked to from default 404 page
+  }
+}
+
+export function defaultPluginOptions(options, pathPrefix) {
+  options.pathPrefix = pathPrefix
+
+  // Let `true` mean the default title suffix (`true` is rendered as a string)
+  if (options.titleSuffix === true) {
+    delete options.titleSuffix
+  }
+
+  if (options.templates?.searchIndex) {
+    // Enable search in header
+    if (options.header) {
+      options.header.search = options.header?.search || true
+    }
+
+    // Add _searchIndexPath to enable search field to be initialised
+    options._searchIndexPath =
+      options.templates?.searchIndex?.permalink || '/search-index.json'
+  }
+
+  if (options.templates?.feed) {
+    // Add _feedPath to enable feed to be linked to from page head
+    options._feedPath = options.templates?.feed?.permalink || '/feed.xml'
+  }
+
+  return deepmerge(defaults, options)
+}

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

@@ -0,0 +1,57 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+
+import commonJs from '@rollup/plugin-commonjs'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import terser from '@rollup/plugin-terser'
+import { rollup } from 'rollup'
+import * as sass from 'sass'
+
+/**
+ * Generate NHS.UK Frontend assets
+ *
+ * @param {object} dir - Project directories
+ * @param {object} options - Plugin options
+ * @returns {Function} Eleventy event
+ */
+export async function generateAssets(dir, options) {
+  // Generate default CSS
+  // Ignored if custom stylesheets are used
+  if (options.stylesheets.length === 0) {
+    const inputFilePath = path.join(import.meta.dirname, '../application.scss')
+    const inputFile = await fs.readFile(inputFilePath)
+    const outputFile = `${dir.output}/assets/application.css`
+
+    try {
+      const result = sass.compileString(inputFile.toString(), {
+        importers: [new sass.NodePackageImporter()], // Imports with `pkg:`
+        loadPaths: ['./node_modules', '.'], // Imports without `pkg:`
+        quietDeps: true,
+        style: 'compressed'
+      })
+      fs.writeFile(outputFile, result.css)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // Bundle JavaScript
+  try {
+    const jsFile = `${dir.output}/assets/application.js`
+    const bundle = await rollup({
+      input: path.join(import.meta.dirname, '../application.js'),
+      context: 'window',
+      plugins: [
+        nodeResolve(),
+        commonJs(),
+        terser({ format: { comments: false } })
+      ]
+    })
+
+    const { output } = await bundle.generate({ format: 'es' })
+    const { code } = output[0]
+    fs.writeFile(jsFile, code)
+  } catch (error) {
+    console.error(error)
+  }
+}

package/src/filters/current-page.js

@@ -0,0 +1,18 @@
+import { currentPage as getCurrentPage } from '@x-govuk/govuk-eleventy-plugin/filters'
+
+/**
+ * Indicate which is the current item in header navigation items
+ *
+ * @param {object} header - Header options
+ * @param {string} pageUrl - URL of current page
+ * @returns {Array} Header items
+ */
+export function currentPage(header, pageUrl) {
+  if (!header?.navigation?.items) {
+    return header
+  }
+
+  header.navigation.items = getCurrentPage(header.navigation.items, pageUrl)
+
+  return header
+}

package/src/filters/index.js

@@ -0,0 +1,21 @@
+export {
+  canonicalUrl,
+  govukDate, // Used by page templates in govuk-eleventy-plugin
+  govukDate as nhsukDate,
+  isoDate,
+  dateToRfc3339,
+  getNewestCollectionItemDate,
+  getNextNavigationItem,
+  getPreviousNavigationItem,
+  includes,
+  itemsFromNavigation,
+  itemsFromPagination,
+  noOrphans,
+  pretty,
+  sliceFromCollection,
+  smart,
+  tokenize
+} from '@x-govuk/govuk-eleventy-plugin/filters'
+export { currentPage } from './current-page.js'
+export { itemsFromCollection } from './items-from-collection.js'
+export { markdown } from './markdown.js'