@x-govuk/nhsuk-eleventy-plugin 1.0.0

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

@@ -0,0 +1,73 @@
+import {
+  isoDate,
+  markdown,
+  nhsukDate,
+  sliceFromCollection,
+  smart
+} from './index.js'
+
+function isCollectionData(array) {
+  if (!Array.isArray(array) || array.length === 0) {
+    return false
+  }
+
+  return array.every((item) => {
+    return (
+      typeof item === 'object' &&
+      item !== null &&
+      Object.prototype.hasOwnProperty.call(item, 'content') &&
+      Object.prototype.hasOwnProperty.call(item, 'data') &&
+      Object.prototype.hasOwnProperty.call(item, 'page') &&
+      Object.prototype.hasOwnProperty.call(item, 'rawInput')
+    )
+  })
+}
+
+function getDescriptionHtml(item) {
+  let html = ''
+
+  if (item.date) {
+    const classes = item.description
+      ? 'nhsuk-body-s nhsuk-u-margin-bottom-2'
+      : 'nhsuk-body-s'
+
+    html += `<p class="${classes}"><time class="nhsuk-u-secondary-text-colour" datetime="${isoDate(item.date)}">${nhsukDate(item.date)}</time></p>`
+  }
+
+  if (item.description) {
+    html += `<p class="nhsuk-card__description">${markdown(item.description, 'inline')}</p>`
+  }
+
+  return html
+}
+
+/**
+ * Transform list of posts (that may be in a collection) to `items` array that * can be consumed by NHS.UK Frontend card components
+ *
+ * @param {Array} array - Eleventy collection data
+ * @param {number} [n] - Number of items to slice from collection
+ * @returns {Array<object>} `items` array
+ */
+export function itemsFromCollection(array, n) {
+  if (isCollectionData(array)) {
+    array = array.map((item) => {
+      return {
+        href: item.url,
+        date: item.data.date,
+        title: item.data.title,
+        description: item.data.description,
+        image: item.data.image
+      }
+    })
+  }
+
+  array = array.map((item) => ({
+    href: item.href,
+    heading: smart(item.title),
+    descriptionHtml: getDescriptionHtml(item),
+    ...(item.image && { imgURL: item.image.src }),
+    ...(item.image && { imgALT: item.image.alt })
+  }))
+
+  return sliceFromCollection(array, n)
+}

package/src/filters/markdown.js

@@ -0,0 +1,20 @@
+import { normalise } from '@x-govuk/govuk-eleventy-plugin/utils'
+
+import { md } from '../markdown-it.js'
+
+/**
+ * Convert Markdown into NHS.UK Frontend-compliant HTML
+ *
+ * @param {string} string - Markdown string
+ * @param {string} value - If `inline`, renders HTML without paragraph tags
+ * @returns {string} HTML
+ */
+export function markdown(string, value) {
+  string = normalise(string, '')
+
+  if (value === 'inline') {
+    return md().renderInline(string)
+  }
+
+  return md().render(string)
+}

package/src/index.js

@@ -0,0 +1,136 @@
+import path from 'node:path'
+
+import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
+import eleventyNavigation from '@11ty/eleventy-navigation'
+import { addCollections } from '@x-govuk/govuk-eleventy-plugin/collections'
+import { scssExtension } from '@x-govuk/govuk-eleventy-plugin/extensions'
+import {
+  FeedTemplate,
+  PageNotFoundTemplate,
+  SearchIndexTemplate,
+  SitemapTemplate,
+  TagsTemplate,
+  TagTemplate
+} from '@x-govuk/govuk-eleventy-plugin/templates'
+import { getLayoutTemplates } from '@x-govuk/govuk-eleventy-plugin/utils'
+
+import { eleventyComputed } from './data/eleventy-computed.js'
+import { defaultPluginOptions } from './data/options.js'
+import { generateAssets } from './events/generate-nhsuk-assets.js'
+import * as filters from './filters/index.js'
+import { md } from './markdown-it.js'
+import { nunjucksConfig } from './nunjucks.js'
+
+export const layoutFilenames = [
+  'base.njk',
+  'collection.njk',
+  'error.njk',
+  'feed.njk',
+  'hub.njk',
+  'page.njk',
+  'post.njk',
+  'product.njk',
+  'sitemap.njk',
+  'sub-navigation.njk',
+  'tag.njk',
+  'tags.njk'
+]
+
+export const pageFilenames = ['404.md', 'sitemap.md', 'tag.md', 'tags.md']
+
+export async function nhsukEleventyPlugin(eleventyConfig, pluginOptions = {}) {
+  const { pathPrefix } = eleventyConfig
+
+  // Plugin options
+  const options = defaultPluginOptions(pluginOptions, pathPrefix)
+
+  // Libraries
+  eleventyConfig.setLibrary('md', md(options))
+  eleventyConfig.setLibrary('njk', nunjucksConfig(eleventyConfig))
+
+  // Collections
+  await addCollections(eleventyConfig)
+
+  // Extensions and template formats
+  eleventyConfig.addExtension('scss', scssExtension)
+  eleventyConfig.addTemplateFormats('scss')
+
+  // Virtual layout templates
+  const baseDirectory = path.join(import.meta.dirname, '..')
+  const templates = await getLayoutTemplates(
+    eleventyConfig,
+    layoutFilenames,
+    baseDirectory
+  )
+  for (const [virtualPath, template] of Object.entries(templates)) {
+    eleventyConfig.addTemplate(virtualPath, template)
+  }
+
+  // Virtual page templates
+  if (options.templates?.error404) {
+    eleventyConfig.addTemplate(
+      '404.11ty.js',
+      new PageNotFoundTemplate(options.templates?.error404)
+    )
+  }
+
+  if (options.templates?.feed) {
+    eleventyConfig.addTemplate(
+      'feed.11ty.js',
+      new FeedTemplate(options.templates?.feed, {
+        url: options?.url
+      })
+    )
+  }
+
+  if (options.templates?.searchIndex) {
+    eleventyConfig.addTemplate(
+      'search-index.11ty.js',
+      new SearchIndexTemplate(options.templates.searchIndex)
+    )
+  }
+
+  if (options.templates?.sitemap) {
+    eleventyConfig.addTemplate(
+      'sitemap.11ty.js',
+      new SitemapTemplate(options.templates.sitemap)
+    )
+  }
+
+  if (options.templates?.tags) {
+    const slugify = eleventyConfig.getFilter('slugify')
+
+    eleventyConfig.addTemplate(
+      'tags.11ty.js',
+      new TagsTemplate(options.templates.tags)
+    )
+
+    eleventyConfig.addTemplate(
+      'tag.11ty.js',
+      new TagTemplate({ ...options.templates.tags, slugify })
+    )
+  }
+
+  // Filters
+  for (const [name, filter] of Object.entries(filters)) {
+    eleventyConfig.addFilter(name, filter)
+  }
+
+  // Global data
+  eleventyConfig.addGlobalData('options', options)
+  eleventyConfig.addGlobalData('eleventyComputed', eleventyComputed)
+
+  // Passthrough
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/nhsuk-frontend/dist/nhsuk/assets': 'assets'
+  })
+
+  // Plugins
+  eleventyConfig.addPlugin(EleventyHtmlBasePlugin)
+  eleventyConfig.addPlugin(eleventyNavigation)
+
+  // Events
+  eleventyConfig.on('eleventy.after', async ({ dir }) => {
+    generateAssets(dir, options)
+  })
+}

package/src/index.scss

@@ -0,0 +1,5 @@
+// NHS.UK Frontend components
+@forward "vendor/nhsuk-frontend";
+
+// NHS.UK Eleventy Plugin components
+@forward "components";

package/src/layouts/base.njk

@@ -0,0 +1,81 @@
+{% extends "nhsuk/template.njk" %}
+
+{% set themeColor = options.themeColor | default("#005eb8", true) -%}
+
+{#- Set the opengraphImageUrl in parent template to either the one
+    from the page metadata or else fallback to the generic one from options. -#}
+{% set opengraphImage = image if image.opengraphImage else opengraphImage %}
+{% set opengraphImageUrl = (opengraphImage.src | canonicalUrl) if opengraphImage else options.opengraphImageUrl %}
+
+{# Pagination #}
+{% set pageNumber = pagination.pageNumber + 1 %}
+{% set pageCount = pagination.pages | length %}
+
+{# Navigation #}
+{% set breadcrumbItems = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key, { includeSelf: includeInBreadcrumbs, allowMissing: true }) | itemsFromNavigation(page.url, options) if eleventyNavigation.key %}
+{% set showBreadcrumbs = options.showBreadcrumbs != false and breadcrumbItems | length > 0 %}
+
+{% from "nhsuk/components/breadcrumb/macro.njk" import breadcrumb as nhsukBreadcrumb %}
+{% from "nhsuk/components/footer/macro.njk" import footer as nhsukFooter %}
+{% from "nhsuk/components/header/macro.njk" import header as nhsukHeader %}
+{% from "nhsuk/components/images/macro.njk" import image as nhsukImage %}
+{% from "nhsuk/components/pagination/macro.njk" import pagination as nhsukPagination %}
+
+{% from "components/card-group/macro.njk" import appCardGroup with context %}
+{% from "components/document-header/macro.njk" import appDocumentHeader %}
+{% from "components/document-list/macro.njk" import appDocumentList %}
+{% from "components/heading/macro.njk" import appHeading %}
+{% from "components/hero/macro.njk" import appHero with context %}
+{% from "components/metadata/macro.njk" import appMetadata %}
+{% from "components/prose-scope/macro.njk" import appProseScope %}
+{% from "components/related/macro.njk" import appRelated with context %}
+{% from "components/sub-navigation/macro.njk" import appSubNavigation %}
+
+{% block headIcons %}
+  {%- if options.icons.shortcut %}<link rel="icon" href="{{ options.icons.shortcut }}" sizes="any">{% endif %}
+  {%- if options.icons.mask %}<link rel="mask-icon" href="{{ options.icons.mask }}" color="{{ themeColor }}">{% endif %}
+  {%- if options.icons.touch %}<link rel="apple-touch-icon" href="{{ options.icons.touch }}">{% endif %}
+{% endblock %}
+
+{% block head %}
+  <script src="/assets/application.js" type="module"></script>
+
+  {% for stylesheet in options.stylesheets %}
+  <link rel="stylesheet" href="{{ stylesheet }}">
+  {% else %}
+  <link rel="stylesheet" href="{{ "/assets/application.css" }}">
+  {% endfor %}
+
+  {% if options._feedPath %}<link rel="alternate" type="application/atom+xml" href="{{ options._feedPath }}" >{% endif %}
+
+  {% 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.src %}<meta name="og:image" content="{{ opengraphImage.src | canonicalUrl }}">
+  {% endif %}
+  {% if opengraphImage.alt %}<meta property="og:image:alt" content="{{ opengraphImage.alt }}">{% endif %}
+{% endblock %}
+
+{% block pageTitle %}
+  {{- title if title -}}
+  {{- " (page " + pageNumber + " of " + pageCount + ")" if pageCount > 1 -}}
+  {{- " - " + options.titleSuffix if options.titleSuffix -}}
+{% endblock %}
+
+{% block header %}
+{% if options._searchIndexPath %}
+<app-search index="{{ options._searchIndexPath | htmlBaseUrl }}">
+  {{ nhsukHeader(options.header | currentPage(page.url)) }}
+</app-search>
+{% else %}
+  {{ nhsukHeader(options.header | currentPage(page.url)) }}
+{% endif %}
+{% endblock %}
+
+{% block footer %}
+  {{ nhsukFooter(options.footer) }}
+{% endblock %}
+
+{% block bodyEnd %}
+  {% block scripts %}{% endblock %}
+{% endblock %}

package/src/layouts/collection.njk

@@ -0,0 +1,38 @@
+{% extends "layouts/base.njk" %}
+
+{% block beforeContent %}
+  {{ nhsukBreadcrumb({
+    items: breadcrumbItems
+  }) if showBreadcrumbs }}
+{% endblock %}
+
+{% block content %}
+  {{ appDocumentHeader({
+    caption: caption,
+    title: title,
+    description: description
+  }) }}
+
+  {{ appProseScope(content) if content }}
+
+  {{ appHeading({
+    level: 2,
+    size: "l",
+    title: paginationHeading
+  }) if paginationHeading }}
+
+  {{ appDocumentList({
+    headingLevel: 3 if paginationHeading else 2,
+    items: pagination.items
+  }) }}
+
+  {{ nhsukPagination({
+    classes: "nhsuk-u-reading-width",
+    previousUrl: pagination.href.previous,
+    previousPage: pagination.page.previous | length + " items",
+    nextUrl: pagination.href.next,
+    nextPage: pagination.page.next | length + " items"
+  }) if pagination.pages.length > 1 }}
+
+  {{ appRelated(related) if related }}
+{% endblock %}

package/src/layouts/error.njk

@@ -0,0 +1,11 @@
+{% extends "layouts/base.njk" %}
+
+{% block content %}
+  {{ appHeading({
+    caption: caption,
+    title: title,
+    description: description
+  }) }}
+
+  {{ appProseScope(content) if content }}
+{% endblock %}

package/src/layouts/feed.njk

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ options.url }}">
+  <title>{{ title or options.homeKey }}</title>
+  <link href="{{ page.url | canonicalUrl }}" rel="self"/>
+  <link href="{{ options.url }}"/>
+  <updated>{{ collections[collection.name] | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
+  <id>{{ options.url }}</id>
+  {% for item in collections[collection.name] | sliceFromCollection(collection.limit) %}
+  {% set absolutePostUrl = item.url | canonicalUrl %}
+  <entry>
+    <title>{{ item.data.title }}</title>
+    <link href="{{ absolutePostUrl }}"/>
+    <updated>{{ item.date | dateToRfc3339 }}</updated>
+    <id>{{ absolutePostUrl }}</id>
+    {% for author in item.data.authors or [item.data.author] %}
+    <author>
+      <name>{{ author.name }}</name>
+      {% if author.url %}
+      <uri>{{ author.url }}</uri>
+      {% endif %}
+    </author>
+    {% endfor %}
+    <content xml:lang="{{ language or "en" }}" type="html">
+      <![CDATA[
+        {% if item.data.image %}<figure><img src="{{ item.data.image.src | canonicalUrl }}" alt="{{ item.data.image.alt }}">{% if item.data.image.caption %}<figcaption>{{ item.data.image.caption | markdown }}</figcaption>
+        {% endif %}</figure>{% endif %}
+        {{- item.templateContent | renderTransforms(item.data.page) }}
+      ]]>
+    </content>
+  </entry>
+  {% endfor %}
+</feed>

package/src/layouts/hub.njk

@@ -0,0 +1,31 @@
+{% extends "layouts/base.njk" %}
+
+{% block beforeContent %}
+  {{ nhsukBreadcrumb({
+    items: breadcrumbItems
+  }) if showBreadcrumbs }}
+{% endblock %}
+
+{% block content %}
+  {{ appDocumentHeader({
+    caption: caption,
+    title: title,
+    description: description
+  }) }}
+
+  {{ appProseScope(content) if content }}
+
+  {% for group in groups %}
+    {{ appHeading({
+      level: 2,
+      size: "l",
+      caption: group.caption,
+      title: group.title,
+      description: group.description
+    }) if group.title }}
+
+    {{ appCardGroup(group) if group.items }}
+  {% endfor %}
+
+  {{ appRelated(related) if related }}
+{% endblock %}

package/src/layouts/page.njk

@@ -0,0 +1,31 @@
+{% extends "layouts/base.njk" %}
+
+{% block beforeContent %}
+  {{ nhsukBreadcrumb({
+    items: breadcrumbItems
+  }) if showBreadcrumbs }}
+{% endblock %}
+
+{% block content %}
+  {{ appDocumentHeader({
+    caption: caption,
+    title: title,
+    description: description
+  }) }}
+
+  {{ appProseScope(content) if content }}
+
+  {% if showPagination %}
+    {% set previous = collections.navigation | eleventyNavigation(sectionKey or options.homeKey) | getPreviousNavigationItem(page.url) %}
+    {% set next = collections.navigation | eleventyNavigation(sectionKey or options.homeKey) | getNextNavigationItem(page.url) %}
+    {{ nhsukPagination({
+      classes: "nhsuk-u-reading-width",
+      previousUrl: previous.url if previous,
+      previousPage: previous.title if previous,
+      nextUrl: next.url if next,
+      nextPage: next.title if next
+    }) }}
+  {% endif %}
+
+  {{ appRelated(related) if related }}
+{% endblock %}

package/src/layouts/post.njk

@@ -0,0 +1,47 @@
+{% extends "layouts/base.njk" %}
+
+{% block beforeContent %}
+  {{ nhsukBreadcrumb({
+    items: breadcrumbItems
+  }) if showBreadcrumbs }}
+{% endblock %}
+
+{% block content %}
+  {{ appDocumentHeader({
+    caption: caption,
+    title: title,
+    date: date
+  }) }}
+
+  {{ appMetadata({
+    date: date,
+    modified: modified,
+    author: author,
+    tags: tags
+  }) }}
+
+  {% call appProseScope() %}
+    {{ nhsukImage({
+      classes: "app-image--full",
+      src: image.src,
+      alt: image.alt,
+      caption: image.caption | markdown("inline")
+    }) if image }}
+
+    {{ content }}
+  {% endcall %}
+
+  {% if showPagination %}
+    {% set previous = collections.navigation | eleventyNavigation(sectionKey or options.homeKey) | getPreviousNavigationItem(page.url) %}
+    {% set next = collections.navigation | eleventyNavigation(sectionKey or options.homeKey) | getNextNavigationItem(page.url) %}
+    {{ nhsukPagination({
+      classes: "nhsuk-u-reading-width",
+      previousUrl: previous.url if previous,
+      previousPage: previous.title if previous,
+      nextUrl: next.url if next,
+      nextPage: next.title if next
+    }) }}
+  {% endif %}
+
+  {{ appRelated(related) if related }}
+{% endblock %}

package/src/layouts/product.njk

@@ -0,0 +1,32 @@
+{% extends "layouts/base.njk" %}
+
+{% block main %}
+  {{ appHero({
+    caption: caption,
+    title: title,
+    headingClasses: headingClasses,
+    description: description,
+    image: image,
+    startButton: startButton
+  }) }}
+
+  <main class="nhsuk-main-wrapper" id="maincontent">
+    <div class="nhsuk-width-container">
+      {% for group in groups %}
+        {{ appHeading({
+          level: 2,
+          size: "l",
+          caption: group.caption,
+          title: group.title,
+          description: group.description
+        }) if group.title }}
+
+        {{ appCardGroup(group) if group.items }}
+      {% endfor %}
+
+      {{ appProseScope(content) if content }}
+
+      {{ appRelated(related) if related }}
+    </div>
+  </main>
+{% endblock %}

package/src/layouts/sitemap.njk

@@ -0,0 +1,25 @@
+{% extends "layouts/base.njk" %}
+
+{% block content %}
+  {{ appHeading({
+    caption: caption,
+    title: title,
+    description: description
+  }) }}
+
+  {{ appProseScope(content) if content }}
+
+  {% for item in collections.sitemap | eleventyNavigation(options.homeKey) %}
+    <nav class="nhsuk-contents-list">
+      <h2 class="nhsuk-heading-m nhsuk-u-margin-bottom-2">
+        <a class="nhsuk-link" href="{{ item.url | canonicalUrl | pretty }}">{{ item.title | smart }}</a>
+      </h2>
+      {% if item.excerpt %}
+        <p class="nhsuk-body">{{ item.excerpt | markdown("inline") | striptags(true) }}</p>
+      {% endif %}
+      {{ collections.sitemap | eleventyNavigation(item.key) | eleventyNavigationToHtml({
+        listElement: "ol"
+      }) | safe }}
+    </nav>
+  {% endfor %}
+{% endblock %}

package/src/layouts/sub-navigation.njk

@@ -0,0 +1,40 @@
+{% extends "layouts/base.njk" %}
+
+{% block beforeContent %}
+  {{ nhsukBreadcrumb({
+    items: breadcrumbItems
+  }) if showBreadcrumbs }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-one-quarter">
+      {{ appSubNavigation({
+        items: collections.navigation | eleventyNavigation(sectionKey or options.homeKey) | itemsFromNavigation(page.url, { pathPrefix: options.pathPrefix }, true)
+      }) }}
+    </div>
+    <div class="nhsuk-grid-column-three-quarters">
+      {{ appDocumentHeader({
+        caption: caption,
+        title: title,
+        description: description
+      }) }}
+
+      {{ appProseScope(content) if content }}
+
+      {% if showPagination %}
+        {% set previous = collections.navigation | eleventyNavigation(sectionKey or options.homeKey) | getPreviousNavigationItem(page.url) %}
+        {% set next = collections.navigation | eleventyNavigation(sectionKey or options.homeKey) | getNextNavigationItem(page.url) %}
+        {{ nhsukPagination({
+          classes: "nhsuk-u-reading-width",
+          previousUrl: previous.url if previous,
+          previousPage: previous.title if previous,
+          nextUrl: next.url if next,
+          nextPage: next.title if next
+        }) }}
+      {% endif %}
+
+      {{ appRelated(related) if related }}
+    </div>
+  </div>
+{% endblock %}

package/src/layouts/tag.njk

@@ -0,0 +1,14 @@
+{% extends "layouts/base.njk" %}
+
+{% block content %}
+  {{ appHeading({
+    caption: caption,
+    title: title,
+    description: description
+  }) }}
+
+  {{ appDocumentList({
+    headingLevel: 3 if paginationHeading else 2,
+    items: collections[tag] | reverse
+  }) }}
+{% endblock %}

package/src/layouts/tags.njk

@@ -0,0 +1,18 @@
+{% extends "layouts/base.njk" %}
+
+{% block content %}
+  {{ appHeading({
+    caption: caption,
+    title: title,
+    description: description
+  }) }}
+
+  <ul class="nhsuk-list nhsuk-list--bullet">
+    {% for tag in collections.tags %}
+    <li>
+      <a class="nhsuk-link" href="{{ tag | slug }}">{{ tag }}</a>
+      ({{ collections[tag] | length }})
+    </li>
+    {% endfor %}
+  </ul>
+{% endblock %}

package/src/markdown-it/alert.js

@@ -0,0 +1,36 @@
+/**
+ * Render a GitHub-style alert
+ *
+ * @param {Function} md - markdown-it instance
+ */
+export function alertRules(md) {
+  const { rules } = md.renderer
+
+  rules.alert_open = function (tokens, idx) {
+    const { title, type } = tokens[idx].meta
+
+    const visuallyHiddenTitle = type.charAt(0).toUpperCase() + type.slice(1)
+    const hasCustomTitle = title !== visuallyHiddenTitle
+
+    if (['caution', 'important', 'warning'].includes(type)) {
+      let html = `<div class="nhsuk-warning-callout app-warning-callout--${type}">`
+
+      // Warning callout always shows a heading, either a custom title,
+      // else the type of alert
+      html += hasCustomTitle
+        ? `<h3 class="nhsuk-warning-callout__label"><span class="nhsuk-u-visually-hidden">${visuallyHiddenTitle}: </span>${title}</h3>`
+        : `<h3 class="nhsuk-warning-callout__label">${visuallyHiddenTitle}</h3>`
+
+      return html
+    }
+
+    let html = `<div class="nhsuk-inset-text app-inset-text--${type}">`
+
+    // Inset text only shows a heading if there is a custom title
+    html += hasCustomTitle
+      ? `<h3 class="nhsuk-heading-m"><span class="nhsuk-u-visually-hidden">${visuallyHiddenTitle}: </span>${title}</h3>`
+      : `<span class="nhsuk-u-visually-hidden">${visuallyHiddenTitle}: </span>`
+
+    return html
+  }
+}