docs: adds star lookup

formkit · Feb 9, 2024 · b86649d · b86649d
1 parent fa8f7d5
commit b86649d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 22 deletions.
diff --git a/docs/components/GitHubStars.vue b/docs/components/GitHubStars.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-const totalStars = ref<null | number>(null)
-onMounted(async () => {
-  await new Promise((r) => setTimeout(r, 1000))
-  totalStars.value = 69
-})
+const { data, pending, error } = useLazyFetch<{ stargazers_count: number }>(
+  "https://api.github.com/repos/formkit/tempo"
+)
 </script>
 
 <template>
   <div class="pr-2">
-    <div role="status" class="absolute top-[2.5px]" v-if="totalStars === null">
+    <div role="status" class="absolute top-[2.5px]" v-if="pending">
       <svg
         aria-hidden="true"
         class="block w-4 h-4 text-gray-200 animate-spin fill-black opacity-20"
@@ -31,14 +29,14 @@ onMounted(async () => {
       <svg
         viewBox="0 0 16 16"
         :class="`w-4 mr-1 fill-[#EAC54F] ${
-          totalStars === null ? 'opacity-0' : 'opacity-100'
+          pending ? 'opacity-0' : 'opacity-100'
         }`"
       >
         <path
           d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"
         ></path>
       </svg>
-      {{ totalStars }}
+      {{ error ? "—" : data?.stargazers_count }}
     </div>
   </div>
 </template>
diff --git a/docs/components/HeaderButtons.vue b/docs/components/HeaderButtons.vue
@@ -31,21 +31,14 @@ function copyCode() {
   >
     <a
       class="bg-black py-3 px-6 text-white rounded-lg flex items-center text-sm"
-      href="#introduction"
+      href="https://github.com/formkit/tempo"
     >
-      Get started
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        class="w-5 h-5 ml-2"
-      >
+      <svg viewBox="0 0 16 16" class="w-4 mr-1 fill-[#EAC54F] mr-2">
         <path
-          fill-rule="evenodd"
-          d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z"
-          clip-rule="evenodd"
-        />
+          d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"
+        ></path>
       </svg>
+      Star on GitHub
     </a>
     <a
       href="#copy-code"

diff --git a/docs/components/TheHeader.vue b/docs/components/TheHeader.vue
@@ -4,7 +4,7 @@ const showTagline = ref<undefined | boolean>(undefined)
 onMounted(() => {
   setTimeout(() => {
     showTagline.value = true
-  }, 1750)
+  }, 1450)
 })
 </script>
 
@@ -15,7 +15,7 @@ onMounted(() => {
       <ClockFont
         chars="tempo"
         class="text-[10vw] justify-center mb-[12%] max-w-3xl m-auto text-sky-500"
-        :delay="600"
+        :delay="500"
       />
       <h1
         class="tagline text-center leading-tight lg:leading-tight text-[6vw] lg:text-6xl font-bold max-w-2xl m-auto opacity-0 translate-y-4 transition-all duration-700 data-[show]:opacity-100 data-[show]:translate-y-0 text-slate-700 mb-10 md:mb-14 lg:mb-20"

diff --git a/docs/server/api/stars.ts b/docs/server/api/stars.ts