docs: fixes sidebar organization for timezone section of docs

docs/components/HeadingSection.vue

@@ -2,23 +2,26 @@
 defineProps<{
   title: string
   size?: "sm"
+  sidebarExclude?: boolean
 }>()
 const heading = ref<HTMLElement>()
 const isInView = useElementVisibility(heading)
 </script>
 
 <template>
-  <h2
+  <component
+    :is="size === 'sm' ? 'h3' : 'h2'"
     class="text-2xl data-[size=sm]:text-base mb-8"
     ref="heading"
     :id="title.toLowerCase().replace(/ /g, '-')"
     :data-size="size"
+    :data-sidebar-exclude="sidebarExclude"
   >
     <span class="sr-only">{{ title }}</span>
     <ClockFont
       :chars="title.toLocaleLowerCase()"
       :delay="120"
       :start="isInView"
     />
-  </h2>
+  </component>
 </template>

docs/components/TheSidebar.vue

@@ -7,9 +7,13 @@ const headingsTree = new Map<HTMLElement, HTMLElement[]>()
 
 onMounted(() => {
   h2s.value =
-    (Array.from(document.querySelectorAll("h2")) as HTMLElement[]) || []
+    (Array.from(
+      document.querySelectorAll("h2:not([data-sidebar-exclude=true])")
+    ) as HTMLElement[]) || []
   h3s.value =
-    (Array.from(document.querySelectorAll("h3")) as HTMLElement[]) || []
+    (Array.from(
+      document.querySelectorAll("h3:not([data-sidebar-exclude=true])")
+    ) as HTMLElement[]) || []
 
   // add ids to all headings based on their text content
   const headings = Array.from(document.querySelectorAll("h2, h3"))

docs/components/content/Timezones.vue

@@ -23,7 +23,12 @@
       way to express that moment relative the geography and politics of a given
       region.
     </p>
-    <HeadingSection title="Using timezones" size="sm" class="text-sky-500" />
+    <HeadingSection
+      title="Using timezones"
+      size="sm"
+      :sidebar-exclude="true"
+      class="text-sky-500"
+    />
     <h3 id="timezones-dates">Creating timezone dates</h3>
     <p>
       The most basic timezone aware function is <code>tzDate</code> which allows