feat: init @affine/docs (#2849)

2026-02-11 20:08:37 +00:00 · 2023-06-25 21:18:23 +08:00
parent d8bb51a222
commit d525bd9113
18 changed files with 729 additions and 12 deletions
--- a/apps/docs/entries.ts
+++ b/apps/docs/entries.ts
@@ -0,0 +1,21 @@
+import { defineEntries } from 'waku/server';
+
+export default defineEntries(
+  // getEntry
+  async id => {
+    switch (id) {
+      case 'App':
+        return import('./src/app.js') as any;
+      default:
+        return null;
+    }
+  },
+  // getBuildConfig
+  async () => {
+    return {
+      '/': {
+        elements: [['App', {}]],
+      },
+    };
+  }
+);
--- a/apps/docs/index.html
+++ b/apps/docs/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>AFFiNE Developer Documentation</title>
+    <style>
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .spinner {
+        width: 36px;
+        height: 36px;
+        margin: auto;
+        border: 2px solid #ddd;
+        border-top-color: #222;
+        border-radius: 50%;
+        animation: spinner 1s linear infinite;
+      }
+      #root > .spinner {
+        margin-top: calc(50% - 18px);
+      }
+    </style>
+  </head>
+  <body>
+    <!--placeholder1-->
+    <div id="root">
+      <div class="spinner"></div>
+    </div>
+    <!--/placeholder1-->
+    <script src="./src/index.tsx" async type="module"></script>
+    <!--placeholder2-->
+    <!--/placeholder2-->
+  </body>
+</html>
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@affine/docs",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "build:vercel": "waku build && cp -Lr ./dist/.vercel/output ./.vercel/"
+  },
+  "dependencies": {
+    "@affine/component": "workspace:*",
+    "@blocksuite/block-std": "0.0.0-20230624163241-751f7170-nightly",
+    "@blocksuite/blocks": "0.0.0-20230624163241-751f7170-nightly",
+    "@blocksuite/editor": "0.0.0-20230624163241-751f7170-nightly",
+    "@blocksuite/global": "0.0.0-20230624163241-751f7170-nightly",
+    "@blocksuite/lit": "0.0.0-20230624163241-751f7170-nightly",
+    "@blocksuite/store": "0.0.0-20230624163241-751f7170-nightly",
+    "express": "^4.18.2",
+    "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",
+    "waku": "0.12.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
+    "@vanilla-extract/css": "^1.11.1",
+    "@vanilla-extract/vite-plugin": "^3.8.2",
+    "autoprefixer": "^10.4.14",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.1.3"
+  }
+}
--- a/apps/docs/postcss.config.mjs
+++ b/apps/docs/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/apps/docs/src/app.tsx
+++ b/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;
--- a/apps/docs/src/components/editor.tsx
+++ b/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]
+      )}
+    />
+  );
+};
--- a/apps/docs/src/index.css
+++ b/apps/docs/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/apps/docs/src/index.tsx
+++ b/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);
--- a/apps/docs/src/pages/index.md
+++ b/apps/docs/src/pages/index.md
@@ -0,0 +1,9 @@
+---
+title: AFFiNE Developer Documentation
+---
+
+```shell
+corepack enable
+yarn install
+nx dev @affine/docs
+```
--- a/apps/docs/tailwind.config.mjs
+++ b/apps/docs/tailwind.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "Node16",
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "NodeNext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "entries.ts"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "../../packages/component"
+    }
+  ]
+}
--- a/apps/docs/tsconfig.node.json
+++ b/apps/docs/tsconfig.node.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "moduleResolution": "Node16",
+    "allowSyntheticDefaultImports": true,
+    "outDir": "dist/scripts",
+    "rootDir": "."
+  },
+  "include": ["vite.config.ts", "vite.prod.config.ts"]
+}
--- a/apps/docs/vite.config.ts
+++ b/apps/docs/vite.config.ts
@@ -0,0 +1,13 @@
+import path from 'node:path';
+import url from 'node:url';
+
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import { defineConfig } from 'waku/config';
+
+export default defineConfig({
+  root: path.dirname(url.fileURLToPath(import.meta.url)),
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    target: 'esnext',
+  },
+});