docs: add announcement component

docs/.vitepress/components/Annoucement.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { frontmatter: fm } = useData()
+</script>
+
+<template>
+  <a
+    v-if="fm.hero.prelink"
+    :href="fm.hero.prelink.link"
+    :target="fm.hero.prelink.target"
+    class="inline-flex items-center rounded-lg bg-[var(--vp-c-default-soft)] px-4 py-1 text-sm font-semibold mb-3"
+  >
+    {{ fm.hero.prelink.title }}
+  </a>
+</template>

docs/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import HomePage from '../components/HomePage.vue'
 import HomePageDemo from '../components/HomePageDemo.vue'
+import Annoucement from '../components/Annoucement.vue'
 import EmbedIframe from '../components/EmbedIframe.vue'
 import LayoutShowcase from '../layouts/showcase.vue'
 import 'vitepress/dist/client/theme-default/styles/components/vp-doc.css'
@@ -18,6 +19,7 @@ export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
+      'home-hero-prelink': () => h(Annoucement),
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
       'home-features-after': () => h('div', [h(HomePageDemo), h(HomePage)]),
     })

docs/content/index.md

@@ -10,6 +10,10 @@ hero:
   image:
     src: /logo.svg
     alt: Radix-Vue
+  prelink:
+    title: 🎉 Announcing v1!
+    link: https://github.com/radix-vue/radix-vue/releases/tag/v1.0.0
+    target: _blank
   actions:
     - theme: brand
       text: Get Started

docs/package.json

@@ -15,7 +15,6 @@
   "devDependencies": {
     "@iconify/vue": "^4.1.1",
     "@radix-ui/colors": "^2.1.0",
-    "@tailwindcss/postcss7-compat": "^2.2.17",
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.16",
     "codesandbox": "^2.2.3",

package.json

@@ -37,6 +37,11 @@
       "@commitlint/config-conventional"
     ]
   },
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
+    }
+  },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",
     "commit-msg": "pnpm commitlint --edit ${1}"

patches/vitepress@1.0.0-rc.20.patch

@@ -0,0 +1,60 @@
+diff --git a/dist/client/theme-default/Layout.vue b/dist/client/theme-default/Layout.vue
+index 0ecca7ecd6f7e5ab4d576ecaf0cbc8578291a94f..32c9d80e564c42b817950ee2a1c69d62e6b304a3 100644
+--- a/dist/client/theme-default/Layout.vue
++++ b/dist/client/theme-default/Layout.vue
+@@ -56,6 +56,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
+
+       <template #not-found><slot name="not-found" /></template>
+       <template #home-hero-before><slot name="home-hero-before" /></template>
++      <template #home-hero-prelink><slot name="home-hero-prelink" /></template>
+       <template #home-hero-info><slot name="home-hero-info" /></template>
+       <template #home-hero-image><slot name="home-hero-image" /></template>
+       <template #home-hero-after><slot name="home-hero-after" /></template>
+diff --git a/dist/client/theme-default/components/VPContent.vue b/dist/client/theme-default/components/VPContent.vue
+index a1479dc693a8261b30b88663ba1de523cceaf877..1f49bab3aed371b5e8cf12e11870c503da2a9872 100644
+--- a/dist/client/theme-default/components/VPContent.vue
++++ b/dist/client/theme-default/components/VPContent.vue
+@@ -28,6 +28,7 @@ const { hasSidebar } = useSidebar()
+
+     <VPHome v-else-if="frontmatter.layout === 'home'">
+       <template #home-hero-before><slot name="home-hero-before" /></template>
++      <template #home-hero-prelink><slot name="home-hero-prelink" /></template>
+       <template #home-hero-info><slot name="home-hero-info" /></template>
+       <template #home-hero-image><slot name="home-hero-image" /></template>
+       <template #home-hero-after><slot name="home-hero-after" /></template>
+diff --git a/dist/client/theme-default/components/VPHero.vue b/dist/client/theme-default/components/VPHero.vue
+index 659c3dbfd36e9fcaf08b659c84c2eb378e8b49f8..2650a2b97e6d0c96f6bf56b478ece2f0c5663101 100644
+--- a/dist/client/theme-default/components/VPHero.vue
++++ b/dist/client/theme-default/components/VPHero.vue
+@@ -25,6 +25,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
+   <div class="VPHero" :class="{ 'has-image': image || heroImageSlotExists }">
+     <div class="container">
+       <div class="main">
++        <slot name="home-hero-prelink"></slot>
+         <slot name="home-hero-info">
+           <h1 v-if="name" class="name">
+             <span v-html="name" class="clip"></span>
+diff --git a/dist/client/theme-default/components/VPHome.vue b/dist/client/theme-default/components/VPHome.vue
+index a4cda402bf7fde02c1e58b85c5d47daec458220e..d87e6fc69bd6d4b40f12b2fee90d385549583820 100644
+--- a/dist/client/theme-default/components/VPHome.vue
++++ b/dist/client/theme-default/components/VPHome.vue
+@@ -7,6 +7,7 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
+   <div class="VPHome">
+     <slot name="home-hero-before" />
+     <VPHomeHero>
++      <template #home-hero-prelink><slot name="home-hero-prelink" /></template>
+       <template #home-hero-info><slot name="home-hero-info" /></template>
+       <template #home-hero-image><slot name="home-hero-image" /></template>
+     </VPHomeHero>
+diff --git a/dist/client/theme-default/components/VPHomeHero.vue b/dist/client/theme-default/components/VPHomeHero.vue
+index 5d482944ff62330939c963f43d71c788e88afa4e..a486fe63bfb4f7e41bcbf3e070ef57e8806cf9a9 100644
+--- a/dist/client/theme-default/components/VPHomeHero.vue
++++ b/dist/client/theme-default/components/VPHomeHero.vue
+@@ -15,6 +15,7 @@ const { frontmatter: fm } = useData()
+     :image="fm.hero.image"
+     :actions="fm.hero.actions"
+   >
++    <template #home-hero-prelink><slot name="home-hero-prelink" /></template>
+     <template #home-hero-info><slot name="home-hero-info" /></template>
+     <template #home-hero-image><slot name="home-hero-image" /></template>
+   </VPHero>