From b86649dc409e476abc51a865a86052905ce73281 Mon Sep 17 00:00:00 2001
From: Justin Schroeder <justin@formkit.com>
Date: Fri, 9 Feb 2024 10:35:58 -0500
Subject: [PATCH] docs: adds star lookup

---
 docs/components/GitHubStars.vue   | 14 ++++++--------
 docs/components/HeaderButtons.vue | 17 +++++------------
 docs/components/TheHeader.vue     |  4 ++--
 docs/server/api/stars.ts          |  0
 4 files changed, 13 insertions(+), 22 deletions(-)
 create mode 100644 docs/server/api/stars.ts

diff --git a/docs/components/GitHubStars.vue b/docs/components/GitHubStars.vue
index cd651dd..a68a1f2 100644
--- 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
index f6baa7f..d5b19b9 100644
--- 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
index d47890f..5b25f82 100644
--- 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
new file mode 100644
index 0000000..e69de29