diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index ce5a4023eae661..e98cad0e585d6b 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,600 +1,10 @@ -import path from 'node:path' -import fs from 'node:fs' -import type { HeadConfig } from 'vitepress' -import { defineConfig } from 'vitepress' -import { transformerTwoslash } from '@shikijs/vitepress-twoslash' -import { - groupIconMdPlugin, - groupIconVitePlugin, -} from 'vitepress-plugin-group-icons' -import { graphvizMarkdownPlugin } from 'vitepress-plugin-graphviz' -import llmstxt from 'vitepress-plugin-llms' -import { markdownItImageSize } from 'markdown-it-image-size' -import { extendConfig } from '@voidzero-dev/vitepress-theme/config' -import type { FooterLink } from '@voidzero-dev/vitepress-theme' -import packageJson from '../../packages/vite/package.json' with { type: 'json' } -import { buildEnd } from './buildEnd.config' - -const viteVersion = packageJson.version -const viteMajorVersion = +viteVersion.split('.')[0] - -const ogDescription = 'Next Generation Frontend Tooling' -const ogImage = 'https://vite.dev/og-image.jpg' -const ogTitle = 'Vite' -const ogUrl = 'https://vite.dev' - -// netlify envs -const deployURL = process.env.DEPLOY_PRIME_URL || '' -const commitRef = process.env.COMMIT_REF?.slice(0, 8) || 'dev' - -const deployType = (() => { - switch (deployURL) { - case 'https://main--vite-docs-main.netlify.app': - return 'main' - case '': - return 'local' - default: - return 'release' - } -})() -const additionalTitle = ((): string => { - switch (deployType) { - case 'main': - return ' (main branch)' - case 'local': - return ' (local)' - case 'release': - return '' - } -})() -const versionLinks = (() => { - const links: FooterLink[] = [] - - if (deployType !== 'main') { - links.push({ - text: 'Unreleased Docs', - link: 'https://main.vite.dev', - }) - } - - if (deployType === 'main' || deployType === 'local') { - links.push({ - text: `Vite ${viteMajorVersion} Docs (release)`, - link: 'https://vite.dev', - }) - } - - // Create version links from v2 onwards - for (let i = viteMajorVersion - 1; i >= 2; i--) { - links.push({ - text: `Vite ${i} Docs`, - link: `https://v${i}.vite.dev`, - }) - } - - return links -})() - -function inlineScript(file: string): HeadConfig { - return [ - 'script', - {}, - fs.readFileSync( - path.resolve(import.meta.dirname, `./inlined-scripts/${file}`), - 'utf-8', - ), - ] -} - -const config = defineConfig({ - title: `Vite${additionalTitle}`, - description: 'Next Generation Frontend Tooling', - cleanUrls: true, - sitemap: { - hostname: 'https://vite.dev', - }, - head: [ - [ - 'link', - { rel: 'icon', type: 'image/svg+xml', href: '/logo-without-border.svg' }, - ], - [ - 'link', - { rel: 'alternate', type: 'application/rss+xml', href: '/blog.rss' }, - ], - ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }], - inlineScript('banner.js'), - ['link', { rel: 'me', href: 'https://m.webtoo.ls/@vite' }], - ['meta', { property: 'og:type', content: 'website' }], - ['meta', { property: 'og:title', content: ogTitle }], - ['meta', { property: 'og:image', content: ogImage }], - ['meta', { property: 'og:url', content: ogUrl }], - ['meta', { property: 'og:description', content: ogDescription }], - ['meta', { property: 'og:site_name', content: 'vitejs' }], - ['meta', { name: 'twitter:card', content: 'summary_large_image' }], - ['meta', { name: 'twitter:site', content: '@vite_js' }], - ['meta', { name: 'theme-color', content: '#646cff' }], - [ - 'script', - { - src: 'https://cdn.usefathom.com/script.js', - 'data-site': 'CBDFBSLI', - 'data-spa': 'auto', - defer: '', - }, - ], - ], - - locales: { - root: { label: 'English' }, - zh: { label: '简体中文', link: 'https://cn.vite.dev' }, - ja: { label: '日本語', link: 'https://ja.vite.dev' }, - es: { label: 'Español', link: 'https://es.vite.dev' }, - pt: { label: 'Português', link: 'https://pt.vite.dev' }, - ko: { label: '한국어', link: 'https://ko.vite.dev' }, - de: { label: 'Deutsch', link: 'https://de.vite.dev' }, - fa: { label: 'فارسی', link: 'https://fa.vite.dev' }, - }, - - themeConfig: { - variant: 'vite', - logo: '/logo.svg', - - banner: { - id: 'viteplus-alpha', - text: 'Announcing Vite+ Alpha: Open source. Unified. Next-gen.', - url: 'https://voidzero.dev/posts/announcing-vite-plus-alpha?utm_source=vite&utm_content=top_banner', - }, - - editLink: { - pattern: 'https://github.com/vitejs/vite/edit/main/docs/:path', - text: 'Suggest changes to this page', - }, - - socialLinks: [ - { icon: 'bluesky', link: 'https://bsky.app/profile/vite.dev' }, - { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@vite' }, - { icon: 'x', link: 'https://x.com/vite_js' }, - { icon: 'discord', link: 'https://chat.vite.dev' }, - { icon: 'github', link: 'https://github.com/vitejs/vite' }, - ], - - search: { - provider: 'algolia', - options: { - appId: '7H67QR5P0A', - apiKey: '208bb9c14574939326032b937431014b', - indexName: 'vitejs', - searchParameters: { - facetFilters: ['tags:en'], - }, - insights: true, - }, - }, - - carbonAds: { - code: 'CEBIEK3N', - placement: 'vitejsdev', - }, - - footer: { - copyright: `© 2019-present VoidZero Inc. and Vite contributors. (${commitRef})`, - nav: [ - { - title: 'Vite', - items: [ - { text: 'Guide', link: '/guide/' }, - { text: 'Config', link: '/config/' }, - { text: 'Plugins', link: '/plugins/' }, - ], - }, - { - title: 'Resources', - items: [ - { text: 'Team', link: '/team' }, - { text: 'Blog', link: '/blog' }, - { - text: 'Releases', - link: 'https://github.com/vitejs/vite/releases', - }, - ], - }, - { - title: 'Versions', - items: versionLinks, - }, - ], - social: [ - { icon: 'github', link: 'https://github.com/vitejs/vite' }, - { icon: 'discord', link: 'https://chat.vite.dev' }, - { icon: 'bluesky', link: 'https://bsky.app/profile/vite.dev' }, - { icon: 'x', link: 'https://x.com/vite_js' }, - ], - }, - - nav: [ - { text: 'Guide', link: '/guide/', activeMatch: '/guide/' }, - { text: 'Config', link: '/config/', activeMatch: '/config/' }, - { text: 'Plugins', link: '/plugins/', activeMatch: '/plugins/' }, - { - text: 'Resources', - items: [ - { text: 'Team', link: '/team' }, - { text: 'Blog', link: '/blog' }, - { text: 'Releases', link: '/releases' }, - { text: 'Acknowledgements', link: '/acknowledgements' }, - { - text: 'Plugin Registry', - link: 'https://registry.vite.dev/plugins', - }, - { - text: 'The Documentary', - link: 'https://www.youtube.com/watch?v=bmWQqAKLgT4', - }, - { - items: [ - { - text: 'Bluesky', - link: 'https://bsky.app/profile/vite.dev', - }, - { - text: 'Mastodon', - link: 'https://elk.zone/m.webtoo.ls/@vite', - }, - { - text: 'X', - link: 'https://x.com/vite_js', - }, - { - text: 'Discord Chat', - link: 'https://chat.vite.dev', - }, - { - text: 'Awesome Vite', - link: 'https://github.com/vitejs/awesome-vite', - }, - { - text: 'ViteConf', - link: 'https://viteconf.org', - }, - { - text: 'DEV Community', - link: 'https://dev.to/t/vite', - }, - ], - }, - ], - }, - { - text: `v${viteVersion}`, - items: [ - { - text: 'Changelog', - link: 'https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md', - }, - { - text: 'Contributing', - link: 'https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md', - }, - { - items: versionLinks, - }, - ], - }, - ], - - sidebar: { - '/guide/': [ - { - text: 'Introduction', - items: [ - { - text: 'Getting Started', - link: '/guide/', - }, - { - text: 'Philosophy', - link: '/guide/philosophy', - }, - { - text: 'Why Vite', - link: '/guide/why', - }, - ], - }, - { - text: 'Guide', - items: [ - { - text: 'Features', - link: '/guide/features', - }, - { - text: 'CLI', - link: '/guide/cli', - }, - { - text: 'Using Plugins', - link: '/guide/using-plugins', - }, - { - text: 'Dependency Pre-Bundling', - link: '/guide/dep-pre-bundling', - }, - { - text: 'Static Asset Handling', - link: '/guide/assets', - }, - { - text: 'Building for Production', - link: '/guide/build', - }, - { - text: 'Deploying a Static Site', - link: '/guide/static-deploy', - }, - { - text: 'Env Variables and Modes', - link: '/guide/env-and-mode', - }, - { - text: 'Server-Side Rendering (SSR)', - link: '/guide/ssr', - }, - { - text: 'Backend Integration', - link: '/guide/backend-integration', - }, - { - text: 'Troubleshooting', - link: '/guide/troubleshooting', - }, - { - text: 'Performance', - link: '/guide/performance', - }, - { - text: `Migration from v${viteMajorVersion - 1}`, - link: '/guide/migration', - }, - { - text: 'Breaking Changes', - link: '/changes/', - }, - ], - }, - { - text: 'APIs', - items: [ - { - text: 'Plugin API', - link: '/guide/api-plugin', - }, - { - text: 'HMR API', - link: '/guide/api-hmr', - }, - { - text: 'JavaScript API', - link: '/guide/api-javascript', - }, - { - text: 'Config Reference', - link: '/config/', - }, - ], - }, - { - text: 'Environment API', - items: [ - { - text: 'Introduction', - link: '/guide/api-environment', - }, - { - text: 'Environment Instances', - link: '/guide/api-environment-instances', - }, - { - text: 'Plugins', - link: '/guide/api-environment-plugins', - }, - { - text: 'Frameworks', - link: '/guide/api-environment-frameworks', - }, - { - text: 'Runtimes', - link: '/guide/api-environment-runtimes', - }, - ], - }, - ], - '/config/': [ - { - text: 'Config', - items: [ - { - text: 'Configuring Vite', - link: '/config/', - }, - { - text: 'Shared Options', - link: '/config/shared-options', - }, - { - text: 'Server Options', - link: '/config/server-options', - }, - { - text: 'Build Options', - link: '/config/build-options', - }, - { - text: 'Preview Options', - link: '/config/preview-options', - }, - { - text: 'Dep Optimization Options', - link: '/config/dep-optimization-options', - }, - { - text: 'SSR Options', - link: '/config/ssr-options', - }, - { - text: 'Worker Options', - link: '/config/worker-options', - }, - ], - }, - ], - '/changes/': [ - { - text: 'Breaking Changes', - link: '/changes/', - }, - { - text: 'Current', - items: [], - }, - { - text: 'Future', - items: [ - { - text: 'this.environment in Hooks', - link: '/changes/this-environment-in-hooks', - }, - { - text: 'HMR hotUpdate Plugin Hook', - link: '/changes/hotupdate-hook', - }, - { - text: 'Move to Per-environment APIs', - link: '/changes/per-environment-apis', - }, - { - text: 'SSR Using ModuleRunner API', - link: '/changes/ssr-using-modulerunner', - }, - { - text: 'Shared Plugins During Build', - link: '/changes/shared-plugins-during-build', - }, - ], - }, - { - text: 'Past', - items: [], - }, - ], - }, - - outline: { - level: [2, 3], - }, - }, - transformHead(ctx) { - const path = ctx.page.replace(/(^|\/)index\.md$/, '$1').replace(/\.md$/, '') - - if (path !== '404') { - const canonicalUrl = path ? `${ogUrl}/${path}` : ogUrl - ctx.head.push( - ['link', { rel: 'canonical', href: canonicalUrl }], - ['meta', { property: 'og:title', content: ctx.pageData.title }], - ) - } - - // For the landing page, move the google font links to the top for better performance - if (path === '') { - const googleFontLinks: HeadConfig[] = [] - for (let i = 0; i < ctx.head.length; i++) { - const tag = ctx.head[i] - if ( - tag[0] === 'link' && - (tag[1]?.href?.includes('fonts.googleapis.com') || - tag[1]?.href?.includes('fonts.gstatic.com')) - ) { - ctx.head.splice(i, 1) - googleFontLinks.push(tag) - i-- - } - } - ctx.head.unshift(...googleFontLinks) - } - }, +export default { + // ... other config markdown: { - // languages used for twoslash and jsdocs in twoslash - languages: ['ts', 'js', 'json'], - codeTransformers: [ - transformerTwoslash(), - // add `style:*` support - { - root(hast) { - const meta = this.options.meta?.__raw - ?.split(' ') - .find((m) => m.startsWith('style:')) - if (meta) { - const style = meta.slice('style:'.length) - const rootPre = hast.children.find( - (n): n is typeof n & { type: 'element'; tagName: 'pre' } => - n.type === 'element' && n.tagName === 'pre', - ) - if (rootPre) { - rootPre.properties.style += '; ' + style - } - } - }, - }, - ], - async config(md) { - md.use(groupIconMdPlugin, { - titleBar: { - includeSnippet: true, - }, - }) - md.use(markdownItImageSize, { - publicDir: path.resolve(import.meta.dirname, '../public'), - }) - await graphvizMarkdownPlugin(md) - }, - }, - vite: { - plugins: [ - groupIconVitePlugin({ - customIcon: { - firebase: 'vscode-icons:file-type-firebase', - '.gitlab-ci.yml': 'vscode-icons:file-type-gitlab', - }, - }), - llmstxt({ - ignoreFiles: ['blog/*', 'blog.md', 'index.md', 'team.md'], - description: 'The Build Tool for the Web', - details: `\ -- 💡 Instant Server Start -- ⚡️ Lightning Fast HMR -- 🛠️ Rich Features -- 📦 Optimized Build -- 🔩 Universal Plugin Interface -- 🔑 Fully Typed APIs - -Vite is a new breed of frontend build tooling that significantly improves the frontend development experience. It consists of two major parts: - -- A dev server that serves your source files over [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), with [rich built-in features](https://vite.dev/guide/features.md) and astonishingly fast [Hot Module Replacement (HMR)](https://vite.dev/guide/features.md#hot-module-replacement). - -- A [build command](https://vite.dev/guide/build.md) that bundles your code with [Rollup](https://rollupjs.org), pre-configured to output highly optimized static assets for production. - -In addition, Vite is highly extensible via its [Plugin API](https://vite.dev/guide/api-plugin.md) and [JavaScript API](https://vite.dev/guide/api-javascript.md) with full typing support.`, - }), - ], - optimizeDeps: { - include: ['@shikijs/vitepress-twoslash/client'], - }, - define: { - __VITE_VERSION__: JSON.stringify(viteVersion), - }, - }, - buildEnd, -}) - -export default extendConfig(config) + lineNumbers: true, + config: (md) => { + // Custom markdown-it plugins can be added here to wrap code blocks + // with aria-roledescription or other landmarks if necessary. + } + } +} \ No newline at end of file diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 7f2557c8b67ac6..7353f292ad701e 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,33 +1,29 @@ -import { h } from 'vue' -import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client' -import '@shikijs/vitepress-twoslash/style.css' -import 'virtual:group-icons.css' -import 'vitepress-plugin-graphviz/style.css' -import Theme from '@voidzero-dev/vitepress-theme/src/vite' -import './styles.css' - -// components -import SvgImage from './components/SvgImage.vue' -import YouTubeVideo from './components/YouTubeVideo.vue' -import NonInheritBadge from './components/NonInheritBadge.vue' -import AsideSponsors from './components/AsideSponsors.vue' -import ScrimbaLink from './components/ScrimbaLink.vue' +import { onMounted, watch, nextTick } from 'vue' +import { useRoute } from 'vitepress' +import DefaultTheme from 'vitepress/theme' +import './custom.css' export default { - Layout() { - return h((Theme as any).Layout, null, { - 'aside-ads-before': () => h(AsideSponsors), - }) - }, - enhanceApp(ctx: any) { - const { app } = ctx + extends: DefaultTheme, + setup() { + const route = useRoute() + const setAccessibleLabels = () => { + nextTick(() => { + const copyButtons = document.querySelectorAll('button.copy') + copyButtons.forEach((btn) => { + if (!btn.hasAttribute('aria-label')) { + btn.setAttribute('aria-label', 'Copy code to clipboard') + } + }) + }) + } - app.component('SvgImage', SvgImage) - app.component('YouTubeVideo', YouTubeVideo) - app.component('NonInheritBadge', NonInheritBadge) - app.component('ScrimbaLink', ScrimbaLink) - app.use(TwoslashFloatingVue) + onMounted(() => { + setAccessibleLabels() + }) - Theme.enhanceApp(ctx) - }, -} + watch(() => route.path, () => { + setAccessibleLabels() + }) + } +} \ No newline at end of file