change pkg

2021-07-09 01:41:03 +08:00
commit 968a072537
115 changed files with 19556 additions and 0 deletions
--- a/packages/dooringx-doc/src/api/dd.md
+++ b/packages/dooringx-doc/src/api/dd.md
@@ -0,0 +1,15 @@
+---
+title: xcxzc
+sTitle: vc
+order: 4
+---
+
+## dsas
+
+saff
+sa
+d
+ad
+sa
+d
+fsad
--- a/packages/dooringx-doc/src/app.css
+++ b/packages/dooringx-doc/src/app.css
@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+	line-height: 1.15; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+	 ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+	margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+	display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+	font-size: 2em;
+	margin: 0.67em 0;
+}
+
+/* Grouping content
+	 ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+	box-sizing: content-box; /* 1 */
+	height: 0; /* 1 */
+	overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+	 ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+	background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+	border-bottom: none; /* 1 */
+	text-decoration: underline; /* 2 */
+	text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+	font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/* Embedded content
+	 ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+	border-style: none;
+}
+
+/* Forms
+	 ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+	/* 1 */
+	overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+	/* 1 */
+	text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	-webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+	padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+	box-sizing: border-box; /* 1 */
+	color: inherit; /* 2 */
+	display: table; /* 1 */
+	max-width: 100%; /* 1 */
+	padding: 0; /* 3 */
+	white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+	overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type='checkbox'],
+[type='radio'] {
+	box-sizing: border-box; /* 1 */
+	padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type='search'] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type='search']::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/* Interactive
+	 ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+	display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+	display: list-item;
+}
+
+/* Misc
+	 ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+	display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+	display: none;
+}
--- a/packages/dooringx-doc/src/app.html
+++ b/packages/dooringx-doc/src/app.html
@@ -0,0 +1,20 @@
+<!--
+ * @Author: yehuozhili
+ * @Date: 2021-06-29 11:14:15
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-01 22:13:09
+ * @FilePath: \my-app\src\app.html
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>
--- a/packages/dooringx-doc/src/docs/1.1.md
+++ b/packages/dooringx-doc/src/docs/1.1.md
@@ -0,0 +1,9 @@
+---
+title: dooringx-lib 是什么？
+sTitle: 介绍
+order: 1
+---
+
+dooringx-lib 是 dooringx 的基座，是移除了 dooringx 插件的无代码低代码框架。
+
+dooringx-lib 提供自己的一套数据流事件机制以及弹窗等解决方案，可以让你更快地自己定制开发无代码或低代码平台。
--- a/packages/dooringx-doc/src/docs/1.2.md
+++ b/packages/dooringx-doc/src/docs/1.2.md
@@ -0,0 +1,13 @@
+---
+title: dooringx-lib 如何工作？
+sTitle: 介绍
+order: 2
+---
+
+dooringx-lib 在载入后会进行实例化，如果有插件需要传递给 config。
+
+开发者通过调用 api 来获取想要的数据，来开发出自己想要的功能。
+
+对于概念部分请参考 dooringx-lib 基础，对于 api 部分请参考 api。
+
+建议先学习 dooringx-lib 基础和 dooringx-lib 插件开发注意事项再去看 api
--- a/packages/dooringx-doc/src/docs/1.3.md
+++ b/packages/dooringx-doc/src/docs/1.3.md
@@ -0,0 +1,15 @@
+---
+title: 快速上手
+sTitle: 介绍
+order: 3
+---
+
+### 安装
+
+使用 npm 或者 yarn 安装
+
+```bash
+npm i dooringx-lib
+```
+
+有关 api 部分请参考 api
--- a/packages/dooringx-doc/src/docs/2.1.md
+++ b/packages/dooringx-doc/src/docs/2.1.md
@@ -0,0 +1,17 @@
+---
+title: store
+sTitle: dooringx-lib基础
+order: 3
+---
+
+store 类似于 redux 的概念，它内部实现了 redo、undo、发布订阅、置换数据、强制刷新等功能。
+
+store 可以在 config 中获取。
+
+在最开始时，需要通过 useStoreState 与 react 结合，此时可以在任意位置使用 store.forceUpdate 强刷，也可以使用 state 获取 store 中的数据。
+
+store 的主要数据是保存着每次修改 jsonSchema 队列。
+
+如果你需要更新数据，在深拷贝后使用 setData 方法进行更新。
+
+如果你需要更新时不记录在 redo 或 undo 上留下记录，那么请操作队列删除其中保存内容即可。
--- a/packages/dooringx-doc/src/docs/2.2.md
+++ b/packages/dooringx-doc/src/docs/2.2.md
@@ -0,0 +1,5 @@
+---
+title: functionCenter
+sTitle: dooringx-lib基础
+order: 3
+---
--- a/packages/dooringx-doc/src/global.d.ts
+++ b/packages/dooringx-doc/src/global.d.ts
@@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />
--- a/packages/dooringx-doc/src/hooks.ts
+++ b/packages/dooringx-doc/src/hooks.ts
@@ -0,0 +1,43 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-06-29 11:14:15
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-01 10:13:37
+ * @FilePath: \my-app\src\hooks.ts
+ */
+import cookie from 'cookie';
+import { v4 as uuid } from '@lukeed/uuid';
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ request, resolve }) => {
+	const cookies = cookie.parse(request.headers.cookie || '');
+	request.locals.userid = cookies.userid || uuid();
+	// TODO https://github.com/sveltejs/kit/issues/1046
+	if (request.query.has('_method')) {
+		request.method = request.query.get('_method').toUpperCase();
+	}
+
+	const response = await resolve(request);
+
+	if (!cookies.userid) {
+		// if this is the first time the user has visited this app,
+		// set a cookie so that we recognise them when they return
+		response.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`;
+	}
+
+	return response;
+};
+/** @type {import('@sveltejs/kit').ServerFetch} */
+export async function serverFetch(request) {
+	/*
+	if (request.url.startsWith('https://api.yourapp.com/')) {
+	  // clone the original request, but change the URL
+	  request = new Request(
+		request.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'),
+		request
+	  );
+	}
+	*/
+
+	return fetch(request);
+}
--- a/packages/dooringx-doc/src/lib/Button/index.svelte
+++ b/packages/dooringx-doc/src/lib/Button/index.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let href = '';
+	export let color = '#4d5164';
+	let backgroundColor = 'white';
+	export let style = '';
+	export let onClick = () => {};
+</script>
+
+<button
+	class="yh-btn"
+	style={`color: ${color} ; background-color:${backgroundColor};${style} `}
+	on:click={() => {
+		if (href !== '') {
+			location.href = href;
+		}
+		onClick();
+	}}
+>
+	<slot />
+</button>
+
+<style lang="scss">
+	.yh-btn {
+		border: none;
+		transition: all 0.3s linear;
+		padding: 5px 20px;
+		&:active,
+		&:hover,
+		&:focus {
+			border: none;
+			outline-width: 0;
+		}
+		&:hover {
+			cursor: pointer;
+		}
+	}
+</style>
--- a/packages/dooringx-doc/src/lib/DocRender/index.svelte
+++ b/packages/dooringx-doc/src/lib/DocRender/index.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+	import type { MarkDownItemProps } from 'src/routes/docs/_api';
+	import './prism.css';
+	export let sections: Map<string, MarkDownItemProps[]>;
+	let arr = [];
+	$: arr = Array.from(sections.keys());
+	export let active = '';
+</script>
+
+<div style="display: flex;">
+	<div class="sidebar">
+		{#each arr as stitle}
+			{#if stitle !== 'default'}
+				<div
+					class={`stitle ahref fbold ${active === stitle ? 'active' : ''}`}
+					style="cursor: pointer;"
+					title={stitle}
+					on:click={() => {
+						location.href = `#${stitle}`;
+						active = stitle;
+					}}
+				>
+					{@html stitle}
+				</div>
+				{#each sections.get(stitle) as section}
+					<div class="title-item" style="cursor: pointer;">
+						<span
+							class={`ahref  ${active === section.metadata.title ? 'active' : ''}`}
+							on:click={() => {
+								location.href = `#${section.slug}`;
+								active = section.metadata.title;
+							}}
+							title={section.metadata.title}
+						>
+							{@html section.metadata.title}
+						</span>
+					</div>
+				{/each}
+			{/if}
+			{#if stitle === 'default'}
+				{#each sections.get(stitle) as section}
+					<!-- 没有主标题则二级变一级 -->
+					<div class="stitle fbold" style="cursor: pointer;">
+						<span
+							class={`ahref  ${active === section.metadata.title ? 'active' : ''}`}
+							on:click={() => {
+								location.href = `#${section.slug}`;
+								active = section.metadata.title;
+							}}
+							title={section.metadata.title}
+						>
+							{@html section.metadata.title}
+						</span>
+					</div>
+				{/each}
+			{/if}
+		{/each}
+	</div>
+	<div class="markdown-wrapper">
+		{#each arr as stitle}
+			{#if stitle !== 'default'}
+				<h1 class="stitle-content" id={stitle}>
+					{@html stitle}
+				</h1>
+				<div class="yh-interval-s" />
+			{/if}
+			{#each sections.get(stitle) as section}
+				<section data-id={section.slug}>
+					<h2>
+						<span class="offset-anchor" id={section.slug} />
+						{@html section.metadata.title}
+					</h2>
+
+					{@html section.html}
+				</section>
+				<div class="yh-interval" />
+			{/each}
+		{/each}
+	</div>
+</div>
+
+<style lang="scss">
+	.yh-interval-s {
+		width: 100%;
+		padding: 2px;
+	}
+	.yh-interval {
+		width: 100%;
+		padding: 10px;
+	}
+	.markdown-wrapper {
+		height: calc(100vh - 40px);
+		overflow: auto;
+		width: 100%;
+		padding: 20px;
+		box-sizing: border-box;
+	}
+	.fbold {
+		font-weight: bold;
+	}
+	.sidebar {
+		padding: 20px;
+		overflow: auto;
+		height: calc(100vh - 40px);
+		border-right: 1px solid #eee;
+		width: 300px;
+		box-sizing: border-box;
+		font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
+			Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji,
+			Segoe UI Emoji, Segoe UI Symbol;
+		.ahref {
+			text-decoration: none;
+			color: #717484;
+			&:hover {
+				color: #4569d4;
+			}
+			&:visited,
+			&:link,
+			&:active {
+				color: #717484;
+			}
+		}
+		.stitle {
+			margin: 20px 0;
+		}
+		.title-item {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			margin: 20px 0 20px 20px;
+
+			& ::selection {
+				cursor: pointer;
+			}
+		}
+		.active {
+			color: #4569d4;
+		}
+	}
+	section :global(blockquote) {
+		color: hsl(204, 100%, 50%);
+		border: 2px solid var(--flash);
+	}
+	section :global(blockquote) :global(code) {
+		background: hsl(204, 100%, 95%) !important;
+		color: hsl(204, 100%, 50%);
+	}
+
+	::-webkit-scrollbar {
+		width: 5px; /*对垂直流动条有效*/
+		height: 5px; /*对水平流动条有效*/
+	}
+
+	/*定义滚动条的轨道颜色、内阴影及圆角*/
+	::-webkit-scrollbar-track {
+		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+		background-color: #eee;
+		border-radius: 3px;
+	}
+
+	/*定义滑块颜色、内阴影及圆角*/
+	::-webkit-scrollbar-thumb {
+		border-radius: 7px;
+		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+		background-color: #444444;
+	}
+
+	/*定义两端按钮的样式*/
+	::-webkit-scrollbar-button {
+		background-color: #b9c6d2;
+	}
+
+	/*定义右下角汇合处的样式*/
+	::-webkit-scrollbar-corner {
+		background: #b9c6d2;
+	}
+</style>
--- a/packages/dooringx-doc/src/lib/DocRender/prism.css
+++ b/packages/dooringx-doc/src/lib/DocRender/prism.css
@@ -0,0 +1,120 @@
+/*
+-----------------------------------------------
+	syntax-highlighting [prism]
+-----------------------------------------------
+*/
+
+/*	colors --------------------------------- */
+pre[class*='language-'] {
+	--background: var(--back-light);
+	--base: #545454;
+	--comment: #696969;
+	--keyword: #007f8a;
+	--function: #bb5525;
+	--string: #856e3d;
+	--number: #008000;
+	--tags: var(--function);
+	--important: var(--string);
+}
+
+/*	type-base ------------------------------ */
+code[class*='language-'],
+pre[class*='language-'] {
+	background: none;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	font: 300 var(--code-fs) / 1.7 var(--font-mono);
+	color: var(--base);
+	tab-size: 2;
+	-moz-tab-size: 2;
+	-webkit-hyphens: none;
+	hyphens: none;
+}
+
+/*	code-blocks ---------------------------- */
+pre[class*='language-'] {
+	overflow: auto;
+	padding: 1.5rem 2rem;
+	margin: 0.8rem 0 2.4rem;
+	/* max-width: var(--code-w); */
+	border-radius: var(--border-r);
+	box-shadow: 1px 1px 1px rgba(68, 68, 68, 0.12) inset;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+	background: var(--background);
+}
+
+/*	tokens --------------------------------- */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: var(--comment);
+}
+
+.token.punctuation {
+	color: var(--base);
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: var(--tags);
+}
+
+.token.boolean,
+.token.number {
+	color: var(--number);
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: var(--string);
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: var(--base);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: var(--function);
+}
+
+.token.keyword {
+	color: var(--keyword);
+}
+
+.token.regex,
+.token.important {
+	color: var(--important);
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+.token.entity {
+	cursor: help;
+}
--- a/packages/dooringx-doc/src/lib/Header/index.svelte
+++ b/packages/dooringx-doc/src/lib/Header/index.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { base } from '$app/paths';
+	import Button from '../Button/index.svelte';
+	import Switch from '../Switch/index.svelte';
+	import logo from './svelte-logo.svg';
+	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	const lang = getContext<Writable<string>>('lang');
+	let checked = true;
+	lang.subscribe((value) => {
+		value === 'cn' ? (checked = true) : (checked = false);
+	});
+	const home = base + '/';
+	const docs = base + '/docs';
+	const api = base + '/api';
+</script>
+
+<header>
+	<div class="corner">
+		<img src={logo} alt="SvelteKit" />
+	</div>
+
+	<nav style="width: 100%;">
+		<div class="nav-item-wrapper">
+			<div class:active={$page.path === '/'}>
+				<Button href={home} color={$page.path === '/' ? '#4569d4' : '#4d5164'}>首页</Button>
+			</div>
+			<div class:active={$page.path === '/docs'}>
+				<Button href={docs} color={$page.path === '/docs' ? '#4569d4' : '#4d5164'}>文档</Button>
+			</div>
+			<div class:active={$page.path === '/api'}>
+				<Button href={api} color={$page.path === '/api' ? '#4569d4' : '#4d5164'}>API</Button>
+			</div>
+			<div class:active={$page.path === '/about'}>
+				<Button>Github</Button>
+			</div>
+
+			<Switch
+				{checked}
+				onChange={() => {
+					lang.update((pre) => {
+						return pre === 'cn' ? 'en' : 'cn';
+					});
+				}}
+			/>
+		</div>
+	</nav>
+</header>
+
+<style lang="scss">
+	$height: 40px;
+	header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
+			Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji,
+			Segoe UI Emoji, Segoe UI Symbol;
+		border-bottom: 1px solid #e2e2e2;
+	}
+	.active {
+		color: #4569d4;
+	}
+	.corner {
+		height: $height;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-left: 20px;
+		img {
+			width: $height - 5px;
+			height: $height - 5px;
+		}
+	}
+	.nav-item-wrapper {
+		height: $height;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		:nth-last-child(1) {
+			margin-right: 20px;
+		}
+	}
+</style>
--- a/packages/dooringx-doc/src/lib/Header/svelte-logo.svg
+++ b/packages/dooringx-doc/src/lib/Header/svelte-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>
--- a/packages/dooringx-doc/src/lib/Icon/index.svelte
+++ b/packages/dooringx-doc/src/lib/Icon/index.svelte
@@ -0,0 +1,32 @@
+<!--
+-----------------------------------------------
+	svg icon
+	- https://github.com/jacobmischka/svelte-feather-icon
+	- https://feathericons.com/
+-----------------------------------------------
+-->
+<script>
+	export let name;
+	export let size = 20;
+</script>
+
+<svg class="icon" width={size} height={size}>
+	<use xlink:href="#{name}" />
+</svg>
+
+<style>
+	.icon {
+		position: relative;
+		overflow: hidden;
+		vertical-align: middle;
+		-o-object-fit: contain;
+		object-fit: contain;
+		-webkit-transform-origin: center center;
+		transform-origin: center center;
+		stroke: currentColor;
+		stroke-width: 2;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		fill: none;
+	}
+</style>
--- a/packages/dooringx-doc/src/lib/Icons/index.svelte
+++ b/packages/dooringx-doc/src/lib/Icons/index.svelte
@@ -0,0 +1,123 @@
+<div style="display: none">
+	<!-- wrapper div allows use of innerHTML -->
+	<svg>
+		<symbol id="arrow-left" class="icon" viewBox="0 0 24 24">
+			<line x1="19" y1="12" x2="5" y2="12" />
+			<polyline points="12 19 5 12 12 5" />
+		</symbol>
+
+		<symbol id="arrow-right" class="icon" viewBox="0 0 24 24">
+			<line x1="5" y1="12" x2="19" y2="12" />
+			<polyline points="12 5 19 12 12 19" />
+		</symbol>
+
+		<symbol id="arrow-up" class="icon" viewBox="0 0 24 24">
+			<line x1="12" y1="19" x2="12" y2="5" />
+			<polyline points="5 12 12 5 19 12" />
+		</symbol>
+
+		<symbol id="arrow-down" class="icon" viewBox="0 0 24 24">
+			<line x1="12" y1="5" x2="12" y2="19" />
+			<polyline points="19 12 12 19 5 12" />
+		</symbol>
+
+		<symbol id="check" class="icon" viewBox="0 0 24 24">
+			<polyline points="20 6 9 17 4 12" />
+		</symbol>
+
+		<symbol id="close" class="icon" viewBox="0 0 24 24">
+			<line x1="18" y1="6" x2="6" y2="18" />
+			<line x1="6" y1="6" x2="18" y2="18" />
+		</symbol>
+
+		<symbol id="download" class="icon" viewBox="0 0 24 24">
+			<path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15" />
+			<polyline points="7 10 12 15 17 10" />
+			<line x1="12" y1="15" x2="12" y2="3" />
+		</symbol>
+
+		<symbol id="edit" class="icon" viewBox="0 0 24 24">
+			<path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34" />
+			<polygon points="18 2 22 6 12 16 8 16 8 12 18 2" />
+		</symbol>
+
+		<symbol id="github" class="icon" viewBox="0 0 24 24">
+			<path
+				d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+			/>
+		</symbol>
+
+		<symbol id="git-branch" class="icon" viewBox="0 0 24 24">
+			<line x1="6" y1="3" x2="6" y2="15" />
+			<circle cx="18" cy="6" r="3" />
+			<circle cx="6" cy="18" r="3" />
+			<path d="M18 9a9 9 0 0 1-9 9" />
+		</symbol>
+
+		<symbol id="log-in" class="icon" viewBox="0 0 24 24">
+			<path d="M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15" />
+			<polyline points="10 17 15 12 10 7" />
+			<line x1="15" y1="12" x2="3" y2="12" />
+		</symbol>
+
+		<symbol id="maximize" class="icon" viewBox="0 0 24 24">
+			<path
+				d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
+			/>
+		</symbol>
+
+		<symbol id="maximize-2" class="icon" viewBox="0 0 24 24">
+			<polyline points="15 3 21 3 21 9" />
+			<polyline points="9 21 3 21 3 15" />
+			<line x1="21" y1="3" x2="14" y2="10" />
+			<line x1="3" y1="21" x2="10" y2="14" />
+		</symbol>
+
+		<symbol id="menu" class="icon" viewBox="0 0 24 24">
+			<line x1="3" y1="12" x2="21" y2="12" />
+			<line x1="3" y1="6" x2="21" y2="6" />
+			<line x1="3" y1="18" x2="21" y2="18" />
+		</symbol>
+
+		<symbol id="message-square" class="icon" viewBox="0 0 24 24">
+			<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+		</symbol>
+
+		<symbol id="minus" class="icon" viewBox="0 0 24 24">
+			<line x1="5" y1="12" x2="19" y2="12" />
+		</symbol>
+
+		<symbol id="plus" class="icon" viewBox="0 0 24 24">
+			<line x1="12" y1="5" x2="12" y2="19" />
+			<line x1="5" y1="12" x2="19" y2="12" />
+		</symbol>
+
+		<symbol id="save" class="icon" viewBox="0 0 24 24">
+			<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+			<polyline points="17 21 17 13 7 13 7 21" />
+			<polyline points="7 3 7 8 15 8" />
+		</symbol>
+
+		<symbol id="link" class="icon" viewBox="0 0 24 24">
+			<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17" />
+			<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17" />
+			<path d="M7,12L17,12" />
+		</symbol>
+
+		<symbol id="chevron" class="icon" viewBox="0 0 24 24">
+			<path d="M2,7 L12,17 L20,7" />
+		</symbol>
+
+		<symbol id="404" class="icon" viewBox="0 0 128 128">
+			<path
+				d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 01-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 012.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 00-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 00-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 01-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 01-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 01-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 00.665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"
+			/>
+		</symbol>
+		<symbol id="user" class="icon" viewBox="0 0 130 130">
+			<path
+				d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z"
+				stroke="#979797"
+			/>
+		</symbol>
+	</svg>
+</div>
--- a/packages/dooringx-doc/src/lib/Switch/index.svelte
+++ b/packages/dooringx-doc/src/lib/Switch/index.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	export let checked = true;
+	export let disabled = false;
+	export let onChange = () => {
+		checked = !checked;
+	};
+	export let unCheckText = 'EN';
+	export let checkText = '中文';
+</script>
+
+<label class="yh-switch-label">
+	<input
+		class="yh-swtich-input"
+		type="checkbox"
+		{checked}
+		{disabled}
+		on:change={() => {
+			onChange();
+		}}
+	/>
+	<span class={`yh-switch-sp1`}>
+		{#if !checked}
+			<span class="yh-switch-sp1-uncheck">
+				{unCheckText}
+			</span>
+		{:else}
+			<span class="yh-switch-sp1-check">
+				{checkText}
+			</span>
+		{/if}
+	</span>
+
+	<span class={`yh-switch-sp2 ${checked ? 'right' : ''}`} />
+</label>
+
+<style lang="scss">
+	.yh-switch-label {
+		height: 22.5px;
+		width: 60px;
+		position: relative;
+		cursor: pointer;
+		display: inline-block;
+		margin: 0 10px;
+	}
+	.yh-swtich-input {
+		opacity: 0;
+	}
+	.yh-switch-sp1 {
+		background: #fff;
+		box-shadow: inset 2px 2px 4px #d9d9d9, inset -2px -2px 4px #fff, 2px 2px 4px #d9d9d9;
+		color: #595959;
+		height: 100%;
+		left: 0;
+		padding: 1px;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		border-radius: 60px;
+		&-uncheck {
+			font-size: 10px;
+			top: 7px;
+			right: 10px;
+			position: absolute;
+		}
+		&-check {
+			font-size: 10px;
+			left: 10px;
+			top: 7px;
+			position: absolute;
+		}
+	}
+
+	.yh-switch-sp2 {
+		height: 22.5px;
+		width: 22.5px;
+		background: #fff;
+		border: none;
+		box-shadow: 2px 2px 4px #d9d9d9;
+		text-shadow: 1px 1px 4px #d9d9d9, -1px -1px 4px #fff;
+		border-radius: 50%;
+		display: inline-block;
+		left: 0;
+		position: absolute;
+		transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+		&.right {
+			left: calc(100% - 22.5px);
+		}
+	}
+</style>
--- a/packages/dooringx-doc/src/lib/form.ts
+++ b/packages/dooringx-doc/src/lib/form.ts
@@ -0,0 +1,60 @@
+// this action (https://svelte.dev/tutorial/actions) allows us to
+// progressively enhance a <form> that already works without JS
+export function enhance(
+	form: HTMLFormElement,
+	{
+		pending,
+		error,
+		result,
+	}: {
+		pending?: (data: FormData, form: HTMLFormElement) => void;
+		error?: (res: Response, error: Error, form: HTMLFormElement) => void;
+		result: (res: Response, form: HTMLFormElement) => void;
+	}
+) {
+	let current_token: {};
+
+	async function handle_submit(e: Event) {
+		const token = (current_token = {});
+
+		e.preventDefault();
+
+		const body = new FormData(form);
+
+		if (pending) pending(body, form);
+
+		try {
+			const res = await fetch(form.action, {
+				method: form.method,
+				headers: {
+					accept: 'application/json',
+				},
+				body,
+			});
+
+			if (token !== current_token) return;
+
+			if (res.ok) {
+				result(res, form);
+			} else if (error) {
+				error(res, null, form);
+			} else {
+				console.error(await res.text());
+			}
+		} catch (e) {
+			if (error) {
+				error(null, e, form);
+			} else {
+				throw e;
+			}
+		}
+	}
+
+	form.addEventListener('submit', handle_submit);
+
+	return {
+		destroy() {
+			form.removeEventListener('submit', handle_submit);
+		},
+	};
+}
--- a/packages/dooringx-doc/src/lib/types.d.ts
+++ b/packages/dooringx-doc/src/lib/types.d.ts
@@ -0,0 +1,7 @@
+/**
+ * Can be made globally available by placing this
+ * inside `global.d.ts` and removing `export` keyword
+ */
+export interface Locals {
+	userid: string;
+}
--- a/packages/dooringx-doc/src/routes/__layout.svelte
+++ b/packages/dooringx-doc/src/routes/__layout.svelte
@@ -0,0 +1,39 @@
+<script context="module">
+	import { browser, dev } from '$app/env';
+	// we don't need any JS on this page, though we'll load
+	// it in dev so that we get hot module replacement...
+	export const hydrate = dev;
+
+	// ...but if the client-side router is already loaded
+	// (i.e. we came here from elsewhere in the app), use it
+	export const router = browser;
+
+	// since there's no dynamic data here, we can prerender
+	// it so that it gets served as a static asset in prod
+	export const prerender = true;
+</script>
+
+<script lang="ts">
+	import Header from '$lib/Header/index.svelte';
+	import '../app.css';
+	import { setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+	const lang = writable('cn');
+
+	setContext('lang', lang);
+</script>
+
+<Header />
+<main>
+	<slot />
+</main>
+
+<style lang="scss">
+	main {
+		position: relative;
+		height: calc(100vh - 41px);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+</style>
--- a/packages/dooringx-doc/src/routes/about.svelte
+++ b/packages/dooringx-doc/src/routes/about.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Icon from '$lib/Icon/index.svelte';
+	import Icons from '$lib/Icons/index.svelte';
+</script>
+
+<svelte:head>
+	<title>About</title>
+</svelte:head>
+
+<Icons />
+
+<div class="content">
+	<h1>About this app</h1>
+	<Icon name="arrow-left" />
+	<Icon name="arrow-right" />
+
+	<Icon name="arrow-up" />
+	<Icon name="arrow-down" />
+	<Icon name="check" />
+	<Icon name="close" />
+	<Icon name="download" />
+	<Icon name="edit" />
+	<Icon name="github" />
+	<Icon name="git-branch" />
+	<Icon name="log-in" />
+	<Icon name="maximize" />
+	<Icon name="maximize-2" />
+	<Icon name="menu" />
+	<Icon name="message-square" />
+	<Icon name="minus" />
+	<Icon name="plus" />
+	<Icon name="save" />
+	<Icon name="link" />
+	<Icon name="chevron" />
+	<Icon name="404" />
+	<Icon name="user" />
+</div>
+
+<style>
+	.content {
+		width: 100%;
+		max-width: var(--column-width);
+		margin: var(--column-margin-top) auto 0 auto;
+	}
+</style>
--- a/packages/dooringx-doc/src/routes/api/index.json.ts
+++ b/packages/dooringx-doc/src/routes/api/index.json.ts
@@ -0,0 +1,17 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-06 20:19:21
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-06 20:20:07
+ * @FilePath: \my-app\src\routes\api\index.json.ts
+ */
+// 必须建立json否则不生成json文件
+import type { RequestHandler } from '@sveltejs/kit';
+import { api } from '../docs/_api';
+
+export const get: RequestHandler = async (request) => {
+	const param = request.query;
+	const name = param.get('name');
+	const response = await api(name);
+	return response;
+};
--- a/packages/dooringx-doc/src/routes/api/index.svelte
+++ b/packages/dooringx-doc/src/routes/api/index.svelte
@@ -0,0 +1,64 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	import type { MarkDownItemProps } from '../docs/_api';
+	import { base } from '$app/paths';
+	export const load: Load = async ({ fetch }) => {
+		const path = `${base}/api.json?name=api`;
+		const res = await fetch(path);
+		if (res.ok) {
+			const files: MarkDownItemProps[] = await res.json();
+			return {
+				props: { files: files }
+			};
+		}
+		const { message } = await res.json();
+
+		return {
+			error: new Error(message)
+		};
+	};
+</script>
+
+<script lang="ts">
+	import DocRender from '$lib/DocRender/index.svelte';
+	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	export let files: MarkDownItemProps[];
+	const lang = getContext<Writable<string>>('lang');
+	let sections = new Map<string, MarkDownItemProps[]>();
+	lang.subscribe((la) => {
+		sections = new Map<string, MarkDownItemProps[]>();
+		let tmp = files.filter((v) => {
+			const name = v.file;
+			const sp = name.split('.');
+			if (Array.isArray(sp) && sp.length > 1 && sp[sp.length - 2] === 'EN') {
+				return la === 'en';
+			} else {
+				return la === 'cn';
+			}
+		});
+		tmp.forEach((v) => {
+			const stitle = v.sTitle || 'default';
+			const value = sections.get(stitle);
+			if (value) {
+				value.push(v);
+			} else {
+				sections.set(stitle, [v]);
+			}
+		});
+	});
+
+	let active = '';
+</script>
+
+<svelte:head>
+	<title>API Docs • Svelte</title>
+	<meta name="twitter:title" content="Svelte API docs" />
+	<meta name="twitter:description" content="Cybernetically enhanced web apps" />
+	<meta name="Description" content="Cybernetically enhanced web apps" />
+</svelte:head>
+
+<DocRender {active} {sections} />
+
+<style lang="scss">
+</style>
--- a/packages/dooringx-doc/src/routes/docs/_api.ts
+++ b/packages/dooringx-doc/src/routes/docs/_api.ts
@@ -0,0 +1,126 @@
+import fs from 'fs';
+import path from 'path';
+import marked from 'marked';
+import { extract_frontmatter } from '../../utils/markdown';
+import { highlight } from '../../utils/highlight';
+import slugf from 'slug';
+
+export interface MarkDownItemProps {
+	html: string;
+	metadata: Record<string, string>;
+	subsections: { slug: string; title: string; level: string }[];
+	slug: string;
+	file: string;
+	order: number;
+	sTitle: string;
+}
+
+export async function api(name: string) {
+	const res = await getMarkDown(name);
+	return {
+		status: 200,
+		body: res,
+	};
+}
+
+const blockTypes = [
+	'blockquote',
+	'html',
+	'heading',
+	'hr',
+	'list',
+	'listitem',
+	'paragraph',
+	'table',
+	'tablerow',
+	'tablecell',
+];
+
+export const getMarkDown = (name: string) => {
+	const root = process.cwd();
+	const docPath = path.resolve(root, 'src', name);
+	return fs
+		.readdirSync(docPath)
+		.filter((file) => file[0] !== '.' && path.extname(file) === '.md')
+		.map((file) => {
+			const currentFilePath = path.resolve(docPath, file);
+			const markdown = fs.readFileSync(currentFilePath, 'utf-8');
+			const { content, metadata } = extract_frontmatter(markdown);
+			const order = parseFloat(metadata.order);
+			const sTitle = metadata.sTitle;
+			const subsections = [];
+			const section_slug = slugf(metadata.title, '_');
+			const renderer = new marked.Renderer();
+			let block_open = false;
+
+			renderer.hr = () => {
+				block_open = true;
+
+				return '<div class="side-by-side"><div class="copy">';
+			};
+
+			renderer.code = (source, lang) => {
+				source = source.replace(/^ +/gm, (match) => match.split('    ').join('\t'));
+				let prefix = '';
+				let className = 'code-block';
+				const html = `<div class='${className}'>${prefix}${highlight(source, lang)}</div>`;
+				if (block_open) {
+					block_open = false;
+					return `</div><div class="code">${html}</div></div>`;
+				}
+
+				return html;
+			};
+			// 这个heading是md的标题
+			renderer.heading = (text, level, rawtext) => {
+				let slug;
+				const match = /<a href="([^"]+)"[^>]*>(.+)<\/a>/.exec(text); // 提取a标签，链接为slug
+				if (match) {
+					slug = match[1];
+					text = match[2];
+				} else {
+					slug = slugf(rawtext, '_');
+				}
+
+				if (level === 1 || level === 2 || level === 3 || level === 4) {
+					const title = text
+						.replace(/<\/?code>/g, '')
+						.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
+							if ($3) return `.${$1}(...)`;
+							if ($2) return `.${$1}()`;
+							return `.${$1}`;
+						});
+
+					subsections.push({ slug, title, level });
+				}
+
+				return `
+					<h${level + 1}>
+						<span  id="${slug}"  ></span>
+						<a  href="docs#${slug}" class="anchor" aria-hidden="true"></a>
+						${text}
+					</h${level + 1}>`;
+			};
+
+			blockTypes.forEach((type) => {
+				const fn = renderer[type];
+				renderer[type] = function () {
+					return fn.apply(this, arguments);
+				};
+			});
+
+			const html = marked(content, { renderer });
+
+			const hashes = {};
+			return {
+				html: html.replace(/@@(\d+)/g, (m, id) => hashes[id] || m),
+				metadata,
+				subsections,
+				slug: section_slug,
+				order,
+				file,
+				sTitle,
+			};
+		})
+		.sort((a, b) => a.order - b.order);
+};
--- a/packages/dooringx-doc/src/routes/docs/index.json.ts
+++ b/packages/dooringx-doc/src/routes/docs/index.json.ts
@@ -0,0 +1,16 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-06-30 16:57:15
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-06 14:53:18
+ * @FilePath: \my-app\src\routes\docs\index.json.ts
+ */
+import type { RequestHandler } from '@sveltejs/kit';
+import { api } from './_api';
+
+export const get: RequestHandler = async (request) => {
+	const param = request.query;
+	const name = param.get('name');
+	const response = await api(name);
+	return response;
+};
--- a/packages/dooringx-doc/src/routes/docs/index.svelte
+++ b/packages/dooringx-doc/src/routes/docs/index.svelte
@@ -0,0 +1,64 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	import type { MarkDownItemProps } from './_api';
+	import { base } from '$app/paths';
+	export const load: Load = async ({ fetch }) => {
+		const path = `${base}/docs.json?name=docs`;
+		const res = await fetch(path);
+		if (res.ok) {
+			const files: MarkDownItemProps[] = await res.json();
+			return {
+				props: { files: files }
+			};
+		}
+
+		const { message } = await res.json();
+
+		return {
+			error: new Error(message)
+		};
+	};
+</script>
+
+<script lang="ts">
+	import DocRender from '$lib/DocRender/index.svelte';
+	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	export let files: MarkDownItemProps[];
+	const lang = getContext<Writable<string>>('lang');
+	let sections = new Map<string, MarkDownItemProps[]>();
+	lang.subscribe((la) => {
+		sections = new Map<string, MarkDownItemProps[]>();
+		let tmp = files.filter((v) => {
+			const name = v.file;
+			const sp = name.split('.');
+			if (Array.isArray(sp) && sp.length > 1 && sp[sp.length - 2] === 'EN') {
+				return la === 'en';
+			} else {
+				return la === 'cn';
+			}
+		});
+		tmp.forEach((v) => {
+			const stitle = v.sTitle || 'default';
+			const value = sections.get(stitle);
+			if (value) {
+				value.push(v);
+			} else {
+				sections.set(stitle, [v]);
+			}
+		});
+	});
+	let active = '';
+</script>
+
+<svelte:head>
+	<title>API Docs • Svelte</title>
+	<meta name="twitter:title" content="Svelte API docs" />
+	<meta name="twitter:description" content="Cybernetically enhanced web apps" />
+	<meta name="Description" content="Cybernetically enhanced web apps" />
+</svelte:head>
+
+<DocRender {active} {sections} />
+
+<style lang="scss">
+</style>
--- a/packages/dooringx-doc/src/routes/index.svelte
+++ b/packages/dooringx-doc/src/routes/index.svelte
@@ -0,0 +1,50 @@
+<script context="module" lang="ts">
+	export const prerender = true;
+</script>
+
+<script lang="ts">
+</script>
+
+<svelte:head>
+	<title>Home</title>
+</svelte:head>
+
+<section>
+	<h1>
+		<div class="welcome">
+			<picture>
+				<source srcset="svelte-welcome.webp" type="image/webp" />
+				<img src="svelte-welcome.png" alt="Welcome" />
+			</picture>
+		</div>
+	</h1>
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex: 1;
+	}
+
+	h1 {
+		width: 100%;
+	}
+
+	.welcome {
+		position: relative;
+		width: 100%;
+		height: 0;
+		padding: 0 0 calc(100% * 495 / 2048) 0;
+	}
+
+	.welcome img {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		display: block;
+	}
+</style>
--- a/packages/dooringx-doc/src/utils/highlight.ts
+++ b/packages/dooringx-doc/src/utils/highlight.ts
@@ -0,0 +1,21 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-06-30 19:20:22
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-06-30 21:22:04
+ * @FilePath: \my-app\src\utils\highlight.ts
+ */
+import { langs } from './markdown';
+import PrismJS from 'prismjs';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-diff.js';
+import 'prism-svelte';
+
+export function highlight(source, lang) {
+	const plang = langs[lang] || '';
+	const highlighted = plang
+		? PrismJS.highlight(source, PrismJS.languages[plang], lang)
+		: source.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+
+	return `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
+}
--- a/packages/dooringx-doc/src/utils/markdown.ts
+++ b/packages/dooringx-doc/src/utils/markdown.ts
@@ -0,0 +1,56 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-06-30 19:09:39
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-06 14:19:17
+ * @FilePath: \my-app\src\utils\markdown.ts
+ */
+export function extract_frontmatter(markdown) {
+	const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown);
+	let content = '';
+	let metadata: Record<string, string> = {};
+	if (match) {
+		const frontMatter = match[1];
+		content = markdown.slice(match[0].length);
+
+		metadata = {};
+		frontMatter.split('\n').forEach((pair) => {
+			// split on the colon
+			const colonIndex = pair.indexOf(':');
+			let value = pair.slice(colonIndex + 1).trim();
+			// if surrounded by double quotes then remove those quotes
+			if (value && value.charAt(0) === '"' && value.charAt(value.length - 1) === '"') {
+				value = value.substring(1, value.length - 1);
+			}
+			metadata[pair.slice(0, colonIndex).trim()] = value;
+		});
+	}
+
+	return { metadata, content };
+}
+
+// map lang to prism-language-attr
+export const langs = {
+	bash: 'bash',
+	html: 'markup',
+	sv: 'svelte',
+	js: 'javascript',
+	css: 'css',
+	diff: 'diff',
+};
+
+// links renderer
+export function link_renderer(href, title, text) {
+	let target_attr = '';
+	let title_attr = '';
+
+	if (href.startsWith('http')) {
+		target_attr = ' target="_blank"';
+	}
+
+	if (title !== null) {
+		title_attr = ` title="${title}"`;
+	}
+
+	return `<a href="${href}"${target_attr}${title_attr} rel="noopener noreferrer">${text}</a>`;
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>