feat(docs): bootstrapping using blocksuite (#2859)

apps/docs/src/app.tsx

@@ -1,36 +1,44 @@
 /// <reference types="vite/client" />
 'use server';
+import { existsSync, readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
 import type { ReactElement } from 'react';
 import { lazy } from 'react';
 
-import { Sidebar } from './components/sidebar.js';
+import { Sidebar } from './components/sidebar/index.js';
+import { saveFile } from './server-fns.js';
 
 const Editor = lazy(() =>
   import('./components/editor.js').then(({ Editor }) => ({ default: Editor }))
 );
 
-const markdown = `---
-title: AFFiNE Developer Documentation
----
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-## To Shape, not to adapt
+const AppCreator = (pathname: string) =>
+  function App(): ReactElement {
+    let path = resolve(__dirname, 'pages', 'binary');
+    if (!existsSync(path)) {
+      path = resolve(__dirname, '..', '..', 'src', 'pages', 'binary');
+    }
+    const buffer = [...readFileSync(path)];
 
----
+    return (
+      <div className="flex flex-col-reverse sm:flex-row">
+        <nav className="w-full sm:w-64">
+          <Sidebar />
+        </nav>
+        <main className="flex-1 p-6 w-full sm:w-[calc(100%-16rem)]">
+          <Editor
+            workspaceId={pathname}
+            pageId="1"
+            onSave={saveFile}
+            binary={buffer}
+          />
+        </main>
+      </div>
+    );
+  };
 
-**Powered by BlockSuite**
-`;
-
-const App = (): ReactElement => {
-  return (
-    <div className="flex flex-col-reverse sm:flex-row">
-      <nav className="w-full sm:w-64">
-        <Sidebar />
-      </nav>
-      <main className="flex-1 p-6 w-full sm:w-[calc(100%-16rem)]">
-        <Editor text={markdown} />
-      </main>
-    </div>
-  );
-};
-
-export default App;
+export default AppCreator;