feat: ✨ Add banner to announce Lysand 3.0

.vitepress/theme/Layout.vue

@@ -0,0 +1,13 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+import Banner from '../../components/Banner.vue';
+import "iconify-icon";
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+    <Banner />
+    <Layout>
+    </Layout>
+</template>

.vitepress/theme/custom.css

@@ -12,6 +12,7 @@
   --vp-home-hero-image-filter: brightness(0.8) saturate(1.2); */
   --vp-home-hero-name-color: rgb(249, 168, 212);
   --vp-c-brand-1: rgb(249, 168, 212);
+  --vp-layout-top-height: var(--spacing-10);
   --lysand-gradient: linear-gradient(
     to right,
     rgb(249, 168, 212),

.vitepress/theme/index.ts

@@ -1,4 +1,8 @@
 import DefaultTheme from "vitepress/theme";
+import Layout from "./Layout.vue";
 import "./custom.css";
 
-export default DefaultTheme;
+export default {
+    extends: DefaultTheme,
+    Layout,
+};

components/Banner.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const currentNews = {
+    id: "lysand3",
+    title: "Lysand 3.0",
+    description: "Lysand 3.0 is now available!",
+};
+</script>
+<template>
+    <div
+        class="fixed inset-x-0 top-0 flex items-center h-10 gap-x-6 overflow-hidden bg-black px-4 py-2.5 sm:px-3.5 sm:before:flex-1 z-50">
+        <div class="flex flex-wrap justify-center gap-x-4 gap-y-2 w-full">
+            <p class="text-sm text-gray-50">
+                <strong class="font-semibold">{{
+                    currentNews.title
+                }}</strong>&nbsp;•&nbsp;{{ currentNews.description }}
+            </p>
+        </div>
+    </div>
+</template>

components/Features.vue

@@ -26,7 +26,6 @@
 </template>
 
 <script setup>
-import "iconify-icon";
 const features = [
     {
         name: "JSON-based APIs",

package.json

@@ -11,6 +11,7 @@
   "trustedDependencies": ["@biomejs/biome"],
   "dependencies": {
     "@tailwindcss/vite": "^4.0.0-alpha.14",
+    "@vueuse/core": "^10.9.0",
     "iconify-icon": "^2.1.0",
     "tailwindcss": "^4.0.0-alpha.14"
   }