From 8eb5736f49838570a12d629c542bbef5f3a802f2 Mon Sep 17 00:00:00 2001 From: zernonia Date: Thu, 23 May 2024 11:00:24 +0800 Subject: [PATCH 001/229] refactor: barebone doc --- docs/.vitepress/components/HomePage.vue | 2 +- docs/.vitepress/config.ts | 20 +- docs/.vitepress/custom/Docs.vue | 35 +++ docs/.vitepress/custom/Layout.vue | 40 +++ docs/.vitepress/layouts/showcase.vue | 3 +- docs/.vitepress/theme/index.ts | 15 +- docs/.vitepress/theme/style.css | 268 ++++++++++---------- docs/.vitepress/theme/tailwind.postcss | 3 - docs/components/HeroContainer.vue | 2 +- docs/package.json | 3 +- docs/tailwind.config.js | 36 +++ package.json | 5 - pnpm-lock.yaml | 319 +++++++++++++++++------- 13 files changed, 482 insertions(+), 269 deletions(-) create mode 100644 docs/.vitepress/custom/Docs.vue create mode 100644 docs/.vitepress/custom/Layout.vue delete mode 100644 docs/.vitepress/theme/tailwind.postcss diff --git a/docs/.vitepress/components/HomePage.vue b/docs/.vitepress/components/HomePage.vue index 6c1417022..08319369e 100644 --- a/docs/.vitepress/components/HomePage.vue +++ b/docs/.vitepress/components/HomePage.vue @@ -1,5 +1,5 @@ diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 063585f2b..25ed21f8e 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -17,7 +17,7 @@ import ComponentPreviewPlugin from './plugins/ComponentPreview' import InstallationTabsPlugin from './plugins/InstallationTabs' function BadgeHTML(text: string, translucent = false) { - return `
+ return `
${text}
` @@ -31,18 +31,8 @@ export default defineConfig({ ['meta', { name: 'theme-color', content: '#00C38A' }], ['link', { rel: 'icon', href: '/logo.png' }], ['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }], - [ - 'meta', - { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${radixVueName} contributors` }, - ], - [ - 'meta', - { - name: 'keywords', - content: - 'vue, nuxt, component-library, radix, radix-vue, typescript', - }, - ], + ['meta', { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${radixVueName} contributors` }], + ['meta', { name: 'keywords', content: 'vue, nuxt, component-library, radix, radix-vue, typescript' }], ['meta', { property: 'og:title', content: radixVueName }], ['meta', { property: 'og:description', content: radixVueDescription }], ['meta', { property: 'og:url', content: ogUrl }], @@ -57,9 +47,7 @@ export default defineConfig({ ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' }], ], lastUpdated: true, - sitemap: { - hostname: ogUrl, - }, + sitemap: { hostname: ogUrl }, themeConfig: { // https://vitepress.dev/reference/default-theme-config nav: [ diff --git a/docs/.vitepress/custom/Docs.vue b/docs/.vitepress/custom/Docs.vue new file mode 100644 index 000000000..445288df0 --- /dev/null +++ b/docs/.vitepress/custom/Docs.vue @@ -0,0 +1,35 @@ + + + \ No newline at end of file diff --git a/docs/.vitepress/custom/Layout.vue b/docs/.vitepress/custom/Layout.vue new file mode 100644 index 000000000..913f855f9 --- /dev/null +++ b/docs/.vitepress/custom/Layout.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file diff --git a/docs/.vitepress/layouts/showcase.vue b/docs/.vitepress/layouts/showcase.vue index 5d2094de8..fa81b6679 100644 --- a/docs/.vitepress/layouts/showcase.vue +++ b/docs/.vitepress/layouts/showcase.vue @@ -1,7 +1,6 @@ diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index cd1a0967a..1469d8a14 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,6 +1,5 @@ // https://vitepress.dev/guide/custom-theme import { h } from 'vue' -import DefaultTheme from 'vitepress/theme' import HomePage from '../components/HomePage.vue' import HomePageDemo from '../components/HomePageDemo.vue' import Announcement from '../components/Announcement.vue' @@ -8,24 +7,18 @@ import EmbedIframe from '../components/EmbedIframe.vue' import ComponentPreview from '../components/ComponentPreview.vue' import InstallationTabs from '../components/InstallationTabs.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' +import Layout from '../custom/Layout.vue' + const regex = /\/(\w+)\.vue/ const baseModules = import.meta.glob('../../components/*.vue', { eager: true }) const tableModules = import.meta.glob('../../components/tables/*.vue', { eager: true }) export default { - extends: DefaultTheme, - Layout: () => { - return h(DefaultTheme.Layout, null, { - 'home-hero-info-before': () => h(Announcement), - // https://vitepress.dev/guide/extending-default-theme#layout-slots - 'home-features-after': () => h('div', [h(HomePageDemo), h(HomePage)]), - }) - }, + // extends: DefaultTheme, + Layout, enhanceApp({ app }) { for (const path in baseModules) app.component(path.match(regex)?.[1] ?? '', (baseModules[path] as any)?.default) diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index 0fee6d01f..0052abc6a 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -1,158 +1,155 @@ -/** - * Customize default theme styling by overriding CSS variables: - * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css - */ - -/** - * Colors - * -------------------------------------------------------------------------- */ - -:root { - --vp-c-brand-1: #10b981; - --vp-c-brand-light: #25a677; - --vp-c-brand-lighter: #34d399; - --vp-c-brand-lightest: #a7f3d0; - --vp-c-brand-2: #059669; - --vp-c-brand-darker: #047857; - --vp-c-brand-dimm: rgba(100, 108, 255, 0.08); - --vp-c-tip-soft: #5bb98c; - --vp-c-tip-1: var(--vp-c-brand-darker); - - --vp-code-color: rgba(60, 60, 67); - --vp-code-block-bg: #292b30; - --vp-code-block-bg-light: #1e1e20; - --vp-code-block-divider-color: #000000; - --vp-custom-block-tip-bg: #40644d29; -} - -.dark { - --vp-c-bg: #1e1e20; - --vp-c-bg-alt: #161618; - --vp-c-bg-soft: #252529; - --vp-code-block-bg: #161618; - --vp-c-tip-1: white; - -} -/* --vp-c-bg-elv: #252529; ---vp-c-bg-elv-up: #313136; ---vp-c-bg-elv-down: #1e1e20; ---vp-c-bg-elv-mute: #313136; ---vp-c-bg-soft-up: #313136; ---vp-c-bg-soft-down: #1e1e20; ---vp-c-bg-soft-mute: #313136; */ - -/** - * Component: Button - * -------------------------------------------------------------------------- */ - -:root { - --vp-button-brand-border: var(--vp-c-brand-light); - --vp-button-brand-text: var(--vp-c-white); - --vp-button-brand-bg: var(--vp-c-brand); - --vp-button-brand-hover-border: var(--vp-c-brand-light); - --vp-button-brand-hover-text: var(--vp-c-white); - --vp-button-brand-hover-bg: var(--vp-c-brand-light); - --vp-button-brand-active-border: var(--vp-c-brand-light); - --vp-button-brand-active-text: var(--vp-c-white); - --vp-button-brand-active-bg: var(--vp-button-brand-bg); -} - -/** - * Component: Home - * -------------------------------------------------------------------------- */ +@tailwind base; +@tailwind components; +@tailwind utilities; -:root { - --vp-home-hero-name-color: transparent; - --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #11b981 30%, #6ff4cc); - - --vp-home-hero-image-background-image: linear-gradient(180deg, #8600c5 0%, #00f0ff 100%); - --vp-home-hero-image-filter: blur(50px); -} - -@media (min-width: 640px) { - :root { - --vp-home-hero-image-filter: blur(56px); +@layer base { + :root { + --font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } -} - -@media (min-width: 960px) { + :root { - --vp-home-hero-image-filter: blur(72px); + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + + --primary: 142.1 76.2% 36.3%; + --primary-foreground: 355.7 100% 97.3%; + + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + + --border:240 5.9% 90%; + --input:240 5.9% 90%; + --ring:142.1 76.2% 36.3%; + --radius: 0.5rem; + } + + .dark { + --background:20 14.3% 4.1%; + --foreground:0 0% 95%; + + --card:24 9.8% 10%; + --card-foreground:0 0% 95%; + + --popover:0 0% 9%; + --popover-foreground:0 0% 95%; + + --primary:142.1 70.6% 45.3%; + --primary-foreground:144.9 80.4% 10%; + + --secondary:240 3.7% 15.9%; + --secondary-foreground:0 0% 98%; + + --muted:0 0% 15%; + --muted-foreground:240 5% 64.9%; + + --accent:12 6.5% 15.1%; + --accent-foreground:0 0% 98%; + + --destructive:0 62.8% 30.6%; + --destructive-foreground:0 85.7% 97.3%; + + --border:240 3.7% 15.9%; + --input:240 3.7% 15.9%; + --ring:142.4 71.8% 29.2%; } -} + html { + -webkit-text-size-adjust: 100%; + font-variation-settings: normal; + } + body { + @apply bg-background text-foreground min-h-screen antialiased font-sans; + /* font-feature-settings: "rlig" 1, "calt" 1; */ + font-synthesis-weight: none; + text-rendering: optimizeLegibility; + } -/* 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; - } -} + /* Mobile tap highlight */ + /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ + html { + -webkit-tap-highlight-color: rgba(128, 128, 128, 0.5); + } -body { - overflow-x: hidden; -} + /* Font face Geist font */ -/** - * Component: Algolia - * -------------------------------------------------------------------------- */ + @font-face { + font-family: "geist-sans"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/Geist/GeistVariableVF.woff2") format("woff2"); + } -.DocSearch { - --docsearch-primary-color: var(--vp-c-brand) !important; -} + /* === Scrollbars === */ -.blocks { - max-height: 80vh; - overflow: scroll; -} + ::-webkit-scrollbar { + @apply w-2; + @apply h-2; + } -.vp-code-group { - margin-top: 0px; - color: var(--vp-code-block-color); - border-radius: 0px; -} + ::-webkit-scrollbar-track { + @apply !bg-muted; + } + ::-webkit-scrollbar-thumb { + @apply rounded-sm !bg-muted-foreground/30; + } -.vp-doc h2 { - @apply mb-2 md:mb-2.5 text-xl md:text-2xl; -} + /* Firefox */ + /* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */ + html { + scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3); + } -.vp-doc h3 { - @apply text-[17px] md:text-xl; - font-weight: 600; - margin-top: 40px; -} + html.dark { + scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3); + } -.vp-doc :not(pre) > code { - font-size: max(12px, 85%); - @apply dark:text-[var(--vp-c-brand)] dark:bg-[#0F291E]; -} + .hide-scrollbar::-webkit-scrollbar { + display: none; + } -.vp-doc div[class*='language-']:not(:where(.custom, .custom *)) { - @apply border border-neutral-700/40; + .hide-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; + } + } -.VPSidebarItem.is-active .indicator { - @apply bg-[var(--vp-c-brand-1)] -} -.content-container { - @apply !max-w-[720px]; +@layer utilities { + .step { + counter-increment: step; + } + + .step:before { + @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background; + @apply -ml-[50px] -mt-1; + content: counter(step); + } } -li > span { - @apply text-[15px] md:text-base; +@media (max-width: 640px) { + .container { + @apply px-4; + } } + .image-bg { @apply scale-75 !transform !-translate-x-1/2 !-translate-y-1/2; } @@ -164,7 +161,7 @@ li > span { } button:focus-visible { - @apply !outline-none; + @apply outline-none; } .fade-enter-active, @@ -175,4 +172,5 @@ button:focus-visible { .fade-enter-from, .fade-leave-to { opacity: 0; -} \ No newline at end of file +} + \ No newline at end of file diff --git a/docs/.vitepress/theme/tailwind.postcss b/docs/.vitepress/theme/tailwind.postcss deleted file mode 100644 index bd6213e1d..000000000 --- a/docs/.vitepress/theme/tailwind.postcss +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; \ No newline at end of file diff --git a/docs/components/HeroContainer.vue b/docs/components/HeroContainer.vue index 52ab4f07a..9edcdab44 100644 --- a/docs/components/HeroContainer.vue +++ b/docs/components/HeroContainer.vue @@ -20,7 +20,7 @@ const files = computed(