[add] Static example pages for Lark Wiki documents

Author: TechQuery

.env

@@ -6,5 +6,6 @@ NEXT_PUBLIC_SENTRY_DSN =
 SENTRY_ORG =
 SENTRY_PROJECT = 
 
-NEXT_PUBLIC_LARK_API_HOST = https://open.larksuite.com/open-apis/
-NEXT_PUBLIC_LARK_APP_ID =
+NEXT_PUBLIC_LARK_API_HOST = https://open.feishu.cn/open-apis/
+NEXT_PUBLIC_LARK_APP_ID = cli_a2c7771153f8900c
+NEXT_PUBLIC_LARK_WIKI_URL = https://idea2app.feishu.cn/wiki/space/7318346900506181660

models/Document.ts

@@ -0,0 +1,9 @@
+import { DocumentModel } from 'mobx-lark';
+
+import { lark } from '../pages/api/Lark/core';
+
+export class MyDocumentModel extends DocumentModel {
+  client = lark.client;
+}
+
+export default new MyDocumentModel();

models/Wiki.ts

@@ -0,0 +1,10 @@
+import { WikiNodeModel } from 'mobx-lark';
+
+import { lark } from '../pages/api/Lark/core';
+import { LarkWikiDomain, LarkWikiId } from './configuration';
+
+export class MyWikiNodeModel extends WikiNodeModel {
+  client = lark.client;
+}
+
+export default new MyWikiNodeModel(LarkWikiDomain, LarkWikiId);

models/configuration.ts

@@ -21,3 +21,8 @@ export const LarkAppMeta = {
   id: process.env.NEXT_PUBLIC_LARK_APP_ID!,
   secret: process.env.LARK_APP_SECRET!,
 };
+
+const { hostname, pathname } = new URL(process.env.NEXT_PUBLIC_LARK_WIKI_URL!);
+
+export const LarkWikiDomain = hostname;
+export const LarkWikiId = pathname.split('/').pop()!;

package.json

@@ -37,7 +37,7 @@
     "mobx": "^6.13.7",
     "mobx-github": "^0.3.11",
     "mobx-i18n": "^0.7.1",
-    "mobx-lark": "^2.2.0",
+    "mobx-lark": "^2.4.0-rc.10",
     "mobx-react": "^9.2.0",
     "mobx-react-helper": "^0.5.1",
     "mobx-restful": "^2.1.0",

pages/wiki/[node_token].tsx

@@ -0,0 +1,50 @@
+import { Block, renderBlocks, WikiNode } from 'mobx-lark';
+import { GetStaticPaths, GetStaticProps } from 'next';
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import { PageHead } from '../../components/Layout/PageHead';
+import documentStore from '../../models/Document';
+import wikiStore from '../../models/Wiki';
+import { lark } from '../api/Lark/core';
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  await lark.getAccessToken();
+
+  const nodes = await wikiStore.getAll();
+
+  return {
+    paths: nodes.map(({ node_token }) => ({ params: { node_token } })),
+    fallback: 'blocking',
+  };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  await lark.getAccessToken();
+
+  const node = await wikiStore.getOne(params!.node_token as string);
+
+  if (node?.obj_type !== 'docx') return { notFound: true };
+
+  const blocks = await documentStore.getOneBlocks(
+    node.obj_token,
+    token => `/api/Lark/file/${token}/placeholder`,
+  );
+
+  return { props: { node, blocks } };
+};
+
+interface WikiDocumentPageProps {
+  node: WikiNode;
+  blocks: Block<any, any, any>[];
+}
+
+const WikiDocumentPage: FC<WikiDocumentPageProps> = ({ node, blocks }) => (
+  <Container>
+    <PageHead title={node.title} />
+
+    {renderBlocks(blocks)}
+  </Container>
+);
+
+export default WikiDocumentPage;

pages/wiki/index.tsx

@@ -0,0 +1,34 @@
+import { WikiNode } from 'mobx-lark';
+import { GetStaticProps } from 'next';
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import { PageHead } from '../../components/Layout/PageHead';
+import wikiStore from '../../models/Wiki';
+import { lark } from '../api/Lark/core';
+
+export const getStaticProps: GetStaticProps = async () => {
+  await lark.getAccessToken();
+
+  const nodes = await wikiStore.getAll();
+
+  return { props: { nodes } };
+};
+
+const WikiIndexPage: FC<{ nodes: WikiNode[] }> = ({ nodes }) => (
+  <Container>
+    <PageHead title="Wiki" />
+
+    <h1>Wiki</h1>
+
+    <ol>
+      {nodes.map(({ node_token, title }) => (
+        <li key={node_token}>
+          <a href={`/wiki/${node_token}`}>{title}</a>
+        </li>
+      ))}
+    </ol>
+  </Container>
+);
+
+export default WikiIndexPage;