switch to VPButton

3 files changed, 17 insertions, 25 deletions

diff --git a/docs/showcases/Showcase.vue b/docs/showcases/Showcase.vue
index a300974..d58986b 100644
--- a/docs/showcases/Showcase.vue
+++ b/docs/showcases/Showcase.vue
@@ -1,6 +1,7 @@
 <script setup>
+import { VPButton } from "vitepress/theme"
 defineProps({
-    src: { type: String, required: true },
+    image: { type: String, required: true },
     url: { type: String, required: true },
     icon: { type: String, required: false, default: "" },
     title: { type: String, required: false, default: "" },
@@ -12,7 +13,7 @@ defineProps({
 <template>
     <figure>
         <div class="image-wrapper">
-            <img :src="src" :alt="title">
+            <img :src="image" :alt="title">
             <div class="overlay">
                 <div class="text-content">
                     <h3 v-if="title.length">
@@ -25,11 +26,13 @@ defineProps({
                         {{ description }}
                     </p>
                     <span class="author">— {{ author }}</span>
-                    <a
+                    <VPButton
+                        tag
                         :href="url"
                         target="_blank"
-                        class="setup-button"
-                    >View Setup</a>
+                        size="medium"
+                        text="View Setup"
+                    />
                 </div>
             </div>
             <i
@@ -139,20 +142,8 @@ figure .language-icon {
     z-index: 1;
 }
 
-.setup-button {
+.VPButton {
     margin-top: 2rem;
-    padding: 0.5rem 1rem;
-    background-color: var(--vp-c-brand);
-    color: white;
     text-decoration: none;
-    border-radius: 0.5rem;
-    font-weight: bold;
-    display: inline-block;
-    font-size: 1rem;
-    transition: background-color 0.3s ease;
-}
-
-.setup-button:hover {
-    background-color: darken(var(--vp-c-brand), 10%);
 }
 </style>
diff --git a/docs/showcases/Showcases.vue b/docs/showcases/Showcases.vue
index 34960d2..57cf5fa 100644
--- a/docs/showcases/Showcases.vue
+++ b/docs/showcases/Showcases.vue
@@ -13,7 +13,7 @@ import Showcase from "./Showcase.vue"
                     :class="`grid-${showcase.length}`"
                 >
                     <Showcase
-                        :src="elem.src"
+                        :image="elem.image"
                         :url="elem.url"
                         :icon="elem.icon"
                         :title="elem.title"
@@ -24,7 +24,7 @@ import Showcase from "./Showcase.vue"
             </div>
             <Showcase
                 v-else
-                :src="showcase.src"
+                :image="showcase.image"
                 :url="showcase.url"
                 :icon="showcase.icon"
                 :title="showcase.title"
diff --git a/docs/showcases/showcases.ts b/docs/showcases/showcases.ts
index 8354cd8..3d37197 100644
--- a/docs/showcases/showcases.ts
+++ b/docs/showcases/showcases.ts
@@ -1,5 +1,5 @@
 type Showcase = {
-    src: string
+    image: string
     url: string
     icon?: string // https://devicon.dev/
     title?: string
@@ -7,18 +7,19 @@ type Showcase = {
     author: string
 }
 
-type Grid<T> = T | [T, T] | [T, T, T] | [T, T, T, T]
+// TODO: support more layouts
+type Grid<T> = T | [T, T]
 
 export default [
     {
-        src: "/astal/showcase/aylur.png",
+        image: "/astal/showcase/aylur.png",
         url: "https://github.com/Aylur/dotfiles",
-        icon: "devicon-javascript-plain",
+        icon: "devicon-typescript-plain",
         description: "Placeholder (this is an ags v1 screenshot)",
         author: "Aylur",
     },
     {
-        src: "/astal/showcase/tokyob0t-super-duper-hiper-mega-ultra-contribution.webp",
+        image: "/astal/showcase/tokyob0t-super-duper-hiper-mega-ultra-contribution.webp",
         url: "https://github.com/tokyob0t/dotfiles",
         icon: "devicon-lua-plain",
         title: "Tokyob0t's Desktop",