docs(compile docs): compile docs

affects: he-tree-website

Author: phphe

packages/website/README.md

@@ -1,48 +1,7 @@
-## Structure
-
-refer https://miyauchi.dev/posts/vite-vue3-typescript#checking-template-statically-in-vti
-
-resolve markdown
-const md = fs
-.readFileSync(`./src/content/cmd-generators/${ctx.params.name}.md`)
-.toString()
-const html = marked(md)
-const $ = cheerio.load(html)
-const nodes = []
-const root = { children: nodes, depth: 0 }
-const parents = [root]
-$('body')
-    .children()
-    .each((i, el) => {
-      // make nodes nested
-      const node = {
-        tagName: el.tagName,
-        children: [],
-      }
-      const isParent = /^h\d$/.test(el.tagName)
-const depth = isParent && parseInt(el.tagName.substring(1))
-Object.assign(node, {
-isParent,
-depth,
-})
-if (!isParent || depth > parents[0].depth) {
-parents[0].children.push(node)
-} else {
-parents.shift()
-parents[0].children.push(node)
-}
-if (isParent) {
-parents.unshift(node)
-}
-// resolve node self content
-if (isParent) {
-node.text = $(el).text()
-        node.slug = strToURIComponent(node.text)
-      } else if (node.tagName === 'pre') {
-        node.isJSON = true
-        node.value = JSON.parse($(el).find('code').html())
-} else {
-node.html = $.html(el) // outerHTML
-}
-})
-ctx.body = JSON.stringify(nodes)
+## build and preprender
+```sh
+npm run compile-docs
+npm run build
+npm run serve
+npm run preprender
+```

packages/website/package.json

@@ -10,7 +10,8 @@
     "serve": "vite preview",
     "lint:script": "eslint --ext .ts,vue --ignore-path .gitignore .",
     "lint:style": "stylelint src/**/*.{css,scss,vue}",
-    "compile-docs": "ts-node scripts/compile-docs.ts"
+    "compile-docs": "ts-node scripts/compile-docs.ts",
+    "deploy": "sh deploy.sh"
   },
   "dependencies": {
     "@he-tree/vue3": "^1.2.5",
@@ -70,4 +71,4 @@
     "*.{css,scss,vue}": "stylelint --fix",
     "*": "prettier -w -u"
   }
-}
+}

packages/website/src/compiled-docs/0452ec218fa58e31b65e27668556ebf6.vue

@@ -39,7 +39,7 @@
 <p>我可以提供 he-tree 定制开发, 高级 Vue 组件定制, 或其他 Vue 相关开发. <Anchor :to="resolveHref('mailto:[email protected]?subject=&body=')">请联系我</Anchor>.</p>
 <vheading :level="2" id="联系方式">联系方式</vheading>
 <ul>
-<li>Email: <Anchor :to="resolveHref('mailto:&#x70;&#104;&#x70;&#x68;&#x65;&#x40;&#111;&#x75;&#116;&#108;&#111;&#x6f;&#107;&#x2e;&#99;&#111;&#x6d;')">&#x70;&#104;&#x70;&#x68;&#x65;&#x40;&#111;&#x75;&#116;&#108;&#111;&#x6f;&#107;&#x2e;&#99;&#111;&#x6d;</Anchor></li>
+<li>Email: <Anchor :to="resolveHref('mailto:&#x70;&#104;&#112;&#104;&#x65;&#x40;&#111;&#x75;&#116;&#x6c;&#111;&#x6f;&#107;&#46;&#x63;&#111;&#x6d;')">&#x70;&#104;&#112;&#104;&#x65;&#x40;&#111;&#x75;&#116;&#x6c;&#111;&#x6f;&#107;&#46;&#x63;&#111;&#x6d;</Anchor></li>
 </ul>
 
     </div>

packages/website/src/compiled-docs/6db004dbaedf4e5784f248bfbbf25c95.vue

@@ -45,7 +45,7 @@
 <p>I can work on the custom made of he-tree. Advanced Vue custom components. And other work about Vue. Please <Anchor :to="resolveHref('mailto:[email protected]?subject=&body=')">contact me</Anchor> by email.</p>
 <vheading :level="2" id="contact">Contact</vheading>
 <ul>
-<li>Email: <Anchor :to="resolveHref('mailto:&#112;&#x68;&#112;&#104;&#101;&#64;&#x6f;&#x75;&#116;&#x6c;&#111;&#x6f;&#x6b;&#x2e;&#x63;&#111;&#x6d;')">&#112;&#x68;&#112;&#104;&#101;&#64;&#x6f;&#x75;&#116;&#x6c;&#111;&#x6f;&#x6b;&#x2e;&#x63;&#111;&#x6d;</Anchor></li>
+<li>Email: <Anchor :to="resolveHref('mailto:&#112;&#104;&#112;&#104;&#101;&#x40;&#x6f;&#117;&#116;&#108;&#x6f;&#111;&#107;&#46;&#x63;&#x6f;&#109;')">&#112;&#104;&#112;&#104;&#101;&#x40;&#x6f;&#117;&#116;&#108;&#x6f;&#111;&#107;&#46;&#x63;&#x6f;&#109;</Anchor></li>
 </ul>
 
     </div>

packages/website/src/compiled-docs/8ad65299c634049f551a465a053f67bd.vue

@@ -149,6 +149,12 @@ import '@he-tree/vue3/dist/he-tree-vue3.css'
 <p>Use prop <code v-pre>rtl</code> to enable.</p>
 <vheading :level="2" id="virtualization">Virtualization</vheading>
 <p>Improve performance when there are a lot of nodes. Use prop <code v-pre>virtualization</code> to enable. Use prop <code v-pre>virtualizationPrerender</code> to define render length at start.</p>
+<p>Must add style <code v-pre>overflow:auto</code> for tree. And set height. The height can be fixed value. Use <code v-pre>max-height</code> or <code v-pre>display:flex</code> to set dynamic height also works.</p>
+<pre><code v-pre class="language-html">&lt;Draggable virtualization style=&quot;height:300px;overflow:auto&quot; /&gt;
+</code></pre>
+<p>You can use follow code update virtualization list manually:</p>
+<pre><code v-pre class="language-js">tree.$refs.virtualizationList.update()
+</code></pre>
 <vheading :level="2" id="draggable">Draggable</vheading>
 <pre><code v-pre class="language-vue">&lt;template&gt;
   &lt;Draggable :flatData=&quot;flatData&quot; idKey=&quot;id&quot; parentIdKey=&quot;pid&quot; /&gt;

packages/website/src/compiled-docs/b32937653ee2e0496387531df72863f0.vue

@@ -188,6 +188,7 @@
 }
 </code></pre>
 <p><strong><code v-pre>ondragend</code> 支持 promise, 但 <code v-pre>ondragstart</code> 不支持.</strong></p>
+<p><strong>执行<code v-pre>ondragend</code>时, 数据尚未更新.</strong></p>
 <vheading :level="4" id="afterplaceholdercreated">afterPlaceholderCreated</vheading>
 <pre><code v-pre class="language-ts">(placeholder: HTMLElement, store: Store3) =&gt; void
 </code></pre>
@@ -274,8 +275,12 @@ default: &quot;top_left_corner&quot;,
 <vheading :level="3" id="draggable-2">Draggable</vheading>
 <p>Draggable 组件的 Vue 实例(vm).</p>
 <vheading :level="3" id="eachdraggablefunc">eachDraggableFunc</vheading>
-<pre><code v-pre class="language-ts">;(node: Node | undefined, store: Store3, options: Options2, vm: Draggable) =&gt;
-  boolean | undefined
+<pre><code v-pre class="language-ts">type eachDraggableFunc = (
+  node: Node | undefined,
+  store: Store3,
+  options: Options2,
+  vm: Draggable
+) =&gt; boolean | undefined
 </code></pre>
 <vheading :level="3" id="positionmode">PositionMode</vheading>
 <pre><code v-pre class="language-ts">&#39;top_left_corner&#39; | &#39;mouse&#39;

packages/website/src/compiled-docs/bd5b80e6d4151126cf317aa95373f03c.vue

@@ -186,6 +186,7 @@
 }
 </code></pre>
 <p><strong><code v-pre>ondragend</code> supports promise, but <code v-pre>ondragstart</code> does not.</strong></p>
+<p><strong>The data is not updated in <code v-pre>ondragend</code>.</strong></p>
 <vheading :level="4" id="afterplaceholdercreated">afterPlaceholderCreated</vheading>
 <pre><code v-pre class="language-ts">(placeholder: HTMLElement, store: Store3) =&gt; void
 </code></pre>
@@ -272,8 +273,12 @@ default: &quot;top_left_corner&quot;,
 <vheading :level="3" id="draggable-2">Draggable</vheading>
 <p>The Vue instance(vm) of the Draggable component.</p>
 <vheading :level="3" id="eachdraggablefunc">eachDraggableFunc</vheading>
-<pre><code v-pre class="language-ts">;(node: Node | undefined, store: Store3, options: Options2, vm: Draggable) =&gt;
-  boolean | undefined
+<pre><code v-pre class="language-ts">type eachDraggableFunc = (
+  node: Node | undefined,
+  store: Store3,
+  options: Options2,
+  vm: Draggable
+) =&gt; boolean | undefined
 </code></pre>
 <vheading :level="3" id="positionmode">PositionMode</vheading>
 <pre><code v-pre class="language-ts">&#39;top_left_corner&#39; | &#39;mouse&#39;

packages/website/src/compiled-docs/c7967f78a598bb1d55c32377e6d33e2b.vue

@@ -149,6 +149,12 @@ import '@he-tree/vue3/dist/he-tree-vue3.css'
 <p>从右到左显示. 使用 prop <code v-pre>rtl</code> 控制.</p>
 <vheading :level="2" id="虚拟列表">虚拟列表</vheading>
 <p>此功能可以在有许多节点时提高渲染性能. 使用 prop <code v-pre>virtualization</code> 启用. 使用 prop <code v-pre>virtualizationPrerender</code> 设置开始时显示的节点数量.</p>
+<p>一定要给树添加样式<code v-pre>overflow:auto</code>, 并指定高度, 可以设置固定值, 也可以使用 max-height 或者 flex 动态设置高度.</p>
+<pre><code v-pre class="language-html">&lt;Draggable virtualization style=&quot;height:300px;overflow:auto&quot; /&gt;
+</code></pre>
+<p>使用以下代码手动更新虚拟列表:</p>
+<pre><code v-pre class="language-js">tree.$refs.virtualizationList.update()
+</code></pre>
 <vheading :level="2" id="拖拽">拖拽</vheading>
 <pre><code v-pre class="language-vue">&lt;template&gt;
   &lt;Draggable :flatData=&quot;flatData&quot; idKey=&quot;id&quot; parentIdKey=&quot;pid&quot; /&gt;

packages/website/src/compiled-docs/routes.ts

@@ -1 +1 @@
-export default [{"name":"6db004dbaedf4e5784f248bfbbf25c95","path":"/pro-plugin","meta":{"locale":"en","alternate":{"en":"/pro-plugin","zh":"/zh/pro-plugin"},"fromMarkdown":true},"component":() => import('./6db004dbaedf4e5784f248bfbbf25c95.vue')},{"name":"0452ec218fa58e31b65e27668556ebf6","path":"/zh/pro-plugin","meta":{"locale":"zh","alternate":{"en":"/pro-plugin","zh":"/zh/pro-plugin"},"fromMarkdown":true},"component":() => import('./0452ec218fa58e31b65e27668556ebf6.vue')},{"name":"bd5b80e6d4151126cf317aa95373f03c","path":"/v1/api","meta":{"locale":"en","alternate":{"en":"/v1/api","zh":"/zh/v1/api"},"fromMarkdown":true},"component":() => import('./bd5b80e6d4151126cf317aa95373f03c.vue')},{"name":"8ad65299c634049f551a465a053f67bd","path":"/v1/guide","meta":{"locale":"en","alternate":{"en":"/v1/guide","zh":"/zh/v1/guide"},"fromMarkdown":true},"component":() => import('./8ad65299c634049f551a465a053f67bd.vue')},{"name":"b32937653ee2e0496387531df72863f0","path":"/zh/v1/api","meta":{"locale":"zh","alternate":{"en":"/v1/api","zh":"/zh/v1/api"},"fromMarkdown":true},"component":() => import('./b32937653ee2e0496387531df72863f0.vue')},{"name":"c7967f78a598bb1d55c32377e6d33e2b","path":"/zh/v1/guide","meta":{"locale":"zh","alternate":{"en":"/v1/guide","zh":"/zh/v1/guide"},"fromMarkdown":true},"component":() => import('./c7967f78a598bb1d55c32377e6d33e2b.vue')}]
+export default [{"name":"0452ec218fa58e31b65e27668556ebf6","path":"/zh/pro-plugin","meta":{"locale":"zh","alternate":{"en":"/pro-plugin","zh":"/zh/pro-plugin"},"fromMarkdown":true},"component":() => import('./0452ec218fa58e31b65e27668556ebf6.vue')},{"name":"6db004dbaedf4e5784f248bfbbf25c95","path":"/pro-plugin","meta":{"locale":"en","alternate":{"en":"/pro-plugin","zh":"/zh/pro-plugin"},"fromMarkdown":true},"component":() => import('./6db004dbaedf4e5784f248bfbbf25c95.vue')},{"name":"b32937653ee2e0496387531df72863f0","path":"/zh/v1/api","meta":{"locale":"zh","alternate":{"en":"/v1/api","zh":"/zh/v1/api"},"fromMarkdown":true},"component":() => import('./b32937653ee2e0496387531df72863f0.vue')},{"name":"c7967f78a598bb1d55c32377e6d33e2b","path":"/zh/v1/guide","meta":{"locale":"zh","alternate":{"en":"/v1/guide","zh":"/zh/v1/guide"},"fromMarkdown":true},"component":() => import('./c7967f78a598bb1d55c32377e6d33e2b.vue')},{"name":"bd5b80e6d4151126cf317aa95373f03c","path":"/v1/api","meta":{"locale":"en","alternate":{"en":"/v1/api","zh":"/zh/v1/api"},"fromMarkdown":true},"component":() => import('./bd5b80e6d4151126cf317aa95373f03c.vue')},{"name":"8ad65299c634049f551a465a053f67bd","path":"/v1/guide","meta":{"locale":"en","alternate":{"en":"/v1/guide","zh":"/zh/v1/guide"},"fromMarkdown":true},"component":() => import('./8ad65299c634049f551a465a053f67bd.vue')}]