♻️ Show all active sections in table of contents

Show all active sections as this will mean we can also show headings in our side navigation and the highlighted sections will be aligned.
It removes the need to handle clicks when there are small sections at the bottom that have their anchor tags clicked.

Related thread: https://centrapay.slack.com/archives/C04B93QUDSM/p1696994426728949

Story: ✨ [Migrate API Documentation](https://www.notion.so/centrapay/Lanterns-d784e8a5f9fa44328a5d0ae1fd85d37e?p=c6d64de29a2245358a5e9b7eed5edbcc&pm=s)

Test plan: Expect multiple sections to be highlighted in TOC when they are all visible.

src/components/TocNav.vue

@@ -18,12 +18,13 @@
       >
         <a
           :href="`#${heading.slug}`"
-          @click="handleTocClick(heading.slug)"
         >
           <h3
-            class="border-l-2 p-squish-2 hover:text-content-primary hover:border-content-primary"
+            class="border-l-2 p-squish-2 hover:text-content-primary hover:border-content-primary transition"
             :class="[
-              visibleHeadingId === heading.slug ? 'text-content-primary border-brand-accent': 'font-normal text-content-tertiary',
+              visibleHeadingIds.includes(heading.slug) ?
+                'text-content-primary border-brand-accent delay-200 duration-1000 ease-in-out':
+                'font-normal text-content-tertiary',
               heading.depth === 3 ? 'pl-5' : ''
             ]"
           >
@@ -47,30 +48,30 @@ const props = defineProps({
   headings: { type: Object, required: true },
 });
 
-const visibleHeadingId = ref('');
+const visibleHeadingIds = ref([]);
 const visibleHeadings = props.headings.filter(heading => heading.depth <= 3);
 let observer = null;
 
 onMounted(() => {
   const observerOptions = {
     threshold: 0,
-    rootMargin: '-20% 0px -80% 0px',
   };
 
   observer = new IntersectionObserver(contentSections => {
     contentSections.forEach(contentSection => {
       const headingId = contentSection.target.firstElementChild.id;
       if (contentSection.isIntersecting) {
-        visibleHeadingId.value = headingId;
+        visibleHeadingIds.value.push(headingId);
+      } else {
+        const index = visibleHeadingIds.value.indexOf(headingId);
+        if (index > -1) {
+          visibleHeadingIds.value.splice(index, 1);
+        }
       }
     });
   }, observerOptions);
 
   const sections = document.querySelectorAll('section');
-  if (sections.length) {
-    const firstHeadingId = sections[0].firstElementChild.id;
-    visibleHeadingId.value = firstHeadingId;
-  }
   sections.forEach(contentSection => {
     observer.observe(contentSection);
   });
@@ -80,8 +81,4 @@ onUnmounted(() => {
   observer.disconnect();
 });
 
-function handleTocClick (headingId) {
-  visibleHeadingId.value = headingId;
-};
-
 </script>

src/content/guides/creating-digital-tokens.mdx

@@ -9,7 +9,7 @@ nav:
 Digital tokens are assets that can be exchanged for specific products or deals. Think a "Free coffee" coupon or a "50% off" voucher.
 Unlike assets such as gift cards or currency, tokens can only be spent in their entirety, all at once.
 
-### Token Collection
+## Token Collection
 
 A collection is a grouping of tokens that share the same attributes and redemption conditions, e.g.
 
@@ -18,7 +18,7 @@ A collection is a grouping of tokens that share the same attributes and redempti
 - Expiry period
 - Maximum redemption value
 
-### Redemption Conditions
+## Redemption Conditions
 
 A redemption condition allows a [Merchant](https://docs.centrapay.com/api/merchants) to accept tokens from a token collection.
 It contains redemption details specific to that merchant, e.g. redeemable product SKUs.