diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts index d729444e..7399caab 100644 --- a/apps/www/.vitepress/config.mts +++ b/apps/www/.vitepress/config.mts @@ -3,9 +3,9 @@ import { defineConfig } from 'vitepress' import Icons from 'unplugin-icons/vite' import tailwind from 'tailwindcss' import autoprefixer from 'autoprefixer' +import { transformerMetaWordHighlight } from '@shikijs/transformers' import { cssVariables } from './theme/config/shiki' -// import { transformerMetaWordHighlight, transformerNotationWordHighlight } from '@shikijs/transformers' import { siteConfig } from './theme/config/site' import ComponentPreviewPlugin from './theme/plugins/previewer' import CodeWrapperPlugin from './theme/plugins/codewrapper' @@ -56,8 +56,7 @@ export default defineConfig({ markdown: { theme: cssVariables, codeTransformers: [ - // transformerMetaWordHighlight(), - // transformerNotationWordHighlight(), + transformerMetaWordHighlight(), ], config(md) { md.use(ComponentPreviewPlugin) @@ -77,7 +76,7 @@ export default defineConfig({ }, }, plugins: [ - Icons({ compiler: 'vue3', autoInstall: true }), + Icons({ compiler: 'vue3', autoInstall: true }) as any, ], resolve: { alias: { diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css index 9c4ed1c4..48376839 100644 --- a/apps/www/.vitepress/theme/style.css +++ b/apps/www/.vitepress/theme/style.css @@ -164,15 +164,23 @@ pre { } pre code { - @apply relative font-mono text-sm ; + @apply relative font-mono text-sm ; +} + +.line-numbers-wrapper, code { + --vp-code-line-height: 1.7; +} + +.line-numbers-wrapper { + @apply font-mono; } pre code .line { - @apply px-4 min-h-6 !py-0.5 w-full inline-block; + @apply px-4 min-h-4 !py-0.5 w-full inline-block leading-[--vp-code-line-height]; } .line-number { - @apply min-h-[1.375rem] !text-sm !inline-block text-muted-foreground; + @apply !text-[.75rem] !inline-block text-muted-foreground leading-[--vp-code-line-height]; } ::view-transition-old(root), diff --git a/apps/www/package.json b/apps/www/package.json index fd442c20..633ce142 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -17,66 +17,66 @@ }, "dependencies": { "@formkit/auto-animate": "^0.8.2", - "@internationalized/date": "^3.5.2", + "@internationalized/date": "^3.5.4", "@radix-icons/vue": "^1.0.0", - "@stackblitz/sdk": "^1.9.0", - "@tanstack/vue-table": "^8.16.0", - "@unovis/ts": "^1.4.0", - "@unovis/vue": "^1.4.0", - "@vee-validate/zod": "^4.12.6", + "@stackblitz/sdk": "^1.10.0", + "@tanstack/vue-table": "^8.17.3", + "@unovis/ts": "^1.4.1", + "@unovis/vue": "^1.4.1", + "@vee-validate/zod": "^4.12.8", "@vueuse/core": "^10.9.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "codesandbox": "^2.2.3", "date-fns": "^3.6.0", - "embla-carousel": "^8.0.2", - "embla-carousel-autoplay": "^8.0.2", - "embla-carousel-vue": "^8.0.2", - "lucide-vue-next": "^0.359.0", + "embla-carousel": "^8.1.3", + "embla-carousel-autoplay": "^8.1.3", + "embla-carousel-vue": "^8.1.3", + "lucide-vue-next": "^0.378.0", "magic-string": "^0.30.10", - "radix-vue": "^1.7.3", + "radix-vue": "^1.8.1", "tailwindcss-animate": "^1.0.7", "v-calendar": "^3.1.2", "vaul-vue": "^0.1.2", "vee-validate": "4.12.6", - "vue": "^3.4.24", + "vue": "^3.4.27", "vue-sonner": "^1.1.2", "vue-wrap-balancer": "^1.1.3", - "zod": "^3.23.3" + "zod": "^3.23.8" }, "devDependencies": { - "@babel/traverse": "^7.24.1", + "@babel/traverse": "^7.24.5", "@iconify-json/gravity-ui": "^1.1.2", - "@iconify-json/lucide": "^1.1.180", - "@iconify-json/ph": "^1.1.12", + "@iconify-json/lucide": "^1.1.187", + "@iconify-json/ph": "^1.1.13", "@iconify-json/radix-icons": "^1.1.14", - "@iconify-json/ri": "^1.1.18", - "@iconify-json/simple-icons": "^1.1.94", - "@iconify-json/tabler": "^1.1.106", + "@iconify-json/ri": "^1.1.20", + "@iconify-json/simple-icons": "^1.1.102", + "@iconify-json/tabler": "^1.1.112", "@iconify/vue": "^4.1.2", "@oxc-parser/wasm": "^0.1.0", - "@shikijs/transformers": "^1.3.0", + "@shikijs/transformers": "^1.6.0", "@types/lodash-es": "^4.17.12", - "@types/node": "^20.12.7", + "@types/node": "^20.12.12", "@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue-jsx": "^3.1.0", - "@vue/compiler-core": "^3.4.24", - "@vue/compiler-dom": "^3.4.24", + "@vue/compiler-core": "^3.4.27", + "@vue/compiler-dom": "^3.4.27", "@vue/tsconfig": "^0.5.1", "autoprefixer": "^10.4.19", "fast-glob": "^3.3.2", "lodash-es": "^4.17.21", "markdown-it": "^14.1.0", "pathe": "^1.1.2", - "rimraf": "^5.0.5", - "shiki": "^1.3.0", + "rimraf": "^5.0.7", + "shiki": "^1.6.0", "tailwind-merge": "^2.3.0", "tailwindcss": "^3.4.3", - "tsx": "^4.7.2", + "tsx": "^4.10.5", "typescript": "^5.4.5", - "unplugin-icons": "^0.18.5", - "vitepress": "^1.1.3", - "vue-component-meta": "^2.0.13", - "vue-tsc": "^2.0.14" + "unplugin-icons": "^0.19.0", + "vitepress": "^1.2.2", + "vue-component-meta": "^2.0.19", + "vue-tsc": "^2.0.19" } } diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md index a001d652..37b97ce3 100644 --- a/apps/www/src/content/docs/components/data-table.md +++ b/apps/www/src/content/docs/components/data-table.md @@ -114,7 +114,7 @@ Let's start by building a basic table. First, we'll define our columns in the `columns.ts` file. -```ts:line-numbers {1,12-27} +```ts:line-numbers import { h } from 'vue' export const columns: ColumnDef[] = [ @@ -146,66 +146,70 @@ formatted, sorted and filtered. Next, we'll create a `` component to render our table. -```vue:line-numbers +```vue ``` @@ -221,12 +225,12 @@ const table = useVueTable({ Finally, we'll render our table in our index component. -```vue:line-numbers {28} +```vue