Merge pull request #3393 from alphagov/dependabot/npm_and_yarn/metals…

…mith-7c1590d2b6

Bump the metalsmith group with 2 updates

lib/generate-sitemap.js

@@ -90,14 +90,8 @@ const plugin = (opts) => {
           return
         }
 
-        // Use canonical in frontmatter instead of the file's canonical data
-        // set by metalsmith-canonical plugin
-        const url = frontmatter.canonical
-          ? frontmatter.canonical
-          : files[file].canonical
-
         const sitemapEntry = {
-          url,
+          url: frontmatter.canonical,
           changefreq: frontmatter.changefreq || changefreq,
           lastmod: frontmatter.lastmod || lastmod,
           priority: frontmatter.priority || priority

lib/metalsmith.js

@@ -196,7 +196,15 @@ module.exports = metalsmith
   // apply a permalink pattern to files
   .use(
     permalinks({
-      relative: false
+      /**
+       * Temporarily disable permalink slug processing as nested paths
+       * are currently flattened due to a bug that removes slashes:
+       *
+       * {@link https://github.com/metalsmith/permalinks/issues/139}
+       *
+       * @type {import('@metalsmith/permalinks').slugFunction}
+       */
+      slug: (path) => path
     })
   )
 

lib/navigation.js

@@ -1,4 +1,4 @@
-const { dirname, join } = require('path')
+const { dirname } = require('path')
 
 // Navigation item sorting function
 const { compare } = new Intl.Collator('en', {
@@ -22,10 +22,8 @@ module.exports = (config) => (files, metalsmith, done) => {
 
   for (const item of items) {
     // Match navigation item child directories
-    // (for example, ['components/breadcrumbs', 'components/checkboxes', ...])
-    const itemPaths = metalsmith
-      .match(`${item.url}/*/index.html`, paths)
-      .map((itemPath) => dirname(itemPath))
+    // (for example, ['components/breadcrumbs/index.html', 'components/checkboxes/index.html', ...])
+    const itemPaths = metalsmith.match(`${item.url}/*/index.html`, paths)
 
     // No sub items required for this path
     if (!itemPaths.length) {
@@ -34,7 +32,7 @@ module.exports = (config) => (files, metalsmith, done) => {
 
     // Convert directory into a navigation item adding url, label and theme
     for (const itemPath of itemPaths) {
-      const frontmatter = files[join(itemPath, 'index.html')]
+      const frontmatter = files[itemPath]
 
       // Do not show drafts or ignored pages in navigation
       if (
@@ -49,7 +47,7 @@ module.exports = (config) => (files, metalsmith, done) => {
 
       // Add subitem to navigation
       item.items.push({
-        url: itemPath,
+        url: dirname(itemPath),
         label: frontmatter.title,
         order: frontmatter.order,
         theme: frontmatter.theme,
@@ -66,7 +64,7 @@ module.exports = (config) => (files, metalsmith, done) => {
     }
 
     // Sort navigation sub items using 'order' (optional)
-    item.items.sort((a, b) => compare(a.order, b.order))
+    item.items?.sort((a, b) => compare(a.order, b.order))
   }
 
   // Add navigation to global variables

lib/nunjucks/globals.js

@@ -1,5 +1,5 @@
 const { readFileSync } = require('fs')
-const { join, normalize } = require('path')
+const { join } = require('path')
 
 const matter = require('gray-matter')
 const beautify = require('js-beautify')
@@ -41,29 +41,28 @@ exports.getFrontmatter = function (path) {
 /**
  * Get 'fingerprinted' version of a given asset file
  *
- * @param {string} file - Relative path to asset
- * @returns {string} Relative path to asset with added hash fingerprint
+ * @param {string} pathname - URL path to asset
+ * @returns {string} URL path to asset with added hash fingerprint
  */
-exports.getFingerprint = function (file) {
-  file = normalize(file)
-
-  // Skip fingerprints in development for Browsersync inject (without reload)
-  if (process.env.NODE_ENV === 'development') {
-    return `/${slash(file)}`
-  }
+exports.getFingerprint = function (pathname) {
+  let file = pathname.replace(/^\/+/, '')
 
   // Grab fingerprint array from the template context
-  const filePath = this.lookup('permalink')
   const fingerprints = this.lookup('fingerprints') ?? {}
+  const canonical = this.lookup('canonical')
 
   // If that fails, and we know the path of the current file, look for a
   // fingerprinted asset relative to the current file (e.g. `../foo.css`)
-  //
-  // We only know the path of the current file when we're compiling the layout –
-  // calls to this function with a relative path will fail if made from the
-  // source files themselves.
-  if (!fingerprints[file] && filePath) {
-    file = join(filePath, file)
+  if (!fingerprints[file] && !pathname.startsWith('/') && canonical) {
+    const { pathname } = new URL(canonical)
+
+    // Resolve `../` but remove leading slash
+    file = join(pathname, file).replace(/^\/+/, '')
+  }
+
+  // Skip fingerprints in development for Browsersync inject (without reload)
+  if (process.env.NODE_ENV === 'development') {
+    return `/${slash(file)}`
   }
 
   // The thrown error will stop the build, but not provide any useful output,

package.json

@@ -46,9 +46,9 @@
     "@metalsmith/in-place": "^5.0.0",
     "@metalsmith/layouts": "^2.7.0",
     "@metalsmith/markdown": "^1.10.0",
-    "@metalsmith/permalinks": "^2.5.1",
+    "@metalsmith/permalinks": "^3.0.0",
     "@metalsmith/postcss": "^5.4.1",
-    "@metalsmith/sass": "^1.8.0",
+    "@metalsmith/sass": "^1.8.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",

src/styles/page-template/block-areas/index.njk

@@ -13,7 +13,7 @@ stylesheets:
 {% block head -%}
   {# Since we’re not extending the Design System layout we need to add this manually #}
   <meta name="robots" content="noindex, nofollow">
-  <link href="{{ getFingerprint('stylesheets/main.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('/stylesheets/main.css') }}" rel="stylesheet" media="all">
   {#- Include any additional stylesheets specified in the example frontmatter #}
   {% for stylesheet in stylesheets %}
     <link href="{{ getFingerprint(stylesheet) }}" rel="stylesheet" media="all">
@@ -83,6 +83,6 @@ stylesheets:
     <span class="app-annotate-block__label">block: bodyEnd</span>
     {{ super() }}
     {# Since we’re not extending the Design System layout we need to add this manually #}
-    <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+    <script type="module" src="{{ getFingerprint('/javascripts/application-example.js') }}"></script>
   </div>
 {%- endblock %}

src/styles/page-template/custom/index.njk

@@ -34,7 +34,7 @@ ignoreInSitemap: true
 
 {% block head %}
   <meta name="robots" content="noindex, nofollow">
-  <link href="{{ getFingerprint('stylesheets/main.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('/stylesheets/main.css') }}" rel="stylesheet" media="all">
 {% endblock %}
 
 {% block bodyStart %}
@@ -151,5 +151,5 @@ ignoreInSitemap: true
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('/javascripts/application-example.js') }}"></script>
 {% endblock %}

src/styles/page-template/default/index.njk

@@ -9,13 +9,13 @@ layout: false
 
 {% block head %}
   <meta name="robots" content="noindex, nofollow">
-  <link href="{{ getFingerprint('stylesheets/main.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('/stylesheets/main.css') }}" rel="stylesheet" media="all">
 {% endblock %}
 
 {% block content %}
   <h1 class="govuk-heading-xl">Default page template</h1>
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('/javascripts/application-example.js') }}"></script>
 {% endblock %}

views/layouts/_generic.njk

@@ -13,7 +13,7 @@
   <meta name="description" content="{{ description | smartypants }}">
   <meta name="og:description" content="{{ description | smartypants }}">
   <link rel="canonical" href="{{ canonical }}">
-  <link href="{{ getFingerprint('stylesheets/main.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('/stylesheets/main.css') }}" rel="stylesheet" media="all">
 {% endblock %}
 
 {% block bodyStart %}
@@ -37,5 +37,5 @@
 {% block footer %}{% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/application.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('/javascripts/application.js') }}"></script>
 {% endblock %}

views/layouts/layout-example-full-page-govuk.njk

@@ -5,7 +5,7 @@
 {% block pageTitle %}{{ title }} – Example – GOV.UK Design System{% endblock %}
 {% block head %}
   <meta name="robots" content="noindex, nofollow">
-  <link href="{{ getFingerprint('stylesheets/main.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('/stylesheets/main.css') }}" rel="stylesheet" media="all">
   {#- Include any additional stylesheets specified in the example frontmatter #}
   {% for stylesheet in stylesheets %}
     <link href="{{ getFingerprint(stylesheet) }}" rel="stylesheet" media="all">
@@ -22,5 +22,5 @@
   {{ contents | safe }}
 {% endblock %}
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('/javascripts/application-example.js') }}"></script>
 {% endblock %}

views/layouts/layout-example-full-page.njk

@@ -5,7 +5,7 @@
 {% block pageTitle %}{{ title }} – Example – GOV.UK Design System{% endblock %}
 {% block head %}
   <meta name="robots" content="noindex, nofollow">
-  <link href="{{ getFingerprint('stylesheets/main.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('/stylesheets/main.css') }}" rel="stylesheet" media="all">
   {#- Include any additional stylesheets specified in the example frontmatter #}
   {% for stylesheet in stylesheets %}
     <link href="{{ getFingerprint(stylesheet) }}" rel="stylesheet" media="all">
@@ -24,5 +24,5 @@
   {{ contents | safe }}
 {% endblock %}
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('/javascripts/application-example.js') }}"></script>
 {% endblock %}

views/layouts/layout-example.njk

@@ -12,8 +12,8 @@
   <meta name="og:description" content="{{ description | smartypants }}">
   <link rel="canonical" href="{{ canonical }}">
 
-  <link href="{{ getFingerprint('stylesheets/govuk-frontend.min.css') }}" rel="stylesheet" media="all">
-  <link href="{{ getFingerprint('stylesheets/example.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('/stylesheets/govuk-frontend.min.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('/stylesheets/example.css') }}" rel="stylesheet" media="all">
   {#- Include any additional stylesheets specified in the example frontmatter #}
   {% for stylesheet in stylesheets %}
     <link href="{{ getFingerprint(stylesheet) }}" rel="stylesheet" media="all">
@@ -33,7 +33,7 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('/javascripts/application-example.js') }}"></script>
 {% endblock %}
 
 {# Example pages shouldn't have a footer, so blank the one provided by the template #}

views/partials/_header.njk

@@ -31,7 +31,7 @@
         </span>
       </a>
     </div>
-    <div class="app-site-search" data-module="app-search" data-search-index="{{ getFingerprint('search-index.json') }}">
+    <div class="app-site-search" data-module="app-search" data-search-index="{{ getFingerprint('/search-index.json') }}">
       <label class="govuk-visually-hidden" for="app-site-search__input">Search Design system</label>
       <a class="app-site-search__link govuk-link" href="/sitemap/">Sitemap</a>
     </div>