diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts index a1d702e01..df4c7e92c 100644 --- a/apps/www/.vitepress/config.mts +++ b/apps/www/.vitepress/config.mts @@ -4,7 +4,6 @@ import autoprefixer from 'autoprefixer' import tailwind from 'tailwindcss' import Icons from 'unplugin-icons/vite' import { defineConfig } from 'vitepress' -import { cssVariables } from './theme/config/shiki' import { siteConfig } from './theme/config/site' import CodeWrapperPlugin from './theme/plugins/codewrapper' @@ -31,7 +30,6 @@ export default defineConfig({ ['meta', { name: 'og:site_name', content: siteConfig.name }], ['meta', { name: 'og:image', content: siteConfig.ogImage }], ['meta', { name: 'twitter:image', content: siteConfig.ogImage }], - ], sitemap: { @@ -58,7 +56,6 @@ export default defineConfig({ srcDir: path.resolve(__dirname, '../src'), markdown: { - theme: cssVariables, codeTransformers: [ transformerMetaWordHighlight(), ], diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue index aa68e46b1..dbcf8e920 100644 --- a/apps/www/.vitepress/theme/components/ComponentPreview.vue +++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue @@ -4,9 +4,8 @@ import { cn } from '@/lib/utils' import { useConfigStore } from '@/stores/config' import { useClipboard } from '@vueuse/core' import MagicString from 'magic-string' -import { codeToHtml } from 'shiki' import { computed, ref, watch } from 'vue' -import { cssVariables } from '../config/shiki' +import { highlight } from '../config/shiki' import CodeSandbox from './CodeSandbox.vue' import ComponentLoader from './ComponentLoader.vue' import Stackblitz from './Stackblitz.vue' @@ -37,10 +36,7 @@ function transformImportPath(code: string) { watch([style, codeConfig], async () => { try { rawString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim()) - codeHtml.value = await codeToHtml(transformedRawString.value, { - lang: 'vue', - theme: cssVariables, - }) + codeHtml.value = highlight(transformedRawString.value, 'vue') } catch (err) { console.error(err) diff --git a/apps/www/.vitepress/theme/config/shiki.ts b/apps/www/.vitepress/theme/config/shiki.ts index b0e9745df..8992eb057 100644 --- a/apps/www/.vitepress/theme/config/shiki.ts +++ b/apps/www/.vitepress/theme/config/shiki.ts @@ -1,6 +1,41 @@ -import { createCssVariablesTheme } from 'shiki' +import type { HighlighterCore } from 'shiki/core' +import type { ThemeOptions } from 'vitepress' +import { computedAsync } from '@vueuse/core' +import { createHighlighterCore } from 'shiki/core' +import { createJavaScriptRegexEngine } from 'shiki/engine/javascript' -export const cssVariables = createCssVariablesTheme({ - variablePrefix: '--shiki-', - variableDefaults: {}, +export const shikiThemes: ThemeOptions = { + light: 'github-light-default', + dark: 'github-dark-default', +} + +export const highlighter = computedAsync(async (onCancel) => { + const shiki = await createHighlighterCore({ + engine: createJavaScriptRegexEngine(), + themes: [ + () => import('shiki/themes/github-dark-default.mjs'), + () => import('shiki/themes/github-light-default.mjs'), + ], + langs: [ + () => import('shiki/langs/javascript.mjs'), + () => import('shiki/langs/vue.mjs'), + ], + }) + + onCancel(() => shiki?.dispose()) + return shiki }) + +export function highlight(code: string, lang: string) { + if (!highlighter.value) + return code + + return highlighter.value.codeToHtml(code, { + lang, + defaultColor: false, + themes: { + dark: 'github-dark-default', + light: 'github-light-default', + }, + }) +} diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css index f139ec55f..30a1819c0 100644 --- a/apps/www/.vitepress/theme/style.css +++ b/apps/www/.vitepress/theme/style.css @@ -127,6 +127,15 @@ scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3); } + html.dark .shiki, + html.dark .shiki span { + color: var(--shiki-dark); + } + html:not(.dark) .shiki, + html:not(.dark) .shiki span { + color: var(--shiki-light); + } + .antialised { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -154,7 +163,7 @@ } div[class^="language-"] { - @apply mb-4 mt-6 max-h-[650px] overflow-x-auto md:rounded-lg border !bg-secondary-foreground dark:!bg-secondary + @apply mb-4 mt-6 max-h-[650px] overflow-x-auto md:rounded-lg border } pre { @apply py-4; diff --git a/apps/www/package.json b/apps/www/package.json index 2e15243e8..6bf4a8430 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -68,7 +68,7 @@ "markdown-it": "^14.1.0", "pathe": "^1.1.2", "rimraf": "^6.0.1", - "shiki": "^1.17.7", + "shiki": "^1.22.1", "tailwind-merge": "^2.5.2", "tailwindcss": "^3.4.12", "tsx": "^4.19.1", diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md index 4fed63452..ded55de93 100644 --- a/apps/www/src/content/docs/components/switch.md +++ b/apps/www/src/content/docs/components/switch.md @@ -53,10 +53,10 @@ import { Switch } from '@/components/ui/switch' ```vue ``` diff --git a/apps/www/src/lib/registry/default/ui/switch/Switch.vue b/apps/www/src/lib/registry/default/ui/switch/Switch.vue index acab25ed6..728963cae 100644 --- a/apps/www/src/lib/registry/default/ui/switch/Switch.vue +++ b/apps/www/src/lib/registry/default/ui/switch/Switch.vue @@ -8,14 +8,20 @@ import { useForwardPropsEmits, } from 'radix-vue' import { computed, type HTMLAttributes } from 'vue' + const props = defineProps() + const emits = defineEmits() + const delegatedProps = computed(() => { const { class: _, ...delegated } = props + return delegated }) + const forwarded = useForwardPropsEmits(delegatedProps, emits) +