Upgrade X-Gov 11ty plugin to version 6 and resolve breaking changes (#…

…360)

* Update deps

* Style config -> scss file

* Phase banner border styling bug

* Remove URL filter

* update header config

* Testing fixes

* Update package-lock.json post merge from main

.eleventy.js

@@ -7,8 +7,7 @@ module.exports = function(eleventyConfig) {
     eleventyConfig.addPassthroughCopy({ "docs/assets/logos": "assets/logos"});
     // Register the plugins
     let govukPluginOptions = {
-        brandColour: '#8f23b3',
-        fontFamily: 'roboto, system-ui, sans-serif',
+        scssSettingsPath: "/styles/_settings.scss",
         icons: {
             mask: '/assets/logos/ho-mask-icon.svg',
             shortcut: '/assets/logos/ho-favicon.ico',
@@ -17,8 +16,13 @@ module.exports = function(eleventyConfig) {
         opengraphImageUrl: '/assets/logos/ho-opengraph-image.png',
         homeKey: 'Home',
         header: {
-            organisationLogo: '<img src="/assets/logos/ho_logo.svg" height="34px" alt="Home Office Logo">',
-            organisationName: 'Home Office',
+            logotype: {
+                html:
+                    '<span class="govuk-header__logotype">' +
+                    '  <img src="/assets/logos/ho_logo.svg" height="34px" alt="Home Office Logo">' +
+                    '  <span class="govuk-header__logotype-text">Home Office</span>' +
+                    '</span>'
+            },
             productName: 'Engineering Guidance and Standards',
             search: {
                 label: 'Search site',

_includes/layouts/collection.njk

@@ -1,4 +1,11 @@
 {% extends "layouts/base.njk" %}
+{#-
+https://github.com/x-govuk/govuk-eleventy-plugin/blob/main/components/header/template.njk#L4-L6
+
+The govuk header uses the layout name to remove the border for collection and product pages. Because we add the phase
+banner, the border should be on all pages, so hide that this is a collection page.
+-#}
+{%- set layout="prevent-layout-specific-styling" -%}
 
 {% block main %}
   {% if phaseBannerConfiguration %}

_includes/layouts/product.njk

@@ -1,5 +1,13 @@
 {% extends "layouts/base.njk" %}
-{# Forked from layouts/product to wrap masthead in region #}
+{#- Forked from layouts/product to wrap masthead in region -#}
+
+{#-
+https://github.com/x-govuk/govuk-eleventy-plugin/blob/main/components/header/template.njk#L4-L6
+
+The govuk header uses the layout name to remove the border for collection and product pages. Because we add the phase
+banner, the border should be on all pages, so hide that this is a product page.
+-#}
+{%- set layout="prevent-layout-specific-styling" -%}
 
 {% block main %}
   {% if phaseBannerConfiguration %}
@@ -19,15 +27,15 @@
         html: description | markdown("inline") | noOrphans
       } if description,
       startButton: {
-        href: startButton.href | url,
+        href: startButton.href,
         text: startButton.text
       } if startButton,
       image: {
         alt: image.alt,
-        src: image.src | url
+        src: image.src
       } if image,
       breadcrumbs: {
-        classes: "govuk-!-display-none-print govuk-!-margin-bottom-0",
+        classes: "govuk-!-display-none-print",
         items: breadcrumbItems
       } if showBreadcrumbs
     }) }}

_includes/layouts/search-index.njk

@@ -7,6 +7,6 @@
     "hasFrontmatterDate": {{ item.data.date !== undefined }},
     "date": {{ item.date | date("d LLLL y") | dump | safe }},
     "templateContent": {{ item.templateContent | tokenize | dump | safe }},
-    "url": {{ item.url | url | pretty | dump | safe }}
+    "url": {{ item.url | pretty | dump | safe }}
   }{% if not loop.last %},{% endif %}
 {% endfor %}]

_includes/layouts/tags.njk

@@ -22,7 +22,7 @@
 
       <ul class="govuk-list govuk-list--bullet">
        {% for tag in collections.all | getAllTags | filterTagList %}
-       {%- set tagUrl %}{{ "/tags/" | url }}{{ tag | slugify }}/{% endset %}
+       {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
         <li>
           <a href="{{ tagUrl }}">{{ tag }}</a>
         </li>

_includes/macros/contentDocumentList.njk

@@ -7,7 +7,7 @@
   {% for item in params.items %}
     <li class="app-document-list__item">
       <h{{ headingLevel }} class="app-document-list__item-title">
-        <a class="govuk-link" href="{{ item.url | url | pretty }}">{{ item.data.title | smart }}</a>
+        <a class="govuk-link" href="{{ item.url | pretty }}">{{ item.data.title | smart }}</a>
       </h{{ headingLevel }}>
       {% if item.data.description %}
       <p class="app-document-list__item-description">

_includes/macros/navigationList.njk

@@ -5,12 +5,12 @@
     <ul class="x-govuk-sub-navigation__section">
       {%- for post in listItems %}
       <li class="x-govuk-sub-navigation__section-item">
-        <a href="{{ post.url | url }}" class="govuk-link x-govuk-related-navigation__section-link x-govuk-related-navigation__section-link--other" {% if currentUrl == post.url %} aria-current="page"{% endif %}>
+        <a href="{{ post.url }}" class="govuk-link x-govuk-related-navigation__section-link x-govuk-related-navigation__section-link--other" {% if currentUrl == post.url %} aria-current="page"{% endif %}>
           {% if post.data.id %}{{ post.data.id }} - {% endif %}{{ post.data.title }}
         </a>
       </li>
       {%- endfor %}
     </ul>
   </nav>
 </div>
-{% endmacro %}
+{% endmacro %}

_includes/macros/tagList.njk

@@ -1,6 +1,6 @@
 {% macro tagList(theTags) %}
 {%- for tag in theTags | filterTagList %}
-  {%- set tagUrl %}{{ "/tags/" | url }}{{ tag | slugify }}/{% endset %}
+  {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
   <a href="{{ tagUrl }}" class="x-govuk-sub-navigation__link">{{ tag }}</a>{%- if not loop.last %}, {% endif %}
 {%- endfor %}
 {% endmacro %}

docs/404.md

@@ -7,4 +7,4 @@ permalink: 404.html
 
 If you entered a web address please check it was correct.
 
-You can browse from [the homepage]({{ "/" | url }}) or use the [sitemap]({{ "/sitemap" | url }}) to find the information you need.
+You can browse from [the homepage](/) or use the [sitemap](/sitemap) to find the information you need.

docs/index.md

@@ -16,7 +16,11 @@ options:
   <section class="govuk-grid-column-one-third-from-desktop govuk-!-margin-bottom-8">
     <h2 class="govuk-heading-m govuk-!-font-size-27">{{ item.data.title }}</h2>
     <p class="govuk-body">{{ item.data.description | markdown("inline") }}</p>
-    <p class="govuk-body"><a class="govuk-link govuk-!-font-weight-bold" href="{{ item.url | url }}">Read our {{ item.data.title | lower }}</a></p>
+    <p class="govuk-body">
+      <a class="govuk-link govuk-!-font-weight-bold" href="{{ item.url }}">
+        Read our {{ item.data.title | lower }}
+      </a>
+    </p>
   </section>
 {% endfor %}
 </div>

docs/patterns/pattern.template.md

@@ -25,14 +25,9 @@ related: # remove this section if you do not need related links on your page
 
 Please see https://x-govuk.github.io/govuk-eleventy-plugin/markdown/#line-breaks for notes on usage of line breaks.
 
-# Notes on using links
+# Notes on linking to headings within a page
 
-Internal links need to follow this format:
-[link text to internal page]({{ '/standards/writing-a-standard/' | url }})
-Note the use of the `url` filter. This ensures the link is appended to the base URL of the webpage correctly.
-
-External links follow standard markdown formatting:
-[link text to external page](https://example.com)
+Heading tags are automatically assigned an id, converting spaces to `kebab-case` and applying URL encoding. If you want to link to a specific heading, you can obtain the URL encoded link by running the site locally, inspecting the appropriate <h3> element in the browser's developer tools and copying the value from the 'id' attribute.
 -->
 
 ---

docs/patterns/securing-application-logging.md

@@ -22,7 +22,7 @@ It is common to log user information from an application to assist operations or
 
 Logging any of these can make information available to people that have access to log aggregation platforms, or log storage, but are not legally allowed to view PII, or should not otherwise have access to that information. User authentication tokens and application secrets can be used to impersonate users and elevate privilege.
 
-[Sensitive Data Exposure](https://owasp.org/www-project-top-ten/2017/A3_2017-Sensitive_Data_Exposure) has been a recognised risk to secure application development historically. Our [managing secrets]({{ '/standards/managing-secrets/' | url }}) standard has requirements on ensuring logs do not contain tokens or other secrets.
+[Sensitive Data Exposure](https://owasp.org/www-project-top-ten/2017/A3_2017-Sensitive_Data_Exposure) has been a recognised risk to secure application development historically. Our [managing secrets](/standards/managing-secrets/) standard has requirements on ensuring logs do not contain tokens or other secrets.
 
 ---
 

docs/patterns/threat-modelling.md

@@ -17,7 +17,7 @@ related: # remove this section if you do not need related links on your page
           href: /principles/design-from-evidence/
 ---
 
-Effectively understanding and communicating the potential attack vectors for our systems enables the Home Office to develop more secure applications and implement [proportionate security]({{ '/principles/proportionate-security/' | url }}). Threat modelling is an [approach to identifying threats to a system](https://owasp.org/www-community/Threat_Modeling) so that appropriate security controls can be prioritised for implementation to mitigate risks.
+Effectively understanding and communicating the potential attack vectors for our systems enables the Home Office to develop more secure applications and implement [proportionate security](/principles/proportionate-security/). Threat modelling is an [approach to identifying threats to a system](https://owasp.org/www-community/Threat_Modeling) so that appropriate security controls can be prioritised for implementation to mitigate risks.
 
 There are a [number of approaches to threat modelling](https://shellsharks.com/threat-modeling) of varying scope and involvement. This pattern suggests a few ways that teams can start to incorporate threat modelling into their activities.
 
@@ -46,7 +46,7 @@ Engineering teams should incorporate [collaborative threat modelling with a 'lit
 
 - You do not need to be a security expert to do threat modelling, and the process does not need to be fully comprehensive to bring value, in fact attempting to build the 'perfect' threat model is often counterproductive
 
-- [Security is everyone's responsibility]({{ '/principles/security-is-everyones-responsibility/' | url }}). While it is a useful opportunity to engage security colleagues in threat modelling activities, it is not essential. Value is brought from the process when the whole team is involved
+- [Security is everyone's responsibility](/principles/security-is-everyones-responsibility/). While it is a useful opportunity to engage security colleagues in threat modelling activities, it is not essential. Value is brought from the process when the whole team is involved
 
 - As engineers, our instinct is to focus on the technology. It is ok to be technology driven when doing threat modelling, but don't forget to think about potential threats from people and process
 

docs/principles/design-from-evidence.md

@@ -25,6 +25,6 @@ Designing from evidence, and documenting that effectively, allows people to unde
 - Be product centric. Understand user needs and provide evidence for the successful delivery of functionality. User research is a great way to do this, especially as part of short, continuous, agile feedback loops
 - All needs and requirements - whether functional or non-functional - should be documented, pointing back to the evidence base and rationale for the requirement
 - Tests should be used to provide evidence that requirements have been met. This should be understandable to stakeholders so that they have confidence in the software
-- Provide evidence for design decisions in documentation and adhere to the [minimal documentation standard]({{ '/standards/minimal-documentation-set-for-a-product/' | url }}) - technical decision logs and other useful design artefacts make assurance, future maintenance and development easier
+- Provide evidence for design decisions in documentation and adhere to the [minimal documentation standard]( /standards/minimal-documentation-set-for-a-product/) - technical decision logs and other useful design artefacts make assurance, future maintenance and development easier
 
 ---

docs/principles/end-to-end-product-ownership.md

@@ -15,7 +15,7 @@ Engineering teams will follow a product-centric approach. They will form part of
 
 As digital services become more intertwined with our core business we need to be able to quickly adapt our digital products in response to change requests from the business. Following this, the [Home Office DDaT Strategy directs us to be product-centric](https://www.gov.uk/government/publications/home-office-digital-data-and-technology-strategy-2024/home-office-digital-data-and-technology-strategy-2024#be-product-centric), basing our decisions on whether they will help users achieve their goal (outcomes). 
 
-Retaining an enduring and effective team that can quickly iterate on the product ensures that the product can continue to meet changing business needs, and creates incentives to write [high quality software that can be easily maintained]({{ '/principles/write-maintainable-reusable-and-evolutionary-code/' | url }}) over a long period of time. This also helps to reduce the need for large-scale rework and expensive replacement programmes.
+Retaining an enduring and effective team that can quickly iterate on the product ensures that the product can continue to meet changing business needs, and creates incentives to write [high quality software that can be easily maintained](/principles/write-maintainable-reusable-and-evolutionary-code/) over a long period of time. This also helps to reduce the need for large-scale rework and expensive replacement programmes.
 
 Giving teams ownership and autonomy, and aligning them appropriately with value streams, allows them to focus on delivering business outcomes. Improved delivery and focus on product-centricity is enabled through stream-aligned teams having the burden on them reduced by other teams, for example by platform teams providing self-service solutions to common requirements.
 

docs/principles/principle.template.md

@@ -25,14 +25,9 @@ related: # remove this section if you do not need related links on your page
 
 Please see https://x-govuk.github.io/govuk-eleventy-plugin/markdown/#line-breaks for notes on usage of line breaks.
 
-# Notes on using links
+# Notes on linking to headings within a page
 
-Internal links need to follow this format:
-[link text to internal page]({{ '/standards/writing-a-standard/' | url }})
-Note the use of the `url` filter. This ensures the link is appended to the base URL of the webpage correctly.
-
-External links follow standard markdown formatting:
-[link text to external page](https://example.com)
+Heading tags are automatically assigned an id, converting spaces to `kebab-case` and applying URL encoding. If you want to link to a specific heading, you can obtain the URL encoded link by running the site locally, inspecting the appropriate <h3> element in the browser's developer tools and copying the value from the 'id' attribute.
 -->
 
 ---

docs/principles/proportionate-security.md

@@ -28,7 +28,7 @@ Security controls that are designed to mitigate understood risks are easier to t
 
 ## Applications and Implications
 
-- Use [threat modelling]({{ '/patterns/threat-modelling/' | url }}) techniques to understand the landscape and actors. This will help to identify threats and risks against your architecture holistically, including shared capabilities or services
+- Use [threat modelling](/patterns/threat-modelling/) techniques to understand the landscape and actors. This will help to identify threats and risks against your architecture holistically, including shared capabilities or services
 - Test security features with users to minimise potential negative impacts on user experience
 - Consider the cost vs benefit of proposed controls
 - Implement and contribute to the Home Office engineering security standards by collaborating with security teams

docs/principles/well-managed-code.md

@@ -28,7 +28,7 @@ Teams may approach these things in different ways depending on their size, make-
 - Have a well-understood and communicated branching strategy, be prepared for this to change over time
 - Define how you protect branches, and review the quality of changes that progress through to production - you can use branch protection rules, and CI/CD to formalise and manage this
 - Use Git for version control and use version control widely, for documentation and configuration as well as code
-- [Be collaborative]({{ '/principles/be-collaborative/' | url }}) and [work in the open]({{ '/principles/work-in-the-open/' | url }}) - manage user access to your repositories appropriately, make sure to share your code as openly as you can unless you have a good reason not to
+- [Be collaborative](/principles/be-collaborative/) and [work in the open](/principles/work-in-the-open/) - manage user access to your repositories appropriately, make sure to share your code as openly as you can unless you have a good reason not to
 - Provide documentation in your repositories, for example: what the repository contains, what it does, how to run it and how to improve it
 
 ---

docs/standards/encrypting-data-rest-transit.md

@@ -48,6 +48,6 @@ Depending on what your service does you might need to use more than one technolo
 
 All encryption of data at rest and in transit requires the use of cryptographic keys. Cryptographic keys are application secrets and must be protected appropriately.
 
-Follow the [Managing secrets standard]({{ '/standards/managing-secrets/' | url }}) to ensure that your are using appropriate secret storage and processes.
+Follow the [Managing secrets standard](/standards/managing-secrets/) to ensure that your are using appropriate secret storage and processes.
 
 ---

docs/standards/infrastructure-utilisation-monitoring.md

@@ -28,7 +28,7 @@ Monitoring infrastructure utilisation enables the increased reliability and perf
 - Detecting, identifying and remediating issues
 - Assuring the reliability of services
 
-Monitoring infrastructure utilisation without also monitoring other signals of service performance is not enough to ensure a high quality service. Teams should look to our patterns for monitoring (for example [Monitoring-as-code]({{ '/patterns/monitoring-as-code/' | url }})) to meet this standard and complement other service monitoring.
+Monitoring infrastructure utilisation without also monitoring other signals of service performance is not enough to ensure a high quality service. Teams should look to our patterns for monitoring (for example [Monitoring-as-code](/patterns/monitoring-as-code/)) to meet this standard and complement other service monitoring.
 
 ---