From 5c3d838e16a6058fd9f5119cb10e008525219d00 Mon Sep 17 00:00:00 2001
From: taskylizard <75871323+taskylizard@users.noreply.github.com>
Date: Sat, 3 Aug 2024 15:55:40 +0000
Subject: [PATCH] chore: add caching and fix component

---
 .../theme/components/WallpaperCard.vue        | 23 +++++--------------
 docs/other/wallpapers.md                      | 18 ++++++++++++---
 docs/public/_headers                          |  2 ++
 3 files changed, 23 insertions(+), 20 deletions(-)
 create mode 100644 docs/public/_headers

diff --git a/docs/.vitepress/theme/components/WallpaperCard.vue b/docs/.vitepress/theme/components/WallpaperCard.vue
index 4c3d84124..29d6f62c5 100644
--- a/docs/.vitepress/theme/components/WallpaperCard.vue
+++ b/docs/.vitepress/theme/components/WallpaperCard.vue
@@ -8,32 +8,21 @@ defineProps<{
 </script>
 
 <template>
-  <div
-    class="rounded-lg border bg-bg-elv text-text shadow-sm w-full max-w-md"
-    data-v0-t="card"
-  >
+  <div class="rounded-lg border bg-bg-elv text-text shadow-sm w-full max-w-md">
     <div class="flex flex-col space-y-1.5 p-6 pb-4">
-      <h4
-        class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight"
-      >
+      <h4 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">
         {{ title }}
       </h4>
-      <p class="text-sm font-medium leading-none tracking-tight">
+      <p class="text-sm text-text-2 font-medium leading-none tracking-tight">
         {{ description }}
       </p>
     </div>
     <div class="p-6">
-      <img
-        :src="desktop"
-        :alt="title"
-        class="rounded-md object-cover aspect-[3/2]"
-        width="600"
-        height="400"
-      />
+      <img :src="desktop" :alt="title" class="rounded-md object-cover aspect-[3/2]" width="1080" height="1920" />
     </div>
-    <div class="items-center p-6 flex gap-4">
+    <div class="items-center p-6 flex gap-2">
       <a :href="mobile" target="_blank">Mobile</a>
-      <span class="">•</span>
+      <span class="text-text-2">•</span>
       <a :href="desktop" target="_blank">Desktop</a>
     </div>
   </div>
diff --git a/docs/other/wallpapers.md b/docs/other/wallpapers.md
index 28fe553e6..88545f502 100644
--- a/docs/other/wallpapers.md
+++ b/docs/other/wallpapers.md
@@ -1,19 +1,22 @@
 ---
 title: Wallpapers
 description: Elevate yourself to the next level with our beautiful wallpapers.
+next: false
 ---
 
 <script setup>
 import WallpaperCard from '../.vitepress/theme/components/WallpaperCard.vue'
 </script>
 
-## Wallpapers
+# Wallpapers
 
 Elevate yourself to the next level with our beautiful wallpapers.
 
+All of these wallpapers were made by [taskylizard](https://github.com/taskylizard).
+
 <WallpaperCard
   title="Arc"
-  description="A rounded arc design with a gradient background."
+  description="A rounded arc design with a pleasing fade."
   mobile="https://cdn.jsdelivr.net/gh/fmhy/design-system/branding/arc_mobile.png"
   desktop="https://cdn.jsdelivr.net/gh/fmhy/design-system/branding/arc_desktop.png"
 />
@@ -22,7 +25,16 @@ Elevate yourself to the next level with our beautiful wallpapers.
 
 <WallpaperCard
   title="Rays"
-  description="A gradient background with a rays design."
+  description="A gradient background with a soft, rounded arc."
   mobile="https://cdn.jsdelivr.net/gh/fmhy/design-system/branding/rays_mobile.png"
   desktop="https://cdn.jsdelivr.net/gh/fmhy/design-system/branding/rays_desktop.png"
 />
+
+---
+
+<WallpaperCard
+  title="Tinted Rays"
+  description="A gradient background with a soft, rounded arc. Tinted white at the bottom corner."
+  mobile="https://cdn.jsdelivr.net/gh/fmhy/design-system/branding/tinted_rays_mobile.png"
+  desktop="https://cdn.jsdelivr.net/gh/fmhy/design-system/branding/tinted_rays_desktop.png"
+/>
diff --git a/docs/public/_headers b/docs/public/_headers
new file mode 100644
index 000000000..42ea88849
--- /dev/null
+++ b/docs/public/_headers
@@ -0,0 +1,2 @@
+https://cdn.jsdelivr.net/*
+  Cache-Control: max-age=31536000