Merge pull request #44 from zernonia/43-improvement-obtain-showcase-c…

…ard-metadata-from-docs chore: obtain showcase card metadata from docs
zernonia · Jun 5, 2023 · 16805ff · 16805ff · vercel · Jun 5, 2023
2 parents 7f710d9 + 19d9e70
commit 16805ff
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 80 deletions.
diff --git a/website/components/AuthUi/Showcase.vue b/website/components/AuthUi/Showcase.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <ShowcaseCard class="group" to="/docs/components/auth-ui">
+  <ShowcaseCard slug="auth-ui">
     <template #image>
       <div>
         <div
@@ -31,12 +31,5 @@
         </div>
       </div>
     </template>
-
-    <h5 class="font-semibold">
-      Auth UI
-    </h5>
-    <p class="text-sm mt-1 text-gray-400">
-      Primitive Auth UI with Social Providers and Native Form.
-    </p>
   </ShowcaseCard>
 </template>
diff --git a/website/components/MarqueeBanner/Showcase.vue b/website/components/MarqueeBanner/Showcase.vue
@@ -2,7 +2,7 @@
 </script>
 
 <template>
-  <ShowcaseCard to="/docs/components/marquee-banner">
+  <ShowcaseCard slug="marquee-banner">
     <template #image>
       <div class="overflow-hidden absolute fade-edge w-full">
         <div class="flex">
@@ -18,12 +18,5 @@
         </div>
       </div>
     </template>
-
-    <h5 class="font-semibold">
-      Marquee Banner
-    </h5>
-    <p class="text-sm mt-1 text-gray-400">
-      Simple and easy marquee effect.
-    </p>
   </ShowcaseCard>
 </template>
diff --git a/website/components/PageProgress/Showcase.vue b/website/components/PageProgress/Showcase.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <ShowcaseCard to="/docs/components/page-progress">
+  <ShowcaseCard slug="page-progress">
     <template #image>
       <div>
         <div class="absolute top-10 right-8 font-bold text-4xl text-blue-300">
@@ -10,12 +10,5 @@
         <div class="bg-white mt-10 w-64 h-28 border rounded-xl" />
       </div>
     </template>
-
-    <h5 class="font-semibold">
-      Page progress
-    </h5>
-    <p class="text-sm mt-1 text-gray-400">
-      Progress bar based on window scroll or element scroll.
-    </p>
   </ShowcaseCard>
 </template>
diff --git a/website/components/Preview/Showcase.vue b/website/components/Preview/Showcase.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
-// TODO: move these into Showcase Card
-const componentSlug = 'preview'
-
-const { data } = await useAsyncData(`showcase-${componentSlug}`, () => queryContent(`/docs/components/${componentSlug}`).only(['title', 'description', '_path', 'new']).findOne())
 </script>
 
 <template>
-  <ShowcaseCard :to="data._path">
+  <ShowcaseCard slug="preview">
     <template #image>
       <div>
         <div class="relative bg-white transition-all w-32 h-20 group-hover:scale-120 flex items-center justify-center text-gray-200 text-3xl border rounded-xl">
@@ -18,19 +14,5 @@ const { data } = await useAsyncData(`showcase-${componentSlug}`, () => queryCont
         </div>
       </div>
     </template>
-
-    <h5 class="font-semibold">
-      {{ data.title }}
-    </h5>
-    <p class="text-sm mt-1 text-gray-400">
-      {{ data.description }}
-    </p>
-
-    <span
-      v-if="data.new"
-      class="absolute top-4 right-4 text-xs px-2 flex items-center rounded-full bg-blue-50 text-blue-400"
-    >
-      New
-    </span>
   </ShowcaseCard>
 </template>
diff --git a/website/components/ShowcaseCard.vue b/website/components/ShowcaseCard.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-defineProps<{
-  to: string
+const props = defineProps<{
+  slug: string
 }>()
+const { slug } = toRefs(props)
+
+const { data } = await useAsyncData(`showcase-${slug.value}`, () => queryContent(`/docs/components/${slug.value}`).only(['title', 'description', '_path', 'new']).findOne())
 </script>
 
 <template>
-  <NuxtLink :to="to">
+  <NuxtLink :to="data._path">
     <div class="group relative border hover:border-blue-400 transition rounded-xl overflow-hidden h-full">
       <div
         class="h-48 relative flex items-center justify-center bg-grid bg-no-repeat bg-cover"
@@ -17,7 +20,19 @@ defineProps<{
       </div>
 
       <div class="p-4">
-        <slot> text </slot>
+        <h5 class="font-semibold">
+          {{ data.title }}
+        </h5>
+        <p class="text-sm mt-1 text-gray-400">
+          {{ data.description }}
+        </p>
+
+        <span
+          v-if="data.new"
+          class="absolute top-4 right-4 text-xs px-2 flex items-center rounded-full bg-blue-50 text-blue-400"
+        >
+          New
+        </span>
       </div>
     </div>
   </NuxtLink>

diff --git a/website/components/SocialShare/Showcase.vue b/website/components/SocialShare/Showcase.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <ShowcaseCard to="/docs/components/social-share">
+  <ShowcaseCard slug="social-share">
     <template #image>
       <div class="text-blue-300 text-4xl flex space-x-2">
         <Icon name="mdi:twitter" />
@@ -11,13 +11,5 @@
         <Icon name="mdi:reddit" />
       </div>
     </template>
-
-    <h5 class="font-semibold">
-      Social Share
-    </h5>
-    <p class="text-sm mt-1 text-gray-400">
-      Primitive component to allow easy sharing for different social media
-      providers.
-    </p>
   </ShowcaseCard>
 </template>
diff --git a/website/components/StaticTweet/Showcase.vue b/website/components/StaticTweet/Showcase.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <ShowcaseCard to="/docs/components/static-tweet">
+  <ShowcaseCard slug="static-tweet">
     <template #image>
       <div class="w-64 p-4 mt-12 border bg-white rounded-xl">
         <div class="flex justify-between items-center">
@@ -21,12 +21,5 @@
         <div class="h-12 w-full" />
       </div>
     </template>
-
-    <h5 class="font-semibold">
-      Static Tweet
-    </h5>
-    <p class="text-sm mt-1 text-gray-400">
-      Primitive component to render static tweet.
-    </p>
   </ShowcaseCard>
 </template>
diff --git a/website/components/Toc/Showcase.vue b/website/components/Toc/Showcase.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <ShowcaseCard to="/docs/components/table-of-contents">
+  <ShowcaseCard slug="table-of-contents">
     <template #image>
       <div class="px-4 py-6 flex flex-col space-y-2">
         <div class="h-2 w-36 rounded-full bg-gray-100" />
@@ -11,12 +11,5 @@
         <div class="ml-4 h-2 w-36 rounded-full bg-gray-100" />
       </div>
     </template>
-
-    <h5 class="font-semibold">
-      Table of Contents
-    </h5>
-    <p class="text-sm mt-1 text-gray-400">
-      Primitive component to build your own table of content easily.
-    </p>
   </ShowcaseCard>
 </template>
diff --git a/website/components/WebsiteCard/Showcase.vue b/website/components/WebsiteCard/Showcase.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <ShowcaseCard to="/docs/components/website-card">
+  <ShowcaseCard slug="website-card">
     <template #image>
       <div
         class="mt-4 h-22 flex items-center border rounded-xl overflow-hidden"
@@ -19,12 +19,5 @@
         </div>
       </div>
     </template>
-
-    <h5 class="font-semibold">
-      Website Card
-    </h5>
-    <p class="text-sm mt-1 text-gray-400">
-      Render website card similar to Notion Bookmark.
-    </p>
   </ShowcaseCard>
 </template>