tangjinzhou
3 years ago
parent
64f7cbc423
commit
23697ff192
@ -0,0 +1,8 @@
|
|||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue';
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||||
|
const component: DefineComponent<any, any, any> & { readonly pageDate?: PageData };
|
||||||
|
export default component;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.svg';
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||||
|
<meta http-equiv="Pragma" content="no-cache" />
|
||||||
|
<meta http-equiv="Expires" content="0" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="An enterprise-class UI components based on Ant Design and Vue"
|
||||||
|
/>
|
||||||
|
<title>Ant Design Vue</title>
|
||||||
|
<meta
|
||||||
|
name="keywords"
|
||||||
|
content="ant design vue,ant-design-vue,ant-design-vue admin,ant design pro,vue ant design,vue ant design pro,vue ant design admin,ant design vue官网,ant design vue中文文档,ant design vue文档"
|
||||||
|
/>
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="https://qn.antdv.com/favicon.ico" />
|
||||||
|
<style id="nprogress-style">
|
||||||
|
#nprogress {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="module" src="/examples/index.ts"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app" style="padding: 50px"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import { createVueToMarkdownRenderFn } from './vueToMarkdown';
|
||||||
|
import type { MarkdownOptions } from '../md/markdown/markdown';
|
||||||
|
import type { Plugin } from 'vite';
|
||||||
|
import { createMarkdownToVueRenderFn } from '../md/markdownToVue';
|
||||||
|
|
||||||
|
interface Options {
|
||||||
|
root?: string;
|
||||||
|
markdown?: MarkdownOptions;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default (options: Options = {}): Plugin => {
|
||||||
|
const { root, markdown } = options;
|
||||||
|
const vueToMarkdown = createVueToMarkdownRenderFn(root);
|
||||||
|
const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
|
||||||
|
return {
|
||||||
|
name: 'vueToMdToVue',
|
||||||
|
transform(code, id) {
|
||||||
|
if (id.endsWith('.vue') && id.indexOf('/demo/') > -1 && id.indexOf('index.vue') === -1) {
|
||||||
|
// transform .md files into vueSrc so plugin-vue can handle it
|
||||||
|
return { code: markdownToVue(vueToMarkdown(code, id).vueSrc, id).vueSrc, map: null };
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import LRUCache from 'lru-cache';
|
||||||
|
import slash from 'slash';
|
||||||
|
import fetchCode from '../md/utils/fetchCode';
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const debug = require('debug')('vitepress:md');
|
||||||
|
const cache = new LRUCache<string, MarkdownCompileResult>({ max: 1024 });
|
||||||
|
|
||||||
|
interface MarkdownCompileResult {
|
||||||
|
vueSrc: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createVueToMarkdownRenderFn(root: string = process.cwd()): any {
|
||||||
|
return (src: string, file: string): MarkdownCompileResult => {
|
||||||
|
const relativePath = slash(path.relative(root, file));
|
||||||
|
|
||||||
|
const cached = cache.get(src);
|
||||||
|
if (cached) {
|
||||||
|
debug(`[cache hit] ${relativePath}`);
|
||||||
|
return cached;
|
||||||
|
}
|
||||||
|
|
||||||
|
const start = Date.now();
|
||||||
|
const docs = fetchCode(src, 'docs')?.trim();
|
||||||
|
const template = fetchCode(src, 'template');
|
||||||
|
const script = fetchCode(src, 'script');
|
||||||
|
const style = fetchCode(src, 'style');
|
||||||
|
const newContent = `${docs}
|
||||||
|
\`\`\`vue
|
||||||
|
${template}
|
||||||
|
${script}
|
||||||
|
${style}
|
||||||
|
\`\`\`
|
||||||
|
`;
|
||||||
|
debug(`[render] ${file} in ${Date.now() - start}ms.`);
|
||||||
|
const result = {
|
||||||
|
vueSrc: newContent?.trim(),
|
||||||
|
};
|
||||||
|
cache.set(src, result);
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { createMarkdownToVueRenderFn } from './markdownToVue';
|
||||||
|
import type { MarkdownOptions } from './markdown/markdown';
|
||||||
|
import type { Plugin } from 'vite';
|
||||||
|
|
||||||
|
interface Options {
|
||||||
|
root?: string;
|
||||||
|
markdown?: MarkdownOptions;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default (options: Options = {}): Plugin => {
|
||||||
|
const { root, markdown } = options;
|
||||||
|
const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
|
||||||
|
return {
|
||||||
|
name: 'mdToVue',
|
||||||
|
transform(code, id) {
|
||||||
|
if (id.endsWith('.md')) {
|
||||||
|
// transform .md files into vueSrc so plugin-vue can handle it
|
||||||
|
return { code: markdownToVue(code, id).vueSrc, map: null };
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||||
|
import MarkdownIt from 'markdown-it';
|
||||||
|
import { parseHeader } from '../utils/parseHeader';
|
||||||
|
import { highlight } from './plugins/highlight';
|
||||||
|
import { slugify } from './plugins/slugify';
|
||||||
|
import { highlightLinePlugin } from './plugins/highlightLines';
|
||||||
|
import { lineNumberPlugin } from './plugins/lineNumbers';
|
||||||
|
import { componentPlugin } from './plugins/component';
|
||||||
|
import { containerPlugin } from './plugins/containers';
|
||||||
|
import { snippetPlugin } from './plugins/snippet';
|
||||||
|
import { hoistPlugin } from './plugins/hoist';
|
||||||
|
import { preWrapperPlugin } from './plugins/preWrapper';
|
||||||
|
import { linkPlugin } from './plugins/link';
|
||||||
|
import { extractHeaderPlugin } from './plugins/header';
|
||||||
|
import type { Header } from '../../shared';
|
||||||
|
|
||||||
|
const emoji = require('markdown-it-emoji');
|
||||||
|
const anchor = require('markdown-it-anchor');
|
||||||
|
const toc = require('markdown-it-table-of-contents');
|
||||||
|
|
||||||
|
export interface MarkdownOptions extends MarkdownIt.Options {
|
||||||
|
lineNumbers?: boolean;
|
||||||
|
config?: (md: MarkdownIt) => void;
|
||||||
|
anchor?: {
|
||||||
|
permalink?: boolean;
|
||||||
|
permalinkBefore?: boolean;
|
||||||
|
permalinkSymbol?: string;
|
||||||
|
};
|
||||||
|
// https://github.com/Oktavilla/markdown-it-table-of-contents
|
||||||
|
toc?: any;
|
||||||
|
externalLinks?: Record<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MarkdownParsedData {
|
||||||
|
hoistedTags?: string[];
|
||||||
|
links?: string[];
|
||||||
|
headers?: Header[];
|
||||||
|
vueCode?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MarkdownRenderer {
|
||||||
|
__data: MarkdownParsedData;
|
||||||
|
render: (src: string, env?: any) => { html: string; data: any };
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createMarkdownRenderer = (options: MarkdownOptions = {}): MarkdownRenderer => {
|
||||||
|
const md = MarkdownIt({
|
||||||
|
html: true,
|
||||||
|
linkify: true,
|
||||||
|
highlight,
|
||||||
|
...options,
|
||||||
|
});
|
||||||
|
|
||||||
|
// custom plugins
|
||||||
|
md.use(componentPlugin)
|
||||||
|
.use(highlightLinePlugin)
|
||||||
|
.use(preWrapperPlugin)
|
||||||
|
.use(snippetPlugin)
|
||||||
|
.use(hoistPlugin)
|
||||||
|
.use(containerPlugin)
|
||||||
|
.use(extractHeaderPlugin)
|
||||||
|
.use(linkPlugin, {
|
||||||
|
target: '_blank',
|
||||||
|
rel: 'noopener noreferrer',
|
||||||
|
...options.externalLinks,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 3rd party plugins
|
||||||
|
.use(emoji)
|
||||||
|
.use(anchor, {
|
||||||
|
slugify,
|
||||||
|
permalink: false,
|
||||||
|
permalinkBefore: true,
|
||||||
|
permalinkSymbol: '#',
|
||||||
|
permalinkAttrs: () => ({ 'aria-hidden': true }),
|
||||||
|
...options.anchor,
|
||||||
|
})
|
||||||
|
.use(toc, {
|
||||||
|
slugify,
|
||||||
|
includeLevel: [2, 3],
|
||||||
|
format: parseHeader,
|
||||||
|
...options.toc,
|
||||||
|
});
|
||||||
|
|
||||||
|
// apply user config
|
||||||
|
if (options.config) {
|
||||||
|
options.config(md);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.lineNumbers) {
|
||||||
|
md.use(lineNumberPlugin);
|
||||||
|
}
|
||||||
|
|
||||||
|
// wrap render so that we can return both the html and extracted data.
|
||||||
|
const render = md.render;
|
||||||
|
const wrappedRender: MarkdownRenderer['render'] = src => {
|
||||||
|
(md as any).__data = {};
|
||||||
|
const html = render.call(md, src);
|
||||||
|
return {
|
||||||
|
html,
|
||||||
|
data: (md as any).__data,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
(md as any).render = wrappedRender;
|
||||||
|
|
||||||
|
return md as any;
|
||||||
|
};
|
||||||
@ -0,0 +1,97 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||||
|
import type MarkdownIt from 'markdown-it';
|
||||||
|
import type { RuleBlock } from 'markdown-it/lib/parser_block';
|
||||||
|
|
||||||
|
// Replacing the default htmlBlock rule to allow using custom components at
|
||||||
|
// root level
|
||||||
|
|
||||||
|
const blockNames: string[] = require('markdown-it/lib/common/html_blocks');
|
||||||
|
const HTML_OPEN_CLOSE_TAG_RE: RegExp =
|
||||||
|
require('markdown-it/lib/common/html_re').HTML_OPEN_CLOSE_TAG_RE;
|
||||||
|
|
||||||
|
// An array of opening and corresponding closing sequences for html tags,
|
||||||
|
// last argument defines whether it can terminate a paragraph or not
|
||||||
|
const HTML_SEQUENCES: [RegExp, RegExp, boolean][] = [
|
||||||
|
[/^<(script|pre|style)(?=(\s|>|$))/i, /<\/(script|pre|style)>/i, true],
|
||||||
|
[/^<!--/, /-->/, true],
|
||||||
|
[/^<\?/, /\?>/, true],
|
||||||
|
[/^<![A-Z]/, />/, true],
|
||||||
|
[/^<!\[CDATA\[/, /\]\]>/, true],
|
||||||
|
// PascalCase Components
|
||||||
|
[/^<[A-Z]/, />/, true],
|
||||||
|
// custom elements with hyphens
|
||||||
|
[/^<\w+\-/, />/, true],
|
||||||
|
[new RegExp('^</?(' + blockNames.join('|') + ')(?=(\\s|/?>|$))', 'i'), /^$/, true],
|
||||||
|
[new RegExp(HTML_OPEN_CLOSE_TAG_RE.source + '\\s*$'), /^$/, false],
|
||||||
|
];
|
||||||
|
|
||||||
|
export const componentPlugin = (md: MarkdownIt) => {
|
||||||
|
md.block.ruler.at('html_block', htmlBlock);
|
||||||
|
};
|
||||||
|
|
||||||
|
const htmlBlock: RuleBlock = (state, startLine, endLine, silent): boolean => {
|
||||||
|
let i, nextLine, lineText;
|
||||||
|
let pos = state.bMarks[startLine] + state.tShift[startLine];
|
||||||
|
let max = state.eMarks[startLine];
|
||||||
|
|
||||||
|
// if it's indented more than 3 spaces, it should be a code block
|
||||||
|
if (state.sCount[startLine] - state.blkIndent >= 4) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!state.md.options.html) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.src.charCodeAt(pos) !== 0x3c /* < */) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
lineText = state.src.slice(pos, max);
|
||||||
|
|
||||||
|
for (i = 0; i < HTML_SEQUENCES.length; i++) {
|
||||||
|
if (HTML_SEQUENCES[i][0].test(lineText)) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (i === HTML_SEQUENCES.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (silent) {
|
||||||
|
// true if this sequence can be a terminator, false otherwise
|
||||||
|
return HTML_SEQUENCES[i][2];
|
||||||
|
}
|
||||||
|
|
||||||
|
nextLine = startLine + 1;
|
||||||
|
|
||||||
|
// If we are here - we detected HTML block.
|
||||||
|
// Let's roll down till block end.
|
||||||
|
if (!HTML_SEQUENCES[i][1].test(lineText)) {
|
||||||
|
for (; nextLine < endLine; nextLine++) {
|
||||||
|
if (state.sCount[nextLine] < state.blkIndent) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
pos = state.bMarks[nextLine] + state.tShift[nextLine];
|
||||||
|
max = state.eMarks[nextLine];
|
||||||
|
lineText = state.src.slice(pos, max);
|
||||||
|
|
||||||
|
if (HTML_SEQUENCES[i][1].test(lineText)) {
|
||||||
|
if (lineText.length !== 0) {
|
||||||
|
nextLine++;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
state.line = nextLine;
|
||||||
|
|
||||||
|
const token = state.push('html_block', '', 0);
|
||||||
|
token.map = [startLine, nextLine];
|
||||||
|
token.content = state.getLines(startLine, nextLine, state.blkIndent, true);
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||||
|
import type MarkdownIt from 'markdown-it';
|
||||||
|
import type Token from 'markdown-it/lib/token';
|
||||||
|
|
||||||
|
const container = require('markdown-it-container');
|
||||||
|
|
||||||
|
export const containerPlugin = (md: MarkdownIt) => {
|
||||||
|
md.use(...createContainer('tip', 'TIP'))
|
||||||
|
.use(...createContainer('warning', 'WARNING'))
|
||||||
|
.use(...createContainer('danger', 'WARNING'))
|
||||||
|
// explicitly escape Vue syntax
|
||||||
|
.use(container, 'v-pre', {
|
||||||
|
render: (tokens: Token[], idx: number) =>
|
||||||
|
tokens[idx].nesting === 1 ? `<div v-pre>\n` : `</div>\n`,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
type ContainerArgs = [
|
||||||
|
typeof container,
|
||||||
|
string,
|
||||||
|
{
|
||||||
|
render(tokens: Token[], idx: number): string;
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function createContainer(klass: string, defaultTitle: string): ContainerArgs {
|
||||||
|
return [
|
||||||
|
container,
|
||||||
|
klass,
|
||||||
|
{
|
||||||
|
render(tokens, idx) {
|
||||||
|
const token = tokens[idx];
|
||||||
|
const info = token.info.trim().slice(klass.length)?.trim();
|
||||||
|
if (token.nesting === 1) {
|
||||||
|
return `<div class="${klass} custom-block"><p class="custom-block-title">${
|
||||||
|
info || defaultTitle
|
||||||
|
}</p>\n`;
|
||||||
|
} else {
|
||||||
|
return `</div>\n`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import type MarkdownIt from 'markdown-it';
|
||||||
|
import type { MarkdownParsedData } from '../markdown';
|
||||||
|
import { deeplyParseHeader } from '../../utils/parseHeader';
|
||||||
|
import { slugify } from './slugify';
|
||||||
|
|
||||||
|
export const extractHeaderPlugin = (md: MarkdownIt, include = ['h2', 'h3']) => {
|
||||||
|
md.renderer.rules.heading_open = (tokens, i, options, env, self) => {
|
||||||
|
const token = tokens[i];
|
||||||
|
if (include.includes(token.tag)) {
|
||||||
|
const title = tokens[i + 1].content;
|
||||||
|
const idAttr = token.attrs!.find(([name]) => name === 'id');
|
||||||
|
const slug = idAttr && idAttr[1];
|
||||||
|
const content = tokens[i + 4].content;
|
||||||
|
const data = (md as any).__data as MarkdownParsedData;
|
||||||
|
const headers = data.headers || (data.headers = []);
|
||||||
|
headers.push({
|
||||||
|
level: parseInt(token.tag.slice(1), 10),
|
||||||
|
title: deeplyParseHeader(title),
|
||||||
|
slug: slug || slugify(title),
|
||||||
|
content,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return self.renderToken(tokens, i, options);
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||||
|
const chalk = require('chalk');
|
||||||
|
const prism = require('prismjs');
|
||||||
|
const loadLanguages = require('prismjs/components/index');
|
||||||
|
const escapeHtml = require('escape-html');
|
||||||
|
|
||||||
|
// required to make embedded highlighting work...
|
||||||
|
loadLanguages(['markup', 'css', 'javascript']);
|
||||||
|
|
||||||
|
function wrap(code: string, lang: string): string {
|
||||||
|
if (lang === 'text') {
|
||||||
|
code = escapeHtml(code);
|
||||||
|
}
|
||||||
|
return `<pre v-pre><code>${code}</code></pre>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const highlight = (str: string, lang: string) => {
|
||||||
|
if (!lang) {
|
||||||
|
return wrap(str, 'text');
|
||||||
|
}
|
||||||
|
lang = lang.toLowerCase();
|
||||||
|
const rawLang = lang;
|
||||||
|
if (lang === 'vue' || lang === 'html') {
|
||||||
|
lang = 'markup';
|
||||||
|
}
|
||||||
|
if (lang === 'md') {
|
||||||
|
lang = 'markdown';
|
||||||
|
}
|
||||||
|
if (lang === 'ts') {
|
||||||
|
lang = 'typescript';
|
||||||
|
}
|
||||||
|
if (lang === 'py') {
|
||||||
|
lang = 'python';
|
||||||
|
}
|
||||||
|
if (!prism.languages[lang]) {
|
||||||
|
try {
|
||||||
|
loadLanguages([lang]);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(
|
||||||
|
chalk.yellow(`[vitepress] Syntax highlight for language "${lang}" is not supported.`),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (prism.languages[lang]) {
|
||||||
|
const code = prism.highlight(str, prism.languages[lang], lang);
|
||||||
|
return wrap(code, rawLang);
|
||||||
|
}
|
||||||
|
return wrap(str, 'text');
|
||||||
|
};
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
// Modified from https://github.com/egoist/markdown-it-highlight-lines
|
||||||
|
import type MarkdownIt from 'markdown-it';
|
||||||
|
|
||||||
|
const RE = /{([\d,-]+)}/;
|
||||||
|
const wrapperRE = /^<pre .*?><code>/;
|
||||||
|
|
||||||
|
export const highlightLinePlugin = (md: MarkdownIt) => {
|
||||||
|
const fence = md.renderer.rules.fence!;
|
||||||
|
md.renderer.rules.fence = (...args) => {
|
||||||
|
const [tokens, idx, options] = args;
|
||||||
|
const token = tokens[idx];
|
||||||
|
|
||||||
|
const rawInfo = token.info;
|
||||||
|
if (!rawInfo || !RE.test(rawInfo)) {
|
||||||
|
return fence(...args);
|
||||||
|
}
|
||||||
|
|
||||||
|
const langName = rawInfo.replace(RE, '')?.trim();
|
||||||
|
// ensure the next plugin get the correct lang.
|
||||||
|
token.info = langName;
|
||||||
|
|
||||||
|
const lineNumbers = RE.exec(rawInfo)![1]
|
||||||
|
.split(',')
|
||||||
|
.map(v => v.split('-').map(v => parseInt(v, 10)));
|
||||||
|
|
||||||
|
const code = options.highlight ? options.highlight(token.content, langName) : token.content;
|
||||||
|
|
||||||
|
const rawCode = code.replace(wrapperRE, '');
|
||||||
|
const highlightLinesCode = rawCode
|
||||||
|
.split('\n')
|
||||||
|
.map((split, index) => {
|
||||||
|
const lineNumber = index + 1;
|
||||||
|
const inRange = lineNumbers.some(([start, end]) => {
|
||||||
|
if (start && end) {
|
||||||
|
return lineNumber >= start && lineNumber <= end;
|
||||||
|
}
|
||||||
|
return lineNumber === start;
|
||||||
|
});
|
||||||
|
if (inRange) {
|
||||||
|
return `<div class="highlighted"> </div>`;
|
||||||
|
}
|
||||||
|
return '<br>';
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
|
||||||
|
const highlightLinesWrapperCode = `<div class="highlight-lines">${highlightLinesCode}</div>`;
|
||||||
|
|
||||||
|
return highlightLinesWrapperCode + code;
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import type MarkdownIt from 'markdown-it';
|
||||||
|
import type { MarkdownParsedData } from '../markdown';
|
||||||
|
|
||||||
|
// hoist <script> and <style> tags out of the returned html
|
||||||
|
// so that they can be placed outside as SFC blocks.
|
||||||
|
export const hoistPlugin = (md: MarkdownIt) => {
|
||||||
|
const RE = /^<(script|style)(?=(\s|>|$))/i;
|
||||||
|
|
||||||
|
md.renderer.rules.html_block = (tokens, idx) => {
|
||||||
|
const content = tokens[idx].content;
|
||||||
|
const data = (md as any).__data as MarkdownParsedData;
|
||||||
|
const hoistedTags = data.hoistedTags || (data.hoistedTags = []);
|
||||||
|
if (RE.test(content.trim())) {
|
||||||
|
hoistedTags.push(content);
|
||||||
|
return '';
|
||||||
|
} else {
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
// markdown-it plugin for generating line numbers.
|
||||||
|
// It depends on preWrapper plugin.
|
||||||
|
|
||||||
|
import type MarkdownIt from 'markdown-it';
|
||||||
|
|
||||||
|
export const lineNumberPlugin = (md: MarkdownIt) => {
|
||||||
|
const fence = md.renderer.rules.fence!;
|
||||||
|
md.renderer.rules.fence = (...args) => {
|
||||||
|
const rawCode = fence(...args);
|
||||||
|
const code = rawCode.slice(rawCode.indexOf('<code>'), rawCode.indexOf('</code>'));
|
||||||
|
|
||||||
|
const lines = code.split('\n');
|
||||||
|
const lineNumbersCode = [...Array(lines.length - 1)]
|
||||||
|
.map((line, index) => `<span class="line-number">${index + 1}</span><br>`)
|
||||||
|
.join('');
|
||||||
|
|
||||||
|
const lineNumbersWrapperCode = `<div class="line-numbers-wrapper">${lineNumbersCode}</div>`;
|
||||||
|
|
||||||
|
const finalCode = rawCode
|
||||||
|
.replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)
|
||||||
|
.replace(/"(language-\w+)"/, '"$1 line-numbers-mode"');
|
||||||
|
|
||||||
|
return finalCode;
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
// markdown-it plugin for:
|
||||||
|
// 1. adding target="_blank" to external links
|
||||||
|
// 2. normalize internal links to end with `.html`
|
||||||
|
|
||||||
|
import type MarkdownIt from 'markdown-it';
|
||||||
|
import type { MarkdownParsedData } from '../markdown';
|
||||||
|
import { URL } from 'url';
|
||||||
|
|
||||||
|
const indexRE = /(^|.*\/)index.md(#?.*)$/i;
|
||||||
|
|
||||||
|
export const linkPlugin = (md: MarkdownIt, externalAttrs: Record<string, string>) => {
|
||||||
|
md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
|
||||||
|
const token = tokens[idx];
|
||||||
|
const hrefIndex = token.attrIndex('href');
|
||||||
|
if (hrefIndex >= 0) {
|
||||||
|
const hrefAttr = token.attrs![hrefIndex];
|
||||||
|
const url = hrefAttr[1];
|
||||||
|
const isExternal = /^https?:/.test(url);
|
||||||
|
if (isExternal) {
|
||||||
|
Object.entries(externalAttrs).forEach(([key, val]) => {
|
||||||
|
token.attrSet(key, val);
|
||||||
|
});
|
||||||
|
} else if (
|
||||||
|
// internal anchor links
|
||||||
|
!url.startsWith('#') &&
|
||||||
|
// mail links
|
||||||
|
!url.startsWith('mailto:')
|
||||||
|
) {
|
||||||
|
normalizeHref(hrefAttr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return self.renderToken(tokens, idx, options);
|
||||||
|
};
|
||||||
|
|
||||||
|
function normalizeHref(hrefAttr: [string, string]) {
|
||||||
|
let url = hrefAttr[1];
|
||||||
|
|
||||||
|
const indexMatch = url.match(indexRE);
|
||||||
|
if (indexMatch) {
|
||||||
|
const [, path, hash] = indexMatch;
|
||||||
|
url = path + hash;
|
||||||
|
} else {
|
||||||
|
let cleanUrl = url.replace(/\#.*$/, '').replace(/\?.*$/, '');
|
||||||
|
// .md -> .html
|
||||||
|
if (cleanUrl.endsWith('.md')) {
|
||||||
|
cleanUrl = cleanUrl.replace(/\.md$/, '.html');
|
||||||
|
}
|
||||||
|
// ./foo -> ./foo.html
|
||||||
|
if (!cleanUrl.endsWith('.html') && !cleanUrl.endsWith('/')) {
|
||||||
|
cleanUrl += '.html';
|
||||||
|
}
|
||||||
|
const parsed = new URL(url, 'http://a.com');
|
||||||
|
url = cleanUrl + parsed.search + parsed.hash;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ensure leading . for relative paths
|
||||||
|
if (!url.startsWith('/') && !/^\.\//.test(url)) {
|
||||||
|
url = './' + url;
|
||||||
|
}
|
||||||
|
|
||||||
|
// export it for existence check
|
||||||
|
const data = (md as any).__data as MarkdownParsedData;
|
||||||
|
const links = data.links || (data.links = []);
|
||||||
|
links.push(url.replace(/\.html$/, ''));
|
||||||
|
|
||||||
|
// markdown-it encodes the uri
|
||||||
|
hrefAttr[1] = decodeURI(url);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
// markdown-it plugin for wrapping <pre> ... </pre>.
|
||||||
|
//
|
||||||
|
// If your plugin was chained before preWrapper, you can add additional element directly.
|
||||||
|
// If your plugin was chained after preWrapper, you can use these slots:
|
||||||
|
// 1. <!--beforebegin-->
|
||||||
|
// 2. <!--afterbegin-->
|
||||||
|
// 3. <!--beforeend-->
|
||||||
|
// 4. <!--afterend-->
|
||||||
|
|
||||||
|
import MarkdownIt from 'markdown-it';
|
||||||
|
import { MarkdownParsedData } from '../markdown';
|
||||||
|
|
||||||
|
export const preWrapperPlugin = (md: MarkdownIt) => {
|
||||||
|
const fence = md.renderer.rules.fence!;
|
||||||
|
md.renderer.rules.fence = (...args) => {
|
||||||
|
const [tokens, idx] = args;
|
||||||
|
const token = tokens[idx];
|
||||||
|
const data = (md as any).__data as MarkdownParsedData;
|
||||||
|
if (token.info.trim() === 'vue') {
|
||||||
|
data.vueCode = token.content;
|
||||||
|
}
|
||||||
|
const rawCode = fence(...args).replace(/<pre /g, `<pre class="language-${token.info.trim()}" `);
|
||||||
|
return rawCode; //`<div class="language-${token.info.trim()}">${rawCode}</div>`;
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
// string.js slugify drops non ascii chars so we have to
|
||||||
|
// use a custom implementation here
|
||||||
|
const removeDiacritics = require('diacritics').remove;
|
||||||
|
// eslint-disable-next-line no-control-regex
|
||||||
|
const rControl = /[\u0000-\u001f]/g;
|
||||||
|
const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g;
|
||||||
|
|
||||||
|
export const slugify = (str: string): string => {
|
||||||
|
return (
|
||||||
|
removeDiacritics(str)
|
||||||
|
// Remove control characters
|
||||||
|
.replace(rControl, '')
|
||||||
|
// Replace special characters
|
||||||
|
.replace(rSpecial, '-')
|
||||||
|
// Remove continuos separators
|
||||||
|
.replace(/\-{2,}/g, '-')
|
||||||
|
// Remove prefixing and trailing separtors
|
||||||
|
.replace(/^\-+|\-+$/g, '')
|
||||||
|
// ensure it doesn't start with a number (#121)
|
||||||
|
.replace(/^(\d)/, '_$1')
|
||||||
|
// lowercase
|
||||||
|
.toLowerCase()
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
import fs from 'fs';
|
||||||
|
import type MarkdownIt from 'markdown-it';
|
||||||
|
import type { RuleBlock } from 'markdown-it/lib/parser_block';
|
||||||
|
|
||||||
|
export const snippetPlugin = (md: MarkdownIt, root: string) => {
|
||||||
|
const parser: RuleBlock = (state, startLine, endLine, silent) => {
|
||||||
|
const CH = '<'.charCodeAt(0);
|
||||||
|
const pos = state.bMarks[startLine] + state.tShift[startLine];
|
||||||
|
const max = state.eMarks[startLine];
|
||||||
|
|
||||||
|
// if it's indented more than 3 spaces, it should be a code block
|
||||||
|
if (state.sCount[startLine] - state.blkIndent >= 4) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < 3; ++i) {
|
||||||
|
const ch = state.src.charCodeAt(pos + i);
|
||||||
|
if (ch !== CH || pos + i >= max) return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (silent) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const start = pos + 3;
|
||||||
|
const end = state.skipSpacesBack(max, pos);
|
||||||
|
const rawPath = state.src.slice(start, end)?.trim().replace(/^@/, root);
|
||||||
|
const filename = rawPath.split(/{/).shift()!.trim();
|
||||||
|
const content = fs.existsSync(filename)
|
||||||
|
? fs.readFileSync(filename).toString()
|
||||||
|
: 'Not found: ' + filename;
|
||||||
|
const meta = rawPath.replace(filename, '');
|
||||||
|
|
||||||
|
state.line = startLine + 1;
|
||||||
|
|
||||||
|
const token = state.push('fence', 'code', 0);
|
||||||
|
token.info = filename.split('.').pop() + meta;
|
||||||
|
token.content = content;
|
||||||
|
token.markup = '```';
|
||||||
|
token.map = [startLine, startLine + 1];
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
md.block.ruler.before('fence', 'snippet', parser);
|
||||||
|
};
|
||||||
@ -0,0 +1,172 @@
|
|||||||
|
import fs from 'fs';
|
||||||
|
import path from 'path';
|
||||||
|
import matter from 'gray-matter';
|
||||||
|
import LRUCache from 'lru-cache';
|
||||||
|
import type { MarkdownOptions, MarkdownParsedData, MarkdownRenderer } from './markdown/markdown';
|
||||||
|
import { createMarkdownRenderer } from './markdown/markdown';
|
||||||
|
import { deeplyParseHeader } from './utils/parseHeader';
|
||||||
|
import type { PageData, HeadConfig } from '../shared';
|
||||||
|
import slash from 'slash';
|
||||||
|
import escapeHtml from 'escape-html';
|
||||||
|
import fetchCode from './utils/fetchCode';
|
||||||
|
import tsToJs from './utils/tsToJs';
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const debug = require('debug')('vitepress:md');
|
||||||
|
const cache = new LRUCache<string, MarkdownCompileResult>({ max: 1024 });
|
||||||
|
|
||||||
|
interface MarkdownCompileResult {
|
||||||
|
vueSrc: string;
|
||||||
|
pageData: PageData;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createMarkdownToVueRenderFn(
|
||||||
|
root: string = process.cwd(),
|
||||||
|
options: MarkdownOptions = {},
|
||||||
|
): any {
|
||||||
|
const md = createMarkdownRenderer(options);
|
||||||
|
|
||||||
|
return (src: string, file: string): MarkdownCompileResult => {
|
||||||
|
const relativePath = slash(path.relative(root, file));
|
||||||
|
|
||||||
|
const cached = cache.get(src);
|
||||||
|
if (cached) {
|
||||||
|
debug(`[cache hit] ${relativePath}`);
|
||||||
|
return cached;
|
||||||
|
}
|
||||||
|
|
||||||
|
const start = Date.now();
|
||||||
|
|
||||||
|
const { content, data: frontmatter } = matter(src);
|
||||||
|
// eslint-disable-next-line prefer-const
|
||||||
|
let { html, data } = md.render(content);
|
||||||
|
// avoid env variables being replaced by vite
|
||||||
|
html = html
|
||||||
|
.replace(/import\.meta/g, 'import.<wbr/>meta')
|
||||||
|
.replace(/process\.env/g, 'process.<wbr/>env');
|
||||||
|
// TODO validate data.links?
|
||||||
|
const pageData: PageData = {
|
||||||
|
title: inferTitle(frontmatter, content),
|
||||||
|
description: inferDescription(frontmatter),
|
||||||
|
frontmatter,
|
||||||
|
headers: data.headers,
|
||||||
|
relativePath,
|
||||||
|
content: escapeHtml(content),
|
||||||
|
html,
|
||||||
|
// TODO use git timestamp?
|
||||||
|
lastUpdated: Math.round(fs.statSync(file).mtimeMs),
|
||||||
|
};
|
||||||
|
const newContent = data.vueCode
|
||||||
|
? genComponentCode(md, data, pageData)
|
||||||
|
: `
|
||||||
|
<template><article class="markdown">${html}</article></template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default { pageData: ${JSON.stringify(pageData)} }
|
||||||
|
</script>
|
||||||
|
${fetchCode(content, 'style')}
|
||||||
|
`;
|
||||||
|
|
||||||
|
debug(`[render] ${file} in ${Date.now() - start}ms.`);
|
||||||
|
const result = {
|
||||||
|
vueSrc: newContent?.trim(),
|
||||||
|
pageData,
|
||||||
|
};
|
||||||
|
cache.set(src, result);
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function genComponentCode(md: MarkdownRenderer, data: PageData, pageData: PageData) {
|
||||||
|
const { vueCode, headers = [] } = data as MarkdownParsedData;
|
||||||
|
const cn = headers.find(h => h.title === 'zh-CN')?.content;
|
||||||
|
const us = headers.find(h => h.title === 'en-US')?.content;
|
||||||
|
let { html } = md.render(`\`\`\`vue
|
||||||
|
${vueCode?.trim()}
|
||||||
|
\`\`\``);
|
||||||
|
html = html
|
||||||
|
.replace(/import\.meta/g, 'import.<wbr/>meta')
|
||||||
|
.replace(/process\.env/g, 'process.<wbr/>env');
|
||||||
|
const template = fetchCode(vueCode, 'template');
|
||||||
|
const script = fetchCode(vueCode, 'script');
|
||||||
|
const style = fetchCode(vueCode, 'style');
|
||||||
|
const scriptContent = fetchCode(vueCode, 'scriptContent');
|
||||||
|
let jsCode = tsToJs(scriptContent)?.trim();
|
||||||
|
jsCode = jsCode
|
||||||
|
? `<script>
|
||||||
|
${jsCode}
|
||||||
|
</script>`
|
||||||
|
: '';
|
||||||
|
const jsSourceCode = `
|
||||||
|
${template}
|
||||||
|
${jsCode}
|
||||||
|
${style}
|
||||||
|
`.trim();
|
||||||
|
let { html: jsVersion } = md.render(`\`\`\`vue
|
||||||
|
${jsSourceCode}
|
||||||
|
\`\`\``);
|
||||||
|
jsVersion = jsVersion
|
||||||
|
.replace(/import\.meta/g, 'import.<wbr/>meta')
|
||||||
|
.replace(/process\.env/g, 'process.<wbr/>env');
|
||||||
|
|
||||||
|
const jsfiddle = escapeHtml(
|
||||||
|
JSON.stringify({
|
||||||
|
us,
|
||||||
|
cn,
|
||||||
|
docHtml: pageData.html.split('<pre class="language-vue" v-pre>')[0],
|
||||||
|
...pageData.frontmatter,
|
||||||
|
relativePath: pageData.relativePath,
|
||||||
|
// htmlCode: Buffer.from(html).toString('base64'),
|
||||||
|
// jsVersionHtml: Buffer.from(jsVersion).toString('base64'),
|
||||||
|
sourceCode: Buffer.from(vueCode).toString('base64'),
|
||||||
|
jsSourceCode: Buffer.from(jsSourceCode).toString('base64'),
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const newContent = `
|
||||||
|
<template>
|
||||||
|
<demo-box :jsfiddle="${jsfiddle}">
|
||||||
|
${template.replace('<template>', '<template v-slot:default>')}
|
||||||
|
<template #htmlCode>${html}</template>
|
||||||
|
<template #jsVersionHtml>${jsVersion}</template>
|
||||||
|
</demo-box>
|
||||||
|
</template>
|
||||||
|
${script}
|
||||||
|
${style}
|
||||||
|
`;
|
||||||
|
return newContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
const inferTitle = (frontmatter: any, content: string) => {
|
||||||
|
if (frontmatter.home) {
|
||||||
|
return 'Home';
|
||||||
|
}
|
||||||
|
if (frontmatter.title) {
|
||||||
|
return deeplyParseHeader(frontmatter.title);
|
||||||
|
}
|
||||||
|
const match = content.match(/^\s*#+\s+(.*)/m);
|
||||||
|
if (match) {
|
||||||
|
return deeplyParseHeader(match[1].trim());
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const inferDescription = (frontmatter: Record<string, any>) => {
|
||||||
|
if (!frontmatter.head) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return getHeadMetaContent(frontmatter.head, 'description') || '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getHeadMetaContent = (head: HeadConfig[], name: string): string | undefined => {
|
||||||
|
if (!head || !head.length) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const meta = head.find(([tag, attrs = {}]) => {
|
||||||
|
return tag === 'meta' && attrs.name === name && attrs.content;
|
||||||
|
});
|
||||||
|
|
||||||
|
return meta && meta[1].content;
|
||||||
|
};
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
// import cheerio from 'cheerio';
|
||||||
|
const scriptRE = /<script[^>]*>([\s\S]*)<\/script>/;
|
||||||
|
const scriptContentRE = /(?<=<script[^>]*>)([\s\S]*)(?=<\/script>)/;
|
||||||
|
const templateRE = /<template[^>]*>([\s\S]*)<\/template>/;
|
||||||
|
const styleRE = /<style[^>]*>([\s\S]*)<\/style>/;
|
||||||
|
const docsRE = /(?<=<docs>)([\s\S]*)(?=<\/docs>)/;
|
||||||
|
const reObj = {
|
||||||
|
script: scriptRE,
|
||||||
|
style: styleRE,
|
||||||
|
docs: docsRE,
|
||||||
|
template: templateRE,
|
||||||
|
scriptContent: scriptContentRE,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function fetchCode(src: string, type: string): string {
|
||||||
|
if (type === 'template') {
|
||||||
|
// const $ = cheerio.load(src, {
|
||||||
|
// decodeEntities: false,
|
||||||
|
// xmlMode: false,
|
||||||
|
// recognizeSelfClosing: true,
|
||||||
|
// _useHtmlParser2: true,
|
||||||
|
// });
|
||||||
|
// return `<template>
|
||||||
|
// ${$(type).html().trim()}
|
||||||
|
// </template>`;
|
||||||
|
src = src.split('<script')[0];
|
||||||
|
}
|
||||||
|
const matches = src.match(reObj[type]);
|
||||||
|
return matches ? matches[0] : '';
|
||||||
|
}
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
// Since VuePress needs to extract the header from the markdown source
|
||||||
|
// file and display it in the sidebar or title (#238), this file simply
|
||||||
|
// removes some unnecessary elements to make header displays well at
|
||||||
|
// sidebar or title.
|
||||||
|
//
|
||||||
|
// But header's parsing in the markdown content is done by the markdown
|
||||||
|
// loader based on markdown-it. markdown-it parser will will always keep
|
||||||
|
// HTML in headers, so in VuePress, after being parsed by the markdown
|
||||||
|
// loader, the raw HTML in headers will finally be parsed by Vue-loader.
|
||||||
|
// so that we can write HTML/Vue in the header. One exception is the HTML
|
||||||
|
// wrapped by <code>(markdown token: '`') tag.
|
||||||
|
|
||||||
|
const parseEmojis = (str: string) => {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const emojiData = require('markdown-it-emoji/lib/data/full.json');
|
||||||
|
return String(str).replace(/:(.+?):/g, (placeholder, key) => emojiData[key] || placeholder);
|
||||||
|
};
|
||||||
|
|
||||||
|
const unescapeHtml = (html: string) =>
|
||||||
|
String(html)
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, "'")
|
||||||
|
.replace(/:/g, ':')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>');
|
||||||
|
|
||||||
|
const removeMarkdownTokens = (str: string) =>
|
||||||
|
String(str)
|
||||||
|
.replace(/(\[(.[^\]]+)\]\((.[^)]+)\))/g, '$2') // []()
|
||||||
|
.replace(/(`|\*{1,3}|_)(.*?[^\\])\1/g, '$2') // `{t}` | *{t}* | **{t}** | ***{t}*** | _{t}_
|
||||||
|
// eslint-disable-next-line no-useless-escape
|
||||||
|
.replace(/(\\)(\*|_|`|\!|<|\$)/g, '$2'); // remove escape char '\'
|
||||||
|
|
||||||
|
const trim = (str: string) => str.trim();
|
||||||
|
|
||||||
|
// This method remove the raw HTML but reserve the HTML wrapped by `<code>`.
|
||||||
|
// e.g.
|
||||||
|
// Input: "<a> b", Output: "b"
|
||||||
|
// Input: "`<a>` b", Output: "`<a>` b"
|
||||||
|
export const removeNonCodeWrappedHTML = (str: string): string => {
|
||||||
|
return String(str).replace(/(^|[^><`\\])<.*>([^><`]|$)/g, '$1$2');
|
||||||
|
};
|
||||||
|
|
||||||
|
const compose = (...processors: ((str: string) => string)[]) => {
|
||||||
|
if (processors.length === 0) return (input: string) => input;
|
||||||
|
if (processors.length === 1) return processors[0];
|
||||||
|
return processors.reduce((prev, next) => {
|
||||||
|
return str => next(prev(str));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Unescape html, parse emojis and remove some md tokens.
|
||||||
|
export const parseHeader = compose(unescapeHtml, parseEmojis, removeMarkdownTokens, trim);
|
||||||
|
|
||||||
|
// Also clean the html that isn't wrapped by code.
|
||||||
|
// Because we want to support using VUE components in headers.
|
||||||
|
// e.g. https://vuepress.vuejs.org/guide/using-vue.html#badge
|
||||||
|
export const deeplyParseHeader = compose(removeNonCodeWrappedHTML, parseHeader);
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import qs from 'querystring';
|
||||||
|
|
||||||
|
export interface VueQuery {
|
||||||
|
vue?: boolean;
|
||||||
|
src?: boolean;
|
||||||
|
type?: 'script' | 'template' | 'style' | 'custom';
|
||||||
|
index?: number;
|
||||||
|
lang?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function parseVueRequest(id: string): any {
|
||||||
|
const [filename, rawQuery] = id.split(`?`, 2);
|
||||||
|
const query = qs.parse(rawQuery) as VueQuery;
|
||||||
|
if (query.vue != null) {
|
||||||
|
query.vue = true;
|
||||||
|
}
|
||||||
|
if (query.src != null) {
|
||||||
|
query.src = true;
|
||||||
|
}
|
||||||
|
if (query.index != null) {
|
||||||
|
query.index = Number(query.index);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
filename,
|
||||||
|
query,
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { transformSync } from '@babel/core';
|
||||||
|
import { CLIEngine } from 'eslint';
|
||||||
|
const engine = new CLIEngine({
|
||||||
|
fix: true,
|
||||||
|
useEslintrc: false,
|
||||||
|
});
|
||||||
|
const tsToJs = (content: string): string => {
|
||||||
|
if (!content) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const { code } = transformSync(content, {
|
||||||
|
configFile: false,
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
require.resolve('@babel/plugin-transform-typescript'),
|
||||||
|
{
|
||||||
|
isTSX: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const report = engine.executeOnText(code);
|
||||||
|
let output = report.results[0].output;
|
||||||
|
output = output ? output.trim() : output;
|
||||||
|
return output;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default tsToJs;
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
// types shared between server and client
|
||||||
|
|
||||||
|
export interface LocaleConfig {
|
||||||
|
lang: string;
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
head?: HeadConfig[];
|
||||||
|
label?: string;
|
||||||
|
selectText?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SiteData<ThemeConfig = any> {
|
||||||
|
base: string;
|
||||||
|
lang: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
head: HeadConfig[];
|
||||||
|
themeConfig: ThemeConfig;
|
||||||
|
locales: Record<string, LocaleConfig>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type HeadConfig =
|
||||||
|
| [string, Record<string, string>]
|
||||||
|
| [string, Record<string, string>, string];
|
||||||
|
|
||||||
|
export interface PageData {
|
||||||
|
relativePath: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
headers: Header[];
|
||||||
|
frontmatter: Record<string, any>;
|
||||||
|
lastUpdated: number;
|
||||||
|
content?: string;
|
||||||
|
html?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Header {
|
||||||
|
level: number;
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
import md from './plugin/md';
|
||||||
|
import docs from './plugin/docs';
|
||||||
|
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {import('vite').UserConfig}
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
// moment: 'moment/dist/moment.js',
|
||||||
|
vue: 'vue/dist/vue.esm-bundler.js',
|
||||||
|
'ant-design-vue': path.resolve(__dirname, './components'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
vueJsx({
|
||||||
|
// options are passed on to @vue/babel-plugin-jsx
|
||||||
|
mergeProps: false,
|
||||||
|
enableObjectSlots: false,
|
||||||
|
}),
|
||||||
|
docs(),
|
||||||
|
md(),
|
||||||
|
vue({
|
||||||
|
include: [/\.vue$/, /\.md$/],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
optimizeDeps: {
|
||||||
|
include: [
|
||||||
|
'fetch-jsonp',
|
||||||
|
'@ant-design/icons-vue',
|
||||||
|
'lodash-es',
|
||||||
|
'vue',
|
||||||
|
'vue-router',
|
||||||
|
'moment',
|
||||||
|
'async-validator',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
less: {
|
||||||
|
javascriptEnabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in new issue