block-std',
+ items: [
+ {
+ text: 'Block Spec',
+ link: 'guide/block-spec',
+ // @ts-expect-error nested items are supported by VitePress at runtime
+ items: [
+ { text: 'Block Schema', link: 'guide/block-schema' },
+ { text: 'Block Service', link: 'guide/block-service' },
+ { text: 'Block View', link: 'guide/block-view' },
+ { text: 'Block Widgets', link: 'guide/block-widgets' },
+ ],
+ },
+ {
+ text: 'Selection',
+ link: 'guide/selection',
+ },
+ { text: 'Event', link: 'guide/event' },
+ { text: 'Command', link: 'guide/command' },
+ ],
+ },
+ {
+ text: 'store',
+ items: [
+ { text: 'Doc', link: 'guide/store#doc' },
+ { text: 'DocCollection', link: 'guide/store#doccollection' },
+ { text: 'Slot', link: 'guide/slot' },
+ { text: 'Adapter', link: 'guide/adapter' },
+ ],
+ },
+ {
+ text: 'inline',
+ link: 'guide/inline',
+ },
+ ],
+ },
+ {
+ text: 'Developing BlockSuite',
+ items: [
+ {
+ text: 'Building Packages',
+ link: '//github.com/toeverything/blocksuite/blob/master/BUILDING.md',
+ },
+ {
+ text: 'Running Tests',
+ link: '//github.com/toeverything/blocksuite/blob/master/BUILDING.md#testing',
+ },
+ ],
+ },
+];
+
+export const reference: DefaultTheme.NavItem[] = [
+ {
+ text: 'API Reference',
+ items: [
+ { text: '@blocksuite/store', link: 'api/@blocksuite/store/index' },
+ {
+ text: '@blocksuite/block-std',
+ link: 'api/@blocksuite/block-std/index',
+ },
+ { text: '@blocksuite/inline', link: 'api/@blocksuite/inline/index' },
+ ],
+ },
+];
+
+export const components: DefaultTheme.NavItem[] = [
+ {
+ text: 'Introduction',
+ items: [{ text: 'Overview', link: 'components/overview' }],
+ },
+ {
+ text: 'Editors',
+ items: [
+ { text: '📝 Page Editor', link: 'components/editors/page-editor' },
+ {
+ text: '🎨 Edgeless Editor',
+ // @ts-expect-error nested items are supported by VitePress at runtime
+ link: 'components/editors/edgeless-editor',
+ items: [
+ {
+ text: 'Data Structure',
+ link: 'components/editors/edgeless-data-structure',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ text: 'Blocks',
+ items: [
+ {
+ text: 'Regular Blocks',
+ items: [
+ { text: 'Root Block', link: 'components/blocks/root-block' },
+ { text: 'Note Block', link: 'components/blocks/note-block' },
+ {
+ text: 'Paragraph Block',
+ link: 'components/blocks/paragraph-block',
+ },
+ { text: 'List Block', link: 'components/blocks/list-block' },
+ { text: 'Code Block', link: 'components/blocks/code-block' },
+ { text: 'Image Block', link: 'components/blocks/image-block' },
+ {
+ text: 'Attachment Block',
+ link: 'components/blocks/attachment-block',
+ },
+ { text: 'Divider Block', link: 'components/blocks/divider-block' },
+ ],
+ },
+ {
+ text: 'Advanced Blocks',
+ items: [
+ { text: 'Surface Block', link: 'components/blocks/surface-block' },
+ {
+ text: 'Database Block',
+ link: 'components/blocks/database-block',
+ },
+ { text: 'Frame Block', link: 'components/blocks/frame-block' },
+ { text: 'Link Blocks', link: 'components/blocks/link-blocks' },
+ { text: 'Embed Blocks', link: 'components/blocks/embed-blocks' },
+ ],
+ },
+ ],
+ },
+ {
+ text: 'Widgets 🚧',
+ items: [
+ { text: 'Slash Menu', link: 'components/widgets/slash-menu' },
+ { text: 'Format Bar', link: 'components/widgets/format-bar' },
+ { text: 'Drag Handle', link: 'components/widgets/drag-handle' },
+ ],
+ },
+ {
+ text: 'Fragments 🚧',
+ items: [
+ { text: 'Doc Title', link: 'components/fragments/doc-title' },
+ { text: 'Outline Panel', link: 'components/fragments/outline-panel' },
+ { text: 'Frame Panel', link: 'components/fragments/frame-panel' },
+ { text: 'Copilot Panel', link: 'components/fragments/copilot-panel' },
+ {
+ text: 'Bi-Directional Link Panel',
+ link: 'components/fragments/bi-directional-link-panel',
+ },
+ ],
+ },
+];
diff --git a/blocksuite/docs-site/.vitepress/theme/components/Icon.vue b/blocksuite/docs-site/.vitepress/theme/components/Icon.vue
new file mode 100644
index 000000000..7daa37369
--- /dev/null
+++ b/blocksuite/docs-site/.vitepress/theme/components/Icon.vue
@@ -0,0 +1,26 @@
+
+
+
+ 
+
diff --git a/blocksuite/docs-site/.vitepress/theme/composables/posts.data.ts b/blocksuite/docs-site/.vitepress/theme/composables/posts.data.ts
new file mode 100644
index 000000000..691cc0b80
--- /dev/null
+++ b/blocksuite/docs-site/.vitepress/theme/composables/posts.data.ts
@@ -0,0 +1,44 @@
+import { format, formatDistance } from 'date-fns';
+import { createContentLoader } from 'vitepress';
+
+interface Post {
+ title: string;
+ authors: { name: string; link: string }[];
+ url: string;
+ date: {
+ raw: string;
+ time: number;
+ formatted: string;
+ since: string;
+ };
+}
+
+function formatDate(raw: string) {
+ const date = new Date(raw);
+ date.setUTCHours(8);
+ return {
+ raw: date.toISOString().split('T')[0],
+ time: +date,
+ formatted: format(date, 'yyyy/MM/dd'),
+ since: formatDistance(date, new Date(), { addSuffix: true }),
+ };
+}
+
+const data = [] as Post[];
+export { data };
+
+export default createContentLoader('blog/*.md', {
+ includeSrc: true,
+ transform(raw) {
+ return raw
+ .filter(item => item.url !== '/blog/')
+ .map(({ url, frontmatter }) => ({
+ title: frontmatter.title,
+ authors: frontmatter.authors ?? [],
+ excerpt: frontmatter.excerpt ?? '',
+ url,
+ date: formatDate(frontmatter.date),
+ }))
+ .sort((a, b) => b.date.time - a.date.time);
+ },
+});
diff --git a/blocksuite/docs-site/.vitepress/theme/composables/use-posts.ts b/blocksuite/docs-site/.vitepress/theme/composables/use-posts.ts
new file mode 100644
index 000000000..f2fdd9cca
--- /dev/null
+++ b/blocksuite/docs-site/.vitepress/theme/composables/use-posts.ts
@@ -0,0 +1,19 @@
+import { useRoute } from 'vitepress';
+import { computed } from 'vue';
+
+import { data as posts } from './posts.data';
+
+export function usePosts() {
+ const route = useRoute();
+ const path = route.path;
+
+ function findCurrentIndex() {
+ const result = posts.findIndex(p => p.url === route.path);
+ if (result === -1) console.error(`blog post missing: ${route.path}`);
+ return result;
+ }
+
+ const post = computed(() => posts[findCurrentIndex()]);
+
+ return { posts, post, path };
+}
diff --git a/blocksuite/docs-site/.vitepress/theme/index.ts b/blocksuite/docs-site/.vitepress/theme/index.ts
new file mode 100644
index 000000000..9abd23814
--- /dev/null
+++ b/blocksuite/docs-site/.vitepress/theme/index.ts
@@ -0,0 +1,29 @@
+// https://vitepress.dev/guide/custom-theme
+import 'vitepress-plugin-sandpack/dist/style.css';
+import './style.css';
+
+import Theme from 'vitepress/theme';
+import { h } from 'vue';
+
+import BlogListLayout from './components/blog-list-layout.vue';
+import BlogPostMeta from './components/blog-post-meta.vue';
+import CodeSandbox from './components/code-sandbox.vue';
+import HeroLogo from './components/hero-logo.vue';
+import Icon from './components/icon.vue';
+
+export default {
+ ...Theme,
+ Layout: () => {
+ return h(Theme.Layout, null, {
+ // https://vitepress.dev/guide/extending-default-theme#layout-slots
+ 'home-hero-image': () => h(HeroLogo),
+ // 'home-features-after': () => h(Playground),
+ });
+ },
+ enhanceApp({ app }) {
+ app.component('Icon', Icon);
+ app.component('BlogListLayout', BlogListLayout);
+ app.component('BlogPostMeta', BlogPostMeta);
+ app.component('CodeSandbox', CodeSandbox);
+ },
+};
diff --git a/blocksuite/docs-site/.vitepress/theme/style.css b/blocksuite/docs-site/.vitepress/theme/style.css
new file mode 100644
index 000000000..6121eaff2
--- /dev/null
+++ b/blocksuite/docs-site/.vitepress/theme/style.css
@@ -0,0 +1,226 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root {
+ --vp-c-brand: #646cff;
+ --vp-c-brand-light: #747bff;
+ --vp-c-brand-lighter: #9499ff;
+ --vp-c-brand-lightest: #bcc0ff;
+ --vp-c-brand-dark: #535bf2;
+ --vp-c-brand-darker: #454ce1;
+ --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+ --vp-button-brand-border: var(--vp-c-brand-light);
+ --vp-button-brand-text: var(--vp-c-white);
+ --vp-button-brand-bg: var(--vp-c-brand);
+ --vp-button-brand-hover-border: var(--vp-c-brand-light);
+ --vp-button-brand-hover-text: var(--vp-c-white);
+ --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+ --vp-button-brand-active-border: var(--vp-c-brand-light);
+ --vp-button-brand-active-text: var(--vp-c-white);
+ --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+ --vp-home-hero-name-color: transparent;
+ --vp-home-hero-name-background: -webkit-linear-gradient(
+ 120deg,
+ #bd34fe 30%,
+ #41d1ff
+ );
+
+ --vp-home-hero-image-background-image: linear-gradient(
+ -45deg,
+ #bd34fe 50%,
+ #47caff 50%
+ );
+ --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+ :root {
+ --vp-home-hero-image-filter: blur(56px);
+ }
+}
+
+@media (min-width: 960px) {
+ :root {
+ --vp-home-hero-image-filter: blur(72px);
+ }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+ --vp-custom-block-tip-border: var(--vp-c-brand);
+ --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+ --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+.dark {
+ --vp-custom-block-tip-border: var(--vp-c-brand);
+ --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+ --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+ --docsearch-primary-color: var(--vp-c-brand) !important;
+}
+
+/**
+ * VitePress: Custom fix
+ * -------------------------------------------------------------------------- */
+
+/*
+ Use lighter colors for links in dark mode for a11y.
+ Also specify some classes twice to have higher specificity
+ over scoped class data attribute.
+*/
+.dark .vp-doc a,
+.dark .vp-doc a > code,
+.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
+.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
+.dark .link.link:hover,
+.dark .link.link.active,
+.dark .edit-link-button.edit-link-button,
+.dark .pager-link .title {
+ color: var(--vp-c-brand-lighter);
+}
+
+.dark .vp-doc a:hover,
+.dark .vp-doc a > code:hover {
+ color: var(--vp-c-brand-lightest);
+ opacity: 1;
+}
+
+/* Transition by color instead of opacity */
+.dark .vp-doc .custom-block a {
+ transition: color 0.25s;
+}
+
+html[class='dark'] {
+ --affine-theme-mode: dark;
+
+ --affine-popover-shadow:
+ 0px 1px 10px -6px rgba(24, 39, 75, 0.08),
+ 0px 3px 16px -6px rgba(24, 39, 75, 0.04);
+ --affine-font-h-1: 28px;
+ --affine-font-h-2: 26px;
+ --affine-font-h-3: 24px;
+ --affine-font-h-4: 22px;
+ --affine-font-h-5: 20px;
+ --affine-font-h-6: 18px;
+ --affine-font-base: 16px;
+ --affine-font-sm: 14px;
+ --affine-font-xs: 12px;
+ --affine-line-height: calc(1em + 8px);
+ --affine-z-index-modal: 1000;
+ --affine-z-index-popover: 1000;
+ --affine-font-family:
+ Avenir Next, Poppins, apple-system, BlinkMacSystemFont, Helvetica Neue,
+ Tahoma, PingFang SC, Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif,
+ Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ --affine-font-number-family:
+ Roboto Mono, apple-system, BlinkMacSystemFont, Helvetica Neue, Tahoma,
+ PingFang SC, Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif,
+ Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ --affine-font-code-family:
+ Space Mono, Consolas, Menlo, Monaco, Courier, monospace, apple-system,
+ BlinkMacSystemFont, Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei,
+ Arial, Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+ Segoe UI Symbol, Noto Color Emoji;
+ --affine-paragraph-space: 8px;
+ --affine-popover-radius: 10px;
+ --affine-zoom: 1;
+ --affine-scale: calc(1 / var(--affine-zoom));
+
+ --affine-brand-color: rgb(84, 56, 255);
+ --affine-primary-color: rgb(118, 95, 254);
+ --affine-secondary-color: rgb(144, 150, 245);
+ --affine-tertiary-color: rgb(30, 30, 30);
+ --affine-hover-color: rgba(255, 255, 255, 0.1);
+ --affine-icon-color: rgb(168, 168, 160);
+ --affine-border-color: rgb(57, 57, 57);
+ --affine-divider-color: rgb(114, 114, 114);
+ --affine-placeholder-color: rgb(62, 62, 63);
+ --affine-quote-color: rgb(100, 95, 130);
+ --affine-link-color: rgb(185, 191, 227);
+ --affine-edgeless-grid-color: rgb(49, 49, 49);
+ --affine-success-color: rgb(77, 213, 181);
+ --affine-warning-color: rgb(255, 123, 77);
+ --affine-error-color: rgb(212, 140, 130);
+ --affine-processing-color: rgb(195, 215, 255);
+ --affine-text-emphasis-color: rgb(208, 205, 220);
+ --affine-text-primary-color: rgb(234, 234, 234);
+ --affine-text-secondary-color: rgb(156, 156, 160);
+ --affine-text-disable-color: rgb(119, 117, 125);
+ --affine-black-10: rgba(255, 255, 255, 0.1);
+ --affine-black-30: rgba(255, 255, 255, 0.3);
+ --affine-black-50: rgba(255, 255, 255, 0.5);
+ --affine-black-60: rgba(255, 255, 255, 0.6);
+ --affine-black-80: rgba(255, 255, 255, 0.8);
+ --affine-black-90: rgba(255, 255, 255, 0.9);
+ --affine-black: rgb(255, 255, 255);
+ --affine-white-10: rgba(0, 0, 0, 0.1);
+ --affine-white-30: rgba(0, 0, 0, 0.3);
+ --affine-white-50: rgba(0, 0, 0, 0.5);
+ --affine-white-60: rgba(0, 0, 0, 0.6);
+ --affine-white-80: rgba(0, 0, 0, 0.8);
+ --affine-white-90: rgba(0, 0, 0, 0.9);
+ --affine-white: rgb(0, 0, 0);
+ --affine-background-code-block: rgb(41, 44, 51);
+ --affine-background-tertiary-color: rgb(30, 30, 30);
+ --affine-background-processing-color: rgb(255, 255, 255);
+ --affine-background-error-color: rgb(255, 255, 255);
+ --affine-background-warning-color: rgb(255, 255, 255);
+ --affine-background-success-color: rgb(255, 255, 255);
+ --affine-background-primary-color: rgb(20, 20, 20);
+ --affine-background-hover-color: rgb(47, 47, 47);
+ --affine-background-secondary-color: rgb(32, 32, 32);
+ --affine-background-modal-color: rgba(0, 0, 0, 0.8);
+ --affine-background-overlay-panel-color: rgb(30, 30, 30);
+ --affine-tag-blue: rgb(10, 84, 170);
+ --affine-tag-green: rgb(55, 135, 79);
+ --affine-tag-teal: rgb(33, 145, 138);
+ --affine-tag-white: rgb(84, 84, 84);
+ --affine-tag-purple: rgb(59, 38, 141);
+ --affine-tag-red: rgb(139, 63, 63);
+ --affine-tag-pink: rgb(194, 132, 132);
+ --affine-tag-yellow: rgb(187, 165, 61);
+ --affine-tag-orange: rgb(231, 161, 58);
+ --affine-tag-gray: rgb(41, 41, 41);
+ --affine-palette-yellow: rgb(255, 232, 56);
+ --affine-palette-orange: rgb(255, 175, 56);
+ --affine-palette-tangerine: rgb(255, 99, 31);
+ --affine-palette-red: rgb(252, 63, 85);
+ --affine-palette-magenta: rgb(255, 56, 179);
+ --affine-palette-purple: rgb(182, 56, 255);
+ --affine-palette-navy: rgb(59, 37, 204);
+ --affine-palette-blue: rgb(79, 144, 255);
+ --affine-palette-green: rgb(16, 203, 134);
+ --affine-palette-grey: rgb(153, 153, 153);
+ --affine-palette-white: rgb(255, 255, 255);
+ --affine-palette-black: rgb(0, 0, 0);
+}
diff --git a/blocksuite/docs-site/blog/crdt-native-data-flow.md b/blocksuite/docs-site/blog/crdt-native-data-flow.md
new file mode 100644
index 000000000..07315320c
--- /dev/null
+++ b/blocksuite/docs-site/blog/crdt-native-data-flow.md
@@ -0,0 +1,87 @@
+---
+title: CRDT-Native Data Flow in BlockSuite
+date: 2023-04-15
+authors:
+ - name: Yifeng Wang
+ link: 'https://twitter.com/ewind1994'
+ - name: Saul-Mirone
+ link: 'https://github.com/Saul-Mirone'
+excerpt: To make editors intuitive and collaboration-ready, BlockSuite ensure that regardless of whether you are collaborating with others or not, the application code should be unaware of it. This article introduce how this is designed.
+---
+
+# CRDT-Native Data Flow in BlockSuite
+
+