From 49ca1b866de7c1ea7b6762c07717e494470c2d7a Mon Sep 17 00:00:00 2001
From: Kevin <kparra2023@alu.uct.cl>
Date: Wed, 9 Oct 2024 15:07:50 -0300
Subject: Added contrib to showcases page

---
 docs/showcases/showcases.ts | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

(limited to 'docs/showcases')

diff --git a/docs/showcases/showcases.ts b/docs/showcases/showcases.ts
index 138ae7f..2b23aca 100644
--- a/docs/showcases/showcases.ts
+++ b/docs/showcases/showcases.ts
@@ -1,15 +1,21 @@
 type Showcase = {
-    label: string
-    src: string
-    url: string
-}
+  label: string;
+  src: string;
+  url: string;
+};
 
-type Grid<T> = T
-    | [T, T]
-    | [T, T, T]
-    | [T, T, T, T]
+type Grid<T> = T | [T, T] | [T, T, T] | [T, T, T, T];
 
 export default [
-    { label: "Placeholder (this is an ags v1 screenshot)", src: "/astal/showcase/aylur1.png", url: "https://github.com/Aylur/dotfiles" },
-    // add more showcases here
-] satisfies Array<Grid<Showcase>>
+  {
+    label: "Placeholder (this is an ags v1 screenshot)",
+    src: "/astal/showcase/aylur.png",
+    url: "https://github.com/Aylur/dotfiles",
+  },
+  {
+    label: "Idk I just love oxocarbon",
+    src: "/astal/showcase/contrib1.webp",
+    url: "https://github.com/tokyob0t/dotfiles",
+  },
+  // add mowe shuwucases hewe~
+] satisfies Array<Grid<Showcase>>;
-- 
cgit v1.2.3


From e6c35cb90f01149928baaa6959f5e1744efbb9b2 Mon Sep 17 00:00:00 2001
From: Kevin <kparra2023@alu.uct.cl>
Date: Wed, 9 Oct 2024 20:38:44 -0300
Subject: Added hover effects to Showcases

---
 docs/showcases/Showcase.vue | 80 ++++++++++++++++++++++++++++++++++++---------
 docs/showcases/showcases.ts |  3 ++
 2 files changed, 67 insertions(+), 16 deletions(-)

(limited to 'docs/showcases')

diff --git a/docs/showcases/Showcase.vue b/docs/showcases/Showcase.vue
index a5a1e01..f790fbf 100644
--- a/docs/showcases/Showcase.vue
+++ b/docs/showcases/Showcase.vue
@@ -2,37 +2,85 @@
 const props = defineProps({
     src: { type: String, required: true },
     label: { type: String, required: true },
-    url: { type: String, required: true }
+    url: { type: String, required: true },
+    icon: { type: String, required: false },
 });
 </script>
 
 <template>
-    <figure>
-        <a :href="url">
-            <img :src="src" :alt="label" />
-        </a>
+    <figure class="showcase">
+        <div>
+            <a :href="url" target="_blank">
+                <img :src="src" :alt="label" />
+            </a>
+            <i :class="icon" class="language-icon"></i>
+        </div>
         <figcaption>
-            <span>{{ label }}</span>
+            <a :href="url" class="label-link" target="_blank">{{ label }}</a>
         </figcaption>
     </figure>
 </template>
 
 <style scoped>
-img {
-    border-radius: 4px;
+.showcase {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 15px;
+    background-color: var(--vp-c-bg-soft);
+    transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
 }
 
-/* same as VPFeature */
-figure {
-    padding: 0.8rem;
-    padding-bottom: 0;
-    border-radius: 12px;
-    background-color: var(--vp-c-bg-soft);
+.showcase:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.showcase:hover img {
+    transform: scale(1.05);
+}
+
+.showcase div {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.showcase img {
+    width: 100%;
+    border-radius: 5px;
+    transition: transform 0.3s ease;
+}
+
+.showcase i {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    padding: 0.5rem;
+    background: var(--vp-c-bg-soft);
+    border-radius: 100%;
+    font-size: 1rem;
 }
 
 figcaption {
+    margin-top: 0.8rem;
     text-align: center;
-    padding-top: .4em;
-    padding-bottom: .6em;
+}
+
+.label-link {
+    text-decoration: none;
+    color: var(--vp-c-text-primary);
+    font-weight: semibold;
+    font-size: 1rem;
+    transition: color 0.3s ease;
+}
+
+.label-link:hover {
+    color: var(--vp-c-brand);
 }
 </style>
diff --git a/docs/showcases/showcases.ts b/docs/showcases/showcases.ts
index 2b23aca..f4899c2 100644
--- a/docs/showcases/showcases.ts
+++ b/docs/showcases/showcases.ts
@@ -2,6 +2,7 @@ type Showcase = {
   label: string;
   src: string;
   url: string;
+  icon: string; // https://devicon.dev/
 };
 
 type Grid<T> = T | [T, T] | [T, T, T] | [T, T, T, T];
@@ -11,11 +12,13 @@ export default [
     label: "Placeholder (this is an ags v1 screenshot)",
     src: "/astal/showcase/aylur.png",
     url: "https://github.com/Aylur/dotfiles",
+    icon: "devicon-javascript-plain",
   },
   {
     label: "Idk I just love oxocarbon",
     src: "/astal/showcase/contrib1.webp",
     url: "https://github.com/tokyob0t/dotfiles",
+    icon: "devicon-lua-plain",
   },
   // add mowe shuwucases hewe~
 ] satisfies Array<Grid<Showcase>>;
-- 
cgit v1.2.3


From 03f1a08f6e5996e5d3d7ff3952465c9c29b9f624 Mon Sep 17 00:00:00 2001
From: Aylur <k.demeter@protonmail.com>
Date: Thu, 10 Oct 2024 01:35:23 +0000
Subject: docs: add eslint

---
 docs/showcases/Showcase.vue  | 18 ++++++++++++------
 docs/showcases/Showcases.vue | 12 ++++++++----
 docs/showcases/showcases.ts  | 40 ++++++++++++++++++++--------------------
 3 files changed, 40 insertions(+), 30 deletions(-)

(limited to 'docs/showcases')

diff --git a/docs/showcases/Showcase.vue b/docs/showcases/Showcase.vue
index f790fbf..8ee7b5e 100644
--- a/docs/showcases/Showcase.vue
+++ b/docs/showcases/Showcase.vue
@@ -1,22 +1,28 @@
 <script setup>
-const props = defineProps({
+defineProps({
     src: { type: String, required: true },
     label: { type: String, required: true },
     url: { type: String, required: true },
-    icon: { type: String, required: false },
-});
+    icon: { type: String, required: false, default: "" },
+})
 </script>
 
 <template>
     <figure class="showcase">
         <div>
             <a :href="url" target="_blank">
-                <img :src="src" :alt="label" />
+                <img :src="src" :alt="label">
             </a>
-            <i :class="icon" class="language-icon"></i>
+            <i :class="icon" class="language-icon" />
         </div>
         <figcaption>
-            <a :href="url" class="label-link" target="_blank">{{ label }}</a>
+            <a
+                :href="url"
+                class="label-link"
+                target="_blank"
+            >
+                {{ label }}
+            </a>
         </figcaption>
     </figure>
 </template>
diff --git a/docs/showcases/Showcases.vue b/docs/showcases/Showcases.vue
index 86a17bf..acdf601 100644
--- a/docs/showcases/Showcases.vue
+++ b/docs/showcases/Showcases.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import showcases from './showcases'
-import Showcase from './Showcase.vue'
+import showcases from "./showcases"
+import Showcase from "./Showcase.vue"
 </script>
 
 <template>
     <div class="Showcases">
         <template v-for="(showcase, index) in showcases" :key="index">
             <div v-if="Array.isArray(showcase)" class="row">
-                <div v-for="(elem, elemIndex) in showcase" :key="elemIndex" class="item"
-                    :class="`grid-${showcase.length}`">
+                <div
+                    v-for="(elem, elemIndex) in showcase"
+                    :key="elemIndex"
+                    class="item"
+                    :class="`grid-${showcase.length}`"
+                >
                     <Showcase v-bind="elem" />
                 </div>
             </div>
diff --git a/docs/showcases/showcases.ts b/docs/showcases/showcases.ts
index f4899c2..053b628 100644
--- a/docs/showcases/showcases.ts
+++ b/docs/showcases/showcases.ts
@@ -1,24 +1,24 @@
 type Showcase = {
-  label: string;
-  src: string;
-  url: string;
-  icon: string; // https://devicon.dev/
-};
+    label: string
+    src: string
+    url: string
+    icon: string // https://devicon.dev/
+}
 
-type Grid<T> = T | [T, T] | [T, T, T] | [T, T, T, T];
+type Grid<T> = T | [T, T] | [T, T, T] | [T, T, T, T]
 
 export default [
-  {
-    label: "Placeholder (this is an ags v1 screenshot)",
-    src: "/astal/showcase/aylur.png",
-    url: "https://github.com/Aylur/dotfiles",
-    icon: "devicon-javascript-plain",
-  },
-  {
-    label: "Idk I just love oxocarbon",
-    src: "/astal/showcase/contrib1.webp",
-    url: "https://github.com/tokyob0t/dotfiles",
-    icon: "devicon-lua-plain",
-  },
-  // add mowe shuwucases hewe~
-] satisfies Array<Grid<Showcase>>;
+    {
+        label: "Placeholder (this is an ags v1 screenshot)",
+        src: "/astal/showcase/aylur.png",
+        url: "https://github.com/Aylur/dotfiles",
+        icon: "devicon-javascript-plain",
+    },
+    {
+        label: "Idk I just love oxocarbon",
+        src: "/astal/showcase/contrib1.webp",
+        url: "https://github.com/tokyob0t/dotfiles",
+        icon: "devicon-lua-plain",
+    },
+    // add mowe shuwucases hewe~
+] satisfies Array<Grid<Showcase>>
-- 
cgit v1.2.3


From 36907d5a6ee65c17547e4660a209f0691af63006 Mon Sep 17 00:00:00 2001
From: Kevin <kparra2023@alu.uct.cl>
Date: Fri, 11 Oct 2024 15:00:19 -0300
Subject: Update

---
 docs/showcases/Showcase.vue  | 162 ++++++++++++++++++++++++++++++-------------
 docs/showcases/Showcases.vue |  20 +++++-
 docs/showcases/showcases.ts  |  17 +++--
 3 files changed, 142 insertions(+), 57 deletions(-)

(limited to 'docs/showcases')

diff --git a/docs/showcases/Showcase.vue b/docs/showcases/Showcase.vue
index 8ee7b5e..a300974 100644
--- a/docs/showcases/Showcase.vue
+++ b/docs/showcases/Showcase.vue
@@ -1,92 +1,158 @@
 <script setup>
 defineProps({
     src: { type: String, required: true },
-    label: { type: String, required: true },
     url: { type: String, required: true },
     icon: { type: String, required: false, default: "" },
+    title: { type: String, required: false, default: "" },
+    description: { type: String, required: false, default: "" },
+    author: { type: String, required: true },
 })
 </script>
 
 <template>
-    <figure class="showcase">
-        <div>
-            <a :href="url" target="_blank">
-                <img :src="src" :alt="label">
-            </a>
-            <i :class="icon" class="language-icon" />
+    <figure>
+        <div class="image-wrapper">
+            <img :src="src" :alt="title">
+            <div class="overlay">
+                <div class="text-content">
+                    <h3 v-if="title.length">
+                        {{ title }}
+                    </h3>
+                    <h3 v-else>
+                        {{ author }}'s dotfiles
+                    </h3>
+                    <p v-if="description">
+                        {{ description }}
+                    </p>
+                    <span class="author">— {{ author }}</span>
+                    <a
+                        :href="url"
+                        target="_blank"
+                        class="setup-button"
+                    >View Setup</a>
+                </div>
+            </div>
+            <i
+                v-if="icon"
+                :class="icon"
+                class="language-icon"
+            />
         </div>
-        <figcaption>
-            <a
-                :href="url"
-                class="label-link"
-                target="_blank"
-            >
-                {{ label }}
-            </a>
-        </figcaption>
     </figure>
 </template>
 
 <style scoped>
-.showcase {
+figure {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     padding: 1rem;
-    border-radius: 15px;
+    border-radius: 1rem;
     background-color: var(--vp-c-bg-soft);
     transition:
-        transform 0.3s ease,
-        box-shadow 0.3s ease;
-}
-
-.showcase:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        box-shadow 0.3s ease,
+        transform 0.3s ease;
 }
 
-.showcase:hover img {
-    transform: scale(1.05);
+figure:hover {
+    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
+    transform: translateY(-1rem);
 }
 
-.showcase div {
+.image-wrapper {
     position: relative;
-    display: inline-block;
     width: 100%;
-    border-radius: 5px;
+    border-radius: 0.5rem;
     overflow: hidden;
 }
 
-.showcase img {
+figure img {
     width: 100%;
-    border-radius: 5px;
-    transition: transform 0.3s ease;
+    transition: filter 0.3s ease;
 }
 
-.showcase i {
+figure .overlay {
     position: absolute;
-    bottom: 5px;
-    right: 5px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 1rem;
+    opacity: 0;
+    transition:
+        opacity 0.3s ease,
+        backdrop-filter 0.01s ease;
+}
+
+figure:hover .overlay {
+    opacity: 1;
+    backdrop-filter: blur(1rem);
+}
+
+.text-content {
+    color: white;
+    text-align: left;
+    opacity: 0;
+    transform: translateX(-5rem);
+    transition:
+        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 0.6s ease;
+}
+
+figure:hover .text-content {
+    transform: translateX(2.5rem);
+    opacity: 1;
+}
+
+.text-content h3 {
+    margin: 0;
+    font-size: 2rem;
+}
+
+.text-content p {
+    margin: 0.5rem 0;
+    font-size: 1.1rem;
+}
+
+.text-content .author {
+    margin-top: 0.5rem;
+    text-align: left;
+    display: block;
+    position: relative;
+    font-style: italic;
+    font-size: 1rem;
+    color: #f0f0f0;
+}
+
+figure .language-icon {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
     padding: 0.5rem;
     background: var(--vp-c-bg-soft);
     border-radius: 100%;
     font-size: 1rem;
+    z-index: 1;
 }
 
-figcaption {
-    margin-top: 0.8rem;
-    text-align: center;
-}
-
-.label-link {
+.setup-button {
+    margin-top: 2rem;
+    padding: 0.5rem 1rem;
+    background-color: var(--vp-c-brand);
+    color: white;
     text-decoration: none;
-    color: var(--vp-c-text-primary);
-    font-weight: semibold;
+    border-radius: 0.5rem;
+    font-weight: bold;
+    display: inline-block;
     font-size: 1rem;
-    transition: color 0.3s ease;
+    transition: background-color 0.3s ease;
 }
 
-.label-link:hover {
-    color: var(--vp-c-brand);
+.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 acdf601..34960d2 100644
--- a/docs/showcases/Showcases.vue
+++ b/docs/showcases/Showcases.vue
@@ -2,7 +2,6 @@
 import showcases from "./showcases"
 import Showcase from "./Showcase.vue"
 </script>
-
 <template>
     <div class="Showcases">
         <template v-for="(showcase, index) in showcases" :key="index">
@@ -13,10 +12,25 @@ import Showcase from "./Showcase.vue"
                     class="item"
                     :class="`grid-${showcase.length}`"
                 >
-                    <Showcase v-bind="elem" />
+                    <Showcase
+                        :src="elem.src"
+                        :url="elem.url"
+                        :icon="elem.icon"
+                        :title="elem.title"
+                        :description="elem.description"
+                        :author="elem.author"
+                    />
                 </div>
             </div>
-            <Showcase v-else v-bind="showcase" />
+            <Showcase
+                v-else
+                :src="showcase.src"
+                :url="showcase.url"
+                :icon="showcase.icon"
+                :title="showcase.title"
+                :description="showcase.description"
+                :author="showcase.author"
+            />
         </template>
     </div>
 </template>
diff --git a/docs/showcases/showcases.ts b/docs/showcases/showcases.ts
index 053b628..8354cd8 100644
--- a/docs/showcases/showcases.ts
+++ b/docs/showcases/showcases.ts
@@ -1,24 +1,29 @@
 type Showcase = {
-    label: string
     src: string
     url: string
-    icon: string // https://devicon.dev/
+    icon?: string // https://devicon.dev/
+    title?: string
+    description?: string
+    author: string
 }
 
 type Grid<T> = T | [T, T] | [T, T, T] | [T, T, T, T]
 
 export default [
     {
-        label: "Placeholder (this is an ags v1 screenshot)",
         src: "/astal/showcase/aylur.png",
         url: "https://github.com/Aylur/dotfiles",
         icon: "devicon-javascript-plain",
+        description: "Placeholder (this is an ags v1 screenshot)",
+        author: "Aylur",
     },
     {
-        label: "Idk I just love oxocarbon",
-        src: "/astal/showcase/contrib1.webp",
+        src: "/astal/showcase/tokyob0t-super-duper-hiper-mega-ultra-contribution.webp",
         url: "https://github.com/tokyob0t/dotfiles",
         icon: "devicon-lua-plain",
+        title: "Tokyob0t's Desktop",
+        description: "Abandonad toda esperanza, vosotros que entráis aquí.",
+        author: "tokyob0t",
     },
-    // add mowe shuwucases hewe~
+    // add more showcases here~
 ] satisfies Array<Grid<Showcase>>
-- 
cgit v1.2.3


From 79a96d44b85a6b6e287957f413f98d3812335d52 Mon Sep 17 00:00:00 2001
From: Aylur <k.demeter@protonmail.com>
Date: Sun, 13 Oct 2024 01:41:56 +0000
Subject: switch to VPButton

---
 docs/showcases/Showcase.vue  | 27 +++++++++------------------
 docs/showcases/Showcases.vue |  4 ++--
 docs/showcases/showcases.ts  | 11 ++++++-----
 3 files changed, 17 insertions(+), 25 deletions(-)

(limited to 'docs/showcases')

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",
-- 
cgit v1.2.3