feat: init @affine/docs (#2849)

apps/docs/src/app.tsx

@@ -0,0 +1,26 @@
+'use server';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+import type { ReactElement } from 'react';
+import { lazy } from 'react';
+
+const Editor = lazy(() =>
+  import('./components/editor.js').then(({ Editor }) => ({ default: Editor }))
+);
+
+const markdown = await fs.readFile(path.join('./src/pages/index.md'), {
+  encoding: 'utf-8',
+});
+
+const App = (): ReactElement => {
+  return (
+    <div>
+      <div className="mt-5">
+        <Editor text={markdown} />
+      </div>
+    </div>
+  );
+};
+
+export default App;

apps/docs/src/components/editor.tsx

@@ -0,0 +1,54 @@
+'use client';
+import '@blocksuite/editor/themes/affine.css';
+
+import { BlockSuiteEditor } from '@affine/component/block-suite-editor';
+import { ContentParser } from '@blocksuite/blocks/content-parser';
+import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
+import { assertExists, Workspace } from '@blocksuite/store';
+import type { ReactElement } from 'react';
+import { useCallback } from 'react';
+
+const workspace = new Workspace({
+  id: 'local-workspace',
+})
+  .register(AffineSchemas)
+  .register(__unstableSchemas);
+
+const page = workspace.createPage({
+  id: 'example-page',
+});
+
+export type EditorProps = {
+  text: string;
+};
+
+export const Editor = (props: EditorProps): ReactElement => {
+  return (
+    <BlockSuiteEditor
+      page={page}
+      mode="page"
+      onInit={useCallback(
+        async page => {
+          const text = props.text;
+          await page.waitForLoaded();
+          const metadata = text.split('---\n')[1];
+          assertExists(metadata);
+
+          // find title
+          const title = metadata.split('title: ')[1]?.split('\n')[0];
+          const pageBlockId = page.addBlock('affine:page', {
+            title: new page.Text(title),
+          });
+          page.addBlock('affine:surface', {}, pageBlockId);
+          const noteBlockId = page.addBlock('affine:note', {}, pageBlockId);
+          const contentParser = new ContentParser(page);
+          const content = text.split('---\n')[2];
+          assertExists(content);
+          console.log('metadata', title, content);
+          await contentParser.importMarkdown(content, noteBlockId);
+        },
+        [props.text]
+      )}
+    />
+  );
+};

apps/docs/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/docs/src/index.tsx

@@ -0,0 +1,14 @@
+import './index.css';
+
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { serve } from 'waku/client';
+
+const App = serve('App');
+const rootElement = (
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+
+createRoot(document.getElementById('root') as HTMLElement).render(rootElement);

apps/docs/src/pages/index.md

@@ -0,0 +1,9 @@
+---
+title: AFFiNE Developer Documentation
+---
+
+```shell
+corepack enable
+yarn install
+nx dev @affine/docs
+```