From 3694d12800a286cfd66a3659f827e5daddd4521d Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 14:01:03 +1100
Subject: [PATCH 01/26] Coded basic clickable headings

---
 docs/_layout/layout.html                        |  1 +
 .../scripts/clickable-heading-anchors.js        | 17 +++++++++++++++++
 .../styles/components/_clickable_anchor.js      |  3 +++
 docs/_static/styles/index.scss                  |  1 +
 4 files changed, 22 insertions(+)
 create mode 100644 docs/_static/scripts/clickable-heading-anchors.js
 create mode 100644 docs/_static/styles/components/_clickable_anchor.js

diff --git a/docs/_layout/layout.html b/docs/_layout/layout.html
index 317333563..cebfe4366 100644
--- a/docs/_layout/layout.html
+++ b/docs/_layout/layout.html
@@ -5,6 +5,7 @@
 
 <script type="text/javascript" src="/_static/scripts/content-root.js"></script>
 <script type="text/javascript" src="/_static/scripts/links-behaviour.js"></script>
+<script type="text/javascript" src="/_static/scripts/clickable-heading-anchors.js"></script>
 
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={{ google_analytics_ga4_tag }}"></script>
diff --git a/docs/_static/scripts/clickable-heading-anchors.js b/docs/_static/scripts/clickable-heading-anchors.js
new file mode 100644
index 000000000..67ea881a0
--- /dev/null
+++ b/docs/_static/scripts/clickable-heading-anchors.js
@@ -0,0 +1,17 @@
+document.addEventListener("DOMContentLoaded", function (event) {
+    const headings = document.querySelectorAll("h2[id], h3[id], h4[id]"); // section[id]
+
+    for (var i = 0; i < headings.length; i++) {
+        const heading = headings[i];
+
+        heading.addEventListener("click", function() {
+            const anchorId = heading.id;
+
+            if (anchorId) {
+                console.log(anchorId);
+                heading.classList.add("clickable-anchor");
+                window.location.hash = `#${anchorId}`
+            }
+        });
+    }
+});
diff --git a/docs/_static/styles/components/_clickable_anchor.js b/docs/_static/styles/components/_clickable_anchor.js
new file mode 100644
index 000000000..2e6d2ddc9
--- /dev/null
+++ b/docs/_static/styles/components/_clickable_anchor.js
@@ -0,0 +1,3 @@
+.clickable-anchor {
+    border: 1px dotted black;
+}
diff --git a/docs/_static/styles/index.scss b/docs/_static/styles/index.scss
index 216bfd8a1..377edaac0 100644
--- a/docs/_static/styles/index.scss
+++ b/docs/_static/styles/index.scss
@@ -25,3 +25,4 @@
 @import "components/processing_steps";
 @import "components/links";
 @import "components/tags_list";
+@import "components/clickable_anchor";

From 3291a0c74927ceec391029a6e50d08db04b6f993 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 14:13:05 +1100
Subject: [PATCH 02/26] Clickable heading anchors most basic use case is
 working

---
 docs/_static/scripts/clickable-heading-anchors.js | 15 +++++++--------
 .../styles/components/_clickable_anchor.js        |  3 ---
 .../styles/components/_clickable_anchor.scss      |  6 ++++++
 3 files changed, 13 insertions(+), 11 deletions(-)
 delete mode 100644 docs/_static/styles/components/_clickable_anchor.js
 create mode 100644 docs/_static/styles/components/_clickable_anchor.scss

diff --git a/docs/_static/scripts/clickable-heading-anchors.js b/docs/_static/scripts/clickable-heading-anchors.js
index 67ea881a0..35be8f39e 100644
--- a/docs/_static/scripts/clickable-heading-anchors.js
+++ b/docs/_static/scripts/clickable-heading-anchors.js
@@ -3,15 +3,14 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
     for (var i = 0; i < headings.length; i++) {
         const heading = headings[i];
+        const anchorId = heading.id;
 
-        heading.addEventListener("click", function() {
-            const anchorId = heading.id;
+        heading.classList.add("clickable-anchor");
 
-            if (anchorId) {
-                console.log(anchorId);
-                heading.classList.add("clickable-anchor");
-                window.location.hash = `#${anchorId}`
-            }
-        });
+        if (anchorId) {
+            heading.addEventListener("click", function() {
+                    window.location.hash = `#${anchorId}`
+            });
+        }
     }
 });
diff --git a/docs/_static/styles/components/_clickable_anchor.js b/docs/_static/styles/components/_clickable_anchor.js
deleted file mode 100644
index 2e6d2ddc9..000000000
--- a/docs/_static/styles/components/_clickable_anchor.js
+++ /dev/null
@@ -1,3 +0,0 @@
-.clickable-anchor {
-    border: 1px dotted black;
-}
diff --git a/docs/_static/styles/components/_clickable_anchor.scss b/docs/_static/styles/components/_clickable_anchor.scss
new file mode 100644
index 000000000..7a5272d9b
--- /dev/null
+++ b/docs/_static/styles/components/_clickable_anchor.scss
@@ -0,0 +1,6 @@
+.clickable-anchor {
+    &:hover {
+        cursor: pointer;
+        text-decoration: underline dashed;
+    }
+}

From e7de79a538de1f2c5589a6ac6da084a6b8a15df1 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 14:38:51 +1100
Subject: [PATCH 03/26] Standardising all heading formats across the site in
 order to make this script work globally

---
 .../scripts/clickable-heading-anchors.js      | 35 ++++++++++++++++---
 .../scripts/product-table-of-contents.js      | 28 ---------------
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/docs/_static/scripts/clickable-heading-anchors.js b/docs/_static/scripts/clickable-heading-anchors.js
index 35be8f39e..34ea9855d 100644
--- a/docs/_static/scripts/clickable-heading-anchors.js
+++ b/docs/_static/scripts/clickable-heading-anchors.js
@@ -1,16 +1,43 @@
 document.addEventListener("DOMContentLoaded", function (event) {
-    const headings = document.querySelectorAll("h2[id], h3[id], h4[id]"); // section[id]
+    // Move the section IDs to the headings
+
+    let sections = document.querySelectorAll("section[id]");
+
+    for (let i = 0; i < sections.length; i++) {
+        let section = sections[i];
+        let id = section.id;
+        section.removeAttribute("id");
+        section.querySelector("* > h2, * > h3, * > h4").id = id;
+    }
+
+    // Convert the 'rubrics' to H2 headings
+
+    let rubrics = document.querySelectorAll("p.rubric");
+
+    for (let i = 0; i < rubrics.length; i++) {
+        let rubric = rubrics[i];
+        let h2 = document.createElement("h2");
+        h2.id = rubric.id;
+        h2.class = rubric.class;
+        h2.innerHTML = rubric.innerHTML;
+        rubric.parentNode.replaceChild(h2, rubric);
+    }
+
+    // Make the headings clickable
+
+    let headings = document.querySelectorAll("h2[id], h3[id], h4[id]"); // section[id]
 
     for (var i = 0; i < headings.length; i++) {
-        const heading = headings[i];
-        const anchorId = heading.id;
+        let heading = headings[i];
+        let anchorId = heading.id;
 
         heading.classList.add("clickable-anchor");
 
         if (anchorId) {
             heading.addEventListener("click", function() {
-                    window.location.hash = `#${anchorId}`
+                window.location.hash = `#${anchorId}`
             });
         }
     }
 });
+
diff --git a/docs/_static/scripts/product-table-of-contents.js b/docs/_static/scripts/product-table-of-contents.js
index bacdc3088..aee30ac17 100644
--- a/docs/_static/scripts/product-table-of-contents.js
+++ b/docs/_static/scripts/product-table-of-contents.js
@@ -1,34 +1,6 @@
 // Enable tables of content on the data product pages using tocbot.
 
 document.addEventListener("DOMContentLoaded", function (event) {
-    // Move the section IDs to the H2 headings
-
-    let sections = document.querySelectorAll(
-        ".product-page .sd-tab-content > section[id]"
-    );
-
-    for (let i = 0; i < sections.length; i++) {
-        let section = sections[i];
-        let id = section.id;
-        section.removeAttribute("id");
-        section.querySelector("* > h2").id = id;
-    }
-
-    // Convert the 'rubrics' to H2 headings
-
-    let rubrics = document.querySelectorAll(
-        ".product-page .sd-tab-content > p.rubric"
-    );
-
-    for (let i = 0; i < rubrics.length; i++) {
-        let rubric = rubrics[i];
-        let h2 = document.createElement("h2");
-        h2.id = rubric.id;
-        h2.class = rubric.class;
-        h2.innerHTML = rubric.innerHTML;
-        rubric.parentNode.replaceChild(h2, rubric);
-    }
-
     // Initialise the table of contents for each tab
 
     let tabs = [

From 917de451b0ace637845c3afed9ade6688f9aefdc Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 14:59:05 +1100
Subject: [PATCH 04/26] Switched to using the data-* property rather than a
 class

---
 docs/_static/scripts/clickable-heading-anchors.js     | 2 +-
 docs/_static/styles/components/_clickable_anchor.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_static/scripts/clickable-heading-anchors.js b/docs/_static/scripts/clickable-heading-anchors.js
index 34ea9855d..2dab96df3 100644
--- a/docs/_static/scripts/clickable-heading-anchors.js
+++ b/docs/_static/scripts/clickable-heading-anchors.js
@@ -31,7 +31,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         let heading = headings[i];
         let anchorId = heading.id;
 
-        heading.classList.add("clickable-anchor");
+        heading.dataset.anchorHeading = anchorId
 
         if (anchorId) {
             heading.addEventListener("click", function() {
diff --git a/docs/_static/styles/components/_clickable_anchor.scss b/docs/_static/styles/components/_clickable_anchor.scss
index 7a5272d9b..c51ad8848 100644
--- a/docs/_static/styles/components/_clickable_anchor.scss
+++ b/docs/_static/styles/components/_clickable_anchor.scss
@@ -1,4 +1,4 @@
-.clickable-anchor {
+[data-anchor-heading] {
     &:hover {
         cursor: pointer;
         text-decoration: underline dashed;

From b490820104f19c2c27cb80bb16d1ec82734a1ff9 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 15:02:48 +1100
Subject: [PATCH 05/26] Replacing a hardcoded list in the product table of
 contents with a dynamic select query

---
 .../scripts/product-table-of-contents.js       | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/docs/_static/scripts/product-table-of-contents.js b/docs/_static/scripts/product-table-of-contents.js
index aee30ac17..7325f198f 100644
--- a/docs/_static/scripts/product-table-of-contents.js
+++ b/docs/_static/scripts/product-table-of-contents.js
@@ -1,23 +1,15 @@
 // Enable tables of content on the data product pages using tocbot.
 
 document.addEventListener("DOMContentLoaded", function (event) {
-    // Initialise the table of contents for each tab
-
-    let tabs = [
-        "overview",
-        "access",
-        "details",
-        "quality",
-        "history",
-        "faqs",
-        "credits"
-    ];
+    let tabs = document.querySelectorAll(".product-page .sd-tab-label");
 
     for (let i = 0; i < tabs.length; i++) {
         let tab = tabs[i];
+        let id = tab.id;
+
         tocbot.init({
-            contentSelector: `.product-page #${tab} + .sd-tab-content`,
-            tocSelector: `.product-page #${tab}-table-of-contents`,
+            contentSelector: `.product-page #${id} + .sd-tab-content`,
+            tocSelector: `.product-page #${id}-table-of-contents`,
             headingSelector: "h2"
         });
     }

From ea48d9f88155b5eab3cbe4f878389bb953371631 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 15:25:26 +1100
Subject: [PATCH 06/26] Attempting to simplify the way the tocbot is placed on
 the product pages in the template

---
 .../scripts/clickable-heading-anchors.js      |  6 +--
 .../scripts/product-table-of-contents.js      |  2 +-
 docs/_templates/product-v1.rst                | 49 ++++++-------------
 3 files changed, 18 insertions(+), 39 deletions(-)

diff --git a/docs/_static/scripts/clickable-heading-anchors.js b/docs/_static/scripts/clickable-heading-anchors.js
index 2dab96df3..f5559123e 100644
--- a/docs/_static/scripts/clickable-heading-anchors.js
+++ b/docs/_static/scripts/clickable-heading-anchors.js
@@ -25,15 +25,15 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
     // Make the headings clickable
 
-    let headings = document.querySelectorAll("h2[id], h3[id], h4[id]"); // section[id]
+    let headings = document.querySelectorAll("h2[id], h3[id], h4[id]");
 
     for (var i = 0; i < headings.length; i++) {
         let heading = headings[i];
         let anchorId = heading.id;
 
-        heading.dataset.anchorHeading = anchorId
-
         if (anchorId) {
+            heading.dataset.anchorHeading = true
+
             heading.addEventListener("click", function() {
                 window.location.hash = `#${anchorId}`
             });
diff --git a/docs/_static/scripts/product-table-of-contents.js b/docs/_static/scripts/product-table-of-contents.js
index 7325f198f..e3a5651f4 100644
--- a/docs/_static/scripts/product-table-of-contents.js
+++ b/docs/_static/scripts/product-table-of-contents.js
@@ -9,7 +9,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
         tocbot.init({
             contentSelector: `.product-page #${id} + .sd-tab-content`,
-            tocSelector: `.product-page #${id}-table-of-contents`,
+            tocSelector: `.product-page #${id} + .sd-tab-content > .tocbot-selector`,
             headingSelector: "h2"
         });
     }
diff --git a/docs/_templates/product-v1.rst b/docs/_templates/product-v1.rst
index cbf6be67a..9fcdd2bb3 100644
--- a/docs/_templates/product-v1.rst
+++ b/docs/_templates/product-v1.rst
@@ -103,12 +103,9 @@
     .. tab-item:: Overview
        :name: overview
 
-       .. container:: table-of-contents
+       .. raw:: html
 
-          .. container::
-             :name: overview-table-of-contents
-
-             |nbsp|
+          <div class="tocbot-selector"></div>
 
        .. include:: _overview_1.md
           :parser: myst_parser.sphinx_
@@ -221,12 +218,9 @@
     .. tab-item:: Details
        :name: details
 
-       .. container:: table-of-contents
-
-          .. container::
-             :name: details-table-of-contents
+       .. raw:: html
 
-             |nbsp|
+          <div class="tocbot-selector"></div>
 
        .. include:: _details.md
           :parser: myst_parser.sphinx_
@@ -236,12 +230,9 @@
     .. tab-item:: Quality
        :name: quality
 
-       .. container:: table-of-contents
+       .. raw:: html
 
-          .. container::
-             :name: quality-table-of-contents
-
-             |nbsp|
+          <div class="tocbot-selector"></div>
 
        .. include:: _quality.md
           :parser: myst_parser.sphinx_
@@ -251,12 +242,9 @@
     .. tab-item:: Access
        :name: access
 
-       .. container:: table-of-contents
-
-          .. container::
-             :name: access-table-of-contents
+       .. raw:: html
 
-             |nbsp|
+          <div class="tocbot-selector"></div>
 
        .. rubric:: Access the data
           :name: access-the-data-2
@@ -336,12 +324,9 @@
     .. tab-item:: History
        :name: history
 
-       .. container:: table-of-contents
+       .. raw:: html
 
-          .. container::
-             :name: history-table-of-contents
-
-             |nbsp|
+          <div class="tocbot-selector"></div>
 
        {% if not is_latest_version %}
        .. rubric:: Other versions
@@ -374,12 +359,9 @@
     .. tab-item:: FAQs
        :name: faqs
 
-       .. container:: table-of-contents
-
-          .. container::
-             :name: faqs-table-of-contents
+       .. raw:: html
 
-             |nbsp|
+          <div class="tocbot-selector"></div>
 
        .. include:: _faqs.md
           :parser: myst_parser.sphinx_
@@ -389,12 +371,9 @@
     .. tab-item:: Credits
        :name: credits
 
-       .. container:: table-of-contents
-
-          .. container::
-             :name: credits-table-of-contents
+       .. raw:: html
 
-             |nbsp|
+          <div class="tocbot-selector"></div>
 
        .. include:: _credits.md
           :parser: myst_parser.sphinx_

From 544fa6a3268806ee4ec6043b3a8e0df70a1792d2 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 16:23:03 +1100
Subject: [PATCH 07/26] The product tab click handling is now working

---
 .../scripts/clickable-heading-anchors.js        | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/docs/_static/scripts/clickable-heading-anchors.js b/docs/_static/scripts/clickable-heading-anchors.js
index f5559123e..5b158d48b 100644
--- a/docs/_static/scripts/clickable-heading-anchors.js
+++ b/docs/_static/scripts/clickable-heading-anchors.js
@@ -23,7 +23,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         rubric.parentNode.replaceChild(h2, rubric);
     }
 
-    // Make the headings clickable
+    // Headings click handling
 
     let headings = document.querySelectorAll("h2[id], h3[id], h4[id]");
 
@@ -39,5 +39,20 @@ document.addEventListener("DOMContentLoaded", function (event) {
             });
         }
     }
+
+    // Product tabs click handling
+
+    let tabs = document.querySelectorAll(".product-page .sd-tab-label");
+
+    for (let i = 0; i < tabs.length; i++) {
+        let tab = tabs[i];
+        let id = tab.id;
+
+        if (id) {
+            tab.addEventListener("click", function() {
+                window.history.pushState("", "", `?tab=${id}`);
+            });
+        }
+    }
 });
 

From 95637a92fa721d0531d30adcf5d4afbb0f3df2a7 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 16:24:26 +1100
Subject: [PATCH 08/26] Fixing product table of contents styling

---
 docs/_static/styles/components/_product_table_of_contents.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_static/styles/components/_product_table_of_contents.scss b/docs/_static/styles/components/_product_table_of_contents.scss
index 5e4ba555b..1647ac49c 100644
--- a/docs/_static/styles/components/_product_table_of_contents.scss
+++ b/docs/_static/styles/components/_product_table_of_contents.scss
@@ -1,4 +1,4 @@
-.table-of-contents {
+.tocbot-selector {
     $font-size: 0.85rem;
 
     @media only screen and (max-width: $breakpoint-md) {

From 2668a730ced01747efddbfaceb7a1b49eb8c73a8 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 16:44:24 +1100
Subject: [PATCH 09/26] Fixing the product tabs URL logic

---
 docs/_static/scripts/clickable-heading-anchors.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/_static/scripts/clickable-heading-anchors.js b/docs/_static/scripts/clickable-heading-anchors.js
index 5b158d48b..ce3a50bf8 100644
--- a/docs/_static/scripts/clickable-heading-anchors.js
+++ b/docs/_static/scripts/clickable-heading-anchors.js
@@ -43,6 +43,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
     // Product tabs click handling
 
     let tabs = document.querySelectorAll(".product-page .sd-tab-label");
+    let urlParams = new URLSearchParams(window.location.search);
+
+    if(!urlParams.has("tab")) {
+        console.log("startup");
+        window.history.pushState("", "", `?tab=${tabs[0].id}${window.location.hash}`);
+    }
 
     for (let i = 0; i < tabs.length; i++) {
         let tab = tabs[i];
@@ -50,6 +56,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
         if (id) {
             tab.addEventListener("click", function() {
+                console.log("click");
                 window.history.pushState("", "", `?tab=${id}`);
             });
         }

From 6ac11d548abad4e086aeaef5baab71396bc8d82b Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 17:08:41 +1100
Subject: [PATCH 10/26] Product tab URL logic is now working properly

---
 .../scripts/clickable-heading-anchors.js       | 11 ++++++-----
 docs/_static/scripts/product-tab-deep-links.js | 18 +++++++++---------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/docs/_static/scripts/clickable-heading-anchors.js b/docs/_static/scripts/clickable-heading-anchors.js
index ce3a50bf8..a2f15293f 100644
--- a/docs/_static/scripts/clickable-heading-anchors.js
+++ b/docs/_static/scripts/clickable-heading-anchors.js
@@ -43,11 +43,13 @@ document.addEventListener("DOMContentLoaded", function (event) {
     // Product tabs click handling
 
     let tabs = document.querySelectorAll(".product-page .sd-tab-label");
-    let urlParams = new URLSearchParams(window.location.search);
+    let tabUrlParam = new URLSearchParams(window.location.search).get("tab");
+    let overviewTabId = tabs[0].id;
 
-    if(!urlParams.has("tab")) {
-        console.log("startup");
-        window.history.pushState("", "", `?tab=${tabs[0].id}${window.location.hash}`);
+    if(!tabUrlParam) {
+        window.history.pushState("", "", `?tab=${overviewTabId}${window.location.hash}`);
+    } else {
+        document.querySelector(`.sd-tab-set > #${tabUrlParam}`).click();
     }
 
     for (let i = 0; i < tabs.length; i++) {
@@ -56,7 +58,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
         if (id) {
             tab.addEventListener("click", function() {
-                console.log("click");
                 window.history.pushState("", "", `?tab=${id}`);
             });
         }
diff --git a/docs/_static/scripts/product-tab-deep-links.js b/docs/_static/scripts/product-tab-deep-links.js
index 66aeaa35e..0d608e35e 100644
--- a/docs/_static/scripts/product-tab-deep-links.js
+++ b/docs/_static/scripts/product-tab-deep-links.js
@@ -1,12 +1,12 @@
 // Enable linking to a specific tab on a product page by adding a parameter to the URL.
 // E.g. to open the Access tab, use ?tab=access
 
-document.addEventListener("DOMContentLoaded", function (event) {
-    const tabUrlParameter = new URLSearchParams(window.location.search).get(
-        "tab"
-    );
-
-    if (tabUrlParameter) {
-        document.querySelector(`.sd-tab-set > #${tabUrlParameter}`).click();
-    }
-});
+// document.addEventListener("DOMContentLoaded", function (event) {
+//     const tabUrlParameter = new URLSearchParams(window.location.search).get(
+//         "tab"
+//     );
+//
+//     if (tabUrlParameter) {
+//         document.querySelector(`.sd-tab-set > #${tabUrlParameter}`).click();
+//     }
+// });

From 85040f904e8098febded5f7364905dcca8a3007c Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 17:09:01 +1100
Subject: [PATCH 11/26] Removed H4 headings from being clickable

---
 docs/_static/scripts/clickable-heading-anchors.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_static/scripts/clickable-heading-anchors.js b/docs/_static/scripts/clickable-heading-anchors.js
index a2f15293f..857c1f5b5 100644
--- a/docs/_static/scripts/clickable-heading-anchors.js
+++ b/docs/_static/scripts/clickable-heading-anchors.js
@@ -25,7 +25,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
     // Headings click handling
 
-    let headings = document.querySelectorAll("h2[id], h3[id], h4[id]");
+    let headings = document.querySelectorAll("h2[id], h3[id]");
 
     for (var i = 0; i < headings.length; i++) {
         let heading = headings[i];

From 868ec8bed83907d6a2718a4d6e55ab4675d45792 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 17:14:39 +1100
Subject: [PATCH 12/26] Fixing product heading styling

---
 docs/_static/styles/components/_showcase_panel.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/_static/styles/components/_showcase_panel.scss b/docs/_static/styles/components/_showcase_panel.scss
index 1950e335d..b8ece6040 100644
--- a/docs/_static/styles/components/_showcase_panel.scss
+++ b/docs/_static/styles/components/_showcase_panel.scss
@@ -35,9 +35,13 @@
         }
     }
 
+    & > div > h2,
     & > div > .rubric {
         font-size: 1.65rem;
         font-weight: bold;
+        margin: 0;
+        color: white;
+        line-height: 1.65;
     }
 
     &.reverse {

From 5f5dc0851e6691a143b02b341f1900fc0b8d0094 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 17:27:14 +1100
Subject: [PATCH 13/26] Tidying the headings behaviour code

---
 docs/_layout/layout.html                             |  2 +-
 ...able-heading-anchors.js => headings-behaviour.js} | 12 +++++++-----
 docs/_static/scripts/product-tab-deep-links.js       | 12 ------------
 docs/_templates/product-v1.rst                       |  1 -
 4 files changed, 8 insertions(+), 19 deletions(-)
 rename docs/_static/scripts/{clickable-heading-anchors.js => headings-behaviour.js} (82%)
 delete mode 100644 docs/_static/scripts/product-tab-deep-links.js

diff --git a/docs/_layout/layout.html b/docs/_layout/layout.html
index cebfe4366..a7bb7f3a5 100644
--- a/docs/_layout/layout.html
+++ b/docs/_layout/layout.html
@@ -5,7 +5,7 @@
 
 <script type="text/javascript" src="/_static/scripts/content-root.js"></script>
 <script type="text/javascript" src="/_static/scripts/links-behaviour.js"></script>
-<script type="text/javascript" src="/_static/scripts/clickable-heading-anchors.js"></script>
+<script type="text/javascript" src="/_static/scripts/headings-behaviour.js"></script>
 
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={{ google_analytics_ga4_tag }}"></script>
diff --git a/docs/_static/scripts/clickable-heading-anchors.js b/docs/_static/scripts/headings-behaviour.js
similarity index 82%
rename from docs/_static/scripts/clickable-heading-anchors.js
rename to docs/_static/scripts/headings-behaviour.js
index 857c1f5b5..d0812069b 100644
--- a/docs/_static/scripts/clickable-heading-anchors.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -1,5 +1,5 @@
 document.addEventListener("DOMContentLoaded", function (event) {
-    // Move the section IDs to the headings
+    // Move the anchor IDs from the section elements to the headings
 
     let sections = document.querySelectorAll("section[id]");
 
@@ -7,10 +7,10 @@ document.addEventListener("DOMContentLoaded", function (event) {
         let section = sections[i];
         let id = section.id;
         section.removeAttribute("id");
-        section.querySelector("* > h2, * > h3, * > h4").id = id;
+        section.querySelector("* > h2, * > h3").id = id;
     }
 
-    // Convert the 'rubrics' to H2 headings
+    // Convert the 'rubric' elements to H2 headings
 
     let rubrics = document.querySelectorAll("p.rubric");
 
@@ -23,7 +23,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
         rubric.parentNode.replaceChild(h2, rubric);
     }
 
-    // Headings click handling
+    // Clicking on a heading will add its anchor ID to the URL
+    // E.g. /example/#introduction
 
     let headings = document.querySelectorAll("h2[id], h3[id]");
 
@@ -40,7 +41,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
         }
     }
 
-    // Product tabs click handling
+    // Clicking on a product tab will add its ID to the URL
+    // E.g. /example/?tab=overview
 
     let tabs = document.querySelectorAll(".product-page .sd-tab-label");
     let tabUrlParam = new URLSearchParams(window.location.search).get("tab");
diff --git a/docs/_static/scripts/product-tab-deep-links.js b/docs/_static/scripts/product-tab-deep-links.js
deleted file mode 100644
index 0d608e35e..000000000
--- a/docs/_static/scripts/product-tab-deep-links.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// Enable linking to a specific tab on a product page by adding a parameter to the URL.
-// E.g. to open the Access tab, use ?tab=access
-
-// document.addEventListener("DOMContentLoaded", function (event) {
-//     const tabUrlParameter = new URLSearchParams(window.location.search).get(
-//         "tab"
-//     );
-//
-//     if (tabUrlParameter) {
-//         document.querySelector(`.sd-tab-set > #${tabUrlParameter}`).click();
-//     }
-// });
diff --git a/docs/_templates/product-v1.rst b/docs/_templates/product-v1.rst
index 9fcdd2bb3..2a12ff61a 100644
--- a/docs/_templates/product-v1.rst
+++ b/docs/_templates/product-v1.rst
@@ -383,5 +383,4 @@
 
    <script type="text/javascript" src="/_static/scripts/vendors/tocbot.min.js"></script>
    <script type="text/javascript" src="/_static/scripts/product-table-of-contents.js" /></script>
-   <script type="text/javascript" src="/_static/scripts/product-tab-deep-links.js" /></script>
    <script type="text/javascript" src="/_static/scripts/access-cards-tooltips.js" /></script>

From 0f2179a7436c1fde19b1cf51023d34c3b8bc44ac Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Mon, 29 Jan 2024 17:34:09 +1100
Subject: [PATCH 14/26] Several minor improvements to the code

---
 docs/_static/scripts/headings-behaviour.js                      | 2 +-
 .../components/{_clickable_anchor.scss => _anchor_heading.scss} | 2 +-
 docs/_static/styles/index.scss                                  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename docs/_static/styles/components/{_clickable_anchor.scss => _anchor_heading.scss} (78%)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index d0812069b..a25fc9c4c 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -33,7 +33,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         let anchorId = heading.id;
 
         if (anchorId) {
-            heading.dataset.anchorHeading = true
+            heading.classList.add("anchor-heading");
 
             heading.addEventListener("click", function() {
                 window.location.hash = `#${anchorId}`
diff --git a/docs/_static/styles/components/_clickable_anchor.scss b/docs/_static/styles/components/_anchor_heading.scss
similarity index 78%
rename from docs/_static/styles/components/_clickable_anchor.scss
rename to docs/_static/styles/components/_anchor_heading.scss
index c51ad8848..71b8441d1 100644
--- a/docs/_static/styles/components/_clickable_anchor.scss
+++ b/docs/_static/styles/components/_anchor_heading.scss
@@ -1,4 +1,4 @@
-[data-anchor-heading] {
+.anchor-heading {
     &:hover {
         cursor: pointer;
         text-decoration: underline dashed;
diff --git a/docs/_static/styles/index.scss b/docs/_static/styles/index.scss
index 377edaac0..b4d2269d9 100644
--- a/docs/_static/styles/index.scss
+++ b/docs/_static/styles/index.scss
@@ -25,4 +25,4 @@
 @import "components/processing_steps";
 @import "components/links";
 @import "components/tags_list";
-@import "components/clickable_anchor";
+@import "components/anchor_heading";

From 5fe2a0b5c2276d89483a53faf486d6dcadf13d66 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 09:36:26 +1100
Subject: [PATCH 15/26] Removed the H3 headings from having this feature since
 it is not needed

---
 docs/_static/scripts/headings-behaviour.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index a25fc9c4c..d47adbc82 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -7,7 +7,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         let section = sections[i];
         let id = section.id;
         section.removeAttribute("id");
-        section.querySelector("* > h2, * > h3").id = id;
+        section.querySelector("* > h2").id = id;
     }
 
     // Convert the 'rubric' elements to H2 headings
@@ -26,7 +26,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
     // Clicking on a heading will add its anchor ID to the URL
     // E.g. /example/#introduction
 
-    let headings = document.querySelectorAll("h2[id], h3[id]");
+    let headings = document.querySelectorAll("h2[id]");
 
     for (var i = 0; i < headings.length; i++) {
         let heading = headings[i];

From f671ba3014445159754f871a8a757f49d8cc7d50 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 10:04:23 +1100
Subject: [PATCH 16/26] Re-added the support for H3 headings because some
 Notebooks and User guides may need this feature

---
 docs/_static/scripts/headings-behaviour.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index d47adbc82..a25fc9c4c 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -7,7 +7,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         let section = sections[i];
         let id = section.id;
         section.removeAttribute("id");
-        section.querySelector("* > h2").id = id;
+        section.querySelector("* > h2, * > h3").id = id;
     }
 
     // Convert the 'rubric' elements to H2 headings
@@ -26,7 +26,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
     // Clicking on a heading will add its anchor ID to the URL
     // E.g. /example/#introduction
 
-    let headings = document.querySelectorAll("h2[id]");
+    let headings = document.querySelectorAll("h2[id], h3[id]");
 
     for (var i = 0; i < headings.length; i++) {
         let heading = headings[i];

From 45dbcf596c0e037209365c13e1fce4643c8c34b9 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 10:34:49 +1100
Subject: [PATCH 17/26] Add anchor ID from the custom ID element above the
 heading

---
 docs/_static/scripts/headings-behaviour.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index a25fc9c4c..aa7d611cc 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -10,6 +10,20 @@ document.addEventListener("DOMContentLoaded", function (event) {
         section.querySelector("* > h2, * > h3").id = id;
     }
 
+    // Add anchor ID from the custom ID element above the heading
+
+    let headings2 = document.querySelectorAll("h2, h3");
+
+    for (var i = 0; i < headings2.length; i++) {
+        let heading = headings2[i];
+        let maybeCustomIdElement = heading.previousSibling;
+
+        if (maybeCustomIdElement && maybeCustomIdElement.tagName.toLowerCase() === "span" && maybeCustomIdElement.hasAttribute("id")) {
+            let customId = maybeCustomIdElement.id;
+            heading.id = customId;
+        }
+    }
+
     // Convert the 'rubric' elements to H2 headings
 
     let rubrics = document.querySelectorAll("p.rubric");

From 1d688f61d9b5080fa91b9a3f0a3530a6abac94d3 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 10:37:19 +1100
Subject: [PATCH 18/26] Putting each section of code into its own scope block

---
 docs/_static/scripts/headings-behaviour.js | 112 +++++++++++----------
 1 file changed, 61 insertions(+), 51 deletions(-)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index aa7d611cc..7f60269b6 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -1,82 +1,92 @@
 document.addEventListener("DOMContentLoaded", function (event) {
     // Move the anchor IDs from the section elements to the headings
 
-    let sections = document.querySelectorAll("section[id]");
-
-    for (let i = 0; i < sections.length; i++) {
-        let section = sections[i];
-        let id = section.id;
-        section.removeAttribute("id");
-        section.querySelector("* > h2, * > h3").id = id;
-    }
+    (function() {
+        let sections = document.querySelectorAll("section[id]");
+
+        for (let i = 0; i < sections.length; i++) {
+            let section = sections[i];
+            let id = section.id;
+            section.removeAttribute("id");
+            section.querySelector("* > h2, * > h3").id = id;
+        }
+    })();
 
     // Add anchor ID from the custom ID element above the heading
 
-    let headings2 = document.querySelectorAll("h2, h3");
+    (function() {
+        let headings = document.querySelectorAll("h2, h3");
 
-    for (var i = 0; i < headings2.length; i++) {
-        let heading = headings2[i];
-        let maybeCustomIdElement = heading.previousSibling;
+        for (var i = 0; i < headings.length; i++) {
+            let heading = headings[i];
+            let maybeCustomIdElement = heading.previousSibling;
 
-        if (maybeCustomIdElement && maybeCustomIdElement.tagName.toLowerCase() === "span" && maybeCustomIdElement.hasAttribute("id")) {
-            let customId = maybeCustomIdElement.id;
-            heading.id = customId;
+            if (maybeCustomIdElement && maybeCustomIdElement.tagName.toLowerCase() === "span" && maybeCustomIdElement.hasAttribute("id")) {
+                let customId = maybeCustomIdElement.id;
+                heading.id = customId;
+            }
         }
-    }
+    })();
 
     // Convert the 'rubric' elements to H2 headings
 
-    let rubrics = document.querySelectorAll("p.rubric");
+    (function() {
+        let rubrics = document.querySelectorAll("p.rubric");
 
-    for (let i = 0; i < rubrics.length; i++) {
-        let rubric = rubrics[i];
-        let h2 = document.createElement("h2");
-        h2.id = rubric.id;
-        h2.class = rubric.class;
-        h2.innerHTML = rubric.innerHTML;
-        rubric.parentNode.replaceChild(h2, rubric);
-    }
+        for (let i = 0; i < rubrics.length; i++) {
+            let rubric = rubrics[i];
+            let h2 = document.createElement("h2");
+            h2.id = rubric.id;
+            h2.class = rubric.class;
+            h2.innerHTML = rubric.innerHTML;
+            rubric.parentNode.replaceChild(h2, rubric);
+        }
+    })();
 
     // Clicking on a heading will add its anchor ID to the URL
     // E.g. /example/#introduction
 
-    let headings = document.querySelectorAll("h2[id], h3[id]");
+    (function() {
+        let headings = document.querySelectorAll("h2[id], h3[id]");
 
-    for (var i = 0; i < headings.length; i++) {
-        let heading = headings[i];
-        let anchorId = heading.id;
+        for (var i = 0; i < headings.length; i++) {
+            let heading = headings[i];
+            let anchorId = heading.id;
 
-        if (anchorId) {
-            heading.classList.add("anchor-heading");
+            if (anchorId) {
+                heading.classList.add("anchor-heading");
 
-            heading.addEventListener("click", function() {
-                window.location.hash = `#${anchorId}`
-            });
+                heading.addEventListener("click", function() {
+                    window.location.hash = `#${anchorId}`
+                });
+            }
         }
-    }
+    })();
 
     // Clicking on a product tab will add its ID to the URL
     // E.g. /example/?tab=overview
 
-    let tabs = document.querySelectorAll(".product-page .sd-tab-label");
-    let tabUrlParam = new URLSearchParams(window.location.search).get("tab");
-    let overviewTabId = tabs[0].id;
+    (function() {
+        let tabs = document.querySelectorAll(".product-page .sd-tab-label");
+        let tabUrlParam = new URLSearchParams(window.location.search).get("tab");
+        let overviewTabId = tabs[0].id;
 
-    if(!tabUrlParam) {
-        window.history.pushState("", "", `?tab=${overviewTabId}${window.location.hash}`);
-    } else {
-        document.querySelector(`.sd-tab-set > #${tabUrlParam}`).click();
-    }
+        if(!tabUrlParam) {
+            window.history.pushState("", "", `?tab=${overviewTabId}${window.location.hash}`);
+        } else {
+            document.querySelector(`.sd-tab-set > #${tabUrlParam}`).click();
+        }
 
-    for (let i = 0; i < tabs.length; i++) {
-        let tab = tabs[i];
-        let id = tab.id;
+        for (let i = 0; i < tabs.length; i++) {
+            let tab = tabs[i];
+            let id = tab.id;
 
-        if (id) {
-            tab.addEventListener("click", function() {
-                window.history.pushState("", "", `?tab=${id}`);
-            });
+            if (id) {
+                tab.addEventListener("click", function() {
+                    window.history.pushState("", "", `?tab=${id}`);
+                });
+            }
         }
-    }
+    })();
 });
 

From 8173593dcd81db488f265529911744ee9b223fcb Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 11:11:18 +1100
Subject: [PATCH 19/26] Custom anchor IDs above headings will now be used as
 the anchor ID

---
 docs/_static/scripts/headings-behaviour.js    | 38 ++++++++++++-------
 .../styles/components/_anchor_heading.scss    |  2 +-
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index 7f60269b6..8234b04d6 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -1,4 +1,19 @@
 document.addEventListener("DOMContentLoaded", function (event) {
+    // Add an anchor ID data attribute based on the heading's ID attribute
+
+    (function() {
+        let headings = document.querySelectorAll("h2, h3");
+
+        for (var i = 0; i < headings.length; i++) {
+            let heading = headings[i];
+            let id = heading.id;
+
+            if (id) {
+                heading.dataset.anchorId = id;
+            }
+        }
+    })();
+
     // Move the anchor IDs from the section elements to the headings
 
     (function() {
@@ -7,8 +22,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         for (let i = 0; i < sections.length; i++) {
             let section = sections[i];
             let id = section.id;
-            section.removeAttribute("id");
-            section.querySelector("* > h2, * > h3").id = id;
+            section.querySelector("* > h2, * > h3").dataset.anchorId = id;
         }
     })();
 
@@ -21,9 +35,9 @@ document.addEventListener("DOMContentLoaded", function (event) {
             let heading = headings[i];
             let maybeCustomIdElement = heading.previousSibling;
 
-            if (maybeCustomIdElement && maybeCustomIdElement.tagName.toLowerCase() === "span" && maybeCustomIdElement.hasAttribute("id")) {
+            if (maybeCustomIdElement && maybeCustomIdElement.nodeName === "SPAN" && maybeCustomIdElement.hasAttribute("id")) {
                 let customId = maybeCustomIdElement.id;
-                heading.id = customId;
+                heading.dataset.anchorId = customId;
             }
         }
     })();
@@ -37,6 +51,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
             let rubric = rubrics[i];
             let h2 = document.createElement("h2");
             h2.id = rubric.id;
+            h2.dataset.anchorId = rubric.id;
             h2.class = rubric.class;
             h2.innerHTML = rubric.innerHTML;
             rubric.parentNode.replaceChild(h2, rubric);
@@ -47,19 +62,16 @@ document.addEventListener("DOMContentLoaded", function (event) {
     // E.g. /example/#introduction
 
     (function() {
-        let headings = document.querySelectorAll("h2[id], h3[id]");
+        let headings = document.querySelectorAll("h2[data-anchor-id], h3[data-anchor-id]");
 
         for (var i = 0; i < headings.length; i++) {
             let heading = headings[i];
-            let anchorId = heading.id;
+            let anchorId = heading.dataset.anchorId;
 
-            if (anchorId) {
-                heading.classList.add("anchor-heading");
-
-                heading.addEventListener("click", function() {
-                    window.location.hash = `#${anchorId}`
-                });
-            }
+            heading.addEventListener("click", function() {
+                console.log(anchorId);
+                window.location.hash = `#${anchorId}`
+            });
         }
     })();
 
diff --git a/docs/_static/styles/components/_anchor_heading.scss b/docs/_static/styles/components/_anchor_heading.scss
index 71b8441d1..dbe270985 100644
--- a/docs/_static/styles/components/_anchor_heading.scss
+++ b/docs/_static/styles/components/_anchor_heading.scss
@@ -1,4 +1,4 @@
-.anchor-heading {
+[data-anchor-id] {
     &:hover {
         cursor: pointer;
         text-decoration: underline dashed;

From c1e9674f908b7b26fdac02b647f6a3394617a55d Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 12:51:41 +1100
Subject: [PATCH 20/26] Rearranging the order of the heading behaviour rules to
 fix bugs

---
 docs/_static/scripts/headings-behaviour.js | 69 +++++++++++-----------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index 8234b04d6..7780a0356 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -1,20 +1,23 @@
+// Sets behaviours for headings.
+// The rules in this script occur in a specific order and each will overwrite properties set in the previous one.
+
 document.addEventListener("DOMContentLoaded", function (event) {
-    // Add an anchor ID data attribute based on the heading's ID attribute
+    // Convert the 'rubric' headings to H2 headings
 
     (function() {
-        let headings = document.querySelectorAll("h2, h3");
-
-        for (var i = 0; i < headings.length; i++) {
-            let heading = headings[i];
-            let id = heading.id;
+        let rubrics = document.querySelectorAll("p.rubric");
 
-            if (id) {
-                heading.dataset.anchorId = id;
-            }
+        for (let i = 0; i < rubrics.length; i++) {
+            let rubric = rubrics[i];
+            let h2 = document.createElement("h2");
+            h2.id = rubric.id;
+            h2.class = rubric.class;
+            h2.innerHTML = rubric.innerHTML;
+            rubric.parentNode.replaceChild(h2, rubric);
         }
     })();
 
-    // Move the anchor IDs from the section elements to the headings
+    // Add a 'data-anchor-id' property based on the Section ID.
 
     (function() {
         let sections = document.querySelectorAll("section[id]");
@@ -22,44 +25,45 @@ document.addEventListener("DOMContentLoaded", function (event) {
         for (let i = 0; i < sections.length; i++) {
             let section = sections[i];
             let id = section.id;
-            section.querySelector("* > h2, * > h3").dataset.anchorId = id;
+            let maybeHeading = section.querySelector("* > h2, * > h3");
+
+            if (maybeHeading) {
+                maybeHeading.dataset.anchorId = id;
+            }
         }
     })();
 
-    // Add anchor ID from the custom ID element above the heading
+    // Add a 'data-anchor-id' property based on the heading's own ID.
 
     (function() {
         let headings = document.querySelectorAll("h2, h3");
 
         for (var i = 0; i < headings.length; i++) {
             let heading = headings[i];
-            let maybeCustomIdElement = heading.previousSibling;
+            let id = heading.id;
 
-            if (maybeCustomIdElement && maybeCustomIdElement.nodeName === "SPAN" && maybeCustomIdElement.hasAttribute("id")) {
-                let customId = maybeCustomIdElement.id;
-                heading.dataset.anchorId = customId;
+            if (id) {
+                heading.dataset.anchorId = id;
             }
         }
     })();
 
-    // Convert the 'rubric' elements to H2 headings
+    // Add a 'data-anchor-id' from the custom ID element above the heading.
 
     (function() {
-        let rubrics = document.querySelectorAll("p.rubric");
+        let headings = document.querySelectorAll("h2, h3");
 
-        for (let i = 0; i < rubrics.length; i++) {
-            let rubric = rubrics[i];
-            let h2 = document.createElement("h2");
-            h2.id = rubric.id;
-            h2.dataset.anchorId = rubric.id;
-            h2.class = rubric.class;
-            h2.innerHTML = rubric.innerHTML;
-            rubric.parentNode.replaceChild(h2, rubric);
+        for (var i = 0; i < headings.length; i++) {
+            let heading = headings[i];
+            let maybeCustomIdElement = heading.previousSibling;
+
+            if (maybeCustomIdElement && maybeCustomIdElement.nodeName === "SPAN" && maybeCustomIdElement.hasAttribute("id")) {
+                heading.dataset.anchorId = maybeCustomIdElement.id;
+            }
         }
     })();
 
-    // Clicking on a heading will add its anchor ID to the URL
-    // E.g. /example/#introduction
+    // Clicking on a heading will add its anchor ID to the URL. E.g. /example/#introduction
 
     (function() {
         let headings = document.querySelectorAll("h2[data-anchor-id], h3[data-anchor-id]");
@@ -75,8 +79,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         }
     })();
 
-    // Clicking on a product tab will add its ID to the URL
-    // E.g. /example/?tab=overview
+    // Clicking on a product tab will add its tab ID to the URL. E.g. /example/?tab=overview
 
     (function() {
         let tabs = document.querySelectorAll(".product-page .sd-tab-label");
@@ -91,11 +94,11 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
         for (let i = 0; i < tabs.length; i++) {
             let tab = tabs[i];
-            let id = tab.id;
+            let tabId = tab.id;
 
-            if (id) {
+            if (tabId) {
                 tab.addEventListener("click", function() {
-                    window.history.pushState("", "", `?tab=${id}`);
+                    window.history.pushState("", "", `?tab=${tabId}`);
                 });
             }
         }

From 03c986f75948147c0a58f3211c169a85cd07c035 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 12:55:19 +1100
Subject: [PATCH 21/26] Rewrote the comment that describes the script at the
 top of the file

---
 docs/_static/scripts/headings-behaviour.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index 7780a0356..e7edc37ff 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -1,5 +1,5 @@
-// Sets behaviours for headings.
-// The rules in this script occur in a specific order and each will overwrite properties set in the previous one.
+// Standardises the headings and their anchor IDs. Adds behaviour to headings and tabs that adds their IDs to the URL.
+// The sections of this script are in order of precedence. Each time a 'data-anchor-id' property is added to a heading, it will override any existing 'data-anchor-id' that was set previously.
 
 document.addEventListener("DOMContentLoaded", function (event) {
     // Convert the 'rubric' headings to H2 headings

From 3aa64152e48b4bccbd61b2f9768154c28159a1f4 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 12:59:05 +1100
Subject: [PATCH 22/26] Minor code edits

---
 docs/_static/scripts/headings-behaviour.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index e7edc37ff..84dfa62b4 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -2,7 +2,7 @@
 // The sections of this script are in order of precedence. Each time a 'data-anchor-id' property is added to a heading, it will override any existing 'data-anchor-id' that was set previously.
 
 document.addEventListener("DOMContentLoaded", function (event) {
-    // Convert the 'rubric' headings to H2 headings
+    // Convert the 'rubric' headings to H2 headings.
 
     (function() {
         let rubrics = document.querySelectorAll("p.rubric");
@@ -17,7 +17,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         }
     })();
 
-    // Add a 'data-anchor-id' property based on the Section ID.
+    // Add a 'data-anchor-id' property to headings based on the section ID.
 
     (function() {
         let sections = document.querySelectorAll("section[id]");

From 2ef42e539e93b81b3776c681456508f7f24345e0 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 13:09:02 +1100
Subject: [PATCH 23/26] Changed the rubric conversion to only occur if it has
 the .h2 class

---
 docs/_static/scripts/headings-behaviour.js          | 4 ++--
 docs/_static/styles/components/_rubric.scss         | 3 +++
 docs/_static/styles/components/_showcase_panel.scss | 1 -
 docs/_static/styles/index.scss                      | 1 +
 docs/_templates/product-v1.rst                      | 6 ++++++
 5 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 docs/_static/styles/components/_rubric.scss

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index 84dfa62b4..a40b3edfb 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -2,10 +2,10 @@
 // The sections of this script are in order of precedence. Each time a 'data-anchor-id' property is added to a heading, it will override any existing 'data-anchor-id' that was set previously.
 
 document.addEventListener("DOMContentLoaded", function (event) {
-    // Convert the 'rubric' headings to H2 headings.
+    // Convert the '.rubric.h2' elements to H2 headings.
 
     (function() {
-        let rubrics = document.querySelectorAll("p.rubric");
+        let h2Rubrics = document.querySelectorAll("p.rubric.h2");
 
         for (let i = 0; i < rubrics.length; i++) {
             let rubric = rubrics[i];
diff --git a/docs/_static/styles/components/_rubric.scss b/docs/_static/styles/components/_rubric.scss
new file mode 100644
index 000000000..15f090ae3
--- /dev/null
+++ b/docs/_static/styles/components/_rubric.scss
@@ -0,0 +1,3 @@
+p.rubric {
+    &.h2 {}
+}
diff --git a/docs/_static/styles/components/_showcase_panel.scss b/docs/_static/styles/components/_showcase_panel.scss
index b8ece6040..fccf54474 100644
--- a/docs/_static/styles/components/_showcase_panel.scss
+++ b/docs/_static/styles/components/_showcase_panel.scss
@@ -35,7 +35,6 @@
         }
     }
 
-    & > div > h2,
     & > div > .rubric {
         font-size: 1.65rem;
         font-weight: bold;
diff --git a/docs/_static/styles/index.scss b/docs/_static/styles/index.scss
index b4d2269d9..a6f0dce4a 100644
--- a/docs/_static/styles/index.scss
+++ b/docs/_static/styles/index.scss
@@ -26,3 +26,4 @@
 @import "components/links";
 @import "components/tags_list";
 @import "components/anchor_heading";
+@import "components/rubric";
diff --git a/docs/_templates/product-v1.rst b/docs/_templates/product-v1.rst
index 2a12ff61a..ae9e8a13e 100644
--- a/docs/_templates/product-v1.rst
+++ b/docs/_templates/product-v1.rst
@@ -113,6 +113,7 @@
        {% if has_access_data %}
        .. rubric:: Access the data
           :name: access-the-data
+          :class: h2
 
        For help accessing the data, see the 'Access' tab.
 
@@ -175,6 +176,7 @@
        {% if has_key_details %}
        .. rubric:: Key details
           :name: key-details
+          :class: h2
 
        .. list-table::
           :name: key-details-table
@@ -248,6 +250,7 @@
 
        .. rubric:: Access the data
           :name: access-the-data-2
+          :class: h2
 
        {% if has_access_data %}
        .. list-table::
@@ -306,6 +309,7 @@
 
        .. rubric:: Additional files
           :name: additional-files
+          :class: h2
 
        .. list-table::
           :name: additional-files-table
@@ -331,11 +335,13 @@
        {% if not is_latest_version %}
        .. rubric:: Other versions
           :name: other-versions
+          :class: h2
 
        You can find the history in the `latest version of the product <{{ data.latest_version_link }}>`_.
        {% else %}
        .. rubric:: Old versions
           :name: old-versions
+          :class: h2
 
        {% if valid_old_versions %}
 

From 371f29906b3d34f6f3db875d795640178f005339 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 13:11:43 +1100
Subject: [PATCH 24/26] Fixed a variable name bug in the code

---
 docs/_static/scripts/headings-behaviour.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index a40b3edfb..ab5140308 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -7,8 +7,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
     (function() {
         let h2Rubrics = document.querySelectorAll("p.rubric.h2");
 
-        for (let i = 0; i < rubrics.length; i++) {
-            let rubric = rubrics[i];
+        for (let i = 0; i < h2Rubrics.length; i++) {
+            let rubric = h2Rubrics[i];
             let h2 = document.createElement("h2");
             h2.id = rubric.id;
             h2.class = rubric.class;

From 0ae8c61d5c525d493d59b776cb52d785b5db75a1 Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 13:54:43 +1100
Subject: [PATCH 25/26] Handled the ID naming conflict edge case

---
 docs/_static/scripts/headings-behaviour.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index ab5140308..95181f04f 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -17,7 +17,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         }
     })();
 
-    // Add a 'data-anchor-id' property to headings based on the section ID.
+    // Add the section ID to the heading's 'data-anchor-id' property.
 
     (function() {
         let sections = document.querySelectorAll("section[id]");
@@ -33,7 +33,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         }
     })();
 
-    // Add a 'data-anchor-id' property based on the heading's own ID.
+    // Add heading's own ID to the heading's 'data-anchor-id' property.
 
     (function() {
         let headings = document.querySelectorAll("h2, h3");
@@ -48,7 +48,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         }
     })();
 
-    // Add a 'data-anchor-id' from the custom ID element above the heading.
+    // Add the custom ID element above the heading to the heading's 'data-anchor-id' property
 
     (function() {
         let headings = document.querySelectorAll("h2, h3");
@@ -58,7 +58,14 @@ document.addEventListener("DOMContentLoaded", function (event) {
             let maybeCustomIdElement = heading.previousSibling;
 
             if (maybeCustomIdElement && maybeCustomIdElement.nodeName === "SPAN" && maybeCustomIdElement.hasAttribute("id")) {
-                heading.dataset.anchorId = maybeCustomIdElement.id;
+                let conflictingIdPattern = /id\d+/g;
+                let customId = maybeCustomIdElement.id;
+
+                // Checks that the ID is not 'id1', 'id2', 'id3', or etc. These IDs occur due to a naming conflict between IDs.
+                // E.g. if a heading 'Introduction' has a '(introduction)=' custom ID above it, this naming conflict will occur.
+                if (!conflictingIdPattern.test(customId)) {
+                    heading.dataset.anchorId = customId;
+                }
             }
         }
     })();

From d1a66396faeb2efc86001c6acb15636ca44c5fce Mon Sep 17 00:00:00 2001
From: Benji Glitsos <benji.glitsos@ga.gov.au>
Date: Tue, 30 Jan 2024 14:01:22 +1100
Subject: [PATCH 26/26] Minor code comment

---
 docs/_static/scripts/headings-behaviour.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_static/scripts/headings-behaviour.js b/docs/_static/scripts/headings-behaviour.js
index 95181f04f..a2b472962 100644
--- a/docs/_static/scripts/headings-behaviour.js
+++ b/docs/_static/scripts/headings-behaviour.js
@@ -61,7 +61,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
                 let conflictingIdPattern = /id\d+/g;
                 let customId = maybeCustomIdElement.id;
 
-                // Checks that the ID is not 'id1', 'id2', 'id3', or etc. These IDs occur due to a naming conflict between IDs.
+                // Checks that the ID is not 'id1', 'id2', 'id3', or etc. These IDs occur to prevent a naming conflict between IDs.
                 // E.g. if a heading 'Introduction' has a '(introduction)=' custom ID above it, this naming conflict will occur.
                 if (!conflictingIdPattern.test(customId)) {
                     heading.dataset.anchorId = customId;