@x-govuk/nhsuk-eleventy-plugin 1.1.2 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-govuk/nhsuk-eleventy-plugin",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Write documentation using Markdown and publish it using NHS.UK styles",
   "keywords": [
     "nhsuk",
@@ -60,6 +60,7 @@
     "@x-govuk/govuk-eleventy-plugin": "^9.0.1",
     "accessible-autocomplete": "^3.0.1",
     "deepmerge": "^4.2.2",
+    "highlight.js": "^11.5.0",
     "markdown-it-abbr": "^2.0.0",
     "markdown-it-anchor": "^9.0.0",
     "markdown-it-attribution": "^0.1.4",
@@ -67,19 +68,19 @@
     "markdown-it-deflist": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-github-alerts": "^1.0.0",
-    "markdown-it-govuk": "^0.8.0",
+    "markdown-it-govuk": "^0.9.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": "^1.0.0",
-    "nhsuk-frontend": "^10.3.0",
+    "nhsuk-frontend": "^10.4.2",
     "rollup": "^4.1.0",
     "sass": "^1.45.1"
   },
   "devDependencies": {
-    "@x-govuk/eslint-config": "^0.0.1",
+    "@x-govuk/eslint-config": "^0.0.2",
     "@x-govuk/nhsuk-eleventy-plugin": "file:./",
     "np": "^11.0.0",
     "prettier": "^3.1.0",
@@ -87,8 +88,13 @@
     "stylelint-config-gds": "^2.0.0",
     "stylelint-order": "^7.0.0"
   },
+  "peerDependencies": {
+    "@sindresorhus/slugify": "^2.2.1",
+    "markdown-it": "^14.1.1",
+    "nunjucks": "^3.2.4"
+  },
   "engines": {
-    "node": ">=22"
+    "node": ">=22.22"
   },
   "type": "module",
   "exports": {

package/src/application.scss

@@ -1,2 +1,5 @@
 // NHS.UK Eleventy Plugin components
 @forward "pkg:@x-govuk/nhsuk-eleventy-plugin";
+
+// Add the highlighter styles
+@forward "pkg:nhsuk-frontend/lib/highlighter/styles";

package/src/components/_index.scss

@@ -1,5 +1,4 @@
 @forward "attribution";
-@forward "code";
 @forward "contents-list";
 @forward "footnotes-list";
 @forward "govspeak";

package/src/components/card-group/template.njk

@@ -11,8 +11,9 @@
   <li class="nhsuk-grid-column-{{ grid }} nhsuk-card-group__item">
     {{ nhsukCard({
       clickable: item.href and params.clickable,
-      primary: params.type == "primary",
-      secondary: params.type == "secondary",
+      primary: not params.variant and params.type == "primary",
+      secondary: not params.variant and params.type == "secondary",
+      variant: params.variant,
       heading: item.heading,
       headingClasses: ("nhsuk-u-font-size-22" if params.title else "nhsuk-u-font-size-26") + (" nhsuk-u-margin-bottom-2" if item.descriptionHtml else ""),
       headingLevel: 3 if params.title else 2,

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

@@ -6,17 +6,6 @@
     @extend .nhsuk-contents-list__list;
   }
 
-  // Bugfix:
-  // Nested lists need to remove the margin at the bottom,
-  // and add the same margin at the top as is between list items.
-  //
-  // This can be removed when it is fixed within NHS frontend,
-  // see https://github.com/nhsuk/nhsuk-frontend/pull/1854
-  .nhsuk-contents-list ol ol {
-    @include nhsuk-responsive-margin(2, "top");
-    margin-bottom: 0;
-  }
-
   .nhsuk-contents-list li {
     // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
     @extend .nhsuk-contents-list__item;

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

@@ -12,7 +12,6 @@ import * as sass from 'sass'
  *
  * @param {object} dir - Project directories
  * @param {object} options - Plugin options
- * @returns {Function} Eleventy event
  */
 export async function generateAssets(dir, options) {
   // Generate default CSS

package/src/markdown-it/alert.js

@@ -1,7 +1,7 @@
 /**
  * Render a GitHub-style alert
  *
- * @param {Function} md - markdown-it instance
+ * @param {import('markdown-it')} md - markdown-it instance
  */
 export function alertRules(md) {
   const { rules } = md.renderer

package/src/markdown-it/deflist.js

@@ -1,7 +1,7 @@
 /**
  * Render a definition list
  *
- * @param {Function} md - markdown-it instance
+ * @param {import('markdown-it')} md - markdown-it instance
  */
 export function defListRules(md) {
   const { rules } = md.renderer

package/src/markdown-it/figure.js

@@ -1,7 +1,7 @@
 /**
  * Render a figure
  *
- * @param {Function} md - markdown-it instance
+ * @param {import('markdown-it')} md - markdown-it instance
  */
 export function figureRules(md) {
   const { rules } = md.renderer

package/src/markdown-it/footnote.js

@@ -1,7 +1,7 @@
 /**
  * Render footnotes
  *
- * @param {Function} md - markdown-it instance
+ * @param {import('markdown-it')} md - markdown-it instance
  */
 export function footnotesRules(md) {
   const { rules } = md.renderer

package/src/markdown-it/highlight.js

@@ -0,0 +1,68 @@
+import { highlighter } from 'nhsuk-frontend/lib/highlighter/index.mjs'
+
+/**
+ * Highlight code using highlight.js
+ *
+ * @param {string} string - Code to highlight
+ * @param {string} language - Language for syntax highlighting
+ * @returns {string} Highlighted code HTML
+ */
+export function highlightCode(string, language) {
+  const languages = language ? [language] : undefined
+  return highlighter.highlightAuto(string, languages).value
+}
+
+// Languages that should use the reverse (dark background) style
+const reverseStyleLanguages = ['bash', 'shell', 'sh', 'zsh']
+
+/**
+ * Custom fence renderer for nhsuk-frontend code component
+ *
+ * This markdown-it plugin overrides the default fence renderer to output
+ * HTML compatible with the nhsuk-frontend code component, including the
+ * copy button.
+ *
+ * @param {MarkdownIt} md - markdown-it instance
+ */
+export default function nhsukCodePlugin(md) {
+  md.renderer.rules.fence = (tokens, idx) => {
+    const token = tokens[idx]
+    const language = token.info.trim()
+    const code = highlightCode(token.content, language)
+
+    // Check if the code block has the { .nhsuk-code--button }
+    // class added, to indicate that the copy button should be added.
+    const hasCopyButton = token.attrs?.some(
+      ([name, value]) =>
+        name === 'class' && value?.includes('nhsuk-code--button')
+    )
+
+    // Languages use on the command line use a reverse style
+    const isReverse = reverseStyleLanguages.includes(language)
+
+    // Set classes for the code block and the button
+    let codeClasses = 'nhsuk-code'
+    if (hasCopyButton) codeClasses += ' nhsuk-code--button'
+    if (isReverse) codeClasses += ' nhsuk-code--reverse'
+    const buttonClasses = isReverse
+      ? 'nhsuk-button nhsuk-button--reverse nhsuk-button--small nhsuk-code__button nhsuk-js-code-button'
+      : 'nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-code__button nhsuk-js-code-button'
+
+    // Output HTML compatible with nhsuk-frontend code component
+    let html = `<div class="${codeClasses}" data-module="nhsuk-code">\n`
+
+    // Button is hidden by default and shown by JavaScript when clipboard API is available
+    if (hasCopyButton) {
+      html += `  <button class="${buttonClasses}" data-module="nhsuk-button" type="button" hidden>Copy code</button>\n`
+    }
+
+    html += `  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">${code}</code></pre>\n`
+    html += `</div>\n`
+
+    return html
+  }
+}
+
+/**
+ * @import { default as MarkdownIt } from 'markdown-it'
+ */

package/src/markdown-it/table.js

@@ -1,7 +1,7 @@
 /**
  * Render a table with `tabindex` to enable keyboard scrolling
  *
- * @param {Function} md - markdown-it instance
+ * @param {import('markdown-it')} md - markdown-it instance
  */
 export function tableRules(md) {
   const { rules } = md.renderer

package/src/markdown-it.js

@@ -8,7 +8,6 @@ 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'
@@ -20,6 +19,7 @@ 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 nhsukCodePlugin from './markdown-it/highlight.js'
 import { tableRules } from './markdown-it/table.js'
 
 /**
@@ -27,12 +27,11 @@ import { tableRules } from './markdown-it/table.js'
  *
  * @see {@link https://markdown-it.github.io/markdown-it/}
  * @param {object} [markdownOptions] - Plugin Markdown options
- * @returns {Function} markdown-it instance
+ * @returns {import('markdown-it')} markdown-it instance
  */
 export function md(markdownOptions = {}) {
   const opts = {
     breaks: true,
-    highlight,
     html: true,
     linkify: false,
     typographer: true,
@@ -46,6 +45,7 @@ export function md(markdownOptions = {}) {
       govspeak: ['blockquote', 'information-callout'],
       headingsStartWith: markdownOptions.headingsStartWith
     })
+    .use(nhsukCodePlugin)
     .use(markdownItAbbr)
     .use(markdownItAnchor, {
       permalink: markdownOptions.headingPermalinks

package/src/nunjucks.js

@@ -6,10 +6,11 @@ import Nunjucks from 'nunjucks'
  * Gets the value at `path` of `object`. If the resolved value is `undefined`,
  * the `defaultValue` is returned in its place.
  *
+ * @template T
  * @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
+ * @param {T} defaultValue - Value returned for `undefined` resolved values
+ * @returns {T} The resolved value
  */
 function getProp(object, keys, defaultValue) {
   keys = Array.isArray(keys) ? keys : keys.split('.')
@@ -25,7 +26,7 @@ function getProp(object, keys, defaultValue) {
  *
  * @see {@link https://mozilla.github.io/nunjucks/api.html#environment}
  * @param {object} eleventyConfig - Eleventy config
- * @returns {Function} Nunjucks environment
+ * @returns {import('nunjucks').Environment} Nunjucks environment
  */
 export function nunjucksConfig(eleventyConfig) {
   const { includes, input, layouts } = eleventyConfig.dir

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

@@ -1,6 +1,7 @@
 @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/code";
 @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";

package/src/components/code/_index.scss

@@ -1,153 +0,0 @@
-@use "../../vendor/nhsuk-frontend" as *;
-
-// Use same colour for inline code as that used on NHS.UK Digital service manual.
-// https://github.com/nhsuk/nhsuk-service-manual/blob/main/app/stylesheets/app/_code-highlight.scss
-$_code-colour: #dd1144;
-
-@include nhsuk-exports("nhsuk-eleventy-plugin/components/code") {
-  .app-code--inline,
-  .app-code--block {
-    font-family: ui-monospace, monospace;
-    -webkit-font-smoothing: auto;
-  }
-
-  .app-code--inline {
-    background-color: nhsuk-colour("white");
-    color: $_code-colour;
-    font-size: 0.875em;
-    padding: 2px nhsuk-spacing(1);
-
-    a & {
-      color: inherit;
-    }
-
-    // Ensure links within inline code blocks receive focus colour
-    a:focus & {
-      background: $nhsuk-focus-colour;
-    }
-  }
-
-  .app-code--block {
-    background-color: nhsuk-colour("white");
-    overflow: auto;
-    padding: nhsuk-spacing(4);
-    scrollbar-color: nhsuk-colour("grey-1") $nhsuk-border-colour;
-    scrollbar-width: thin;
-
-    @include nhsuk-font(16, $line-height: 1.4);
-    @include nhsuk-responsive-margin(4, "bottom");
-
-    + .nhsuk-heading-l {
-      padding-top: nhsuk-spacing(4);
-    }
-
-    + .nhsuk-heading-m,
-    + .nhsuk-heading-s {
-      padding-top: nhsuk-spacing(2);
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 #{$nhsuk-focus-width * 2} $nhsuk-focus-colour;
-      outline: $nhsuk-focus-width solid nhsuk-colour("black");
-    }
-  }
-
-  // Reverse the colour of code that uses shell highlighting
-  .app-code__language--shell {
-    background-color: nhsuk-colour("black");
-    border: $nhsuk-focus-width solid nhsuk-colour("white");
-    -webkit-font-smoothing: auto;
-    margin-left: $nhsuk-focus-width * -1;
-    margin-right: $nhsuk-focus-width * -1;
-
-    code {
-      filter: invert(100%);
-    }
-  }
-
-  .app-code__comment,
-  .app-code__quote {
-    color: nhsuk-tint(nhsuk-colour("grey-1"), 30);
-    font-style: italic;
-  }
-
-  .app-code__keyword,
-  .app-code__selector-tag,
-  .app-code__subst {
-    color: nhsuk-colour("black");
-    font-weight: bold;
-  }
-
-  .app-code__number,
-  .app-code__literal,
-  .app-code__variable,
-  .app-code__template-variable,
-  .app-code__tag .app-code__attr {
-    color: nhsuk-colour("green");
-  }
-
-  .app-code__string,
-  .app-code__doctag {
-    color: nhsuk-colour("red");
-  }
-
-  .app-code__title,
-  .app-code__section,
-  .app-code__selector-id {
-    color: nhsuk-colour("purple");
-    font-weight: bold;
-  }
-
-  .app-code__subst {
-    font-weight: normal;
-  }
-
-  .app-code__type,
-  .app-code__class .app-code__title {
-    color: nhsuk-colour("dark-pink");
-    font-weight: bold;
-  }
-
-  .app-code__tag,
-  .app-code__name,
-  .app-code__attribute {
-    color: $nhsuk-link-active-colour;
-    font-weight: normal;
-  }
-
-  .app-code__regexp,
-  .app-code__link {
-    color: nhsuk-colour("green");
-  }
-
-  .app-code__symbol,
-  .app-code__bullet {
-    color: nhsuk-colour("purple");
-  }
-
-  .app-code__builtin,
-  .app-code__builtin-name {
-    color: nhsuk-colour("blue");
-  }
-
-  .app-code__meta {
-    color: nhsuk-colour("grey-1");
-    font-weight: bold;
-  }
-
-  .app-code__deletion {
-    background: nhsuk-tint(nhsuk-colour("red"), 80);
-  }
-
-  .app-code__addition {
-    background: nhsuk-tint(nhsuk-colour("green"), 80);
-  }
-
-  .app-code__emphasis {
-    font-style: italic;
-  }
-
-  .app-code__strong {
-    font-weight: bold;
-  }
-}