Merge pull request #436 from radix-vue/v1

V1

.histoire/tailwind.config.js

@@ -58,10 +58,10 @@ export default {
         },
         slideDown: {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--radix-collapsible-content-height)" },
         },
         slideUp: {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--radix-collapsible-content-height)" },
           to: { height: 0 },
         },
         enterFromRight: {

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/components/CardLink.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { AspectRatio } from 'radix-vue'
+
+defineProps<{
+  title: string
+  description?: string
+  url: string
+  image?: string
+}>()
+</script>
+
+<template>
+  <div>
+    <a class="flex flex-col bg-[var(--vp-c-bg-soft)] hover:bg-[var(--vp-c-bg-alt)] transition duration-300 rounded-xl p-4" target="_blank" :href="url">
+      <h5 class="font-bold">{{ title }}</h5>
+      <p class="my-1 text-sm text-[var(--vp-c-text-2)]">{{ description }}</p>
+
+      <AspectRatio v-if="image" :ratio="16 / 9" class="rounded-md mt-2 overflow-hidden  ">
+        <img class="w-full h-full object-cover" :src="image" :alt="title">
+      </AspectRatio>
+
+    </a>
+  </div>
+</template>

docs/.vitepress/components/EmbedIframe.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { AspectRatio } from 'radix-vue'
+import { onMounted, ref } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{ src: string }>()
+
+const isMounted = ref(false)
+onMounted(() => {
+  isMounted.value = true
+})
+</script>
+
+<template>
+  <AspectRatio>
+    <iframe :src="src" class="w-full h-full" v-bind="$attrs" />
+  </AspectRatio>
+</template>

docs/.vitepress/config.ts

@@ -1,4 +1,6 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig, postcssIsolateStyles } from 'vitepress'
+import autoprefixer from 'autoprefixer'
+import tailwind from 'tailwindcss'
 import {
   discord,
   font,
@@ -9,11 +11,9 @@ import {
   radixVueName,
   releases,
 } from './meta'
-import { dependencies } from '../package.json'
+import { version } from '../../package.json'
 import { teamMembers } from './contributors'
 
-const version = dependencies['radix-vue']
-
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: radixVueName,
@@ -31,7 +31,7 @@ export default defineConfig({
       {
         name: 'keywords',
         content:
-          'vitest, vite, test, coverage, snapshot, react, vue, preact, svelte, solid, lit, ruby, cypress, puppeteer, jsdom, happy-dom, test-runner, jest, typescript, esm, tinypool, tinyspy, node',
+          'vue, nuxt, component-library, radix, radix-vue, typescript',
       },
     ],
     ['meta', { property: 'og:title', content: radixVueName }],
@@ -51,7 +51,8 @@ export default defineConfig({
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: 'Home', link: '/' },
+      { text: 'Docs', link: '/overview/getting-started.html' },
+      { text: 'Showcase', link: '/showcase' },
       {
         text: `v${version}`,
         items: [
@@ -62,6 +63,9 @@ export default defineConfig({
         ],
       },
     ],
+    outline: {
+      level: [2, 3],
+    },
     logo: '/logo.svg',
 
     sidebar: sidebar(),
@@ -83,6 +87,23 @@ export default defineConfig({
   markdown: {
     theme: 'material-theme-palenight',
   },
+  transformPageData(pageData) {
+    if (pageData.frontmatter.sidebar != null)
+      return
+    // hide sidebar on showcase page
+    pageData.frontmatter.sidebar = pageData.frontmatter.layout !== 'showcase'
+  },
+  vite: {
+    css: {
+      postcss: {
+        plugins: [
+          tailwind(),
+          autoprefixer(),
+          postcssIsolateStyles({ includeFiles: [/vp-doc\.css/] }),
+        ],
+      },
+    },
+  },
 })
 
 function sidebar() {
@@ -103,7 +124,7 @@ function sidebar() {
       collapsed: false,
       items: [
         { text: 'Styling', link: '/guides/styling' },
-        { text: 'Animation', link: '/guides/animation' },
+        { text: 'Animation/Transition', link: '/guides/animation' },
         { text: 'Composition', link: '/guides/composition' },
         { text: 'Server side rendering', link: '/guides/server-side-rendering' },
       ],
@@ -147,6 +168,8 @@ function sidebar() {
       text: 'Utilities',
       collapsed: false,
       items: [
+        { text: 'Config Provider', link: '/utilities/config-provider' },
+        { text: 'Visually Hidden', link: '/utilities/visually-hidden' },
         { text: 'Primitive', link: '/utilities/primitive' },
         { text: 'Slot', link: '/utilities/slot' },
         { text: 'useId', link: '/utilities/use-id' },

docs/.vitepress/contributor-names.json

@@ -15,6 +15,7 @@
   "D-Lite",
   "DennisSmuda",
   "edtorba",
+  "enkot",
   "glennlaysonjr",
   "lepture",
   "kn0wn",

docs/.vitepress/layouts/showcase.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import CardLink from '../components/CardLink.vue'
+import { VPButton } from 'vitepress/theme'
+
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <div class="content px-6 sm:px-[48px] lg:px-[64px] py-6 sm:py-12">
+    <div class="mx-auto w-full container max-w-[1152px]">
+      <div class=" my-16 md:my-26 flex flex-col items-center text-center">
+        <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold animate-text bg-gradient-to-r from-green-200 via-green-300 to-blue-400 bg-clip-text text-transparent ">
+          Showcase
+        </h1>
+        <h2 class="mt-2 md:mt-6 md:text-2xl font-medium text-[var(--vp-c-text-2)] max-w-[540px]">
+          {{ frontmatter.description }}
+        </h2>
+
+        <VPButton text="Add Showcase" class="mt-6" target="_blank" href="https://github.com/radix-vue/radix-vue/blob/main/docs/content/showcase.md" />
+      </div>
+
+      <div class="flex flex-col gap-8 md:gap-12">
+        <div>
+          <h3 class="md:text-lg font-semibold ml-2 inline-flex items-center group">
+            Packages
+          </h3>
+          <div class="mt-4 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <CardLink v-for="item in frontmatter.packages" :key="item.title" v-bind="item" />
+          </div>
+        </div>
+
+        <div>
+          <h3 class="md:text-lg font-semibold ml-2 inline-flex items-center group">
+            Projects
+          </h3>
+          <div class="mt-4 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <CardLink v-for="item in frontmatter.projects" :key="item.title" v-bind="item" />
+          </div>
+        </div>
+
+        <div>
+          <h3 class="md:text-lg font-semibold ml-2 inline-flex items-center group">
+            Starters
+          </h3>
+          <div class="mt-4 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <CardLink v-for="item in frontmatter.starters" :key="item.title" v-bind="item" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/index.ts

@@ -1,33 +1,37 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from 'vue'
-import Theme from 'vitepress/theme'
+import DefaultTheme from 'vitepress/theme'
 import HomePage from '../components/HomePage.vue'
 import HomePageDemo from '../components/HomePageDemo.vue'
-import Badge from '../components/Badge.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'
 import './style.css'
 import './tailwind.postcss'
+import { type Theme } from 'vitepress'
 
 const regex = /\/(\w+)\.vue/
-// @ts-expect-error
 const baseModules = import.meta.glob('../../components/*.vue', { eager: true })
-// @ts-expect-error
 const tableModules = import.meta.glob('../../components/tables/*.vue', { eager: true })
 
 export default {
-  extends: Theme,
+  extends: DefaultTheme,
   Layout: () => {
-    return h(Theme.Layout, null, {
+    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)]),
     })
   },
   enhanceApp({ app, router, siteData }) {
     for (const path in baseModules)
-      app.component(path.match(regex)?.[1], baseModules[path]?.default)
+      app.component(path.match(regex)?.[1] ?? '', (baseModules[path] as any)?.default)
 
     for (const path in tableModules)
-      app.component(path.match(regex)?.[1], tableModules[path]?.default)
+      app.component(path.match(regex)?.[1] ?? '', (tableModules[path] as any)?.default)
 
-    app.component('Badge', Badge)
+    app.component('Showcase', LayoutShowcase)
+    app.component('EmbedIframe', EmbedIframe)
   },
-}
+} satisfies Theme

docs/.vitepress/theme/style.css

@@ -2,18 +2,14 @@
  * Customize default theme styling by overriding CSS variables:
  * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
  */
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
+
 /**
  * Colors
  * -------------------------------------------------------------------------- */
 
 :root {
   --vp-c-brand-1: #10b981;
-  --vp-c-brand-light: #10b981;
+  --vp-c-brand-light: #25a677;
   --vp-c-brand-lighter: #34d399;
   --vp-c-brand-lightest: #a7f3d0;
   --vp-c-brand-2: #059669;
@@ -23,6 +19,7 @@
   --vp-code-block-bg: #292b30;
   --vp-code-block-bg-light: #1e1e20;
   --vp-code-block-divider-color: #000000;
+  --vp-custom-block-tip-bg: #40644d29;
 }
 
 .dark {
@@ -79,6 +76,28 @@
   }
 }
 
+
+/* Fix the layout shift for Vitepress https://github.com/vuejs/vitepress/pull/1844/files */
+@media (min-width: 768px) {
+  .VPContent, .VPLocalNav, .VPNav, .VPHome {
+    width: 100vw !important;
+  }
+  .VPFooter {
+    width: 100vw !important;
+    padding: 32px !important;
+  }
+}
+@media (min-width: 1440px) {
+  .VPSidebar {
+    padding-left: max(32px, calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2)) !important;
+    width: calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
+  }
+}
+
+body {
+  overflow-x: hidden;
+}
+
 /**
  * Component: Algolia
  * -------------------------------------------------------------------------- */
@@ -126,3 +145,17 @@ li > span {
   content: "";
   flex: 1;
 }
+
+button:focus-visible {
+  @apply !outline-none;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}