From 0eec5b1a745005d13108e5ebc239b89a0dfac526 Mon Sep 17 00:00:00 2001
From: jholt1 <jonathan.holt@centrica.com>
Date: Wed, 17 Apr 2024 14:39:11 +0100
Subject: [PATCH 1/2] chore: readability of aside

---
 .../starlight/MarkdownContent.astro           | 39 ++++++++++++-------
 src/plugins/nucleus-remark-aside.js           |  5 ++-
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/starlight/MarkdownContent.astro b/src/components/starlight/MarkdownContent.astro
index 4a49aebef..4f7db4d6d 100644
--- a/src/components/starlight/MarkdownContent.astro
+++ b/src/components/starlight/MarkdownContent.astro
@@ -1,14 +1,14 @@
 ---
-import type { Props } from '@astrojs/starlight/props';
+import type { Props } from "@astrojs/starlight/props";
 
 const { slug } = Astro.params;
-const isComponentPage = (slug ?? '').indexOf('components/ns') > -1;
+const isComponentPage = (slug ?? "").indexOf("components/ns") > -1;
 
 const classList = [
-'sl-markdown-content',
-{'has-component': isComponentPage},
-{'homepage': Astro.props.slug === ''},
-{'errorpage': Astro.props.slug === '404'}
+  "sl-markdown-content",
+  { "has-component": isComponentPage },
+  { homepage: Astro.props.slug === "" },
+  { errorpage: Astro.props.slug === "404" },
 ];
 ---
 
@@ -18,7 +18,7 @@ const classList = [
 
 <style>
   .sl-markdown-content:not(.homepage) {
-    :is(h1, h2, h3, h4, h5, h6) {
+    :is(h1, h2, h3, h4, h5, h6):not(.starlight-aside__title) {
       color: var(--sl-color-heading);
       line-height: var(--sl-line-height-headings);
       scroll-margin-top: -0.5rem;
@@ -58,16 +58,27 @@ const classList = [
   }
 
   .sl-markdown-content {
-    :not(a, strong, em, del, span, input, code) + :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
+    :not(a, strong, em, del, span, input, code)
+      + :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
       margin-top: 1.5rem;
     }
 
     /* Headings after non-headings have more spacing. */
-    :not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+    :not(h1, h2, h3, h4, h5, h6)
+      + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
       margin-top: 2.5rem;
     }
 
-    li > :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *)) {
+    li
+      > :last-child:not(li, ul, ol):not(
+        a,
+        strong,
+        em,
+        del,
+        span,
+        input,
+        :where(.not-content *)
+      ) {
       margin-bottom: 1.25rem;
     }
 
@@ -150,7 +161,6 @@ const classList = [
       padding-inline-start: 1rem;
     }
 
-
     [id^="key"] + table thead {
       display: none; /* NOTE: @drew - 2024-02-23 - A hack to remove the table heading for the Guidance table that follows the heading of "Key" */
     }
@@ -186,7 +196,8 @@ const classList = [
         }
       }
 
-      th, td {
+      th,
+      td {
         padding: 0.375rem 0.8125rem;
         text-align: left;
       }
@@ -228,11 +239,11 @@ const classList = [
       opacity: var(--ec-frm-inlBtnBrdOpa);
       position: relative;
       border: 1px solid var(--ec-frm-inlBtnBrd);
-      
+
       &::before {
         pointer-events: auto;
         border: none;
-        content: 'Copy';
+        content: "Copy";
         opacity: 1;
         color: var(--ec-codeFg);
         width: max-content;
diff --git a/src/plugins/nucleus-remark-aside.js b/src/plugins/nucleus-remark-aside.js
index b23a7f58a..94a407219 100644
--- a/src/plugins/nucleus-remark-aside.js
+++ b/src/plugins/nucleus-remark-aside.js
@@ -129,10 +129,10 @@ export function nucleusRemarkAside() {
         'aside',
         {
           'aria-label': title,
-          class: `starlight-aside starlight-aside--${variant}`,
+          class: `starlight-aside starlight-aside--${variant} not-content`,
         },
         [
-          h('p', { class: 'starlight-aside__title', 'aria-hidden': 'true' }, [
+          h('h3', { class: 'starlight-aside__title' }, [
             s(
               'svg',
               {
@@ -141,6 +141,7 @@ export function nucleusRemarkAside() {
                 height: 16,
                 fill: 'currentColor',
                 class: 'starlight-aside__icon',
+                'aria-hidden': 'true'
               },
               iconPaths[variant]
             ),

From f7c61cb24815dd782ece16af19e6948faa1a8261 Mon Sep 17 00:00:00 2001
From: jholt1 <jonathan.holt@centrica.com>
Date: Wed, 17 Apr 2024 14:42:01 +0100
Subject: [PATCH 2/2] chore: revert autolint

---
 .../starlight/MarkdownContent.astro           | 37 +++++++------------
 1 file changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/components/starlight/MarkdownContent.astro b/src/components/starlight/MarkdownContent.astro
index 4f7db4d6d..77b3b842c 100644
--- a/src/components/starlight/MarkdownContent.astro
+++ b/src/components/starlight/MarkdownContent.astro
@@ -1,14 +1,14 @@
 ---
-import type { Props } from "@astrojs/starlight/props";
+import type { Props } from '@astrojs/starlight/props';
 
 const { slug } = Astro.params;
-const isComponentPage = (slug ?? "").indexOf("components/ns") > -1;
+const isComponentPage = (slug ?? '').indexOf('components/ns') > -1;
 
 const classList = [
-  "sl-markdown-content",
-  { "has-component": isComponentPage },
-  { homepage: Astro.props.slug === "" },
-  { errorpage: Astro.props.slug === "404" },
+'sl-markdown-content',
+{'has-component': isComponentPage},
+{'homepage': Astro.props.slug === ''},
+{'errorpage': Astro.props.slug === '404'}
 ];
 ---
 
@@ -58,27 +58,16 @@ const classList = [
   }
 
   .sl-markdown-content {
-    :not(a, strong, em, del, span, input, code)
-      + :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
+    :not(a, strong, em, del, span, input, code) + :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
       margin-top: 1.5rem;
     }
 
     /* Headings after non-headings have more spacing. */
-    :not(h1, h2, h3, h4, h5, h6)
-      + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+    :not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
       margin-top: 2.5rem;
     }
 
-    li
-      > :last-child:not(li, ul, ol):not(
-        a,
-        strong,
-        em,
-        del,
-        span,
-        input,
-        :where(.not-content *)
-      ) {
+    li > :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *)) {
       margin-bottom: 1.25rem;
     }
 
@@ -161,6 +150,7 @@ const classList = [
       padding-inline-start: 1rem;
     }
 
+
     [id^="key"] + table thead {
       display: none; /* NOTE: @drew - 2024-02-23 - A hack to remove the table heading for the Guidance table that follows the heading of "Key" */
     }
@@ -196,8 +186,7 @@ const classList = [
         }
       }
 
-      th,
-      td {
+      th, td {
         padding: 0.375rem 0.8125rem;
         text-align: left;
       }
@@ -239,11 +228,11 @@ const classList = [
       opacity: var(--ec-frm-inlBtnBrdOpa);
       position: relative;
       border: 1px solid var(--ec-frm-inlBtnBrd);
-
+      
       &::before {
         pointer-events: auto;
         border: none;
-        content: "Copy";
+        content: 'Copy';
         opacity: 1;
         color: var(--ec-codeFg);
         width: max-content;