mirror of https://github.com/vuejs/vitepress
parent
9c8f54c9f4
commit
38bbdaddb7
@ -0,0 +1,98 @@
|
|||||||
|
import { chromium, type Browser, type Page } from 'playwright-chromium'
|
||||||
|
import { fileURLToPath } from 'url'
|
||||||
|
import path from 'path'
|
||||||
|
import fs from 'fs-extra'
|
||||||
|
import {
|
||||||
|
scaffold,
|
||||||
|
build,
|
||||||
|
createServer,
|
||||||
|
serve,
|
||||||
|
ScaffoldThemeType,
|
||||||
|
type ScaffoldOptions
|
||||||
|
} from 'vitepress'
|
||||||
|
import type { ViteDevServer } from 'vite'
|
||||||
|
import type { Server } from 'net'
|
||||||
|
import getPort from 'get-port'
|
||||||
|
|
||||||
|
let browser: Browser
|
||||||
|
let page: Page
|
||||||
|
|
||||||
|
beforeAll(async () => {
|
||||||
|
browser = await chromium.connect(process.env['WS_ENDPOINT']!)
|
||||||
|
page = await browser.newPage()
|
||||||
|
})
|
||||||
|
|
||||||
|
afterAll(async () => {
|
||||||
|
await page.close()
|
||||||
|
await browser.close()
|
||||||
|
})
|
||||||
|
|
||||||
|
const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'temp')
|
||||||
|
|
||||||
|
async function testVariation(options: ScaffoldOptions) {
|
||||||
|
fs.removeSync(root)
|
||||||
|
scaffold({
|
||||||
|
...options,
|
||||||
|
root
|
||||||
|
})
|
||||||
|
|
||||||
|
let server: ViteDevServer | Server
|
||||||
|
const port = await getPort()
|
||||||
|
|
||||||
|
async function goto(path: string) {
|
||||||
|
await page.goto(`http://localhost:${port}${path}`)
|
||||||
|
await page.waitForSelector('#app div')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (process.env['VITE_TEST_BUILD']) {
|
||||||
|
await build(root)
|
||||||
|
server = (await serve({ root, port })).server
|
||||||
|
} else {
|
||||||
|
server = await createServer(root, { port })
|
||||||
|
await server!.listen()
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await goto('/')
|
||||||
|
expect(await page.textContent('h1')).toMatch('My Awesome Project')
|
||||||
|
|
||||||
|
await page.click('a[href="/markdown-examples.html"]')
|
||||||
|
await page.waitForSelector('pre code')
|
||||||
|
expect(await page.textContent('h1')).toMatch('Markdown Extension Examples')
|
||||||
|
|
||||||
|
await goto('/')
|
||||||
|
expect(await page.textContent('h1')).toMatch('My Awesome Project')
|
||||||
|
|
||||||
|
await page.click('a[href="/api-examples.html"]')
|
||||||
|
await page.waitForSelector('pre code')
|
||||||
|
expect(await page.textContent('h1')).toMatch('Runtime API Examples')
|
||||||
|
} finally {
|
||||||
|
fs.removeSync(root)
|
||||||
|
if ('ws' in server) {
|
||||||
|
await server.close()
|
||||||
|
} else {
|
||||||
|
await new Promise<void>((resolve, reject) => {
|
||||||
|
server.close((error) => (error ? reject(error) : resolve()))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const themes = [
|
||||||
|
ScaffoldThemeType.Default,
|
||||||
|
ScaffoldThemeType.DefaultCustom,
|
||||||
|
ScaffoldThemeType.Custom
|
||||||
|
]
|
||||||
|
const usingTs = [false, true]
|
||||||
|
|
||||||
|
for (const theme of themes) {
|
||||||
|
for (const useTs of usingTs) {
|
||||||
|
test(`${theme}${useTs ? ` + TypeScript` : ``}`, () =>
|
||||||
|
testVariation({
|
||||||
|
root: '.',
|
||||||
|
theme,
|
||||||
|
useTs,
|
||||||
|
injectNpmScripts: false
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"devDependencies": {
|
||||||
|
"vitepress": "workspace:*"
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,23 @@
|
|||||||
|
import { dirname, resolve } from 'path'
|
||||||
|
import { fileURLToPath } from 'url'
|
||||||
|
import { defineConfig } from 'vitest/config'
|
||||||
|
|
||||||
|
const dir = dirname(fileURLToPath(import.meta.url))
|
||||||
|
|
||||||
|
const timeout = 60_000
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
node: resolve(dir, '../../src/node')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
watchExclude: ['**/node_modules/**', '**/temp/**'],
|
||||||
|
globalSetup: ['__tests__/init/vitestGlobalSetup.ts'],
|
||||||
|
testTimeout: timeout,
|
||||||
|
hookTimeout: timeout,
|
||||||
|
teardownTimeout: timeout,
|
||||||
|
globals: true
|
||||||
|
}
|
||||||
|
})
|
@ -0,0 +1,17 @@
|
|||||||
|
import { chromium, type BrowserServer } from 'playwright-chromium'
|
||||||
|
|
||||||
|
let browserServer: BrowserServer
|
||||||
|
|
||||||
|
export async function setup() {
|
||||||
|
browserServer = await chromium.launchServer({
|
||||||
|
headless: !process.env.DEBUG,
|
||||||
|
args: process.env.CI
|
||||||
|
? ['--no-sandbox', '--disable-setuid-sandbox']
|
||||||
|
: undefined
|
||||||
|
})
|
||||||
|
process.env['WS_ENDPOINT'] = browserServer.wsEndpoint()
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function teardown() {
|
||||||
|
await browserServer.close()
|
||||||
|
}
|
@ -0,0 +1,182 @@
|
|||||||
|
import {
|
||||||
|
intro,
|
||||||
|
outro,
|
||||||
|
group,
|
||||||
|
text,
|
||||||
|
select,
|
||||||
|
cancel,
|
||||||
|
confirm
|
||||||
|
} from '@clack/prompts'
|
||||||
|
import fs from 'fs-extra'
|
||||||
|
import path from 'path'
|
||||||
|
import { black, cyan, bgCyan, bold } from 'picocolors'
|
||||||
|
import { fileURLToPath } from 'url'
|
||||||
|
// @ts-ignore
|
||||||
|
import template from 'lodash.template'
|
||||||
|
|
||||||
|
export enum ScaffoldThemeType {
|
||||||
|
Default = 'default theme',
|
||||||
|
DefaultCustom = 'default theme + customization',
|
||||||
|
Custom = 'custom theme'
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ScaffoldOptions {
|
||||||
|
root: string
|
||||||
|
title?: string
|
||||||
|
description?: string
|
||||||
|
theme: ScaffoldThemeType
|
||||||
|
useTs: boolean
|
||||||
|
injectNpmScripts: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function init() {
|
||||||
|
intro(bgCyan(bold(black(` Welcome to VitePress! `))))
|
||||||
|
|
||||||
|
const options: ScaffoldOptions = await group(
|
||||||
|
{
|
||||||
|
root: () =>
|
||||||
|
text({
|
||||||
|
message: `Where should VitePress initialize the config?`,
|
||||||
|
initialValue: './',
|
||||||
|
validate(value) {
|
||||||
|
// TODO make sure directory is inside
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
title: () =>
|
||||||
|
text({
|
||||||
|
message: `Site title:`,
|
||||||
|
placeholder: 'My Awesome Project'
|
||||||
|
}),
|
||||||
|
|
||||||
|
description: () =>
|
||||||
|
text({
|
||||||
|
message: `Site description:`,
|
||||||
|
placeholder: 'A VitePress Site'
|
||||||
|
}),
|
||||||
|
|
||||||
|
theme: () =>
|
||||||
|
select({
|
||||||
|
message: 'Theme:',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
// @ts-ignore
|
||||||
|
value: ScaffoldThemeType.Default,
|
||||||
|
label: `Default Theme`,
|
||||||
|
hint: `Out of the box, good-looking docs`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// @ts-ignore
|
||||||
|
value: ScaffoldThemeType.DefaultCustom,
|
||||||
|
label: `Default Theme + Customization`,
|
||||||
|
hint: `Add custom CSS and layout slots`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// @ts-ignore
|
||||||
|
value: ScaffoldThemeType.Custom,
|
||||||
|
label: `Custom Theme`,
|
||||||
|
hint: `Build your own or use external`
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
|
||||||
|
useTs: () =>
|
||||||
|
confirm({ message: 'Use TypeScript for config and theme files?' }),
|
||||||
|
|
||||||
|
injectNpmScripts: () =>
|
||||||
|
confirm({
|
||||||
|
message: `Add VitePress npm scripts to package.json?`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onCancel: () => {
|
||||||
|
cancel('Cancelled.')
|
||||||
|
process.exit(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
outro(scaffold(options))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function scaffold({
|
||||||
|
root = './',
|
||||||
|
title = 'My Awesome Project',
|
||||||
|
description = 'A VitePress Site',
|
||||||
|
theme,
|
||||||
|
useTs,
|
||||||
|
injectNpmScripts
|
||||||
|
}: ScaffoldOptions) {
|
||||||
|
const resolvedRoot = path.resolve(root)
|
||||||
|
const templateDir = path.resolve(
|
||||||
|
path.dirname(fileURLToPath(import.meta.url)),
|
||||||
|
'../../template'
|
||||||
|
)
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
title: JSON.stringify(title),
|
||||||
|
description: JSON.stringify(description),
|
||||||
|
useTs,
|
||||||
|
defaultTheme:
|
||||||
|
theme === ScaffoldThemeType.Default ||
|
||||||
|
theme === ScaffoldThemeType.DefaultCustom
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderFile = (file: string) => {
|
||||||
|
const filePath = path.resolve(templateDir, file)
|
||||||
|
let targetPath = path.resolve(resolvedRoot, file)
|
||||||
|
if (useTs) {
|
||||||
|
targetPath = targetPath.replace(/\.js$/, '.ts')
|
||||||
|
}
|
||||||
|
const src = fs.readFileSync(filePath, 'utf-8')
|
||||||
|
const compiled = template(src)(data)
|
||||||
|
fs.outputFileSync(targetPath, compiled)
|
||||||
|
}
|
||||||
|
|
||||||
|
const filesToScaffold = [
|
||||||
|
'index.md',
|
||||||
|
'api-examples.md',
|
||||||
|
'markdown-examples.md',
|
||||||
|
`.vitepress/config.js`
|
||||||
|
]
|
||||||
|
|
||||||
|
if (theme === ScaffoldThemeType.DefaultCustom) {
|
||||||
|
filesToScaffold.push(
|
||||||
|
`.vitepress/theme/index.js`,
|
||||||
|
`.vitepress/theme/style.css`
|
||||||
|
)
|
||||||
|
} else if (theme === ScaffoldThemeType.Custom) {
|
||||||
|
filesToScaffold.push(
|
||||||
|
`.vitepress/theme/index.js`,
|
||||||
|
`.vitepress/theme/style.css`,
|
||||||
|
`.vitepress/theme/Layout.vue`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const file of filesToScaffold) {
|
||||||
|
renderFile(file)
|
||||||
|
}
|
||||||
|
|
||||||
|
const dir = root === './' ? `` : ` ${root.replace(/^\.\//, '')}`
|
||||||
|
if (injectNpmScripts) {
|
||||||
|
const scripts = {
|
||||||
|
'docs:dev': `vitepress dev${dir}`,
|
||||||
|
'docs:build': `vitepress build${dir}`,
|
||||||
|
'docs:preview': `vitepress preview${dir}`
|
||||||
|
}
|
||||||
|
const pkgPath = path.resolve('package.json')
|
||||||
|
let pkg
|
||||||
|
if (!fs.existsSync(pkgPath)) {
|
||||||
|
pkg = { scripts }
|
||||||
|
} else {
|
||||||
|
pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
|
||||||
|
Object.assign(pkg.scripts || (pkg.scripts = {}), scripts)
|
||||||
|
}
|
||||||
|
fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2))
|
||||||
|
return `Done! Now run ${cyan(`npm run docs:dev`)} and start writing.`
|
||||||
|
} else {
|
||||||
|
return `You're all set! Now run ${cyan(
|
||||||
|
`npx vitepress dev${dir}`
|
||||||
|
)} and start writing.`
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,34 @@
|
|||||||
|
<% if (useTs) { %>import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
|
// https://vitepress.vuejs.org/config/app-config
|
||||||
|
export default defineConfig(<% } else { %>/**
|
||||||
|
* @type {import('vitepress').UserConfig}
|
||||||
|
* https://vitepress.vuejs.org/config/app-config
|
||||||
|
*/
|
||||||
|
const config = <% } %>{
|
||||||
|
title: <%= title %>,
|
||||||
|
description: <%= description %><% if (defaultTheme) { %>,
|
||||||
|
themeConfig: {
|
||||||
|
// https://vitepress.vuejs.org/config/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' }
|
||||||
|
]
|
||||||
|
}<% } %>
|
||||||
|
}<% if (useTs) { %>)<% } else { %>
|
||||||
|
|
||||||
|
export default config<% } %>
|
@ -0,0 +1,28 @@
|
|||||||
|
import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
|
// https://vitepress.vuejs.org/config/app-config
|
||||||
|
export default defineConfig({
|
||||||
|
title: <%= title %>,
|
||||||
|
description: <%= description %><% if (defaultTheme) { %>,
|
||||||
|
themeConfig: {
|
||||||
|
// https://vitepress.vuejs.org/config/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' }
|
||||||
|
]
|
||||||
|
}<% } %>
|
||||||
|
})
|
@ -0,0 +1,21 @@
|
|||||||
|
<script setup<%= useTs ? ' lang="ts"' : '' %>>
|
||||||
|
import { useData } from 'vitepress'
|
||||||
|
|
||||||
|
// https://vitepress.vuejs.org/api/
|
||||||
|
const { site, frontmatter } = useData()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="frontmatter.home">
|
||||||
|
<h1>{{ site.title }}</h1>
|
||||||
|
<p>{{ site.description }}</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/markdown-examples.html">Markdown Examples</a></li>
|
||||||
|
<li><a href="/api-examples.html">API Examples</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a href="/">Home</a>
|
||||||
|
<Content />
|
||||||
|
</div>
|
||||||
|
</template>
|
@ -0,0 +1,24 @@
|
|||||||
|
<% if (!defaultTheme) { %>import Layout from './Layout.vue'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
Layout,
|
||||||
|
enhanceApp({ app, router, siteData }) {
|
||||||
|
// TODO link to app level customizatin
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<% } else { %>import { h } from 'vue'
|
||||||
|
import Theme from 'vitepress/theme'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
...Theme,
|
||||||
|
Layout: () => {
|
||||||
|
return h(Theme.Layout, null, {
|
||||||
|
// TODO link to layout slots
|
||||||
|
})
|
||||||
|
},
|
||||||
|
enhanceApp({ app, router, siteData }) {
|
||||||
|
// TODO link to app level customizatin
|
||||||
|
}
|
||||||
|
}<% } %>
|
@ -0,0 +1,121 @@
|
|||||||
|
<% if (defaultTheme) { %>/**
|
||||||
|
* Colors
|
||||||
|
* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--vp-c-brand: #646cff;
|
||||||
|
--vp-c-brand-light: #747bff;
|
||||||
|
--vp-c-brand-lighter: #9499ff;
|
||||||
|
--vp-c-brand-lightest: #bcc0ff;
|
||||||
|
--vp-c-brand-dark: #535bf2;
|
||||||
|
--vp-c-brand-darker: #454ce1;
|
||||||
|
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--vp-home-hero-name-color: transparent;
|
||||||
|
--vp-home-hero-name-background: -webkit-linear-gradient(
|
||||||
|
120deg,
|
||||||
|
#bd34fe 30%,
|
||||||
|
#41d1ff
|
||||||
|
);
|
||||||
|
|
||||||
|
--vp-home-hero-image-background-image: linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
#bd34fe 50%,
|
||||||
|
#47caff 50%
|
||||||
|
);
|
||||||
|
--vp-home-hero-image-filter: blur(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
:root {
|
||||||
|
--vp-home-hero-image-filter: blur(56px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 960px) {
|
||||||
|
:root {
|
||||||
|
--vp-home-hero-image-filter: blur(72px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Component: Custom Block
|
||||||
|
* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--vp-custom-block-tip-border: var(--vp-c-brand);
|
||||||
|
--vp-custom-block-tip-text: var(--vp-c-brand-darker);
|
||||||
|
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--vp-custom-block-tip-border: var(--vp-c-brand);
|
||||||
|
--vp-custom-block-tip-text: var(--vp-c-brand-lightest);
|
||||||
|
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Component: Algolia
|
||||||
|
* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.DocSearch {
|
||||||
|
--docsearch-primary-color: var(--vp-c-brand) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* VitePress: Custom fix
|
||||||
|
* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
Use lighter colors for links in dark mode for a11y.
|
||||||
|
Also specify some classes twice to have higher specificity
|
||||||
|
over scoped class data attribute.
|
||||||
|
*/
|
||||||
|
.dark .vp-doc a,
|
||||||
|
.dark .vp-doc a > code,
|
||||||
|
.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
|
||||||
|
.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
|
||||||
|
.dark .link.link:hover,
|
||||||
|
.dark .link.link.active,
|
||||||
|
.dark .edit-link-button.edit-link-button,
|
||||||
|
.dark .pager-link .title {
|
||||||
|
color: var(--vp-c-brand-lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .vp-doc a:hover,
|
||||||
|
.dark .vp-doc a > code:hover {
|
||||||
|
color: var(--vp-c-brand-lightest);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transition by color instead of opacity */
|
||||||
|
.dark .vp-doc .custom-block a {
|
||||||
|
transition: color 0.25s;
|
||||||
|
}
|
||||||
|
<% } else { %>
|
||||||
|
html {
|
||||||
|
font-family: Arial, Helvetica;
|
||||||
|
}
|
||||||
|
<% } %>
|
@ -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
|
||||||
|
<script setup>
|
||||||
|
import { useData } from 'vitepress'
|
||||||
|
|
||||||
|
const { site, theme, page, frontmatter } = useData()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
## Results
|
||||||
|
|
||||||
|
### Site Data
|
||||||
|
<pre>{{ site }}</pre>
|
||||||
|
|
||||||
|
### Theme Data
|
||||||
|
<pre>{{ theme }}</pre>
|
||||||
|
|
||||||
|
### Page Data
|
||||||
|
<pre>{{ page }}</pre>
|
||||||
|
|
||||||
|
### Page Frontmatter
|
||||||
|
<pre>{{ frontmatter }}</pre>
|
||||||
|
```
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useData } from 'vitepress'
|
||||||
|
|
||||||
|
const { site, theme, page, frontmatter } = useData()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
## Results
|
||||||
|
|
||||||
|
### Site Data
|
||||||
|
<pre>{{ site }}</pre>
|
||||||
|
|
||||||
|
### Theme Data
|
||||||
|
<pre>{{ theme }}</pre>
|
||||||
|
|
||||||
|
### Page Data
|
||||||
|
<pre>{{ page }}</pre>
|
||||||
|
|
||||||
|
### Page Frontmatter
|
||||||
|
<pre>{{ frontmatter }}</pre>
|
||||||
|
|
||||||
|
## More
|
||||||
|
|
||||||
|
Check out the documentation for the [full list of runtime APIs](https://vitepress.vuejs.org/api/).
|
@ -0,0 +1,27 @@
|
|||||||
|
<% if (defaultTheme) { %>---
|
||||||
|
layout: home
|
||||||
|
|
||||||
|
hero:
|
||||||
|
name: <%= title %>
|
||||||
|
text: <%= description %>
|
||||||
|
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
|
||||||
|
---
|
||||||
|
<% } else { %>---
|
||||||
|
home: true
|
||||||
|
---
|
||||||
|
<% } %>
|
@ -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.vuejs.org/guide/markdown).
|
Loading…
Reference in new issue