From 5415f55df964cca40310379567b5c29b41660a6d Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Fri, 29 Sep 2023 18:45:46 +0900 Subject: [PATCH] add example for vitepress ssr --- examples/ssr/vitepress/.vitepress/config.ts | 36 ++++++++ .../ssr/vitepress/.vitepress/theme/index.ts | 19 +++++ examples/ssr/vitepress/README.md | 15 ++++ examples/ssr/vitepress/api-examples.md | 55 ++++++++++++ examples/ssr/vitepress/index.md | 24 ++++++ examples/ssr/vitepress/markdown-examples.md | 85 +++++++++++++++++++ examples/ssr/vitepress/package.json | 18 ++++ examples/ssr/vitepress/tsconfig.json | 19 +++++ pnpm-lock.yaml | 20 +++-- pnpm-workspace.yaml | 1 + 10 files changed, 286 insertions(+), 6 deletions(-) create mode 100644 examples/ssr/vitepress/.vitepress/config.ts create mode 100644 examples/ssr/vitepress/.vitepress/theme/index.ts create mode 100644 examples/ssr/vitepress/README.md create mode 100644 examples/ssr/vitepress/api-examples.md create mode 100644 examples/ssr/vitepress/index.md create mode 100644 examples/ssr/vitepress/markdown-examples.md create mode 100644 examples/ssr/vitepress/package.json create mode 100644 examples/ssr/vitepress/tsconfig.json diff --git a/examples/ssr/vitepress/.vitepress/config.ts b/examples/ssr/vitepress/.vitepress/config.ts new file mode 100644 index 000000000..7c9fdacb0 --- /dev/null +++ b/examples/ssr/vitepress/.vitepress/config.ts @@ -0,0 +1,36 @@ +import { defineConfig } from 'vitepress' +import vueI18n from '@intlify/unplugin-vue-i18n/vite' + +// https://vitepress.dev/reference/site-config +export default defineConfig({ + vite: { + plugins: [ + vueI18n({ + ssr: true + }) + ] + }, + title: 'My Awesome Project', + description: 'A VitePress Site', + themeConfig: { + // https://vitepress.dev/reference/default-theme-config + nav: [ + { text: 'Home', link: '/' }, + { text: 'Examples', link: '/markdown-examples' } + ], + + sidebar: [ + { + text: 'Examples', + items: [ + { text: 'Markdown Examples', link: '/markdown-examples' }, + { text: 'Runtime API Examples', link: '/api-examples' } + ] + } + ], + + socialLinks: [ + { icon: 'github', link: 'https://github.com/vuejs/vitepress' } + ] + } +}) diff --git a/examples/ssr/vitepress/.vitepress/theme/index.ts b/examples/ssr/vitepress/.vitepress/theme/index.ts new file mode 100644 index 000000000..5a65bd145 --- /dev/null +++ b/examples/ssr/vitepress/.vitepress/theme/index.ts @@ -0,0 +1,19 @@ +import DefaultTheme from 'vitepress/theme' +import { createI18n } from 'vue-i18n' + +export default { + extends: DefaultTheme, + enhanceApp({ app, router, siteData }) { + const i18n = createI18n({ + legacy: false, + locale: 'en', + messages: { + en: { + hello: 'hello world!' + } + } + }) + app.use(i18n) + // ... + } +} diff --git a/examples/ssr/vitepress/README.md b/examples/ssr/vitepress/README.md new file mode 100644 index 000000000..46e210af7 --- /dev/null +++ b/examples/ssr/vitepress/README.md @@ -0,0 +1,15 @@ +# 1569 + +To install dependencies: + +```bash +bun install +``` + +To run: + +```bash +bun run index.ts +``` + +This project was created using `bun init` in bun v1.0.3. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime. diff --git a/examples/ssr/vitepress/api-examples.md b/examples/ssr/vitepress/api-examples.md new file mode 100644 index 000000000..691df9cc7 --- /dev/null +++ b/examples/ssr/vitepress/api-examples.md @@ -0,0 +1,55 @@ +--- +outline: deep +--- + +# Runtime API Examples + +This page demonstrates usage of some of the runtime APIs provided by VitePress. + +The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files: + +```md + + +## Results + +### Theme Data + +
{{ theme }}
+ +### Page Data + +
{{ page }}
+ +### Page Frontmatter + +
{{ frontmatter }}
+``` + + + +## Results + +### Theme Data + +
{{ theme }}
+ +### Page Data + +
{{ page }}
+ +### Page Frontmatter + +
{{ frontmatter }}
+ +## More + +Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata). diff --git a/examples/ssr/vitepress/index.md b/examples/ssr/vitepress/index.md new file mode 100644 index 000000000..dc471ced4 --- /dev/null +++ b/examples/ssr/vitepress/index.md @@ -0,0 +1,24 @@ +--- +# https://vitepress.dev/reference/default-theme-home-page +layout: home + +hero: + name: 'My Awesome Project' + text: 'A VitePress Site' + tagline: My great project tagline + actions: + - theme: brand + text: Markdown Examples + link: /markdown-examples + - theme: alt + text: API Examples + link: /api-examples + +features: + - title: Feature A + details: Lorem ipsum dolor sit amet, consectetur adipiscing elit + - title: Feature B + details: Lorem ipsum dolor sit amet, consectetur adipiscing elit + - title: Feature C + details: Lorem ipsum dolor sit amet, consectetur adipiscing elit +--- diff --git a/examples/ssr/vitepress/markdown-examples.md b/examples/ssr/vitepress/markdown-examples.md new file mode 100644 index 000000000..8e55eb8ad --- /dev/null +++ b/examples/ssr/vitepress/markdown-examples.md @@ -0,0 +1,85 @@ +# Markdown Extension Examples + +This page demonstrates some of the built-in markdown extensions provided by VitePress. + +## Syntax Highlighting + +VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting: + +**Input** + +```` +```js{4} +export default { + data () { + return { + msg: 'Highlighted!' + } + } +} +``` +```` + +**Output** + +```js{4} +export default { + data () { + return { + msg: 'Highlighted!' + } + } +} +``` + +## Custom Containers + +**Input** + +```md +::: info +This is an info box. +::: + +::: tip +This is a tip. +::: + +::: warning +This is a warning. +::: + +::: danger +This is a dangerous warning. +::: + +::: details +This is a details block. +::: +``` + +**Output** + +::: info +This is an info box. +::: + +::: tip +This is a tip. +::: + +::: warning +This is a warning. +::: + +::: danger +This is a dangerous warning. +::: + +::: details +This is a details block. +::: + +## More + +Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown). diff --git a/examples/ssr/vitepress/package.json b/examples/ssr/vitepress/package.json new file mode 100644 index 000000000..4e1469ad0 --- /dev/null +++ b/examples/ssr/vitepress/package.json @@ -0,0 +1,18 @@ +{ + "name": "vitepress-ssr", + "module": "index.ts", + "type": "module", + "dependencies": { + "vitepress": "^1.0.0-rc.20", + "vue-i18n": "^9.5.0" + }, + "devDependencies": { + "@intlify/unplugin-vue-i18n": "^1.4.0", + "typescript": "^5.0.0" + }, + "scripts": { + "docs:dev": "vitepress dev", + "docs:build": "vitepress build", + "docs:preview": "vitepress preview" + } +} diff --git a/examples/ssr/vitepress/tsconfig.json b/examples/ssr/vitepress/tsconfig.json new file mode 100644 index 000000000..586fa57d4 --- /dev/null +++ b/examples/ssr/vitepress/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "lib": ["ESNext"], + "module": "esnext", + "target": "esnext", + "moduleResolution": "bundler", + "moduleDetection": "force", + "allowImportingTsExtensions": true, + "noEmit": true, + "composite": true, + "strict": true, + "downlevelIteration": true, + "skipLibCheck": true, + "jsx": "react-jsx", + "allowSyntheticDefaultImports": true, + "forceConsistentCasingInFileNames": true, + "allowJs": true, + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4e4147c7a..61e09d4fb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1683,8 +1683,8 @@ packages: engines: {node: '>= 12'} dependencies: '@intlify/core': 9.2.2 - '@intlify/message-compiler': 9.2.2 - '@intlify/shared': 9.4.1 + '@intlify/message-compiler': 9.5.0 + '@intlify/shared': 9.5.0 jsonc-eslint-parser: 1.4.1 source-map: 0.6.1 yaml-eslint-parser: 0.3.2 @@ -1788,6 +1788,14 @@ packages: source-map-js: 1.0.2 dev: true + /@intlify/message-compiler@9.5.0: + resolution: {integrity: sha512-CAhVNfEZcOVFg0/5MNyt+OFjvs4J/ARjCj2b+54/FvFP0EDJI5lIqMTSDBE7k0atMROSP0SvWCkwu/AZ5xkK1g==} + engines: {node: '>= 16'} + dependencies: + '@intlify/shared': 9.5.0 + source-map-js: 1.0.2 + dev: true + /@intlify/shared@9.2.2: resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==} engines: {node: '>= 14'} @@ -1808,8 +1816,8 @@ packages: engines: {node: '>= 16'} dev: true - /@intlify/shared@9.4.1: - resolution: {integrity: sha512-A51elBmZWf1FS80inf/32diO9DeXoqg9GR9aUDHFcfHoNDuT46Q+fpPOdj8jiJnSHSBh8E1E+6qWRhAZXdK3Ng==} + /@intlify/shared@9.5.0: + resolution: {integrity: sha512-tAxV14LMXZDZbu32XzLMTsowNlgJNmLwWHYzvMUl6L8gvQeoYiZONjY7AUsqZW8TOZDX9lfvF6adPkk9FSRdDA==} engines: {node: '>= 16'} dev: true @@ -1861,7 +1869,7 @@ packages: vue: 3.3.4 dependencies: '@intlify/bundle-utils': 1.0.0 - '@intlify/shared': 9.4.1 + '@intlify/shared': 9.5.0 js-yaml: 4.1.0 json5: 2.2.3 loader-utils: 2.0.4 @@ -3724,7 +3732,7 @@ packages: engines: {node: '>= 12'} hasBin: true dependencies: - '@intlify/shared': 9.4.1 + '@intlify/shared': 9.5.0 '@microsoft/api-extractor-model': 7.27.6(@types/node@18.17.12) '@microsoft/tsdoc': 0.13.2 '@microsoft/tsdoc-config': 0.15.2 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index d2f8a1bdc..d2941ba50 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -2,4 +2,5 @@ packages: - 'packages/*' - 'examples/**/*' - '!examples/ssr/vite' + - '!examples/ssr/vitepress' - '!examples/frameworks/nuxt3'