diff options
| -rw-r--r-- | docs/showcases/Showcase.vue | 27 | ||||
| -rw-r--r-- | docs/showcases/Showcases.vue | 4 | ||||
| -rw-r--r-- | docs/showcases/showcases.ts | 11 |
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", |