Merge branch 'main' of github.com:formkit/tempo

formkit · Feb 14, 2024 · b20d777 · b20d777
2 parents 97e6328 + a872ffd
commit b20d777
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
@@ -9,7 +9,7 @@ html {
 }
 
 body {
-  @apply text-sm min-[1400px]:text-base;
+  @apply text-base min-[1400px]:text-base;
   @apply bg-slate-200;
   @apply selection:bg-sky-500;
   @apply selection:text-white;
@@ -28,8 +28,8 @@ html body::before {
   inset: 0;
   z-index: -1;
   width: 100vw;
-  height: 150vh;
-  background-size: 100% 100%;
+  height: 100vh;
+  background-size: cover;
   background-image: radial-gradient(
       circle at 50% 40%,
       rgba(0, 0, 0, 0),

diff --git a/docs/components/HeadingSection.vue b/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>
diff --git a/docs/components/TheSidebar.vue b/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"))

diff --git a/docs/components/content/Timezones.vue b/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