Skip to content

Commit

Permalink
feat: embed editor in site landing page (#6158)
Browse files Browse the repository at this point in the history
  • Loading branch information
doodlewind committed Jan 31, 2024
1 parent ac022c0 commit e571861
Show file tree
Hide file tree
Showing 10 changed files with 215 additions and 179 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ BlockSuite is a toolkit for building diverse collaborative editors and applicati
- [**`EdgelessEditor`**](https://blocksuite.io/components/edgeless-editor.html): **Featuring canvas-based graphics rendering** at its core with sophisticated rich-text features, `EdgelessEditor` offers unique functionalities and decent performance in whiteboard editing.
- Or, build new editors from scratch based on the underlying vallina framework.

These editors are being used in [AFFiNE](https://github.com/toeverything/AFFiNE).
First-party BlockSuite editors are built for the beloved [AFFiNE](https://github.com/toeverything/AFFiNE) knowledge base.

> 🚧 BlockSuite is currently in its early stage, with components and extension capabilities still under refinement. Hope you can stay tuned, try it out, or share your feedback!
Expand Down
172 changes: 33 additions & 139 deletions packages/docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
@@ -1,147 +1,52 @@
import { DefaultTheme, defineConfig } from 'vitepress';
import { defineConfig } from 'vitepress';
import wasm from 'vite-plugin-wasm';
import container from 'markdown-it-container';
import { renderSandbox } from 'vitepress-plugin-sandpack';
import { guide, reference, components } from './sidebar';

const guide: DefaultTheme.NavItem[] = [
{
text: 'Getting Started',
items: [
{ text: 'Overview', link: 'guide/overview' },
{ text: 'Quick Start', link: 'guide/quick-start' },
],
},
{
text: 'Framework Tutorial',
items: [
{ text: 'Component Types', link: 'guide/component-types' },
{
text: 'Working with Block Tree',
// @ts-ignore
link: 'guide/working-with-block-tree',
items: [
{
text: 'Block Tree Basics',
link: 'guide/working-with-block-tree#block-tree-basics',
},
{
text: 'Block Tree in Editor',
link: 'guide/working-with-block-tree#block-tree-in-editor',
},
{
text: 'Selecting Blocks',
link: 'guide/working-with-block-tree#selecting-blocks',
},
{
text: 'Service and Commands',
link: 'guide/working-with-block-tree#service-and-commands',
},
{
text: 'Defining New Blocks',
link: 'guide/working-with-block-tree#defining-new-blocks',
},
],
},
{ text: 'Data Synchronization', link: 'guide/data-synchronization' },
],
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: 'BlockSuite',
description: 'Content Editing Tech Stack for the Web',
vite: {
build: {
target: 'ES2022',
},
plugins: [wasm()],
},
{
text: 'API Walkthrough',
items: [
{
text: '<code>block-std</code>',
items: [
{
text: 'Block Spec',
link: 'guide/block-spec',
// @ts-ignore
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: '<code>store</code>',
items: [
{ text: 'Page', link: 'guide/store#page' },
{ text: 'Workspace', link: 'guide/store#workspace' },
{ text: 'Slot', link: 'guide/slot' },
{ text: 'Adapter', link: 'guide/adapter' },
],
},
{
text: '<code>inline</code>',
link: 'guide/inline',
},
lang: 'en-US',
head: [
[
'link',
{
text: '<code>lit</code>',
link: 'guide/lit',
rel: 'icon',
type: 'image/png',
sizes: '32x32',
href: 'https://raw.githubusercontent.com/toeverything/blocksuite/master/assets/logo.svg',
},
],
},
{
text: 'Developing BlockSuite',
items: [
{
text: 'Building Packages',
link: '//github.com/toeverything/blocksuite/blob/master/BUILDING.md',
},
['meta', { property: 'twitter:card', content: 'summary_large_image' }],
[
'meta',
{
text: 'Running Tests',
link: '//github.com/toeverything/blocksuite/blob/master/BUILDING.md#testing',
property: 'twitter:image',
content:
'https://raw.githubusercontent.com/toeverything/blocksuite/master/packages/docs/images/blocksuite-cover.jpg',
},
],
},
];

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/lit', link: 'api/@blocksuite/lit/index' },
{ text: '@blocksuite/inline', link: 'api/@blocksuite/inline/index' },
[
'meta',
{
text: '@blocksuite/presets',
link: 'api/@blocksuite/presets/index',
property: 'og:image',
content:
'https://raw.githubusercontent.com/toeverything/blocksuite/master/packages/docs/images/blocksuite-cover.jpg',
},
{ text: '@blocksuite/blocks', link: 'api/@blocksuite/blocks/index' },
],
},
];

const components: DefaultTheme.NavItem[] = [
{ text: '📝 DocEditor', link: 'components/doc-editor' },
{ text: '🎨 EdgelessEditor', link: 'components/edgeless-editor' },
];

// https://vitepress.dev/reference/site-config
export default defineConfig({
vite: {
build: {
target: 'ES2022',
},
plugins: [wasm()],
},
lang: 'en-US',
title: 'BlockSuite',
description: 'Content Editing Tech Stack for the Web',
],
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
outline: [2, 3],

nav: [
{
text: 'Components 🚧',
Expand Down Expand Up @@ -188,17 +93,6 @@ export default defineConfig({
provider: 'local',
},
},
head: [
[
'link',
{
rel: 'icon',
type: 'image/png',
sizes: '32x32',
href: 'https://raw.githubusercontent.com/toeverything/blocksuite/master/assets/logo.svg',
},
],
],
markdown: {
config(md) {
md.use(container, 'code-sandbox', {
Expand Down
127 changes: 127 additions & 0 deletions packages/docs/.vitepress/sidebar.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import { DefaultTheme } from 'vitepress';

export const guide: DefaultTheme.NavItem[] = [
{
text: 'Getting Started',
items: [
{ text: 'Overview', link: 'guide/overview' },
{ text: 'Quick Start', link: 'guide/quick-start' },
],
},
{
text: 'Framework Tutorial',
items: [
{ text: 'Component Types', link: 'guide/component-types' },
{
text: 'Working with Block Tree',
// @ts-ignore
link: 'guide/working-with-block-tree',
items: [
{
text: 'Block Tree Basics',
link: 'guide/working-with-block-tree#block-tree-basics',
},
{
text: 'Block Tree in Editor',
link: 'guide/working-with-block-tree#block-tree-in-editor',
},
{
text: 'Selecting Blocks',
link: 'guide/working-with-block-tree#selecting-blocks',
},
{
text: 'Service and Commands',
link: 'guide/working-with-block-tree#service-and-commands',
},
{
text: 'Defining New Blocks',
link: 'guide/working-with-block-tree#defining-new-blocks',
},
],
},
{ text: 'Data Synchronization', link: 'guide/data-synchronization' },
],
},
{
text: 'API Walkthrough',
items: [
{
text: '<code>block-std</code>',
items: [
{
text: 'Block Spec',
link: 'guide/block-spec',
// @ts-ignore
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: '<code>store</code>',
items: [
{ text: 'Page', link: 'guide/store#page' },
{ text: 'Workspace', link: 'guide/store#workspace' },
{ text: 'Slot', link: 'guide/slot' },
{ text: 'Adapter', link: 'guide/adapter' },
],
},
{
text: '<code>inline</code>',
link: 'guide/inline',
},
{
text: '<code>lit</code>',
link: 'guide/lit',
},
],
},
{
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/lit', link: 'api/@blocksuite/lit/index' },
{ text: '@blocksuite/inline', link: 'api/@blocksuite/inline/index' },
{
text: '@blocksuite/presets',
link: 'api/@blocksuite/presets/index',
},
{ text: '@blocksuite/blocks', link: 'api/@blocksuite/blocks/index' },
],
},
];

export const components: DefaultTheme.NavItem[] = [
{ text: '📝 DocEditor', link: 'components/doc-editor' },
{ text: '🎨 EdgelessEditor', link: 'components/edgeless-editor' },
];
2 changes: 2 additions & 0 deletions packages/docs/.vitepress/theme/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { h } from 'vue';
import Theme from 'vitepress/theme';
import Logo from './logo.vue';
import Playground from './playground.vue';
import CodeSandbox from './code-sandbox.vue';
import 'vitepress-plugin-sandpack/dist/style.css';
import './style.css';
Expand All @@ -12,6 +13,7 @@ export default {
return h(Theme.Layout, null, {
// https://vitepress.dev/guide/extending-default-theme#layout-slots
'home-hero-image': () => h(Logo),
'home-features-after': () => h(Playground),
});
},
enhanceApp({ app, router, siteData }) {
Expand Down
18 changes: 18 additions & 0 deletions packages/docs/.vitepress/theme/playground.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<template>
<!-- TODO: switch to native components -->
<iframe
src="https://try-blocksuite.vercel.app/starter/?init"
allow="clipboard-read; clipboard-write"
></iframe>
</template>

<style scoped>
iframe {
border: none;
margin: auto;
width: 100%;
margin-top: 20px;
max-width: 1152px;
height: 700px;
}
</style>
4 changes: 2 additions & 2 deletions packages/docs/guide/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ BlockSuite is a toolkit for building diverse collaborative editors and applicati
- [**`EdgelessEditor`**](../components/edgeless-editor): **Featuring canvas-based graphics rendering** at its core with sophisticated rich-text features, `EdgelessEditor` offers unique functionalities and decent performance in whiteboard editing.
- Or, build new editors from scratch based on the underlying vallina framework.

First party BlockSuite editors are being used in [AFFiNE](https://github.com/toeverything/AFFiNE), click 🔁 in following example to switch between them dynamically - they are fully compatible!
First-party BlockSuite editors are built for the beloved [AFFiNE](https://github.com/toeverything/AFFiNE) knowledge base.

> 🚧 BlockSuite is currently in its early stage, with components and extension capabilities still under refinement. Hope you can stay tuned, try it out, or share your feedback!
<iframe src="https://try-blocksuite.vercel.app/starter/?init" width="100%" height="500"></iframe>
![showcase-doc-edgeless-editors](../images/showcase-doc-edgeless-editors.jpg)

In addition to [extending custom blocks](./working-with-block-tree#defining-new-blocks), here are what you can also conveniently achieve with BlockSuite:

Expand Down
Loading

0 comments on commit e571861

Please sign in to comment.