@x-govuk/nhsuk-eleventy-plugin 1.0.0

package/src/markdown-it/deflist.js

@@ -0,0 +1,16 @@
+/**
+ * Render a definition list
+ *
+ * @param {Function} md - markdown-it instance
+ */
+export function defListRules(md) {
+  const { rules } = md.renderer
+
+  rules.dl_open = () => '<dl class="nhsuk-body-m">\n'
+
+  rules.dt_open = () =>
+    '<dt class="nhsuk-u-font-weight-bold nhsuk-u-margin-bottom-2">\n'
+
+  rules.dd_open = () =>
+    '<dd class="nhsuk-u-margin-bottom-2 nhsuk-u-margin-left-4">\n'
+}

package/src/markdown-it/figure.js

@@ -0,0 +1,12 @@
+/**
+ * Render a figure
+ *
+ * @param {Function} md - markdown-it instance
+ */
+export function figureRules(md) {
+  const { rules } = md.renderer
+
+  rules.figure_open = () => '<figure class="nhsuk-image">\n'
+
+  rules.figcaption_open = () => '<figcaption class="nhsuk-image__caption">\n'
+}

package/src/markdown-it/footnote.js

@@ -0,0 +1,47 @@
+/**
+ * Render footnotes
+ *
+ * @param {Function} md - markdown-it instance
+ */
+export function footnotesRules(md) {
+  const { rules } = md.renderer
+
+  rules.footnote_ref = (tokens, idx, options, env, self) => {
+    let id = self.rules.footnote_anchor_name(tokens, idx, options, env, self)
+
+    if (tokens[idx].meta.subId > 0) {
+      id += `:${tokens[idx].meta.subId}`
+    }
+
+    return `<sup id="fnref:${id}"><a class="nhsuk-link" href="#fn:${id}" aria-describedby="footnotes-label">${id.toString()}</a></sup>`
+  }
+
+  rules.footnote_anchor = (tokens, idx, options, env, self) => {
+    let id = self.rules.footnote_anchor_name(tokens, idx, options, env, self)
+
+    if (tokens[idx].meta.subId > 0) {
+      id += `:${tokens[idx].meta.subId}`
+    }
+
+    // ↩ using unicode escape code to prevent display as emoji on iOS
+    return ` <a class="nhsuk-link" href="#fnref:${id}" aria-label="Back to content">\u21a9\uFE0E</a>`
+  }
+
+  rules.footnote_block_open = () =>
+    `<footer>
+      <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">\n
+      <h2 id="footnotes-label" class="nhsuk-u-visually-hidden">Footnotes</h2>\n
+      <ol class="app-footnotes-list">\n`
+
+  rules.footnote_block_close = () => '</ol>\n</footer>\n'
+
+  rules.footnote_open = (tokens, idx, options, env, self) => {
+    let id = self.rules.footnote_anchor_name(tokens, idx, options, env, self)
+
+    if (tokens[idx].meta.subId > 0) {
+      id += `:${tokens[idx].meta.subId}`
+    }
+
+    return `<li id="fn:${id}">`
+  }
+}

package/src/markdown-it/table.js

@@ -0,0 +1,18 @@
+/**
+ * Render a table with `tabindex` to enable keyboard scrolling
+ *
+ * @param {Function} md - markdown-it instance
+ */
+export function tableRules(md) {
+  const { rules } = md.renderer
+  const defaultRenderer =
+    rules.table_open ||
+    function (tokens, idx, options, env, self) {
+      return self.renderToken(tokens, idx, options)
+    }
+
+  rules.table_open = (tokens, idx, options, env, self) => {
+    tokens[idx].attrPush(['tabindex', 0])
+    return defaultRenderer(tokens, idx, options, env, self)
+  }
+}

package/src/markdown-it.js

@@ -0,0 +1,91 @@
+import slugify from '@sindresorhus/slugify'
+import MarkdownIt from 'markdown-it'
+import markdownItAbbr from 'markdown-it-abbr'
+import markdownItAnchor from 'markdown-it-anchor'
+import markdownItAttribution from 'markdown-it-attribution'
+import markdownItAttrs from 'markdown-it-attrs'
+import markdownItDeflist from 'markdown-it-deflist'
+import markdownItFootnote from 'markdown-it-footnote'
+import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'
+import markdownItGovuk from 'markdown-it-govuk'
+import highlight from 'markdown-it-govuk/highlight'
+import markdownItImageFigures from 'markdown-it-image-figures'
+import markdownItIns from 'markdown-it-ins'
+import markdownItMark from 'markdown-it-mark'
+import markdownItSub from 'markdown-it-sub'
+import markdownItSup from 'markdown-it-sup'
+import markdownItTableOfContents from 'markdown-it-table-of-contents'
+
+import { alertRules } from './markdown-it/alert.js'
+import { defListRules } from './markdown-it/deflist.js'
+import { figureRules } from './markdown-it/figure.js'
+import { footnotesRules } from './markdown-it/footnote.js'
+import { tableRules } from './markdown-it/table.js'
+
+/**
+ * Configure markdown-it
+ *
+ * @see {@link https://markdown-it.github.io/markdown-it/}
+ * @param {object} [options] - Plugin options
+ * @returns {Function} markdown-it instance
+ */
+export function md(options = {}) {
+  const opts = {
+    breaks: true,
+    highlight,
+    html: true,
+    linkify: false,
+    typographer: true
+  }
+
+  const md = new MarkdownIt(opts)
+    .use(markdownItGovuk, {
+      brand: 'nhsuk',
+      calvert: true,
+      headingsStartWith: 'xl'
+    })
+    .use(markdownItAbbr)
+    .use(markdownItAnchor, {
+      permalink: options.headingPermalinks
+        ? markdownItAnchor.permalink.headerLink({
+            class: 'app-link--heading',
+            safariReaderFix: true
+          })
+        : false,
+      slugify: (string) => slugify(string).replaceAll(/[*+~.()'"!:@]/g, '')
+    })
+    .use(markdownItAttribution, {
+      classNameContainer: 'app-attribution',
+      classNameAttribution: 'app-attribution__caption',
+      marker: '--'
+    })
+    .use(markdownItAttrs)
+    .use(markdownItDeflist)
+    .use(defListRules)
+    .use(markdownItFootnote)
+    .use(footnotesRules)
+    .use(MarkdownItGitHubAlerts)
+    .use(alertRules)
+    .use(markdownItIns)
+    .use(markdownItImageFigures, {
+      classes: 'nhsuk-image__img',
+      figcaption: true
+    })
+    .use(figureRules)
+    .use(markdownItMark)
+    .use(markdownItSub)
+    .use(markdownItSup)
+    .use(tableRules)
+    .use(markdownItTableOfContents, {
+      includeLevel: [2, 3],
+      listType: 'ol',
+      transformContainerOpen: () => {
+        return '<nav class="nhsuk-contents-list"><h2 class="nhsuk-u-visually-hidden">Contents</h2>'
+      },
+      transformContainerClose: () => {
+        return '</nav>'
+      }
+    })
+
+  return md
+}

package/src/nunjucks.js

@@ -0,0 +1,65 @@
+import path from 'node:path'
+
+import Nunjucks from 'nunjucks'
+
+/**
+ * Gets the value at `path` of `object`. If the resolved value is `undefined`,
+ * the `defaultValue` is returned in its place.
+ *
+ * @param {object} object - Object to query
+ * @param {Array|string} keys - Path of the property to get
+ * @param {*} defaultValue - Value returned for `undefined` resolved values
+ * @returns {*} The resolved value
+ */
+function getProp(object, keys, defaultValue) {
+  keys = Array.isArray(keys) ? keys : keys.split('.')
+  object = object[keys[0]]
+  if (object && keys.length > 1) {
+    return getProp(object, keys.slice(1))
+  }
+  return object === undefined ? defaultValue : object
+}
+
+/**
+ * Configure Nunjucks environment
+ *
+ * @see {@link https://mozilla.github.io/nunjucks/api.html#environment}
+ * @param {object} eleventyConfig - Eleventy config
+ * @returns {Function} Nunjucks environment
+ */
+export function nunjucksConfig(eleventyConfig) {
+  const { includes, input, layouts } = eleventyConfig.dir
+
+  const searchPaths = [
+    ...(includes ? [path.join(input, includes)] : []),
+    ...(layouts ? [path.join(input, layouts)] : []),
+    input,
+    './node_modules/@x-govuk/nhsuk-eleventy-plugin/src',
+    './node_modules/nhsuk-frontend/dist'
+  ]
+
+  /**
+   * Set default options, but respect `nunjucksEnvironmentOptions`
+   *
+   * @see {@link https://www.11ty.dev/docs/languages/nunjucks/#optional-use-your-nunjucks-environment-options}
+   */
+  const options = {
+    autoescape: false,
+    lstripBlocks: true,
+    trimBlocks: true,
+    noCache: process.env === 'development',
+    watch: process.env === 'development',
+    ...eleventyConfig.nunjucksEnvironmentOptions
+  }
+
+  const nunjucks = new Nunjucks.Environment(
+    new Nunjucks.FileSystemLoader(searchPaths),
+    options
+  )
+
+  nunjucks.addGlobal('getData', function (keyName) {
+    return typeof keyName === 'string' ? getProp(this.ctx, keyName) : keyName
+  })
+
+  return nunjucks
+}

package/src/vendor/nhsuk-frontend/_index.scss

@@ -0,0 +1,2 @@
+@forward "core";
+@forward "components";

package/src/vendor/nhsuk-frontend/components/_index.scss

@@ -0,0 +1,15 @@
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/breadcrumb";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/button";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/card";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/contents-list";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/footer";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/header";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/hero";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/images";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/inset-text";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/input";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/pagination";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/skip-link";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/tables";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/tag";
+@forward "pkg:nhsuk-frontend/dist/nhsuk/components/warning-callout";

package/src/vendor/nhsuk-frontend/core/_index.scss

@@ -0,0 +1 @@
+@forward "pkg:nhsuk-frontend/dist/nhsuk/core";