fix: import demo in root error

.gitignore

@@ -7,3 +7,4 @@
 dist
 node_modules
 TODOs.md
+.temp

bin/vitepress-fc.js

@@ -18,6 +18,7 @@ console.log(chalk.cyan(`vite v${require('vite/package.json').version}`))
 const command = argv._[0]
 const root = argv._[command ? 1 : 0]
 argv.root = path.join(root ?? argv.root ?? process.cwd(), TempFileName)
+console.log('root = ' + argv.root)
 
 async function run() {
   await genTemporary(argv)

docs/.vitepress/config.js

@@ -1,21 +1,22 @@
 module.exports = {
-  lang: 'en-US',
-  title: 'VitePress',
-  description: 'Vite & Vue powered static site generator.',
+  lang: 'zh-CN',
+  title: 'vitepress-for-component',
+  description: 'Fork自vitepress，针对组件开发做了一些功能增强',
 
   themeConfig: {
-    repo: 'vuejs/vitepress',
+    repo: 'vitepress-for-component',
     docsDir: 'docs',
 
     editLinks: true,
-    editLinkText: 'Edit this page on GitHub',
+    editLinkText: '在Github上编辑此页面',
 
     nav: [
-      { text: 'Guide', link: '/' },
-      { text: 'Config Reference', link: '/config/' },
+      { text: '指南', link: '/' },
+      { text: '配置项', link: '/config/' },
       {
-        text: 'Release Notes',
-        link: 'https://github.com/vuejs/vitepress/releases'
+        text: '更新日志',
+        link:
+          'https://github.com/dewfall123/vitepress-for-component/blob/master/CHANGELOG.md'
       }
     ],
 
@@ -30,11 +31,11 @@ module.exports = {
 function getGuideSidebar() {
   return [
     {
-      text: 'Introduction',
+      text: '介绍',
       children: [
-        { text: 'What is VitePress?', link: '/' },
-        { text: 'Getting Started', link: '/guide/getting-started' },
-        { text: 'Configuration', link: '/guide/configuration' },
+        { text: '介绍?', link: '/' },
+        { text: '快速上手', link: '/guide/getting-started' },
+        { text: '配置项', link: '/guide/configuration' },
         { text: 'Customization', link: '/guide/customization' },
         { text: 'Deploying', link: '/guide/deploy' }
       ]

docs/demo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <p>
+      <span style="padding: 0 16px 0 4px; font-size: 14px; color: #777"
+        >点击次数:</span
+      >
+      <span>{{ count }}</span>
+    </p>
+    <button @click="onClick">count++</button>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const count = ref(0)
+    function onClick() {
+      count.value++
+    }
+
+    return {
+      count,
+      onClick
+    }
+  }
+}
+</script>

docs/guide/configuration.md

@@ -1,23 +1,20 @@
 # Configuration
 
-Without any configuration, the page is pretty minimal, and the user has no way to navigate around the site. To customize your site, let’s first create a `.vitepress` directory inside your docs directory. This is where all VitePress-specific files will be placed. Your project structure is probably like this:
+在`VitePress`里，`.md`文件的路径决定它的路由。如果我们想把文档和 demo 放在一起，配置`alias`会很麻烦而且复杂。
 
-```bash
-.
-├─ docs
-│  ├─ .vitepress
-│  │  └─ config.js
-│  └─ index.md
-└─ package.json
-````
+`vitepress-for-componnet`提供了 root 外`.md`文件映射功能。
 
-The essential file for configuring a VitePress site is `.vuepress/config.js`, which should export a JavaScript object:
+假设文档 root 是`docs/`。我们有这样一个文件`packages\vhooks\src\useHover\index.zh-CN.md`。
 
-```js
-module.exports = {
-  title: 'Hello VitePress',
-  description: 'Just playing around.'
-}
 ```
+---
+map:
+  path: /hooks/use-hover
+---
 
-Check out the [Config Reference](/config/) for a full list of options.
+## useHover
+
+...
+```
+
+它实际会被映射成到`docs/zh/hooks/use-hover/index.md`。也就是说，我们可以把`.md`和源码放在一起，又不影响`vitepress`。

docs/index.md

@@ -1,52 +1,62 @@
-# What is VitePress?
+# vitepress-for-component
 
-::: warning WARNING
-VitePress is early WIP! Currently the focus is on making Vite stable and feature complete first. It is not recommended to use this for anything serious yet.
-:::
-
-VitePress is [VuePress](https://vuepress.vuejs.org/)' little brother, built on top of [Vite](https://github.com/vitejs/vite).
-
-## Motivation
-
-We love VuePress, but being built on top of Webpack, the time it takes to spin up the dev server for a simple doc site with a few pages is just becoming unbearable. Even HMR updates can take up to seconds to reflect in the browser!
+## vitepress-for-component 是什么?
 
-As a reference, the [Composition API RFC repo](https://github.com/vuejs/composition-api-rfc) is just two pages, but it takes 4 seconds to spin up the server and almost 2 seconds for any edit to reflect in the browser.
+Fork 自[`VitePress`](https://github.com/vuejs/vitepress)，针对**组件开发**场景做了一些功能增强和默认样式修改。
 
-Fundamentally, this is because VuePress is a Webpack app under the hood. Even with just two pages, it's a full on Webpack project (including all the theme source files) being compiled. It gets even worse when the project has many pages – every page must first be fully compiled before the server can even display anything!
-
-Incidentally, Vite solves these problems really well: nearly instant server start, an on-demand compilation that only compiles the page being served, and lightning-fast HMR. Plus, there are a few additional design issues I have noted in VuePress over time but never had the time to fix due to the amount of refactoring it would require.
-
-Now, with Vite and Vue 3, it is time to rethink what a "Vue-powered static site generator" can really be.
-
-## Improvements Over VuePress
+:::warning
+`vitepress-for-componnet`在`demo`组件设计和页面样式很大程度借鉴了[dumi](https://d.umijs.org/zh-CN/guide)。
+:::
 
-There're couple of things that are improved from VuePress.
+## 它做了哪些增强?
 
-### It Uses Vue 3
+### 1. 内置引入`Demo`组件
 
-Leverages Vue 3's improved template static analysis to stringify static content as much as possible. Static content is sent as string literals instead of JavaScript render function code – the JS payload is therefore *much* cheaper to parse, and hydration also becomes faster.
+我们可以在`.md`文件中这样来引入`demo`。
 
-Note the optimization is applied while still allowing the user to freely mix Vue components inside markdown content – the compiler does the static/dynamic separation for you automatically and you never need to think about it.
+```md
+<demo src="./demo.vue"
+  language="vue"
+  title="Demo演示"
+  desc="这是一个Demo渲染示例">
+</demo>
+```
 
-### It Uses Vite Under The Hood
+渲染效果如下
+<demo src="./demo.vue"
+  language="vue"
+  title="Demo演示"
+  desc="这是一个Demo渲染示例">
+</demo>
 
-- Faster dev server start
-- Faster hot updates
-- Faster build (uses Rollup internally)
+### 2. 像 dumi 一样的组织文件
 
-### Lighter Page Weight
+#### 源码与文档放在一起
 
-- Vue 3 tree-shaking + Rollup code splitting
-- Does not ship metadata for every page on every request. This decouples page weight from total number of pages. Only the current page's metadata is sent. Client side navigation fetches the new page's component and metadata together.
-- Does not use `vue-router` because the need of VitePress is very simple and specific - a simple custom router (under 200 LOC) is used instead.
-- (WIP) i18n locale data should also be fetched on demand.
+#### 多语言
 
-## Other Differences
+`VitePress`支持多语言需要使用如下的文件结构。
 
-VitePress is more opinionated and less configurable: VitePress aims to scale back the complexity in the current VuePress and restart from its minimalist roots.
+```
+docs
+├─ README.md
+├─ foo.md
+├─ nested
+│  └─ README.md
+└─ zh
+   ├─ README.md
+   ├─ foo.md
+   └─ nested
+      └─ README.md
+```
 
-VitePress is future oriented: VitePress only targets browsers that support native ES module imports. It encourages the use of native JavaScript without transpilation, and CSS variables for theming.
+在看了 [dumi](https://d.umijs.org/zh-CN/guide) 的多语言支持后，我们觉得这样的结构更易读，对比清晰。
 
-## Will This Become The Next VuePress in The Future?
+```
+.
+└── docs/
+    ├── index.en-US.md # 如果 en-US 为默认 locale，则 index.md 和 index.en-US.md 等价
+    ├── index.zh-CN.md
+```
 
-Probably not. It's currently under a different name so that we don't over commit to the compatibility with the current VuePress ecosystem (mostly themes and plugins). We'll see how close we can get without compromising the design goals listed above. But the overall idea is that VitePress will have a drastically more minimal theming API (preferring JavaScript APIs instead of file layout conventions) and likely no plugins (all customization is done in themes).
+### 3. 更合适的默认样式

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-for-component",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "",
   "main": "dist/node/index.js",
   "typings": "types/index.d.ts",
@@ -44,9 +44,9 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "release": "node scripts/release.js",
     "docs": "run-p dev docs-dev",
-    "docs-dev": "node ./bin/vitepress dev docs",
-    "docs-build": "yarn build && node ./bin/vitepress build docs",
-    "docs-serve": "yarn docs-build && node ./bin/vitepress serve --root docs"
+    "docs-dev": "node ./bin/vitepress-fc dev docs",
+    "docs-build": "yarn build && node ./bin/vitepress-fc build docs",
+    "docs-serve": "yarn docs-build && node ./bin/vitepress-fc serve --root docs"
   },
   "engines": {
     "node": ">=10.0.0"

src/client/theme-default/styles/layout.css

@@ -97,6 +97,7 @@ h3 {
 }
 
 h4 {
+  margin-top: 1rem;
   font-size: 1.15rem;
 }
 

src/client/theme-default/styles/markdown.css

@@ -26,10 +26,16 @@ h1 {
 
 h2 {
   font-size: 1.45rem;
-  font-weight: 500;
 }
 
 h3 {
   font-size: 1.25rem;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: 500;
 }

src/node/markdown/markdown.ts

@@ -53,6 +53,7 @@ export interface MarkdownRenderer {
   __data: MarkdownParsedData
   render: (src: string, env?: any) => { html: string; data: any }
   realPath?: string
+  urlPath?: string
 }
 
 export const createMarkdownRenderer = (

src/node/markdown/plugins/demo.ts

@@ -1,8 +1,8 @@
 import MarkdownIt from 'markdown-it'
 import { MarkdownParsedData } from '../markdown'
 import fs from 'fs'
-import path from 'path'
 import { highlight } from './highlight'
+import path from 'path'
 // import matter from 'gray-matter'
 
 // interface DemoProps {
@@ -34,9 +34,16 @@ export const demoPlugin = (md: MarkdownIt) => {
       const componentName = `demo${index++}`
       let language = (content.match(/language=("|')(.*)('|")/) || [])[2] ?? ''
       const src = (content.match(/src=("|')(\S+)('|")/) || [])[2] ?? ''
-      const realPath = (md as any).realPath
-      const srcFilePath = path.join(realPath, '../', src)
-      const importPath = '/@' + srcFilePath.split(path.sep).join('/')
+
+      const { realPath, urlPath } = md as any
+      const srcFilePath = path.join(realPath ?? urlPath, '../', src)
+      let importPath = '/@' + srcFilePath.split(path.sep).join('/')
+      if (realPath) {
+        importPath = '/@' + srcFilePath.split(path.sep).join('/')
+      } else {
+        importPath = src
+      }
+
       if (!src || !fs.existsSync(srcFilePath)) {
         const warningMsg = `${srcFilePath} does not exist!`
         console.warn(`[vitepress]: ${warningMsg}`)
@@ -47,6 +54,7 @@ export const demoPlugin = (md: MarkdownIt) => {
         language = (importPath.match(/\.(.+)$/) || [])[1] ?? 'vue'
       }
 
+      // TODO cache it
       const codeStr = fs.readFileSync(srcFilePath).toString()
       // const { content: codeContent, data: frontmatter } = matter(codeStr)
       const htmlStr = encodeURIComponent(highlight(codeStr, language))

src/node/markdownToVue.ts

@@ -29,7 +29,9 @@ export function createMarkdownToVueRenderFn(
     lastUpdated: number,
     injectData = true
   ) => {
-    file = path.relative(root, file)
+    const fileFullPath = file
+    file = path.relative(root, fileFullPath)
+
     const cached = cache.get(src)
     if (cached) {
       debug(`[cache hit] ${file}`)
@@ -39,6 +41,7 @@ export function createMarkdownToVueRenderFn(
 
     const { content, data: frontmatter } = matter(src)
     md.realPath = frontmatter?.map?.realPath
+    md.urlPath = fileFullPath
     const { html, data } = md.render(content)
 
     // TODO validate data.links?
@@ -68,8 +71,6 @@ export function createMarkdownToVueRenderFn(
     debug(`[render] ${file} in ${Date.now() - start}ms.`)
 
     const result = { vueSrc, pageData }
-    // console.log(file + '\n')
-    // console.log(vueSrc)
     cache.set(src, result)
     return result
   }

src/node/temporary/copy.ts

@@ -7,7 +7,7 @@ import { basename, extname, join } from 'path'
 import { TempFileName } from './genTemp'
 import chokidar from 'chokidar'
 
-// copy userConfig.includes (default to ['src']) *.md to .temp
+// copy userConfig.srcIncludes (default to ['src']) *.md to .temp
 // dest file is frontmatter.map?.path or real path at .temp
 export async function copyAndWatchSrc(
   root: string,