feat(docs): update home page

apps/docs/package.json

@@ -17,6 +17,7 @@
     "@blocksuite/lit": "0.0.0-20230624163241-751f7170-nightly",
     "@blocksuite/store": "0.0.0-20230624163241-751f7170-nightly",
     "express": "^4.18.2",
+    "jotai": "^2.2.1",
     "react": "18.3.0-canary-16d053d59-20230506",
     "react-dom": "18.3.0-canary-16d053d59-20230506",
     "react-server-dom-webpack": "18.3.0-canary-16d053d59-20230506",

apps/docs/src/app.tsx

@@ -1,24 +1,34 @@
+/// <reference types="vite/client" />
 'use server';
-import fs from 'node:fs/promises';
-import path from 'node:path';
-
 import type { ReactElement } from 'react';
 import { lazy } from 'react';
 
+import { Sidebar } from './components/sidebar.js';
+
 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 markdown = `---
+title: AFFiNE Developer Documentation
+---
+
+## To Shape, not to adapt
+
+---
+
+**Powered by BlockSuite**
+`;
 
 const App = (): ReactElement => {
   return (
-    <div>
-      <div className="mt-5">
+    <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} />
-      </div>
+      </main>
     </div>
   );
 };

apps/docs/src/components/editor.tsx

@@ -42,10 +42,11 @@ export const Editor = (props: EditorProps): ReactElement => {
           page.addBlock('affine:surface', {}, pageBlockId);
           const noteBlockId = page.addBlock('affine:note', {}, pageBlockId);
           const contentParser = new ContentParser(page);
-          const content = text.split('---\n')[2];
+          const content = text.split('---\n').splice(2).join('---\n');
           assertExists(content);
-          console.log('metadata', title, content);
           await contentParser.importMarkdown(content, noteBlockId);
+          page.awarenessStore.setReadonly(page, true);
+          page.awarenessStore.setFlag('enable_drag_handle', false);
         },
         [props.text]
       )}

apps/docs/src/components/sidebar.tsx

@@ -0,0 +1,16 @@
+export const Sidebar = () => {
+  return (
+    <div
+      className="h-screen text-black overflow-y-auto"
+      style={{
+        backgroundColor: '#f9f7f7',
+      }}
+    >
+      <a href="/">
+        <div className="flex items-center justify-center h-16 font-bold">
+          AFFiNE
+        </div>
+      </a>
+    </div>
+  );
+};

apps/docs/src/pages/index.md

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