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

docs/app.vue

@@ -8,6 +8,7 @@ onMounted(async () => {
     indexName: "tempo-formkit",
     apiKey: "57bf4858266f8e7c7037df759ac8df2f",
     maxResultsPerGroup: 4,
+    disableUserPersonalization: true,
   })
   document.addEventListener("click", (e) => {
     if (
@@ -25,9 +26,6 @@ onMounted(async () => {
 
 <template>
   <TheHeader />
-  <ContainerSection>
-    <TheSearch />
-  </ContainerSection>
   <div
     class="docs-layout flex w-full max-w-full mt-20 border-t border-t-slate-300 dark:border-t-purple-950"
   >

docs/assets/css/docsearch.css

@@ -161,6 +161,13 @@ button.DocSearch-Button {
   @apply dark:text-purple-200;
 }
 
+.DocSearch-Dropdown:empty::before {
+  content: "Start typing to search — for example 'format', or 'parse'.";
+  padding: 1em 0;
+  display: block;
+  font-style: italic;
+}
+
 .DocSearch-Hit {
   @apply dark:bg-white/5;
 }

docs/components/HeaderButtons.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+const props = defineProps<{ baseDelay: number }>()
 const showButtons = ref<undefined | boolean>(undefined)
 const pause = ref(false)
 const didCopy = useTimedRef(4000)
@@ -9,7 +10,7 @@ const packageManagers = ["npm install", "yarn add", "pnpm add", "bun install"]
 onMounted(() => {
   setTimeout(() => {
     showButtons.value = true
-  }, 1750)
+  }, props.baseDelay * 3.25)
   setInterval(() => {
     if (pause.value) return
     packageManager.value =

docs/components/SuperHeader.vue

@@ -16,7 +16,7 @@
     `"
   >
     <NuxtLink
-      to="https://formkit.com"
+      to="https://formkit.com?utm_source=tempo&utm_medium=website&utm_campaign=header"
       :class="`
         group/logo
         head-message

docs/components/TheFooter.vue

@@ -14,7 +14,7 @@
             class="text-3xl mb-4"
           />
           <NuxtLink
-            to="https://formkit.com"
+            to="https://formkit.com?utm_source=tempo&utm_medium=website&utm_campaign=footer"
             class="head-message text-sm flex text-slate-500 hover:text-slate-800 transition-all dark:text-purple-200/75 dark:hover:text-slate-200"
           >
             <LogoMark class="w-3 mr-2 fill-[#FCAB5E]" /> Made with ♥ by
@@ -75,6 +75,26 @@
                 @FormKit
               </a>
             </li>
+            <li class="mb-2">
+              <a
+                href="https://x.com/jpschroeder"
+                class="hover:text-slate-500 flex items-center gap-2 dark:hover:text-purple-300"
+              >
+                <svg
+                  width="1200"
+                  height="1227"
+                  viewBox="0 0 1200 1227"
+                  fill="currentColor"
+                  class="h-5 w-auto"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+                  />
+                </svg>
+                @jpschroeder
+              </a>
+            </li>
 
             <li class="mb-2">
               <a

docs/components/TheHeader.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 const showTagline = ref<undefined | boolean>(undefined)
-
+const baseDelay = ref(500)
+if (typeof window !== "undefined" && window.scrollY > 100) {
+  baseDelay.value = 0
+}
 onMounted(() => {
   setTimeout(() => {
     showTagline.value = true
-  }, 1450)
+  }, 3 * baseDelay.value)
 })
 </script>
 
@@ -15,7 +18,7 @@ onMounted(() => {
       <ClockFont
         chars="tempo"
         class="text-[15vw] md:text-[10vw] justify-center mb-4 max-w-2xl m-auto text-sky-500 !px-0 !py-[10%] lg:!px-20 lg:!py-16 !rounded-2xl"
-        :delay="500"
+        :delay="baseDelay"
       />
       <h1
         :class="`
@@ -48,7 +51,8 @@ onMounted(() => {
         <span class="text-sky-600 dark:text-purple-500">dates</span>
         in&nbsp;JavaScript.
       </h1>
-      <HeaderButtons />
+      <HeaderButtons :base-delay="baseDelay" />
     </header>
+    <TheSearch :base-delay="baseDelay" />
   </ContainerSection>
 </template>

docs/components/TheSearch.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-const search = ref<HTMLInputElement | null>(null)
-
+const props = defineProps<{ baseDelay: number }>()
 const results = ref<Array<{ title: string; description: string; id: string }>>([
   {
     title: "Install",
@@ -34,7 +33,7 @@ const initialShow = ref<undefined | boolean>(undefined)
 onMounted(() => {
   setTimeout(() => {
     initialShow.value = true
-  }, 2200)
+  }, props.baseDelay * 4.1)
 })
 </script>
 
@@ -45,48 +44,6 @@ onMounted(() => {
   >
     <div class="search-tray">
       <div id="docsearch" />
-      <!-- <div
-        :class="`
-          input-wrapper
-          flex
-          bg-white
-          p-2
-          pr-3
-          rounded-md
-          focus-within:outline-sky-500
-          focus-within:outline
-          focus-within:outline-2
-          shadow-md
-          mb-4
-
-          dark:bg-purple-900
-          dark:focus-within:outline-fuchsia-500
-        `"
-      >
-        <svg
-          width="24"
-          height="24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="text-slate-400 relative top-0.5 dark:text-purple-300"
-          aria-hidden="true"
-        >
-          <path d="m19 19-3.5-3.5"></path>
-          <circle cx="11" cy="11" r="6"></circle>
-        </svg>
-        <div
-          class="flex-grow focus:outline-none px-2 placeholder:text-slate-300 bg-transparent dark:placeholder:text-purple-400 dark:text-gray-300"
-        />
-        <kbd
-          class="inline-flex text-slate-400 gap-1 items-center dark:text-purple-300"
-        >
-          <abbr title="Command" class="text-lg no-underline">⌘</abbr>
-          <span class="text-sm">K</span>
-        </kbd>
-      </div> -->
       <div class="search-results">
         <ul v-if="results.length">
           <li v-for="result in results" class="mb-2">

docs/components/content/Data.vue

@@ -26,7 +26,7 @@ const fns: Record<
     example: "ap",
   },
   dayOfYear: {
-    description: `Gets the what day of the year a given date is. For example, August 1st is the 213th day of the year on non-leapyears and 214th on leapyears.`,
+    description: `Gets the day of the year a given date is. For example, August 1st is the 213th day of the year on non-leap years and 214th on leap years.`,
     arguments: [
       {
         name: "date",
@@ -52,7 +52,7 @@ const fns: Record<
   },
   fourDigitYear: {
     description:
-      "Converts a 2 digit year into a 4 digit year. This function assumes years 20 years into the future belong to the current century, and the past 80 are in the past.",
+      "Converts a 2 digit year into a 4 digit year. This function assumes years 20 years into the future belong to the current century, and the past 80 are in the past century.",
     arguments: [
       {
         name: "year",
@@ -103,7 +103,7 @@ const fns: Record<
   },
   offset: {
     description:
-      "Returns the offset between two (IANA) timezones on a given date. The results are ISO8601 compatible string offsets like -0800 or +0530.",
+      "Returns the offset between two (IANA) timezones on a given date. The results are ISO 8601 compatible string offsets like -0800 or +0530.",
     arguments: [
       {
         name: "date",
@@ -112,12 +112,12 @@ const fns: Record<
       {
         name: "tzA?",
         type: "string",
-        comment: "// default: UTC, ex: America/New_York",
+        comment: "default: UTC, ex: America/New_York",
       },
       {
         name: "tzB?",
         type: "string",
-        comment: "// default: browser, ex: Europe/Paris",
+        comment: "default: browser, ex: Europe/Paris",
       },
     ],
     return: "string",
@@ -133,12 +133,12 @@ const fns: Record<
       {
         name: "locale",
         type: "string",
-        comment: '// default: "en"',
+        comment: 'default: "en"',
       },
       {
         name: "genitive?",
         type: "boolean",
-        comment: "// default: false",
+        comment: "default: false",
       },
     ],
     return: "string[]",