[optimize] i18n & a11y details of Wiki debugger

Author: TechQuery

pages/wiki/[node_token]/debugger.tsx

@@ -1,11 +1,13 @@
 import { Block, DocumentBlockModel, renderBlocks, WikiNode } from 'mobx-lark';
+import { observer } from 'mobx-react';
 import { GetServerSideProps } from 'next';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { GitDiffView } from '../../../components/GitDiffView';
 import { PageHead } from '../../../components/Layout/PageHead';
 import documentStore from '../../../models/Document';
+import { I18nContext } from '../../../models/Translation';
 import wikiStore from '../../../models/Wiki';
 import { lark } from '../../api/Lark/core';
 
@@ -38,43 +40,43 @@ interface WikiDocumentDebuggerPageProps {
   renderableBlocks: Block<any, any, any>[];
 }
 
-const WikiDocumentDebuggerPage: FC<WikiDocumentDebuggerPageProps> = ({
-  node,
-  rawBlocks,
-  renderableBlocks,
-}) => {
-  const title = `${node.title} - Debugger`;
-  const rendered = renderBlocks(renderableBlocks);
-
-  return (
-    <Container>
-      <PageHead title={title} />
-      <h1>{title}</h1>
-
-      <section>
-        <h2>🔍Block diff</h2>
-
-        <GitDiffView
-          oldFile={{
-            fileName: 'raw-blocks.json',
-            content: JSON.stringify(rawBlocks, null, 2),
-            language: 'json',
-          }}
-          newFile={{
-            fileName: 'renderable-blocks.json',
-            content: JSON.stringify(renderableBlocks, null, 2),
-            language: 'json',
-          }}
-        />
-      </section>
-
-      <section>
-        <h2>📄Document</h2>
-
-        {rendered}
-      </section>
-    </Container>
-  );
-};
+const WikiDocumentDebuggerPage: FC<WikiDocumentDebuggerPageProps> = observer(
+  ({ node, rawBlocks, renderableBlocks }) => {
+    const { t } = useContext(I18nContext);
+
+    const title = `${node.title} - ${t('debugger')}`;
+    const rendered = renderBlocks(renderableBlocks);
+
+    return (
+      <Container>
+        <PageHead title={title} />
+        <h1>{title}</h1>
+
+        <section>
+          <h2>🔍{t('block_diff')}</h2>
+
+          <GitDiffView
+            oldFile={{
+              fileName: 'raw-blocks.json',
+              content: JSON.stringify(rawBlocks, null, 2),
+              language: 'json',
+            }}
+            newFile={{
+              fileName: 'renderable-blocks.json',
+              content: JSON.stringify(renderableBlocks, null, 2),
+              language: 'json',
+            }}
+          />
+        </section>
+
+        <section>
+          <h2>📄{t('document')}</h2>
+
+          {rendered}
+        </section>
+      </Container>
+    );
+  },
+);
 
 export default WikiDocumentDebuggerPage;

pages/wiki/[node_token]/index.tsx

@@ -1,7 +1,8 @@
+import { Icon } from 'idea-react';
 import { Block, renderBlocks, WikiNode } from 'mobx-lark';
 import { GetStaticPaths, GetStaticProps } from 'next';
 import { FC } from 'react';
-import { Container } from 'react-bootstrap';
+import { Button, Container } from 'react-bootstrap';
 import { Minute, Second } from 'web-utility';
 
 import { PageHead } from '../../../components/Layout/PageHead';
@@ -50,6 +51,16 @@ const WikiDocumentPage: FC<WikiDocumentPageProps> = ({ node, blocks }) => (
   <Container>
     <PageHead title={node.title} />
 
+    <aside className="text-end">
+      <Button
+        variant="outline-primary"
+        size="sm"
+        href={`/wiki/${node.node_token}/debugger`}
+      >
+        <Icon name="tools" />
+      </Button>
+    </aside>
+
     {renderBlocks(blocks)}
   </Container>
 );

translation/en-US.ts

@@ -45,6 +45,9 @@ export default {
   // MDX Article
   article: 'Article',
   wiki: 'Wiki',
+  debugger: 'Debugger',
+  block_diff: 'Block Diff',
+  document: 'Document',
 
   // Search
   keywords: 'Keywords',

translation/zh-CN.ts

@@ -43,6 +43,9 @@ export default {
   // MDX Article
   article: '文章',
   wiki: '知识库',
+  debugger: '调试器',
+  block_diff: '区块差异',
+  document: '文档',
 
   // Search
   keywords: '关键词',

translation/zh-TW.ts

@@ -43,6 +43,9 @@ export default {
   // MDX Article
   article: '文章',
   wiki: '知識庫',
+  debugger: '偵錯器',
+  block_diff: '區塊差異',
+  document: '文件',
 
   // Search
   keywords: '關鍵詞',