From f7b873f8e00aa1e3f0db1f4d5234dfc92ac32ad6 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 7 Sep 2021 12:37:32 +0000
Subject: [PATCH 01/59] build(deps-dev): bump ts-graphql-plugin from 2.1.3 to
 2.1.4

Bumps [ts-graphql-plugin](https://github.com/Quramy/ts-graphql-plugin) from 2.1.3 to 2.1.4.
- [Release notes](https://github.com/Quramy/ts-graphql-plugin/releases)
- [Commits](https://github.com/Quramy/ts-graphql-plugin/compare/v2.1.3...v2.1.4)

---
updated-dependencies:
- dependency-name: ts-graphql-plugin
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 gatsby-theme-oi-wiki/package.json | 2 +-
 yarn.lock                         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/gatsby-theme-oi-wiki/package.json b/gatsby-theme-oi-wiki/package.json
index dc39052f..d1fc94e8 100644
--- a/gatsby-theme-oi-wiki/package.json
+++ b/gatsby-theme-oi-wiki/package.json
@@ -80,7 +80,7 @@
     "esm": "^3.2.25",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.24",
     "schema-dts": "^0.9.0",
-    "ts-graphql-plugin": "^2.1.3",
+    "ts-graphql-plugin": "^2.1.4",
     "typescript": "^4.3.5"
   },
   "optionalDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 38ecea93..99ffc9c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14828,10 +14828,10 @@ trough@^2.0.0:
   resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-2.2.1.tgz#c5bf04a5bbec3fd118be4084461b3a27c4d796bf"
   integrity sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==
 
-ts-graphql-plugin@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ts-graphql-plugin/-/ts-graphql-plugin-2.1.3.tgz#a0c72ed5dafa1f1fd65d42759d5e4cdd71ae9662"
-  integrity sha512-yum0h2fWbcmac8X0YVtBITfpLkpLRx+KEQPly02VN3HUGElhtUmoJWuStm5ae2oyjZjOmjcq88VEG8D9R5OePA==
+ts-graphql-plugin@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/ts-graphql-plugin/-/ts-graphql-plugin-2.1.4.tgz#7e06abe2c2ecc24732ba60909ee0c7480e4fa4c3"
+  integrity sha512-KPT0vMO3CUiJg0Uy9UVm8xLq22E/Q6O5fWXuZjrWBXOmzpaLoCQRcS4GvIXkz1l/Fzph2CXo0KPQ3V+lqsoDqQ==
   dependencies:
     graphql-language-service-interface "^2.4.1"
     graphql-language-service-types "^1.6.1"

From 3f782b20263dbe820c1b6eb3baba2b0b53f1ceaf Mon Sep 17 00:00:00 2001
From: Xiaodai Dai <diauweb@live.com>
Date: Tue, 21 Sep 2021 01:49:39 +0000
Subject: [PATCH 02/59] refractor: rename confusing `gatsby-config.esm`

---
 gatsby-theme-oi-wiki/.eslintrc.js         |  1 +
 gatsby-theme-oi-wiki/esmRequire.js        | 34 +++++++++++++++++++++++
 gatsby-theme-oi-wiki/gatsby-config.esm.js | 27 ------------------
 gatsby-theme-oi-wiki/gatsby-config.js     |  5 ++--
 4 files changed, 37 insertions(+), 30 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/esmRequire.js
 delete mode 100644 gatsby-theme-oi-wiki/gatsby-config.esm.js

diff --git a/gatsby-theme-oi-wiki/.eslintrc.js b/gatsby-theme-oi-wiki/.eslintrc.js
index 3f1d19f7..1ed5e31c 100644
--- a/gatsby-theme-oi-wiki/.eslintrc.js
+++ b/gatsby-theme-oi-wiki/.eslintrc.js
@@ -74,6 +74,7 @@ module.exports = {
       files: [
         '.eslintrc.js',
         'gatsby-*.js',
+        'esmRequire.js',
         'plugins/**/*.js',
       ],
       env: {
diff --git a/gatsby-theme-oi-wiki/esmRequire.js b/gatsby-theme-oi-wiki/esmRequire.js
new file mode 100644
index 00000000..7dd9f2e6
--- /dev/null
+++ b/gatsby-theme-oi-wiki/esmRequire.js
@@ -0,0 +1,34 @@
+/**
+ * @file export compiled ES modules as a workaround before Gatsby properly handles it
+ */
+
+const esm = require('esm')
+const fs = require('fs')
+const Module = require('module')
+
+
+// Node: bypass [ERR_REQUIRE_ESM]
+const orig = Module._extensions['.js']
+Module._extensions['.js'] = function (module, filename) {
+  try {
+    return orig(module, filename)
+  } catch (e) {
+    if (e.code === 'ERR_REQUIRE_ESM') {
+      const content = fs.readFileSync(filename, 'utf8')
+      module._compile(content, filename)
+    }
+  }
+}
+
+const _esmRequire = esm(module, {
+  cjs: true,
+  mode: 'all',
+})
+
+// don't pollute Module
+Module._extensions['.js'] = orig
+
+
+module.exports = function esmRequire(id) {
+  return _esmRequire(id)
+}
diff --git a/gatsby-theme-oi-wiki/gatsby-config.esm.js b/gatsby-theme-oi-wiki/gatsby-config.esm.js
deleted file mode 100644
index e3a7b624..00000000
--- a/gatsby-theme-oi-wiki/gatsby-config.esm.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * @file export compiled ES modules as a workaround before Gatsby properly handles it
- */
-
-const esm = require('esm')
-const fs = require('fs')
-
-// Node: bypass [ERR_REQUIRE_ESM] limitations
-const Module = require('module')
-const orig = Module._extensions['.js']
-Module._extensions['.js'] = function (module, filename) {
-  const contents = fs.readFileSync(filename, 'utf8')
-  module._compile(contents, filename)
-}
-
-// ESM: compile
-const esmRequire = esm(module, {
-  cjs: true,
-  mode: 'all',
-})
-
-const imports = {
-  remarkDetails: esmRequire('remark-details').default,
-}
-
-Module._extensions['.js'] = orig
-module.exports = imports
diff --git a/gatsby-theme-oi-wiki/gatsby-config.js b/gatsby-theme-oi-wiki/gatsby-config.js
index a34fc25b..c2527eb6 100644
--- a/gatsby-theme-oi-wiki/gatsby-config.js
+++ b/gatsby-theme-oi-wiki/gatsby-config.js
@@ -1,4 +1,5 @@
 const path = require('path')
+const esmRequire = require('./esmRequire')
 
 const IS_EXEC_BUILD = process.env.gatsby_executing_command === 'build'
 const IS_PROD = process.env.PRODUCTION === 'true' ||
@@ -26,8 +27,6 @@ const mathRehype = IS_EXEC_BUILD
   ? [require('rehype-mathjax/chtml'), { fontURL }]
   : [require('rehype-mathjax/browser')]
 
-const { remarkDetails } = require('./gatsby-config.esm')
-
 module.exports = {
   plugins: [
     {
@@ -87,7 +86,7 @@ module.exports = {
         ],
         remarkPlugins: [
           require('remark-math'),
-          remarkDetails,
+          esmRequire('remark-details').default,
           [require('@mgtd/remark-shiki').remarkShiki, {
             semantic: false,
             theme: 'css-variables',

From dde537c21271dc4d66857d30c4290ed1d1bb01b6 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Wed, 22 Sep 2021 00:30:09 +0800
Subject: [PATCH 03/59] refactor: minimum runnable site, add mobx as state
 management

BREAKING CHANGE: the old components and pages are all invalidated
---
 gatsby-theme-oi-wiki/.eslintrc.js             |   4 +-
 gatsby-theme-oi-wiki/gatsby-browser.js        |   7 +-
 gatsby-theme-oi-wiki/gatsby-node.js           | 272 +++++++++++-------
 gatsby-theme-oi-wiki/gatsby-ssr.js            |  50 +---
 gatsby-theme-oi-wiki/package.json             |   4 +
 gatsby-theme-oi-wiki/src/components/Code.tsx  |   6 +-
 .../src/components/StyledLayout.tsx           |   2 +-
 .../src/gatsby-func/WrapRootElement.tsx       |  43 +++
 .../src/gatsby-func/onPreRenderHTML.tsx       |  23 ++
 .../src/gatsby-func/onRenderBody.tsx          |  41 +++
 .../src/{pages => old-pages}/404.tsx          |   0
 .../src/{pages => old-pages}/pages.tsx        |   0
 .../src/{pages => old-pages}/play.tsx         |   0
 .../src/{pages => old-pages}/settings.tsx     |   0
 .../src/{pages => old-pages}/tags.tsx         |   0
 .../{templates => old-templates}/changelog.js |   0
 .../src/{templates => old-templates}/doc.js   |   0
 .../{templates => old-templates}/extra.css    |   0
 .../src/{templates => old-templates}/tags.js  |   0
 gatsby-theme-oi-wiki/src/static/cssVars.ts    |  40 +++
 gatsby-theme-oi-wiki/src/static/themeMode.ts  |  51 ++++
 .../src/stores/cssVarsStore.ts                |  77 +++++
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    | 106 +++++++
 gatsby-theme-oi-wiki/src/theme/index.ts       | 264 +++--------------
 gatsby-theme-oi-wiki/src/theme/old-index.ts   | 239 +++++++++++++++
 gatsby-theme-oi-wiki/src/types/window.d.ts    |   8 +
 .../src/utils/createCssVarPalette.ts          | 149 ++++++++++
 .../src/utils/persistStore.ts                 |  76 +++++
 gatsby-theme-oi-wiki/static/script.js         |  24 --
 gatsby-theme-oi-wiki/tsconfig.json            |   5 +-
 yarn.lock                                     |  34 +++
 31 files changed, 1116 insertions(+), 409 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/gatsby-func/onPreRenderHTML.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/gatsby-func/onRenderBody.tsx
 rename gatsby-theme-oi-wiki/src/{pages => old-pages}/404.tsx (100%)
 rename gatsby-theme-oi-wiki/src/{pages => old-pages}/pages.tsx (100%)
 rename gatsby-theme-oi-wiki/src/{pages => old-pages}/play.tsx (100%)
 rename gatsby-theme-oi-wiki/src/{pages => old-pages}/settings.tsx (100%)
 rename gatsby-theme-oi-wiki/src/{pages => old-pages}/tags.tsx (100%)
 rename gatsby-theme-oi-wiki/src/{templates => old-templates}/changelog.js (100%)
 rename gatsby-theme-oi-wiki/src/{templates => old-templates}/doc.js (100%)
 rename gatsby-theme-oi-wiki/src/{templates => old-templates}/extra.css (100%)
 rename gatsby-theme-oi-wiki/src/{templates => old-templates}/tags.js (100%)
 create mode 100644 gatsby-theme-oi-wiki/src/static/cssVars.ts
 create mode 100644 gatsby-theme-oi-wiki/src/static/themeMode.ts
 create mode 100644 gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts
 create mode 100644 gatsby-theme-oi-wiki/src/templates/Doc.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/theme/old-index.ts
 create mode 100644 gatsby-theme-oi-wiki/src/types/window.d.ts
 create mode 100644 gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts
 create mode 100644 gatsby-theme-oi-wiki/src/utils/persistStore.ts
 delete mode 100644 gatsby-theme-oi-wiki/static/script.js

diff --git a/gatsby-theme-oi-wiki/.eslintrc.js b/gatsby-theme-oi-wiki/.eslintrc.js
index 3f1d19f7..4d64c2d8 100644
--- a/gatsby-theme-oi-wiki/.eslintrc.js
+++ b/gatsby-theme-oi-wiki/.eslintrc.js
@@ -73,7 +73,9 @@ module.exports = {
     {
       files: [
         '.eslintrc.js',
-        'gatsby-*.js',
+        'gatsby-node.js',
+        'gatsby-config.js',
+        'gatsby-config.esm.js',
         'plugins/**/*.js',
       ],
       env: {
diff --git a/gatsby-theme-oi-wiki/gatsby-browser.js b/gatsby-theme-oi-wiki/gatsby-browser.js
index 67d5868e..e8c2a261 100644
--- a/gatsby-theme-oi-wiki/gatsby-browser.js
+++ b/gatsby-theme-oi-wiki/gatsby-browser.js
@@ -1,6 +1,7 @@
-require('./static/extra.css')
+import('./static/extra.css')
+import WrapRootElement from './src/gatsby-func/WrapRootElement'
 
-exports.onRouteUpdate = () => {
+const onRouteUpdate = () => {
   if (process.env.GATSBY_IS_DEV) {
     requestIdleCallback(() => MathJax.typeset())
   }
@@ -10,3 +11,5 @@ exports.onRouteUpdate = () => {
     console.error(e)
   }
 }
+
+export { onRouteUpdate, WrapRootElement as wrapRootElement }
diff --git a/gatsby-theme-oi-wiki/gatsby-node.js b/gatsby-theme-oi-wiki/gatsby-node.js
index 4609ece9..dabdc791 100644
--- a/gatsby-theme-oi-wiki/gatsby-node.js
+++ b/gatsby-theme-oi-wiki/gatsby-node.js
@@ -2,6 +2,7 @@ const _ = require('lodash')
 const git = require('simple-git')
 const { createFilePath } = require('gatsby-source-filesystem')
 const { SitemapManager } = require('sitemap-manager')
+const path = require('path')
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
@@ -16,10 +17,6 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   })
 }
 
-const gitQuery = async function (prop) {
-  const res = await git().log(['-15', prop]).catch(err => console.log(err))
-  return res
-}
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
   // you only want to operate on `Mdx` nodes. If you had content from a
@@ -43,12 +40,10 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
   }
 }
 
-exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createPage } = actions
+const gitQuery = async (prop) => await git().log(['-15', prop])
 
-  const docTemplate = require.resolve('./src/templates/doc.js')
-  const tagTemplate = require.resolve('./src/templates/tags.js')
-  const logTemplate = require.resolve('./src/templates/changelog.js')
+exports.createPages = async (args) => {
+  const { graphql, actions, reporter } = args
 
   const result = await graphql(`
     {
@@ -78,122 +73,191 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     }
   `)
 
-  // handle errors
+  // return when the result is wrong
   if (result.errors) {
     reporter.panicOnBuild('Error while running GraphQL query.')
     return
   }
 
-  const posts = result.data.postsRemark.edges
-  // console.log(posts)
-  // Create post detail pages
+  const { createPage } = actions
+  const data = result.data
+  const docTemplate = require.resolve('./src/templates/Doc.tsx')
+
+  const posts = data.postsRemark.edges
 
   for (const index in posts) {
     const { node } = posts[index]
-
-    const previous = index === posts.length - 1 ? null : posts[index + 1]
+    const prev = index === posts.length - 1 ? null : posts[index + 1]
     const next = index === 0 ? null : posts[index - 1]
-    // /workspace/gatsby-oi-wiki/docs/empty.md -> docs/empty.md
     const { fileAbsolutePath: path } = node
-    const relativePath = path.slice(path.indexOf('/docs') + 1)
+    const relativePath = path?.slice(path.indexOf('/docs') + 1) || ''
+
+    const log = await gitQuery(relativePath).catch(err => console.error(err))
 
-    const log = await gitQuery(relativePath)
     createPage({
       path: node.fields.slug,
       component: docTemplate,
       context: {
         id: node.id,
         lastModified: log.latest?.date || new Date().toString(),
-        previous,
+        prev,
         next,
       },
     })
-    createPage({
-      path: node.fields.slug + 'changelog/',
-      component: logTemplate,
-      context: {
-        title: node.frontmatter.title,
-        changelog: log,
-        relativePath,
-      },
-    })
-  }
-
-  // Extract tag data from query
-  const tags = result.data.tagsGroup.group
-
-  // Make tag pages
-  tags.forEach((tag) => {
-    createPage({
-      path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
-      component: tagTemplate,
-      context: {
-        tag: tag.fieldValue,
-      },
-    })
-  })
-
-  if (result.errors) {
-    reporter.panic(result.errors)
   }
 }
 
-exports.onPostBuild = async ({ graphql, reporter }) => {
-  let queryResult = await graphql(`{
-    site {
-      siteMetadata {
-        siteUrl
-      }
-    }
-    postsQuery:allMarkdownRemark {
-      edges {
-        node {
-          id
-          fields{
-            slug
-          }
-          fileAbsolutePath
-        }
-      }
-    }
-    tagsQuery:allMarkdownRemark(limit: 2000) {
-      group(field: frontmatter___tags) {
-        fieldValue
-      }
-    }
-  }`)
-  if (queryResult.errors) {
-    reporter.panicOnBuild('Error while running GraphQL query to create sitemaps.', queryResult.errors)
-  }
-  queryResult = queryResult.data
-  const siteUrl = queryResult.site.siteMetadata.siteUrl
-
-  const MySitemap = new SitemapManager({ siteURL: siteUrl })
-  for (const index in queryResult.postsQuery.edges) {
-    const { node } = queryResult.postsQuery.edges[index]
-    const { fileAbsolutePath: path } = node
-    const relativePath = path.slice(path.indexOf('/docs') + 1)
-    const lastmod = (await gitQuery(relativePath)).latest?.date || new Date().toString()
+// exports.createPages = async ({ actions, graphql, reporter }) => {
+//   const { createPage } = actions
+//
+//   const docTemplate = require.resolve('./src/templates/doc.js')
+//   const tagTemplate = require.resolve('./src/templates/tags.js')
+//   const logTemplate = require.resolve('./src/templates/changelog.js')
+//
+//   const result = await graphql(`
+//     {
+//       postsRemark: allMarkdownRemark(
+//         sort: { order: DESC, fields: [frontmatter___title] }
+//         limit: 2000
+//       ) {
+//         edges {
+//           node {
+//             fields {
+//               slug
+//             }
+//             id
+//             frontmatter {
+//               tags
+//               title
+//             }
+//             fileAbsolutePath
+//           }
+//         }
+//       }
+//       tagsGroup: allMarkdownRemark(limit: 2000) {
+//         group(field: frontmatter___tags) {
+//           fieldValue
+//         }
+//       }
+//     }
+//   `)
+//
+//   // handle errors
+//   if (result.errors) {
+//     reporter.panicOnBuild('Error while running GraphQL query.')
+//     return
+//   }
+//
+//   const posts = result.data.postsRemark.edges
+//   // console.log(posts)
+//   // Create post detail pages
+//
+//   for (const index in posts) {
+//     const { node } = posts[index]
+//
+//     const previous = index === posts.length - 1 ? null : posts[index + 1]
+//     const next = index === 0 ? null : posts[index - 1]
+//     // /workspace/gatsby-oi-wiki/docs/empty.md -> docs/empty.md
+//     const { fileAbsolutePath: path } = node
+//     const relativePath = path.slice(path.indexOf('/docs') + 1)
+//
+//     const log = await gitQuery(relativePath)
+//     createPage({
+//       path: node.fields.slug,
+//       component: docTemplate,
+//       context: {
+//         id: node.id,
+//         lastModified: log.latest?.date || new Date().toString(),
+//         previous,
+//         next,
+//       },
+//     })
+//     createPage({
+//       path: node.fields.slug + 'changelog/',
+//       component: logTemplate,
+//       context: {
+//         title: node.frontmatter.title,
+//         changelog: log,
+//         relativePath,
+//       },
+//     })
+//   }
+//
+//   // Extract tag data from query
+//   const tags = result.data.tagsGroup.group
+//
+//   // Make tag pages
+//   tags.forEach((tag) => {
+//     createPage({
+//       path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
+//       component: tagTemplate,
+//       context: {
+//         tag: tag.fieldValue,
+//       },
+//     })
+//   })
+//
+//   if (result.errors) {
+//     reporter.panic(result.errors)
+//   }
+// }
 
-    MySitemap.addUrl('articles', [{
-      loc: new URL(node.fields.slug, siteUrl).toString(),
-      lastmod,
-    }])
-    MySitemap.addUrl('logs', [{
-      loc: new URL(node.fields.slug + 'changelog/', siteUrl).toString(),
-      lastmod,
-    }])
-  }
-  queryResult.tagsQuery.group.forEach(({ fieldValue }) => {
-    MySitemap.addUrl('tags', [{
-      loc: new URL(`/tags/${_.kebabCase(fieldValue)}/`, siteUrl).toString(),
-    }])
-  })
-  MySitemap.addUrl('pages', [
-    { loc: new URL('/pages/', siteUrl).toString() },
-    { loc: new URL('/settings/', siteUrl).toString() },
-  ])
-  await MySitemap.finish().catch((e) => {
-    reporter.error(e)
-  })
-}
+// exports.onPostBuild = async ({ graphql, reporter }) => {
+//   let queryResult = await graphql(`{
+//     site {
+//       siteMetadata {
+//         siteUrl
+//       }
+//     }
+//     postsQuery:allMarkdownRemark {
+//       edges {
+//         node {
+//           id
+//           fields{
+//             slug
+//           }
+//           fileAbsolutePath
+//         }
+//       }
+//     }
+//     tagsQuery:allMarkdownRemark(limit: 2000) {
+//       group(field: frontmatter___tags) {
+//         fieldValue
+//       }
+//     }
+//   }`)
+//   if (queryResult.errors) {
+//     reporter.panicOnBuild('Error while running GraphQL query to create sitemaps.', queryResult.errors)
+//   }
+//   queryResult = queryResult.data
+//   const siteUrl = queryResult.site.siteMetadata.siteUrl
+//
+//   const MySitemap = new SitemapManager({ siteURL: siteUrl })
+//   for (const index in queryResult.postsQuery.edges) {
+//     const { node } = queryResult.postsQuery.edges[index]
+//     const { fileAbsolutePath: path } = node
+//     const relativePath = path.slice(path.indexOf('/docs') + 1)
+//     const lastmod = (await gitQuery(relativePath)).latest?.date || new Date().toString()
+//
+//     MySitemap.addUrl('articles', [{
+//       loc: new URL(node.fields.slug, siteUrl).toString(),
+//       lastmod,
+//     }])
+//     MySitemap.addUrl('logs', [{
+//       loc: new URL(node.fields.slug + 'changelog/', siteUrl).toString(),
+//       lastmod,
+//     }])
+//   }
+//   queryResult.tagsQuery.group.forEach(({ fieldValue }) => {
+//     MySitemap.addUrl('tags', [{
+//       loc: new URL(`/tags/${_.kebabCase(fieldValue)}/`, siteUrl).toString(),
+//     }])
+//   })
+//   MySitemap.addUrl('pages', [
+//     { loc: new URL('/pages/', siteUrl).toString() },
+//     { loc: new URL('/settings/', siteUrl).toString() },
+//   ])
+//   await MySitemap.finish().catch((e) => {
+//     reporter.error(e)
+//   })
+// }
diff --git a/gatsby-theme-oi-wiki/gatsby-ssr.js b/gatsby-theme-oi-wiki/gatsby-ssr.js
index d4606900..702a7929 100644
--- a/gatsby-theme-oi-wiki/gatsby-ssr.js
+++ b/gatsby-theme-oi-wiki/gatsby-ssr.js
@@ -1,46 +1,8 @@
-const React = require('react')
-const script = require('./static/script')
+import WrapRootElement from './src/gatsby-func/WrapRootElement'
+import onRenderBody from './src/gatsby-func/onRenderBody'
+import onPreRenderHTML from './src/gatsby-func/onPreRenderHTML'
+import { enableStaticRendering } from 'mobx-react-lite'
 
-const darkModeSwitch = `(${script.default.toString()})()`
+enableStaticRendering(true)
 
-const HtmlAttributes = {
-  lang: 'zh-cmn-Hans',
-}
-
-const HeadComponents = [
-  <meta key="charset" charSet="utf-8"/>,
-  <meta key="ua" httpEquiv="x-ua-compatible" content="ie=edge"/>,
-  <meta key="viewport" name="viewport"
-        content="width=device-width, initial-scale=1, shrink-to-fit=no"
-  />,
-  <script key="analytics" dangerouslySetInnerHTML={{
-    __html: `window.ga_tid = "UA-124485594-1";
-    window.ga_api = "https://margatroid.xyz/vue.min.js";`,
-  }}/>,
-  <script key="cfga" src="https://cdn.jsdelivr.net/npm/cfga@1.0.3" async></script>,
-  <script key="theme" dangerouslySetInnerHTML={{
-    __html: darkModeSwitch,
-  }}/>,
-]
-
-exports.onPreRenderHTML = ({
-                             getPostBodyComponents,
-                             replacePostBodyComponents,
-                           }) => {
-  const comps = getPostBodyComponents()
-  process.env.GATSBY_IS_DEV && comps.push(
-    <script
-      src="https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js"
-      id="MathJax-script"
-    />,
-  )
-  replacePostBodyComponents(comps)
-}
-
-exports.onRenderBody = ({
-                          setHeadComponents,
-                          setHtmlAttributes,
-                        }) => {
-  setHtmlAttributes(HtmlAttributes)
-  setHeadComponents(HeadComponents)
-}
+export { onPreRenderHTML, onRenderBody, WrapRootElement as wrapRootElement }
diff --git a/gatsby-theme-oi-wiki/package.json b/gatsby-theme-oi-wiki/package.json
index 480df390..86f824f6 100644
--- a/gatsby-theme-oi-wiki/package.json
+++ b/gatsby-theme-oi-wiki/package.json
@@ -45,9 +45,13 @@
     "gatsby-transformer-remark-rehype": "^4.0.0",
     "gatsby-transformer-sharp": "^3.9",
     "hast-util-to-text": "^3.0.0",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "mark.js": "^8.11.1",
     "mdast-util-toc": "^6.0.0",
+    "mobx": "^6.3.3",
+    "mobx-persist-store": "^1.0.3",
+    "mobx-react-lite": "^3.2.1",
     "path-browserify": "^1.0.1",
     "preact": "^10.5.14",
     "preact-render-to-string": "^5.1.19",
diff --git a/gatsby-theme-oi-wiki/src/components/Code.tsx b/gatsby-theme-oi-wiki/src/components/Code.tsx
index 02fab6dc..e69d2959 100644
--- a/gatsby-theme-oi-wiki/src/components/Code.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Code.tsx
@@ -6,7 +6,7 @@ import { navigate } from 'gatsby'
 import has from 'lodash/has'
 import React, { useCallback, useRef, useState } from 'react'
 import type { LangType } from '../lib/play/codeLang'
-import type { PlaygroundLocationState } from '../pages/play'
+import type { PlaygroundLocationState } from '../old-pages/play'
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -78,7 +78,7 @@ const Code: React.FC<{
             }
           }}
         >
-          <AssignmentOutlined />
+          <AssignmentOutlined/>
         </IconButton>
       </Tooltip>
       <Tooltip title="运行" arrow>
@@ -95,7 +95,7 @@ const Code: React.FC<{
           }}
           aria-label="run"
         >
-          <CodeOutlined />
+          <CodeOutlined/>
         </IconButton>
       </Tooltip>
       {children}
diff --git a/gatsby-theme-oi-wiki/src/components/StyledLayout.tsx b/gatsby-theme-oi-wiki/src/components/StyledLayout.tsx
index 521bacc7..3a9101bf 100644
--- a/gatsby-theme-oi-wiki/src/components/StyledLayout.tsx
+++ b/gatsby-theme-oi-wiki/src/components/StyledLayout.tsx
@@ -13,7 +13,7 @@ import {
   DarkCssBaseline,
   LightCssBaseline,
   SecondaryColorCssBaseline,
-} from '../theme'
+} from '../theme/old-index'
 import { scrollbarStyle } from '../styles/scrollbar'
 import Comment from './Comment'
 import Toc, { TocObj } from './Toc'
diff --git a/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx b/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx
new file mode 100644
index 00000000..6b6007da
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx
@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react'
+import CssBaseline from '@mui/material/CssBaseline'
+import ThemeProvider from '@mui/material/styles/ThemeProvider'
+import { WrapRootElementBrowserArgs } from 'gatsby'
+import { theme } from '../theme'
+import { cssVarsStore, VARS_STORE_ID } from '../stores/cssVarsStore'
+import { observer } from 'mobx-react-lite'
+import { autorun } from 'mobx'
+
+const StoreHandler: React.FC = observer(() => {
+
+  autorun(() => {
+    if (cssVarsStore.styleEl === null && typeof window !== 'undefined') {
+      cssVarsStore.setStyleEl(document.getElementById(VARS_STORE_ID))
+    }
+
+    if (cssVarsStore.styleEl !== null) {
+      cssVarsStore.styleEl.innerHTML = cssVarsStore.computedCss.styles
+    }
+  })
+
+  useEffect(() => {
+    return () => {
+      cssVarsStore.stopStore()
+    }
+  }, [])
+
+  return <></>
+})
+
+const WrapRootElement = ({ element }: WrapRootElementBrowserArgs): JSX.Element => {
+  return (
+    <React.StrictMode>
+      <StoreHandler/>
+      <ThemeProvider theme={theme}>
+        <CssBaseline/>
+        {element}
+      </ThemeProvider>
+    </React.StrictMode>
+  )
+}
+
+export default WrapRootElement
diff --git a/gatsby-theme-oi-wiki/src/gatsby-func/onPreRenderHTML.tsx b/gatsby-theme-oi-wiki/src/gatsby-func/onPreRenderHTML.tsx
new file mode 100644
index 00000000..7d84c1b5
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/gatsby-func/onPreRenderHTML.tsx
@@ -0,0 +1,23 @@
+import { PreRenderHTMLArgs } from 'gatsby'
+import React from 'react'
+
+const onPreRenderHTML = (args: PreRenderHTMLArgs): void => {
+  if (process.env.GATSBY_IS_DEV) {
+    const {
+      getPostBodyComponents,
+      replacePostBodyComponents,
+    } = args
+    const comps = getPostBodyComponents()
+
+    comps.push(
+      <script
+        src="https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js"
+        id="MathJax-script"
+      />,
+    )
+
+    replacePostBodyComponents(comps)
+  }
+}
+
+export default onPreRenderHTML
diff --git a/gatsby-theme-oi-wiki/src/gatsby-func/onRenderBody.tsx b/gatsby-theme-oi-wiki/src/gatsby-func/onRenderBody.tsx
new file mode 100644
index 00000000..a3aa0490
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/gatsby-func/onRenderBody.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { VARS_STORE_ID } from '../stores/cssVarsStore'
+import { theme } from '../theme'
+import createCssVarPalette, { computeCss } from '../utils/createCssVarPalette'
+import { RenderBodyArgs } from 'gatsby'
+import cssVars from '../static/cssVars'
+import themeMode from '../static/themeMode'
+
+const { lightMap, darkMap } = createCssVarPalette(theme.palette)
+
+const defaultCssVars = computeCss(lightMap, darkMap).styles.replace(/\s/g, '')
+
+const headComponents: React.ReactNode[] = [
+  <meta key="color-scheme" name="color-scheme" content="light dark"/>,
+  <script key="theme-switch" dangerouslySetInnerHTML={{
+    __html: `(${themeMode})()`,
+  }}/>,
+  <style key={VARS_STORE_ID} id={VARS_STORE_ID} dangerouslySetInnerHTML={{
+    __html: defaultCssVars,
+  }}/>,
+  <script key={VARS_STORE_ID + '-restore'} dangerouslySetInnerHTML={{
+    __html: `(${cssVars})()`,
+  }}/>,
+  <script key="analytics" dangerouslySetInnerHTML={{
+    __html: `window.ga_tid = "UA-124485594-1"; window.ga_api = "https://margatroid.xyz/vue.min.js";`,
+  }}/>,
+  <script key="cfga" src="https://cdn.jsdelivr.net/npm/cfga@1.0.3" async/>,
+]
+
+const htmlAttributes = {
+  lang: 'zh-cmn-Hans',
+}
+
+const onRenderBody = (props: RenderBodyArgs): void => {
+  const { setHeadComponents, setHtmlAttributes } = props
+
+  setHeadComponents(headComponents)
+  setHtmlAttributes(htmlAttributes)
+}
+
+export default onRenderBody
diff --git a/gatsby-theme-oi-wiki/src/pages/404.tsx b/gatsby-theme-oi-wiki/src/old-pages/404.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/pages/404.tsx
rename to gatsby-theme-oi-wiki/src/old-pages/404.tsx
diff --git a/gatsby-theme-oi-wiki/src/pages/pages.tsx b/gatsby-theme-oi-wiki/src/old-pages/pages.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/pages/pages.tsx
rename to gatsby-theme-oi-wiki/src/old-pages/pages.tsx
diff --git a/gatsby-theme-oi-wiki/src/pages/play.tsx b/gatsby-theme-oi-wiki/src/old-pages/play.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/pages/play.tsx
rename to gatsby-theme-oi-wiki/src/old-pages/play.tsx
diff --git a/gatsby-theme-oi-wiki/src/pages/settings.tsx b/gatsby-theme-oi-wiki/src/old-pages/settings.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/pages/settings.tsx
rename to gatsby-theme-oi-wiki/src/old-pages/settings.tsx
diff --git a/gatsby-theme-oi-wiki/src/pages/tags.tsx b/gatsby-theme-oi-wiki/src/old-pages/tags.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/pages/tags.tsx
rename to gatsby-theme-oi-wiki/src/old-pages/tags.tsx
diff --git a/gatsby-theme-oi-wiki/src/templates/changelog.js b/gatsby-theme-oi-wiki/src/old-templates/changelog.js
similarity index 100%
rename from gatsby-theme-oi-wiki/src/templates/changelog.js
rename to gatsby-theme-oi-wiki/src/old-templates/changelog.js
diff --git a/gatsby-theme-oi-wiki/src/templates/doc.js b/gatsby-theme-oi-wiki/src/old-templates/doc.js
similarity index 100%
rename from gatsby-theme-oi-wiki/src/templates/doc.js
rename to gatsby-theme-oi-wiki/src/old-templates/doc.js
diff --git a/gatsby-theme-oi-wiki/src/templates/extra.css b/gatsby-theme-oi-wiki/src/old-templates/extra.css
similarity index 100%
rename from gatsby-theme-oi-wiki/src/templates/extra.css
rename to gatsby-theme-oi-wiki/src/old-templates/extra.css
diff --git a/gatsby-theme-oi-wiki/src/templates/tags.js b/gatsby-theme-oi-wiki/src/old-templates/tags.js
similarity index 100%
rename from gatsby-theme-oi-wiki/src/templates/tags.js
rename to gatsby-theme-oi-wiki/src/old-templates/tags.js
diff --git a/gatsby-theme-oi-wiki/src/static/cssVars.ts b/gatsby-theme-oi-wiki/src/static/cssVars.ts
new file mode 100644
index 00000000..33d1312a
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/static/cssVars.ts
@@ -0,0 +1,40 @@
+import { VarsStore } from '../stores/cssVarsStore'
+
+const cssVars = (): void => {
+  const DB = 'persist-info'
+  const STORE = 'keyvaluepairs'
+  const KEY = 'css-vars'
+
+  const mapToStr = (map: Map<string, string>): string =>
+    Array.from(map).map(([k, v]) => `${k}: ${v};`).join(' ')
+
+  const dbOpenReq = window.indexedDB.open(DB)
+  const styleEl = document.getElementById(KEY)
+  dbOpenReq.onsuccess = () => {
+    const db = dbOpenReq.result
+    const trans = db.transaction([STORE], 'readonly')
+    const query = trans.objectStore(STORE).get(KEY)
+
+    query.onsuccess = () => {
+      const res = query.result as VarsStore
+
+      const style = `
+        :root {
+          color-scheme: light;
+          ${mapToStr(res.light)}
+        }
+
+        :root[data-theme="dark"] {
+          color-scheme: dark;
+          ${mapToStr(res.dark)}
+        }
+      `
+
+      if (styleEl) {
+        styleEl.innerHTML = style
+      }
+    }
+  }
+}
+
+export default cssVars
diff --git a/gatsby-theme-oi-wiki/src/static/themeMode.ts b/gatsby-theme-oi-wiki/src/static/themeMode.ts
new file mode 100644
index 00000000..5ef39d38
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/static/themeMode.ts
@@ -0,0 +1,51 @@
+const themeMode = (): void => {
+  const STORE_KEY = 'theme'
+  const THEME_MODE = {
+    light: 'light',
+    dark: 'dark',
+  }
+
+  const setTheme = (theme: string): void => {
+    document.documentElement.dataset[STORE_KEY] = theme
+    window.__theme = theme
+    window.__onThemeChange(theme)
+  }
+
+  /**
+   * can be overwritten in FC
+   */
+  window.__onThemeChange = () => {
+    // do sth
+  }
+
+  /**
+   * can be triggered by FC
+   * @param theme
+   */
+  window.__setPreferredTheme = (theme) => {
+    setTheme(theme)
+    try {
+      localStorage.setItem(STORE_KEY, JSON.stringify(window.__theme))
+    } catch (e) {
+      // just ignore
+    }
+  }
+
+  const matchTheme = (query: MediaQueryList | MediaQueryListEvent): string => {
+    return query.matches ? THEME_MODE.dark : THEME_MODE.light
+  }
+
+  const darkQuery = window.matchMedia(`(prefers-color-scheme: ${THEME_MODE.dark})`)
+
+  darkQuery.addEventListener('change', (event) => {
+    window.__setPreferredTheme(matchTheme(event))
+  })
+
+  try {
+    setTheme(JSON.parse(localStorage.getItem(STORE_KEY) || '') || matchTheme(darkQuery))
+  } catch (e) {
+    // just ignore
+  }
+}
+
+export default themeMode
diff --git a/gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts b/gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts
new file mode 100644
index 00000000..2b9017f7
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts
@@ -0,0 +1,77 @@
+import createCSSVars, { computeCss, VarMap } from '../utils/createCssVarPalette'
+import { theme } from '../theme'
+import persistStore from '../utils/persistStore'
+import { SerializedStyles } from '@emotion/react'
+import { Nullable } from '../types/common'
+import { computed, observable } from 'mobx'
+
+export interface VarsStore {
+  light: VarMap;
+  dark: VarMap;
+  styleEl: Nullable<HTMLElement>;
+
+  computedCss: SerializedStyles;
+
+  setLight(light: VarMap): void;
+
+  setDark(dark: VarMap): void;
+
+  setStyleEl(el: Nullable<HTMLElement>): void;
+
+  setWithKey(label: ModeLabel, key: string, val: string): void;
+
+  getWithKey(label: ModeLabel, key: string): string;
+}
+
+export type ModeLabel = 'light' | 'dark'
+
+
+const VARS_STORE_ID = 'css-vars'
+const { lightMap, darkMap } = createCSSVars(theme.palette)
+
+const cssVarsStore = persistStore<VarsStore>(
+  {
+    light: lightMap,
+    dark: darkMap,
+    styleEl: null,
+
+    get computedCss() {
+      return computeCss(lightMap, darkMap)
+    },
+
+    setLight(light) {
+      this.light = light
+    },
+    setDark(dark) {
+      this.dark = dark
+    },
+    setStyleEl(el) {
+      this.styleEl = el
+    },
+    setWithKey(label, key, val) {
+      this[label].set(key, val)
+    },
+    getWithKey(label, key) {
+      const val = this[label].get(key)
+      return typeof val === 'undefined'
+        ? ''
+        : val.includes(',')
+          ? `rgba(${val})`
+          : val
+    },
+  },
+  {
+    name: VARS_STORE_ID,
+    properties: ['light', 'dark'],
+  },
+  {
+    decorators: {
+      light: observable.deep,
+      dark: observable.deep,
+      computedCss: computed,
+    },
+  },
+)
+
+
+export { cssVarsStore, VARS_STORE_ID }
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
new file mode 100644
index 00000000..db247cde
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import { DeepRequiredNonNull } from '../types/common'
+import unified from 'unified'
+import rehypeReact, { Options } from 'rehype-react'
+import { Root } from 'hast'
+import { Helmet } from 'react-helmet'
+import Grid from '@mui/material/Grid'
+
+export const query = graphql`
+  query DocInfo($id: String!) {
+    site {
+      siteMetadata {
+        description,
+        title
+      }
+    }
+
+    mdx: markdownRemark(id: { eq: $id }) {
+      id
+      wordCount {
+        words
+      }
+      fields {
+        slug
+        isIndex
+      }
+      excerpt
+      htmlAst
+      headings {
+        value
+      }
+      frontmatter {
+        author
+        tags
+        title
+        noMeta
+        noComment
+        description
+      }
+      headings {
+        depth
+        id
+        value
+      }
+      parent {
+        ... on File {
+          relativePath
+          modifiedTime(formatString: "YYYY/MM/DD")
+          birthTime(formatString: "")
+          changeTime(formatString: "")
+        }
+      }
+    }
+  }
+`
+
+interface DocProps {
+  data: DeepRequiredNonNull<GatsbyTypes.DocInfoQuery>,
+  location: Location
+}
+
+const processor = unified()
+  .use(rehypeReact, {
+    createElement: React.createElement,
+  } as Options<typeof React.createElement>)
+
+const contentParser = (htmlAst: Root): JSX.Element =>
+  (processor.stringify(htmlAst) as never as JSX.Element)
+
+const Doc: React.FC<DocProps> = (props) => {
+  const { data, location } = props
+  const { mdx, site } = data
+
+  const title = mdx.fields.slug === '/' ? '' : mdx.frontmatter.title
+  const description = mdx.frontmatter.description || mdx.excerpt
+  const authors = mdx.frontmatter.author || ''
+  const tags = mdx.frontmatter.tags || []
+  const noMeta = mdx.frontmatter.noMeta || false
+  const noComment = mdx.frontmatter.noComment || false
+  const noEdit = false
+  const headings = mdx.headings || null
+  const relativePath = mdx.parent.relativePath || ''
+  const modifiedTime = mdx.parent.modifiedTime || ''
+  const wordCount = mdx.wordCount.words || 0
+  const datePublished = mdx.parent.birthTime || ''
+  const dateModified = mdx.parent.changeTime || ''
+  const isIndex = mdx.fields.isIndex
+  const isWIP = wordCount === 0 || (tags?.findIndex((x: string) => x === 'WIP') >= 0)
+  const siteTitle = site.siteMetadata.title
+
+
+  return (
+    <>
+      <Helmet title={`${title ? title + ' - ' : ''}${siteTitle}`}/>
+
+      <Grid container={true} flexDirection="column">
+        <article>
+          {contentParser(mdx.htmlAst)}
+        </article>
+      </Grid>
+    </>
+  )
+}
+
+export default Doc
diff --git a/gatsby-theme-oi-wiki/src/theme/index.ts b/gatsby-theme-oi-wiki/src/theme/index.ts
index 9f30a9d3..f4539a52 100644
--- a/gatsby-theme-oi-wiki/src/theme/index.ts
+++ b/gatsby-theme-oi-wiki/src/theme/index.ts
@@ -1,239 +1,45 @@
-import createPalette, { Palette, PaletteColor } from '@material-ui/core/styles/createPalette'
-import blue from '@material-ui/core/colors/blue'
-import grey from '@material-ui/core/colors/grey'
-import red from '@material-ui/core/colors/red'
-import { createTheme, hexToRgb, ThemeOptions, withStyles } from '@material-ui/core/styles'
-
-import globalStyles from './global'
-
-import paletteColors from '../styles/colors'
-import { Nullable, StrIndexObj } from '../types/common'
-import { noopNull } from '../utils/common'
-
-import DarkPlus from './hightlight-themes/darkplus'
-import LightPlus from './hightlight-themes/lightplus'
-
-type DStrIndexObj = StrIndexObj<StrIndexObj>
-type HexToRGBAParamType = (color?: string, alpha?: number) => string | null
-type ApplyDefaultsType = (theme: Palette, ...keys: (keyof Palette)[]) => StrIndexObj<Nullable<string>>
-type ApplyAdaptiveType = (...keys: (keyof Palette)[]) => DStrIndexObj
-type WithStylesReturnType = ReturnType<typeof withStyles>
-type GetThemeCSSElType = (style: WithStylesReturnType) => ReturnType<WithStylesReturnType>
-
-const RGBA_EXPR = /^rgba\((.*)\)$/
-const RGB_EXPR = /^rgb\((.*)\)$/
-const HEX_EXPR = /^#([A-Fa-f0-9]{3}){1,2}$/
-const hexToRGBAParam: HexToRGBAParamType = (color, alpha = 1) => {
-  if (color) {
-    let res
-    if (color === 'auto') return color
-    else if ((res = color.match(RGBA_EXPR)) !== null) {
-      return res[1]
-    } else if ((res = color.match(RGB_EXPR)) !== null) {
-      return `${res[1]}, ${alpha}`
-    } else if (HEX_EXPR.test(color)) {
-      return `${hexToRgb(color).trim().match(RGB_EXPR)?.[1]}, ${alpha}`
-    } else throw new Error('Bad Hex ' + color)
-  } else return null
-}
-
-const applyDefaults: ApplyDefaultsType = (theme, ...keys) => {
-  const exp = /^(#|rgba)/
-  const keyObj: ReturnType<ApplyDefaultsType> = {}
-  keys.forEach(k => {
-    const colorKind = theme[k as keyof Palette]
-    Object.keys(colorKind).forEach(el => {
-      const hex = (colorKind as PaletteColor)[el as keyof PaletteColor]
-      if (exp.test(hex)) {
-        keyObj[`--${k}-${el}`] = hexToRGBAParam(hex.toString())
-      }
-    })
-  })
-
-  return keyObj
-}
-
-const applyAdaptive: ApplyAdaptiveType = (...keys) => {
-  const exp = /^(#|rgba)/
-  const rst: ReturnType<ApplyAdaptiveType> = {}
-  keys.forEach(k => {
-    const obj: StrIndexObj = {}
-    const colorKind = lightColor[k]
-    Object.keys(colorKind).forEach(el => {
-      const color = (colorKind as PaletteColor)[el as keyof PaletteColor]
-      obj[el] = exp.test(color) ? `rgba(var(--${k}-${el}))` : color
-    })
-    rst[k] = obj
-  })
-
-  return rst
-}
-
-const getThemeCssEl: GetThemeCSSElType = (style) => style(noopNull)
-
-export const CustomCssBaseline = globalStyles(noopNull as any)
-
-const lightColor = createPalette({ type: 'light' })
-const darkColor = createPalette({ type: 'dark' })
-const paletteKeys: (keyof Palette)[] = ['primary', 'secondary', 'text', 'background', 'action', 'error', 'warning', 'info', 'success']
-
-const lightCss = {
-  '@global': {
-    'html[data-theme=light]': {
-      '--primary-color': hexToRGBAParam(lightColor.primary.main),
-      '--footer-bg': hexToRGBAParam(grey[200]),
-      '--footer-text': hexToRGBAParam(grey[700]),
-      '--details-border': hexToRGBAParam(blue[500]),
-      '--details-main': hexToRGBAParam(blue[50]),
-      '--blockquote': '0, 0, 0, .12',
-      '--inline-color': '#37474f',
-      '--inline-bg-hsla': 'hsla(0,0%,85%,.5)',
-      '--search-bg': hexToRGBAParam(grey[100]),
-      // '--search-highlight': hexToRGBAParam('#174d8c'),
-      '--tab-hover': hexToRGBAParam('#000'),
-      '--divider': hexToRGBAParam(lightColor.divider),
-      '--subtitle-text': '0, 0, 0, .7',
-      '--alert-info-bg': hexToRGBAParam(blue[50]),
-      '--alert-error-bg': hexToRGBAParam(red[50]),
-      '--clicked-reaction-button': hexToRGBAParam('#faebd7'),
-      '--fade-background': 'linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)',
-      '--link-default': hexToRGBAParam('#576ad4'),
-      '--link-hover': hexToRGBAParam('#03a9f4'),
-      '--inline-code-color': hexToRGBAParam('#37474f'),
-      '--inline-code-background': '236, 236, 236, .5',
-      '--color-scheme': 'light',
-      ...LightPlus,
-      ...applyDefaults(lightColor, ...paletteKeys),
-    },
-  },
-}
-
-const darkCss = {
-  '@global': {
-    'html[data-theme=dark]': {
-      '--primary-color': hexToRGBAParam(darkColor.primary.main),
-      '--paper-color': hexToRGBAParam(darkColor.background.paper),
-      '--bg-color': hexToRGBAParam(darkColor.background.default),
-      '--footer-bg': hexToRGBAParam(grey[900]),
-      '--footer-text': hexToRGBAParam(grey[300]),
-      '--details-border': hexToRGBAParam(blue[500]),
-      '--details-main': hexToRGBAParam(grey[700]),
-      '--blockquote': '255, 255, 255, .12',
-      '--search-bg': hexToRGBAParam(grey[700]),
-      // '--search-highlight': hexToRGBAParam('#acccf1'),
-      '--tab-hover': hexToRGBAParam('#fff'),
-      '--divider': hexToRGBAParam(darkColor.divider),
-      '--subtitle-text': '255, 255, 255. .7',
-      '--alert-info-bg': hexToRGBAParam(grey[900]),
-      '--alert-error-bg': hexToRGBAParam(grey[900]),
-      '--clicked-reaction-button': hexToRGBAParam('#202020'),
-      '--fade-background': 'linear-gradient(to right, rgba(0, 0, 0, 0), rgba(66, 66, 66, 1) 50%)',
-      '--link-default': hexToRGBAParam('#20baff'),
-      '--link-hover': hexToRGBAParam('#52ebff'),
-      '--inline-code-color': hexToRGBAParam('#c4c4c4'),
-      '--inline-code-background': hexToRGBAParam('#424242'),
-      '--color-scheme': 'dark',
-      ...DarkPlus,
-      ...applyDefaults(darkColor, ...paletteKeys),
-    },
-  },
+import createTheme from '@mui/material/styles/createTheme'
+import { grey } from '@mui/material/colors'
+import { CSSProperties } from '@mui/material/styles/createTypography'
+
+const commonTypo: CSSProperties = {
+  fontWeight: 'bold',
+  marginBlockEnd: '1rem',
+  marginBlockStart: '1.5rem',
 }
 
-const LightCssBaseline = getThemeCssEl(withStyles(() => lightCss))
-const DarkCssBaseline = getThemeCssEl(withStyles(() => darkCss))
-const AutoCssBaseline = getThemeCssEl(withStyles(() => ({
-  '@global': {
-    'html[data-theme=auto]': lightCss['@global']['html[data-theme=light]'],
-    '@media (prefers-color-scheme: dark)': {
-      'html[data-theme=auto]': darkCss['@global']['html[data-theme=dark]'],
-    },
-  },
-})))
-
-const SecondaryColorCssBaseline = getThemeCssEl(withStyles(() =>
-  paletteColors.reduce((obj, c) => {
-    if (c.id !== '0') {
-      obj['@global'][`html[data-secondary-color='${c.id}']`] = {
-        '--secondary-light': hexToRGBAParam(c.light),
-        '--secondary-dark': hexToRGBAParam(c.dark),
-        '--secondary-main': hexToRGBAParam(c.main),
-        '--secondary-contrast-text': hexToRGBAParam(c.contrastText),
-      }
-    }
-    return obj
-  }, { '@global': {} as StrIndexObj<any> })))
-
-const adaptiveTheme = createTheme({
-  palette: {
-    primary: {
-      main: 'rgba(var(--primary-color))',
-    },
-    ...applyAdaptive(...paletteKeys),
-    secondary: {
-      light: 'rgba(var(--secondary-light))',
-      dark: 'rgba(var(--secondary-dark))',
-      main: 'rgba(var(--secondary-main))',
-      contrastText: 'rgba(var(--secondary-contrast-text))',
-    },
-    footer: {
-      background: 'rgba(var(--footer-bg))',
-      text: 'rgba(var(--footer-text))',
-    },
-    details: {
-      border: 'rgba(var(--details-border))',
-      main: 'rgba(var(--details-main))',
+const theme = createTheme({
+  typography: {
+    h1: {
+      fontSize: '2.5rem',
+      paddingBottom: '.3rem',
+      borderBlockEnd: `1px solid ${grey['300']}`,
+      ...commonTypo,
     },
-    blockquote: 'rgba(var(--blockquote))',
-    search: {
-      messageBackground: 'rgba(var(--search-bg))',
-      // highlight: 'rgba(var(--search-highlight))',
+    h2: {
+      fontSize: '2rem',
+      paddingBottom: '.3rem',
+      borderBlockEnd: `1px solid ${grey['300']}`,
+      ...commonTypo,
     },
-    tab: {
-      colorOnHover: 'rgba(var(--tab-hover))',
+    h3: {
+      fontSize: '1.75rem',
+      ...commonTypo,
     },
-    divider: 'rgba(var(--divider))',
-    // getContrastText (color) {
-    //   if (color.startsWith('rgba(v')) return 'rgba(var(--text-primary))'
-    //   else return lightColor.getContrastText(color)
-    // },
-    subTitle: 'rgba(var(--subtitle-text))',
-    reactionButtonBackground: 'rgba(var(--clicked-reaction-button))',
-    fadeTextBackground: 'var(--fade-background)',
-    // link: {
-    //   default: 'rgba(var(--link-default))',
-    //   hover: 'rgba(var(--link-hover))',
-    // },
-  },
-  // Material-UI hard-coded and/or used color manipulator in several components
-  // override them here as a workaround
-  overrides: {
-    MuiChip: {
-      root: {
-        color: 'rgba(var(--text-primary))',
-      },
-      outlined: {
-        border: '1px solid rgba(var(--divider))',
-      },
+    h4: {
+      fontSize: '1.5rem',
+      ...commonTypo,
     },
-    MuiAlert: {
-      standardInfo: {
-        color: 'rgba(var(--text-primary))',
-        backgroundColor: 'rgba(var(--alert-info-bg))',
-      },
-      standardError: {
-        color: 'rgba(var(--text-primary))',
-        backgroundColor: 'rgba(var(--alert-error-bg))',
-      },
+    h5: {
+      fontSize: '1.25rem',
+      ...commonTypo,
     },
-    MuiIconButton: {
-      root: {
-        transition: `background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color ${250}ms ease-in-out`,
-      },
+    h6: {
+      fontSize: '1rem',
+      ...commonTypo,
     },
+
   },
-  typography: {
-    fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
-  },
-} as ThemeOptions)
+})
 
-export { adaptiveTheme, LightCssBaseline, DarkCssBaseline, AutoCssBaseline, SecondaryColorCssBaseline }
+export { theme }
diff --git a/gatsby-theme-oi-wiki/src/theme/old-index.ts b/gatsby-theme-oi-wiki/src/theme/old-index.ts
new file mode 100644
index 00000000..9f30a9d3
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/old-index.ts
@@ -0,0 +1,239 @@
+import createPalette, { Palette, PaletteColor } from '@material-ui/core/styles/createPalette'
+import blue from '@material-ui/core/colors/blue'
+import grey from '@material-ui/core/colors/grey'
+import red from '@material-ui/core/colors/red'
+import { createTheme, hexToRgb, ThemeOptions, withStyles } from '@material-ui/core/styles'
+
+import globalStyles from './global'
+
+import paletteColors from '../styles/colors'
+import { Nullable, StrIndexObj } from '../types/common'
+import { noopNull } from '../utils/common'
+
+import DarkPlus from './hightlight-themes/darkplus'
+import LightPlus from './hightlight-themes/lightplus'
+
+type DStrIndexObj = StrIndexObj<StrIndexObj>
+type HexToRGBAParamType = (color?: string, alpha?: number) => string | null
+type ApplyDefaultsType = (theme: Palette, ...keys: (keyof Palette)[]) => StrIndexObj<Nullable<string>>
+type ApplyAdaptiveType = (...keys: (keyof Palette)[]) => DStrIndexObj
+type WithStylesReturnType = ReturnType<typeof withStyles>
+type GetThemeCSSElType = (style: WithStylesReturnType) => ReturnType<WithStylesReturnType>
+
+const RGBA_EXPR = /^rgba\((.*)\)$/
+const RGB_EXPR = /^rgb\((.*)\)$/
+const HEX_EXPR = /^#([A-Fa-f0-9]{3}){1,2}$/
+const hexToRGBAParam: HexToRGBAParamType = (color, alpha = 1) => {
+  if (color) {
+    let res
+    if (color === 'auto') return color
+    else if ((res = color.match(RGBA_EXPR)) !== null) {
+      return res[1]
+    } else if ((res = color.match(RGB_EXPR)) !== null) {
+      return `${res[1]}, ${alpha}`
+    } else if (HEX_EXPR.test(color)) {
+      return `${hexToRgb(color).trim().match(RGB_EXPR)?.[1]}, ${alpha}`
+    } else throw new Error('Bad Hex ' + color)
+  } else return null
+}
+
+const applyDefaults: ApplyDefaultsType = (theme, ...keys) => {
+  const exp = /^(#|rgba)/
+  const keyObj: ReturnType<ApplyDefaultsType> = {}
+  keys.forEach(k => {
+    const colorKind = theme[k as keyof Palette]
+    Object.keys(colorKind).forEach(el => {
+      const hex = (colorKind as PaletteColor)[el as keyof PaletteColor]
+      if (exp.test(hex)) {
+        keyObj[`--${k}-${el}`] = hexToRGBAParam(hex.toString())
+      }
+    })
+  })
+
+  return keyObj
+}
+
+const applyAdaptive: ApplyAdaptiveType = (...keys) => {
+  const exp = /^(#|rgba)/
+  const rst: ReturnType<ApplyAdaptiveType> = {}
+  keys.forEach(k => {
+    const obj: StrIndexObj = {}
+    const colorKind = lightColor[k]
+    Object.keys(colorKind).forEach(el => {
+      const color = (colorKind as PaletteColor)[el as keyof PaletteColor]
+      obj[el] = exp.test(color) ? `rgba(var(--${k}-${el}))` : color
+    })
+    rst[k] = obj
+  })
+
+  return rst
+}
+
+const getThemeCssEl: GetThemeCSSElType = (style) => style(noopNull)
+
+export const CustomCssBaseline = globalStyles(noopNull as any)
+
+const lightColor = createPalette({ type: 'light' })
+const darkColor = createPalette({ type: 'dark' })
+const paletteKeys: (keyof Palette)[] = ['primary', 'secondary', 'text', 'background', 'action', 'error', 'warning', 'info', 'success']
+
+const lightCss = {
+  '@global': {
+    'html[data-theme=light]': {
+      '--primary-color': hexToRGBAParam(lightColor.primary.main),
+      '--footer-bg': hexToRGBAParam(grey[200]),
+      '--footer-text': hexToRGBAParam(grey[700]),
+      '--details-border': hexToRGBAParam(blue[500]),
+      '--details-main': hexToRGBAParam(blue[50]),
+      '--blockquote': '0, 0, 0, .12',
+      '--inline-color': '#37474f',
+      '--inline-bg-hsla': 'hsla(0,0%,85%,.5)',
+      '--search-bg': hexToRGBAParam(grey[100]),
+      // '--search-highlight': hexToRGBAParam('#174d8c'),
+      '--tab-hover': hexToRGBAParam('#000'),
+      '--divider': hexToRGBAParam(lightColor.divider),
+      '--subtitle-text': '0, 0, 0, .7',
+      '--alert-info-bg': hexToRGBAParam(blue[50]),
+      '--alert-error-bg': hexToRGBAParam(red[50]),
+      '--clicked-reaction-button': hexToRGBAParam('#faebd7'),
+      '--fade-background': 'linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)',
+      '--link-default': hexToRGBAParam('#576ad4'),
+      '--link-hover': hexToRGBAParam('#03a9f4'),
+      '--inline-code-color': hexToRGBAParam('#37474f'),
+      '--inline-code-background': '236, 236, 236, .5',
+      '--color-scheme': 'light',
+      ...LightPlus,
+      ...applyDefaults(lightColor, ...paletteKeys),
+    },
+  },
+}
+
+const darkCss = {
+  '@global': {
+    'html[data-theme=dark]': {
+      '--primary-color': hexToRGBAParam(darkColor.primary.main),
+      '--paper-color': hexToRGBAParam(darkColor.background.paper),
+      '--bg-color': hexToRGBAParam(darkColor.background.default),
+      '--footer-bg': hexToRGBAParam(grey[900]),
+      '--footer-text': hexToRGBAParam(grey[300]),
+      '--details-border': hexToRGBAParam(blue[500]),
+      '--details-main': hexToRGBAParam(grey[700]),
+      '--blockquote': '255, 255, 255, .12',
+      '--search-bg': hexToRGBAParam(grey[700]),
+      // '--search-highlight': hexToRGBAParam('#acccf1'),
+      '--tab-hover': hexToRGBAParam('#fff'),
+      '--divider': hexToRGBAParam(darkColor.divider),
+      '--subtitle-text': '255, 255, 255. .7',
+      '--alert-info-bg': hexToRGBAParam(grey[900]),
+      '--alert-error-bg': hexToRGBAParam(grey[900]),
+      '--clicked-reaction-button': hexToRGBAParam('#202020'),
+      '--fade-background': 'linear-gradient(to right, rgba(0, 0, 0, 0), rgba(66, 66, 66, 1) 50%)',
+      '--link-default': hexToRGBAParam('#20baff'),
+      '--link-hover': hexToRGBAParam('#52ebff'),
+      '--inline-code-color': hexToRGBAParam('#c4c4c4'),
+      '--inline-code-background': hexToRGBAParam('#424242'),
+      '--color-scheme': 'dark',
+      ...DarkPlus,
+      ...applyDefaults(darkColor, ...paletteKeys),
+    },
+  },
+}
+
+const LightCssBaseline = getThemeCssEl(withStyles(() => lightCss))
+const DarkCssBaseline = getThemeCssEl(withStyles(() => darkCss))
+const AutoCssBaseline = getThemeCssEl(withStyles(() => ({
+  '@global': {
+    'html[data-theme=auto]': lightCss['@global']['html[data-theme=light]'],
+    '@media (prefers-color-scheme: dark)': {
+      'html[data-theme=auto]': darkCss['@global']['html[data-theme=dark]'],
+    },
+  },
+})))
+
+const SecondaryColorCssBaseline = getThemeCssEl(withStyles(() =>
+  paletteColors.reduce((obj, c) => {
+    if (c.id !== '0') {
+      obj['@global'][`html[data-secondary-color='${c.id}']`] = {
+        '--secondary-light': hexToRGBAParam(c.light),
+        '--secondary-dark': hexToRGBAParam(c.dark),
+        '--secondary-main': hexToRGBAParam(c.main),
+        '--secondary-contrast-text': hexToRGBAParam(c.contrastText),
+      }
+    }
+    return obj
+  }, { '@global': {} as StrIndexObj<any> })))
+
+const adaptiveTheme = createTheme({
+  palette: {
+    primary: {
+      main: 'rgba(var(--primary-color))',
+    },
+    ...applyAdaptive(...paletteKeys),
+    secondary: {
+      light: 'rgba(var(--secondary-light))',
+      dark: 'rgba(var(--secondary-dark))',
+      main: 'rgba(var(--secondary-main))',
+      contrastText: 'rgba(var(--secondary-contrast-text))',
+    },
+    footer: {
+      background: 'rgba(var(--footer-bg))',
+      text: 'rgba(var(--footer-text))',
+    },
+    details: {
+      border: 'rgba(var(--details-border))',
+      main: 'rgba(var(--details-main))',
+    },
+    blockquote: 'rgba(var(--blockquote))',
+    search: {
+      messageBackground: 'rgba(var(--search-bg))',
+      // highlight: 'rgba(var(--search-highlight))',
+    },
+    tab: {
+      colorOnHover: 'rgba(var(--tab-hover))',
+    },
+    divider: 'rgba(var(--divider))',
+    // getContrastText (color) {
+    //   if (color.startsWith('rgba(v')) return 'rgba(var(--text-primary))'
+    //   else return lightColor.getContrastText(color)
+    // },
+    subTitle: 'rgba(var(--subtitle-text))',
+    reactionButtonBackground: 'rgba(var(--clicked-reaction-button))',
+    fadeTextBackground: 'var(--fade-background)',
+    // link: {
+    //   default: 'rgba(var(--link-default))',
+    //   hover: 'rgba(var(--link-hover))',
+    // },
+  },
+  // Material-UI hard-coded and/or used color manipulator in several components
+  // override them here as a workaround
+  overrides: {
+    MuiChip: {
+      root: {
+        color: 'rgba(var(--text-primary))',
+      },
+      outlined: {
+        border: '1px solid rgba(var(--divider))',
+      },
+    },
+    MuiAlert: {
+      standardInfo: {
+        color: 'rgba(var(--text-primary))',
+        backgroundColor: 'rgba(var(--alert-info-bg))',
+      },
+      standardError: {
+        color: 'rgba(var(--text-primary))',
+        backgroundColor: 'rgba(var(--alert-error-bg))',
+      },
+    },
+    MuiIconButton: {
+      root: {
+        transition: `background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color ${250}ms ease-in-out`,
+      },
+    },
+  },
+  typography: {
+    fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
+  },
+} as ThemeOptions)
+
+export { adaptiveTheme, LightCssBaseline, DarkCssBaseline, AutoCssBaseline, SecondaryColorCssBaseline }
diff --git a/gatsby-theme-oi-wiki/src/types/window.d.ts b/gatsby-theme-oi-wiki/src/types/window.d.ts
new file mode 100644
index 00000000..829db147
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/types/window.d.ts
@@ -0,0 +1,8 @@
+declare global {
+    interface Window {
+        __theme: string;
+        __setPreferredTheme: (theme: string) => void;
+        __onThemeChange: (theme: string) => void;
+    }
+}
+export {}
diff --git a/gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts b/gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts
new file mode 100644
index 00000000..e5ca22d1
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts
@@ -0,0 +1,149 @@
+import { decomposeColor, hslToRgb } from '@mui/system/colorManipulator'
+import { Palette, PaletteColor, TypeAction, TypeText } from '@mui/material/styles/createPalette'
+import { css, SerializedStyles } from '@emotion/react'
+
+const paletteColorKeys: (keyof Palette)[] = [
+  'primary',
+  'secondary',
+  'error',
+  'info',
+  'success',
+  'warning',
+]
+
+const textKeys: (keyof TypeText)[] = ['primary', 'secondary', 'disabled']
+
+const actionKeys: (keyof TypeAction)[] = [
+  'active',
+  'hover',
+  'hoverOpacity',
+  'selected',
+  'selectedOpacity',
+  'disabled',
+  'disabledOpacity',
+  'disabledBackground',
+  'focus',
+  'focusOpacity',
+  'activatedOpacity',
+]
+
+const varName = (...names: string[]): string => {
+  const str = names.join('-')
+  return str.startsWith('--') ? str : `--${str}`
+}
+
+const varColor = (str: string): string => {
+  return `rgba(var(${str}))`
+}
+
+const rgbaColor = (colorStr: string, fallbackAlpha = 1): string => {
+  const color = decomposeColor(colorStr)
+
+  if (isNaN(color.values[0])) {
+    color.values.shift()
+  }
+
+  switch (color.type) {
+    case 'hsla':
+    case 'hsl':
+      return `${decomposeColor(hslToRgb(colorStr)).values.join()},${fallbackAlpha}`
+    default:
+    case 'rgb':
+      return `${color.values.join()},${fallbackAlpha}`
+    case 'rgba':
+      return color.values.join()
+  }
+}
+
+export type VarMap = Map<string, string>
+
+export interface CssVarPalette {
+  lightMap: VarMap;
+  darkMap: VarMap;
+  palette: Palette;
+}
+
+const createCssVarPalette = (palette: Palette): CssVarPalette => {
+  const lightMap: VarMap = new Map()
+  const darkMap: VarMap = new Map()
+
+  // primary, secondary, error...
+  paletteColorKeys.forEach((k) => {
+    const v = palette[k] as PaletteColor
+
+    const name = varName(k)
+    darkMap.set(name, rgbaColor(v.dark))
+    lightMap.set(name, rgbaColor(v.main))
+    v.main = v.light = v.dark = varColor(name)
+
+    const textName = varName(name, 'contrastText')
+    lightMap.set(textName, rgbaColor(v.contrastText))
+    v.contrastText = varColor(textName)
+  })
+
+  // background
+  {
+    const bg = palette.background
+    const name = varName('background')
+    lightMap.set(name, rgbaColor(bg.default))
+    bg.default = varColor(name)
+
+    const paperName = varName(name, 'paper')
+    lightMap.set(paperName, rgbaColor(bg.paper))
+    darkMap.set(paperName, rgbaColor(bg.paper))
+    bg.paper = varColor(name)
+  }
+
+  // text
+  {
+    const name = varName('text')
+    const text = palette.text
+    textKeys.forEach((k) => {
+      const keyName = varName(name, k)
+      lightMap.set(keyName, rgbaColor(text[k]))
+      text[k] = varColor(keyName)
+    })
+  }
+
+  // action
+  {
+    const name = varName('action')
+    const action = palette.action
+    actionKeys.forEach((k) => {
+      const v = action[k]
+      const keyName = varName(name, k)
+      if (typeof v === 'number') {
+        lightMap.set(keyName, v.toString())
+      } else {
+        lightMap.set(keyName, rgbaColor(v))
+      }
+      // number | string
+      action[k] = varColor(keyName) as never
+    })
+  }
+
+  return {
+    lightMap,
+    darkMap,
+    palette,
+  }
+}
+
+const mapToStr = (map: VarMap): string => Array.from(map).map(([k, v]) => `${k}: ${v};`).join('\n')
+
+const computeCss = (light: VarMap, dark: VarMap): SerializedStyles => {
+  return css`
+    :root {
+      color-scheme: light;
+      ${mapToStr(light)}
+    }
+
+    :root[data-theme="dark"] {
+      color-scheme: dark;
+      ${mapToStr(dark)}
+    }
+  `
+}
+
+export default createCssVarPalette
+export { mapToStr, computeCss, varColor }
diff --git a/gatsby-theme-oi-wiki/src/utils/persistStore.ts b/gatsby-theme-oi-wiki/src/utils/persistStore.ts
new file mode 100644
index 00000000..287b94e6
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/utils/persistStore.ts
@@ -0,0 +1,76 @@
+import { makePersistable, stopPersisting } from 'mobx-persist-store'
+import { PersistenceStorageOptions } from 'mobx-persist-store/lib/esm2017/types'
+import { AnnotationsMap, CreateObservableOptions, IReactionOptions, observable } from 'mobx'
+import * as localforage from 'localforage'
+
+type WithPersistFunc<T> = T & {
+  stopStore(): void
+}
+
+type PersistStore =
+  <T extends Record<string, any>>
+  (value: T,
+   storageOptions: PersistenceStorageOptions<keyof T>,
+   otherOptions?: {
+     decorators?: AnnotationsMap<T, never>,
+     observableOptions?: CreateObservableOptions,
+     localforageOptions?: LocalForageOptions,
+     reactionOptions?: IReactionOptions<T>
+   }
+  ) => WithPersistFunc<T>;
+
+
+const forageInstanceMap = new Map<string, LocalForage>()
+
+const persistStore: PersistStore = (value, storageOptions, otherOptions) => {
+  const target = Object.assign(value, {
+    stopStore() {
+      stopPersisting(this)
+    },
+  })
+
+  // do nothing if not in browser
+  if (typeof window === 'undefined') return target
+  console.log(target)
+
+  const { decorators, observableOptions, localforageOptions, reactionOptions } = otherOptions || {}
+
+  const forageOptions = {
+    name: 'persist-info',
+    ...localforageOptions,
+  }
+
+  const persistStorage = forageInstanceMap.get(forageOptions.name)
+    ?? forageInstanceMap
+      .set(forageOptions.name, localforage.createInstance(forageOptions))
+      .get(forageOptions.name)
+
+  const store = observable<WithPersistFunc<typeof value>>(
+    target,
+    decorators,
+    {
+      autoBind: true,
+      ...observableOptions,
+    })
+
+  makePersistable(
+    store,
+    {
+      storage: persistStorage,
+      // one day
+      expireIn: 24 * 60 * 60 * 1000,
+      removeOnExpiration: true,
+      stringify: false,
+      debugMode: process.env.NODE_ENV === 'development',
+      ...storageOptions,
+    },
+    {
+      delay: 200,
+      ...reactionOptions,
+    },
+  )
+
+  return store
+}
+
+export default persistStore
diff --git a/gatsby-theme-oi-wiki/static/script.js b/gatsby-theme-oi-wiki/static/script.js
deleted file mode 100644
index 8bcfae82..00000000
--- a/gatsby-theme-oi-wiki/static/script.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export default function () {
-  'use strict'
-  window.onthemechange = function (new_settings) {
-    const fallback = localStorage.settings && JSON.parse(localStorage.settings)
-    const settings = new_settings || fallback
-    const darkOpt = settings && settings.darkMode && settings.darkMode.type ? settings.darkMode.type : 'user-preference'
-    const secondaryColorId = settings && settings.theme && settings.theme.secondary ? settings.theme.secondary : '3'
-    const monoFont = settings && settings.theme && settings.theme.fallbackMonoFont
-    const monoFontClass = monoFont ? 'fallback' : 'mono'
-    let themeClass = 'auto'
-    if (darkOpt === undefined || darkOpt === 'user-preference') {
-      themeClass = 'auto'
-    } else {
-      themeClass = darkOpt === 'always-on' ? 'dark' : 'light'
-    }
-    const docEl = document.querySelector('html')
-
-    docEl.dataset.theme = themeClass
-    docEl.dataset.secondaryColor = secondaryColorId
-    docEl.dataset.monofont = monoFontClass
-  }
-
-  window.onthemechange()
-}
diff --git a/gatsby-theme-oi-wiki/tsconfig.json b/gatsby-theme-oi-wiki/tsconfig.json
index 2b104ddb..69154f9f 100644
--- a/gatsby-theme-oi-wiki/tsconfig.json
+++ b/gatsby-theme-oi-wiki/tsconfig.json
@@ -26,6 +26,8 @@
     "experimentalDecorators": true,
     // 启用装饰器
     "emitDecoratorMetadata": false,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
     "skipLibCheck": true,
     "strictNullChecks": true
   },
@@ -35,7 +37,8 @@
     "./.cache"
   ],
   "include": [
-    "src"
+    "src",
+    "../node_modules/localforage/typings/localforage.d.ts"
   ],
   "plugins": [
     {
diff --git a/yarn.lock b/yarn.lock
index 402c1a00..19d7e899 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8404,6 +8404,11 @@ imagemin@^7.0.1:
     p-pipe "^3.0.0"
     replace-ext "^1.0.0"
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 immer@8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
@@ -9434,6 +9439,13 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
 lilconfig@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd"
@@ -9535,6 +9547,13 @@ loader-utils@^1.4.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -10661,6 +10680,21 @@ mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+mobx-persist-store@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/mobx-persist-store/-/mobx-persist-store-1.0.3.tgz#7965576b0c3c9a05d123d3853401b5b465f77176"
+  integrity sha512-R6GWCtA77O2mbwKRn0iJqecNHhEMDnUv7P60SCFntz+qRtfutsTWcP56Xz9Q29nefgo1E4JnBaoqcWejMdkvNQ==
+
+mobx-react-lite@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.2.1.tgz#c549a3722f1eae51a78b12f839311614d5689c58"
+  integrity sha512-hwURgfmP2apX3HQrB55V9DN47kuN3C6KlQvI5UIfJRibXma72C/JudcNt2r9dWjAdFMrcZoz1ivvtXMCkJ2aQA==
+
+mobx@^6.3.3:
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.3.3.tgz#a3006c56243b1c7ea4ee671a66f963b9f43cf1af"
+  integrity sha512-JoNU50rO6d1wHwKPJqKq4rmUMbYnI9CsJmBo+Cu4exBYenFvIN77LWrZENpzW6reZPADtXMmB1DicbDSfy8Clw==
+
 moment@^2.27.0:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"

From deea00903698273e49e84428b6f9615da62b61df Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Wed, 22 Sep 2021 23:34:08 +0800
Subject: [PATCH 04/59] feat: Header component

* add Header component
* add dep @use-gesture/react
* replace dep @material-ui/icons with @mui/icons-material
---
 gatsby-theme-oi-wiki/package.json             |  3 +-
 .../src/components/Header.tsx                 | 78 +++++++++++++++++++
 .../src/components/Header/NavBtnStack.tsx     | 59 ++++++++++++++
 .../src/hooks/useSiteMetadata.ts              | 20 +++++
 .../src/stores/headerStore.ts                 | 30 +++++++
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    | 18 ++---
 yarn.lock                                     | 28 +++++--
 7 files changed, 215 insertions(+), 21 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/components/Header.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/Header/NavBtnStack.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/hooks/useSiteMetadata.ts
 create mode 100644 gatsby-theme-oi-wiki/src/stores/headerStore.ts

diff --git a/gatsby-theme-oi-wiki/package.json b/gatsby-theme-oi-wiki/package.json
index 86f824f6..5e7d28a4 100644
--- a/gatsby-theme-oi-wiki/package.json
+++ b/gatsby-theme-oi-wiki/package.json
@@ -16,12 +16,13 @@
     "@emotion/react": "^11.4.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@mgtd/remark-shiki": "^2.2.0",
     "@mgtd/vssue-api-github-v3": "^2.4.8",
     "@mgtd/vssue-api-github-v4": "^2.4.5",
+    "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.0",
+    "@use-gesture/react": "^10.0.0-beta.26",
     "ace-builds": "^1.4.12",
     "autosuggest-highlight": "^3.1.1",
     "axios": "^0.21.1",
diff --git a/gatsby-theme-oi-wiki/src/components/Header.tsx b/gatsby-theme-oi-wiki/src/components/Header.tsx
new file mode 100644
index 00000000..509dd77c
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Header.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+import Slide from '@mui/material/Slide'
+import styled from '@emotion/styled'
+import { AppBar, Button, IconButton, Tooltip } from '@mui/material'
+import { HEADER_HEIGHT, headerStore } from '../stores/headerStore'
+import useSiteMetadata from '../hooks/useSiteMetadata'
+import Grid from '@mui/material/Grid'
+import { Link } from 'gatsby'
+import { observer } from 'mobx-react-lite'
+import { useScroll } from '@use-gesture/react'
+import { Helmet } from 'react-helmet'
+import { Nullable } from '../types/common'
+import School from '@mui/icons-material/School'
+import NavBtnStack from './Header/NavBtnStack'
+
+interface HeaderProps {
+  title?: Nullable<string>
+}
+
+
+const StyledAppBar = styled(AppBar)`
+  flex-flow: row;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  padding: 0 20px;
+  height: ${HEADER_HEIGHT}px;
+`
+
+const Header: React.FC<HeaderProps> = observer((props) => {
+  const { title } = props
+  const { title: siteTitle, description } = useSiteMetadata()
+  const [elevation, setElevation] = useState(0)
+
+  if (typeof window !== 'undefined') {
+    useScroll(({ xy: [, y], delta: [, dy] }) => {
+      setElevation(y > 0 ? 2 : 0)
+      headerStore.setAppear(y <= 260 || dy < 0)
+    }, {
+      target: window,
+    })
+  }
+
+  return (
+    <>
+      <Helmet title={`${title ? title + ' - ' : ''}${siteTitle}`}>
+        <meta name="description" content={description}/>
+      </Helmet>
+
+      <Slide appear={false} direction="down" in={headerStore.appear}>
+        <StyledAppBar elevation={elevation}>
+          <Tooltip title="Link to homepage">
+            <IconButton component={Link} color="inherit" to="/">
+              <School/>
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Link to homepage">
+            <Button
+              component={Link}
+              to="/"
+              sx={{
+                fontSize: theme => theme.typography.h6.fontSize,
+                color: 'inherit',
+              }}>
+              {siteTitle}
+            </Button>
+          </Tooltip>
+
+          <Grid flexGrow={1}/>
+
+          <NavBtnStack/>
+        </StyledAppBar>
+      </Slide>
+    </>
+  )
+})
+
+export default Header
diff --git a/gatsby-theme-oi-wiki/src/components/Header/NavBtnStack.tsx b/gatsby-theme-oi-wiki/src/components/Header/NavBtnStack.tsx
new file mode 100644
index 00000000..1018ee6b
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Header/NavBtnStack.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import Stack from '@mui/material/Stack'
+import SvgIcon from '@mui/material/SvgIcon'
+import Tooltip from '@mui/material/Tooltip'
+import IconButton from '@mui/material/IconButton'
+import { Link } from 'gatsby'
+import { Code, GitHub, LibraryBooks, LocalOffer, Settings } from '@mui/icons-material'
+
+
+interface NavBtnProps {
+  title: string;
+  Icon: typeof SvgIcon;
+  to: string;
+}
+
+function isRelativeLink(link: string): boolean {
+  return link.startsWith('.') || link.startsWith('/')
+}
+
+const NavBtn: React.FC<NavBtnProps> = (props) => {
+  const { title, Icon, to } = props
+
+  return (
+    <Tooltip title={title}>
+      <IconButton
+        color="inherit"
+        {...isRelativeLink(to) ? {
+          component: Link,
+          to,
+        } : {
+          component: 'a',
+          href: to,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        }}
+      >
+        <Icon/>
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+const OI_WIKI_GH_LINK = 'https://github.com/OI-wiki/OI-wiki'
+
+const NavBtnStack: React.FC = () => {
+  return (
+    <Stack direction="row" alignItems="center">
+      <NavBtn title="设置页" Icon={Settings} to="/settings"/>
+      <NavBtn title="标签页" Icon={LocalOffer} to="/tags"/>
+      <NavBtn title="目录页" Icon={LibraryBooks} to="/pages"/>
+      <NavBtn title="运行工具" Icon={Code} to="/play"/>
+      <NavBtn title="GitHub 存储库" Icon={GitHub} to={OI_WIKI_GH_LINK}/>
+    </Stack>
+  )
+}
+
+const NavBtnStackMemo = React.memo(NavBtnStack, () => true)
+
+export default NavBtnStackMemo
diff --git a/gatsby-theme-oi-wiki/src/hooks/useSiteMetadata.ts b/gatsby-theme-oi-wiki/src/hooks/useSiteMetadata.ts
new file mode 100644
index 00000000..dbc374a7
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/hooks/useSiteMetadata.ts
@@ -0,0 +1,20 @@
+import { graphql, useStaticQuery } from 'gatsby'
+import { DeepRequiredNonNull } from '../types/common'
+
+const useSiteMetadata = () => {
+  const data = useStaticQuery<GatsbyTypes.SiteInfoQuery>(graphql`
+    query SiteInfo {
+      site {
+        siteMetadata {
+          title,
+          description,
+          siteUrl
+        }
+      }
+    }
+  `) as DeepRequiredNonNull<GatsbyTypes.SiteInfoQuery>
+
+  return data.site.siteMetadata
+}
+
+export default useSiteMetadata
diff --git a/gatsby-theme-oi-wiki/src/stores/headerStore.ts b/gatsby-theme-oi-wiki/src/stores/headerStore.ts
new file mode 100644
index 00000000..ab2323f4
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/stores/headerStore.ts
@@ -0,0 +1,30 @@
+import { action, computed, observable } from 'mobx'
+
+export interface HeaderStore {
+  appear: boolean;
+
+  height: number;
+
+  setAppear(val: boolean): void;
+}
+
+
+const HEADER_HEIGHT = 60
+
+const headerStore = observable<HeaderStore>({
+  appear: true,
+
+  get height() {
+    return HEADER_HEIGHT
+  },
+
+  setAppear(val) {
+    this.appear = val
+  },
+}, {
+  height: computed,
+
+  setAppear: action.bound,
+})
+
+export { headerStore, HEADER_HEIGHT }
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index db247cde..34690738 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -4,18 +4,11 @@ import { DeepRequiredNonNull } from '../types/common'
 import unified from 'unified'
 import rehypeReact, { Options } from 'rehype-react'
 import { Root } from 'hast'
-import { Helmet } from 'react-helmet'
 import Grid from '@mui/material/Grid'
+import Header from '../components/Header'
 
 export const query = graphql`
   query DocInfo($id: String!) {
-    site {
-      siteMetadata {
-        description,
-        title
-      }
-    }
-
     mdx: markdownRemark(id: { eq: $id }) {
       id
       wordCount {
@@ -55,11 +48,13 @@ export const query = graphql`
   }
 `
 
+
 interface DocProps {
   data: DeepRequiredNonNull<GatsbyTypes.DocInfoQuery>,
   location: Location
 }
 
+
 const processor = unified()
   .use(rehypeReact, {
     createElement: React.createElement,
@@ -70,7 +65,7 @@ const contentParser = (htmlAst: Root): JSX.Element =>
 
 const Doc: React.FC<DocProps> = (props) => {
   const { data, location } = props
-  const { mdx, site } = data
+  const { mdx } = data
 
   const title = mdx.fields.slug === '/' ? '' : mdx.frontmatter.title
   const description = mdx.frontmatter.description || mdx.excerpt
@@ -87,14 +82,13 @@ const Doc: React.FC<DocProps> = (props) => {
   const dateModified = mdx.parent.changeTime || ''
   const isIndex = mdx.fields.isIndex
   const isWIP = wordCount === 0 || (tags?.findIndex((x: string) => x === 'WIP') >= 0)
-  const siteTitle = site.siteMetadata.title
 
 
   return (
     <>
-      <Helmet title={`${title ? title + ' - ' : ''}${siteTitle}`}/>
-
       <Grid container={true} flexDirection="column">
+
+        <Header title={title}/>
         <article>
           {contentParser(mdx.htmlAst)}
         </article>
diff --git a/yarn.lock b/yarn.lock
index 19d7e899..bdd2d103 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1211,7 +1211,7 @@
     core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.3", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.3", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -2158,13 +2158,6 @@
   dependencies:
     unist-util-visit "^1.4.1"
 
-"@material-ui/icons@^4.9.1":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
-  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-
 "@material-ui/lab@^4.0.0-alpha.58":
   version "4.0.0-alpha.60"
   resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2"
@@ -2231,6 +2224,13 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+"@mui/icons-material@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.0.1.tgz#fb7ffeba0b3604aab4a9b91644d2fc1aabb3b4f1"
+  integrity sha512-AZehR/Uvi9VodsNPk9ae1lENKrf1evqx9suiP6VIqu7NxjZOlw/m/yA2gRAMmLEmIGr7EChfi/wcXuq6BpM9vw==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+
 "@mui/material@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.0.0.tgz#e5397b7778615933cabee7918230b9e7019ff1b9"
@@ -2886,6 +2886,18 @@
     "@typescript-eslint/types" "4.31.0"
     eslint-visitor-keys "^2.0.0"
 
+"@use-gesture/core@^10.0.0-beta.26":
+  version "10.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.0.0-beta.26.tgz#275a69ed65c6463cb59872a6f0b24b66212e8bf5"
+  integrity sha512-Y+fwWlYHzGlc/c4aE3fUkQy7cE4+Tbd1CWQqAlO4czN2nGpgZksW7V98FMgCHrmMGXi+VdNSTS8WBHmw8kq3Zg==
+
+"@use-gesture/react@^10.0.0-beta.26":
+  version "10.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.0.0-beta.26.tgz#9b5c3a9111d6cda62de125612fb830efcc1df571"
+  integrity sha512-TENwg1CgB+okRTBWvcMtEaKYgQvktU0ezG4sQdo/mqZXNvTzuk9g/qK4v++8UzIhj/srqRp49NPBbY0qzsgg1w==
+  dependencies:
+    "@use-gesture/core" "^10.0.0-beta.26"
+
 "@use-it/event-listener@^0.1.2":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.6.tgz#5776274fec72f3f25af9ead1898e7f45bc435812"

From 69c219432810c864817829e9eeeb44807b65e583 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Thu, 23 Sep 2021 22:29:32 +0800
Subject: [PATCH 05/59] refactor: SmartLink

---
 .../src/components/Link/ToolCard.tsx          | 125 ++++++++--------
 .../src/components/Link/index.tsx             | 133 +++++++++---------
 .../src/components/Link/utils.ts              |  19 ++-
 3 files changed, 143 insertions(+), 134 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Link/ToolCard.tsx b/gatsby-theme-oi-wiki/src/components/Link/ToolCard.tsx
index 905937a8..2a2cb2e4 100644
--- a/gatsby-theme-oi-wiki/src/components/Link/ToolCard.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Link/ToolCard.tsx
@@ -1,55 +1,63 @@
 import React, { createRef, useCallback, useEffect, useRef, useState } from 'react'
-import { Card, CardContent, CircularProgress, Fade, makeStyles } from '@material-ui/core'
 import { Link as GatsbyLink } from 'gatsby'
-
 import { FetchStatus, PreviewData } from './LinkTooltip'
 import { useDelay } from './hooks'
 import { getElementSize, getElementViewPosition, Position, Size } from './utils'
 import { Nullable } from '../../types/common'
-import { Alert } from '@material-ui/lab'
-
-const lines = 4
-const lineHeight = 1.5
-const cardDis = '2rem'
-const useStyles = makeStyles((theme) => ({
-  container: {
-    position: 'relative',
-    display: 'inline-block',
-  },
-  fade: {
-    lineHeight: `${lineHeight}em`,
-    height: `${lineHeight * lines}em`,
-    overflow: 'hidden',
-    position: 'relative',
-    '&:after': {
-      content: '""',
-      textAlign: 'right',
-      position: 'absolute',
-      bottom: 0,
-      right: 0,
-      width: '30%',
-      height: '1.5em',
-      background: theme.palette.fadeTextBackground,
-    },
-  },
-  toolCard: {
-    position: 'absolute',
-    zIndex: 9999,
-    width: '320px',
-    left: 0,
-    top: cardDis,
-    maxWidth: 'calc(100vw - 40px)',
-  },
-  aboveMedian: {
-    top: 'initial',
-    bottom: cardDis,
-  },
-  fetching: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-}))
+import styled from '@mui/material/styles/styled'
+import Card from '@mui/material/Card'
+import { css } from '@emotion/react'
+import CardContent from '@mui/material/CardContent'
+import Fade from '@mui/material/Fade'
+import CircularProgress from '@mui/material/CircularProgress'
+import Alert from '@mui/material/Alert'
+
+const LINES = 4
+const LINE_HEIGHT = 1.5
+const CARD_DIS = '2rem'
+
+const Container = styled('span')`
+  position: relative;
+  display: inline-block;
+`
+
+const StyledCard = styled(Card)(({ theme }) => css`
+  width: 320px;
+  position: absolute;
+  left: 0;
+  top: ${CARD_DIS};
+  max-width: calc(100vw - 40px);
+  z-index: ${theme.zIndex.tooltip};
+`)
+
+const FetchingContent = styled(CardContent)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const FetchedContentDiv = styled('div')`
+  line-height: ${LINE_HEIGHT}em;
+  height: ${LINE_HEIGHT * LINES}em;
+  overflow: hidden;
+  position: relative;
+
+  &:after {
+    content: "";
+    text-align: right;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 30%;
+    height: ${LINE_HEIGHT}em;
+    background-color: white;
+  }
+`
+
+const aboveMedianStyle = css`
+  top: initial;
+  bottom: ${CARD_DIS};
+`
 
 interface PositionAndSize {
   pos: Position,
@@ -68,11 +76,10 @@ export interface ToolCardProps {
 }
 
 const ToolCard: React.FC<ToolCardProps> = (props) => {
-  const classes = useStyles()
   const { children, content, status, closeDelay = 0, openDelay = 0, onHover, to } = props
   const [open, setOpen] = useState(false)
   const rootRef = createRef<HTMLDivElement>()
-  const popperRef = useRef<HTMLElement>()
+  const popperRef = useRef<HTMLDivElement>(null)
   const [onOpen, onClose] = useDelay(() => {
     setOpen(true)
     props.onOpen?.()
@@ -115,9 +122,9 @@ const ToolCard: React.FC<ToolCardProps> = (props) => {
 
     element.style.setProperty('right', typeof right === 'undefined' ? 'auto' : `${right}px`)
     element.style.setProperty('left', typeof left === 'undefined' ? 'auto' : `${left}px`)
-    element.classList.toggle(classes.aboveMedian, pos.y > viewport.height / 2)
+    element.classList.toggle(aboveMedianStyle.name, pos.y > viewport.height / 2)
 
-  }, [classes.aboveMedian, rootRef])
+  }, [rootRef])
 
   useEffect(() => {
     if (open && popperRef.current) {
@@ -130,8 +137,7 @@ const ToolCard: React.FC<ToolCardProps> = (props) => {
   }, [open, content, popperRef, adjustElementPosition, rootRef])
 
   return (
-    <span
-      className={classes.container}
+    <Container
       onMouseEnter={() => {
         onOpen()
         onHover?.()
@@ -143,32 +149,31 @@ const ToolCard: React.FC<ToolCardProps> = (props) => {
       <div className='math math-display'/>
       <GatsbyLink to={to}>
         <Fade in={open}>
-          <Card
-            className={classes.toolCard}
+          <StyledCard
             elevation={3}
             ref={popperRef}
           >
             {(() => {
               if (status === 'not_fetched' || status === 'fetching') {
-                return <CardContent className={classes.fetching}>
+                return <FetchingContent>
                   <CircularProgress/>
-                </CardContent>
+                </FetchingContent>
               } else if (status === 'fetched') {
                 return <CardContent>
-                  <div className={classes.fade}>
+                  <FetchedContentDiv>
                     <strong>{content?.title + ' '}</strong>
                     {content?.text}
-                  </div>
+                  </FetchedContentDiv>
                 </CardContent>
               } else {
                 return <Alert severity="error">无法获取页面预览</Alert>
               }
             })()}
-          </Card>
+          </StyledCard>
         </Fade>
       </GatsbyLink>
       {children}
-    </span>
+    </Container>
   )
 }
 
diff --git a/gatsby-theme-oi-wiki/src/components/Link/index.tsx b/gatsby-theme-oi-wiki/src/components/Link/index.tsx
index 745216b5..3e0a708b 100644
--- a/gatsby-theme-oi-wiki/src/components/Link/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Link/index.tsx
@@ -1,18 +1,20 @@
-import { makeStyles } from '@material-ui/core/styles'
 import { Link as GatsbyLink } from 'gatsby'
 import isAbsoluteURL from 'is-absolute-url'
 import React from 'react'
 import LinkTooltip from './LinkTooltip'
 import path from 'path'
-import clsx from 'clsx'
-import { GatsbyLinkProps } from 'gatsby-link'
 import smoothScrollTo from '../../lib/smoothScroll'
-import { useSetting } from '../../lib/useSetting'
-import { useMediaQuery, useTheme } from '@material-ui/core'
 import { OnClickHandler } from '../../types/common'
+import { css, SerializedStyles } from '@emotion/react'
+import styled from '@mui/material/styles/styled'
+import Link, { LinkProps } from '@mui/material/Link'
+import { getElementViewPosition } from './utils'
+import { observer } from 'mobx-react-lite'
+import { headerStore } from '../../stores/headerStore'
+import { computed } from 'mobx'
+import { Theme } from '@mui/material/styles/createTheme'
 
 const MD_EXPR = /\.(md|markdown|mdtext|mdx)/g
-const NO_SLASH_EXPR = /[^/]$/
 
 /**
  * 修复相对路径的页面链接
@@ -28,45 +30,44 @@ const NO_SLASH_EXPR = /[^/]$/
  * 实际上不需要当前页面的 path
  */
 const linkFix = (link: string, isIndex: boolean): string => {
-  if (/^\//.test(link)) return link // absolute path
+  if (link.startsWith('/')) return link // absolute path
 
   let newLink = link.replace(MD_EXPR, '/').replace('index', '')
   if (!isIndex) newLink = '../' + newLink
-  if (NO_SLASH_EXPR.test(newLink) && !/#/.test(newLink)) {
-    newLink += '/' // append '/' for links, but excluding urls includes `#`.
+  // append '/' for links, but excluding urls includes `#`.
+  if (newLink.endsWith('/') && !newLink.includes('#')) {
+    newLink += '/'
   }
   return newLink
 }
 
 const getAPILink = (link: string, pathname: string, isIndex: boolean): string => {
   let newLink = link.replace(MD_EXPR, '/').replace(/#(.*?)$/, '')
-  if (/^[^/]/.test(newLink)) {
+  if (!newLink.startsWith('/')) {
     if (!isIndex) newLink = '../' + newLink
-    if (NO_SLASH_EXPR.test(pathname)) pathname += '/'
+    if (pathname.endsWith('/')) pathname += '/'
     newLink = path.resolve(pathname, newLink)
   }
   return `https://api.mgt.moe/preview?path=${newLink}`
 }
 
-const isRef = (link: string): boolean => /^#/.test(link)
-
-const useStyles = makeStyles((theme) => ({
-  link: {
-    color: theme.palette.secondary.main,
-    textDecoration: 'none',
-    '&:hover': {
-      textDecoration: 'none',
-      color: theme.palette.secondary.light,
-    },
-    transition: `color ${250}ms ease-in-out`,
-  },
-}))
-
-export interface SmartLinkProps<T = any> extends Omit<GatsbyLinkProps<T>, 'to'> {
-  /** 指向的链接 */
-  to?: string;
-  /** to 的别名，两者同时存在时优先使用 href */
-  href?: string;
+const isRef = (link: string): boolean => link.startsWith('#')
+
+const linkStyle = ({ theme }: { theme?: Theme }): SerializedStyles => css`
+  color: ${theme?.palette.secondary.main};
+  text-decoration: none;
+  transition: color 225ms ease-in-out;
+
+  &:hover {
+    color: ${theme?.palette.secondary.main};
+  }
+`
+
+const StyledLink = styled(Link)(linkStyle)
+
+const StyledGLink = styled(GatsbyLink)(linkStyle)
+
+export interface SmartLinkProps extends LinkProps {
   /** 类名 */
   className?: string;
   /** 是否对站内链接启用 Tooltip 预览，如果为 true 则必须给出 pathname */
@@ -77,6 +78,28 @@ export interface SmartLinkProps<T = any> extends Omit<GatsbyLinkProps<T>, 'to'>
   isIndex?: boolean;
 }
 
+const SCROLL_PADDING = 24
+
+const RefLink: React.FC<SmartLinkProps> = observer((props) => {
+  const { href = '', children, ...others } = props
+  const headerHeight = computed((): number => headerStore.appear ? headerHeight : 0).get()
+
+  const onClick: OnClickHandler = (e) => {
+    e.preventDefault()
+
+    const target = document.getElementById(href.substring(1, href.length))
+    const yDis = getElementViewPosition(target).y + window?.pageYOffset - headerHeight - SCROLL_PADDING
+
+    smoothScrollTo(yDis)
+  }
+
+  return (
+    <StyledGLink to={href} onClick={onClick} {...others as any}>
+      {children}
+    </StyledGLink>
+  )
+})
+
 /**
  * 智能链接
  *
@@ -86,59 +109,31 @@ export interface SmartLinkProps<T = any> extends Omit<GatsbyLinkProps<T>, 'to'>
  * - 如果是 path 则根据 tooltip 属性决定是否启用 Tooltip
  */
 const SmartLink: React.FC<SmartLinkProps> = (props) => {
-  const theme = useTheme()
-  const classes = useStyles()
-  
-  // in case Link is constructed wrongly
-  const href = typeof props?.to === 'string' ? props?.to : ''
-  const { tooltip = false, isIndex = true, className, pathname, children, ...others } = props
-  const classList = clsx(className, classes.link)
-  const [settings] = useSetting()
-  const isMdDown = useMediaQuery(theme.breakpoints.down('md'))
-
-
-  if (className && className.search('anchor') > -1) {
-    return <a {...others} href={href}>{children}</a>
+  const { tooltip = false, href = '', isIndex = true, pathname, children, ...others } = props
+
+  if (others?.className?.includes('anchor')) {
+    delete others.className
+    return <Link {...others} href={href}>{children}</Link>
   } else if (isAbsoluteURL(href)) {
     return (
-      <a {...others} href={href} className={classList} target="_blank" rel="noopener noreferrer nofollow">
+      <StyledLink href={href} target="_blank" rel="noopener noreferrer nofollow">
         {children}
-      </a>
+      </StyledLink>
     )
   } else if (isRef(href)) {
-    const tabHeight = isMdDown ? 64 : 112
-    const scrollPadding = 24
-
-    const onClick: OnClickHandler = (e) => {
-      e.preventDefault()
-
-      const target = document.getElementById(href.substring(1, href.length))
-      const yDis = (target?.getBoundingClientRect().top as number) + window?.pageYOffset - tabHeight - scrollPadding
-
-      if (settings.animation.smoothScroll) {
-        smoothScrollTo(yDis)
-      } else {
-        window?.scrollTo(0, yDis)
-      }
-    }
-
-    return (
-      <GatsbyLink {...others as any} to={href} className={classList} onClick={onClick}>
-        {children}
-      </GatsbyLink>
-    )
+    return <RefLink href={href} {...others}>{children}</RefLink>
   } else if (tooltip) {
     if (!pathname) throw new Error('tooltip 为 true 时必须给出 pathname')
     return (
       <LinkTooltip url={getAPILink(href, pathname, isIndex)} to={linkFix(href, isIndex)}>
-        <GatsbyLink {...others as any} to={linkFix(href, isIndex)} className={classList}>
+        <StyledGLink to={linkFix(href, isIndex)} {...others as any}>
           {children}
-        </GatsbyLink>
+        </StyledGLink>
       </LinkTooltip>
     )
   } else {
     return (
-      <GatsbyLink {...others as any} to={linkFix(href, isIndex)} className={classList}>
+      <GatsbyLink to={linkFix(href, isIndex)} {...others as any}>
         {children}
       </GatsbyLink>
     )
diff --git a/gatsby-theme-oi-wiki/src/components/Link/utils.ts b/gatsby-theme-oi-wiki/src/components/Link/utils.ts
index c66a1c4d..0fb650cc 100644
--- a/gatsby-theme-oi-wiki/src/components/Link/utils.ts
+++ b/gatsby-theme-oi-wiki/src/components/Link/utils.ts
@@ -1,13 +1,22 @@
+import { Nullable } from '../../types/common'
+
 export type Position = Pick<DOMRect, 'x' | 'y'>
 
 /**
  * 获取元素的绝对位置坐标（相对于浏览器视区左上角）
  */
-export const getElementViewPosition = (el: HTMLElement): Position => {
-  const rect = el.getBoundingClientRect()
-  return {
-    x: rect.x || rect.top,
-    y: rect.y || rect.bottom,
+export const getElementViewPosition = (el: Nullable<HTMLElement>): Position => {
+  if (el === null) {
+    return {
+      x: 0,
+      y: 0,
+    }
+  } else {
+    const rect = el.getBoundingClientRect()
+    return {
+      x: rect.x || rect.top,
+      y: rect.y || rect.bottom,
+    }
   }
 }
 

From 4d8d2aaabcb32555b0c8acedf0d2284e1d0ebd91 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Thu, 23 Sep 2021 22:31:42 +0800
Subject: [PATCH 06/59] style: Link => SmartLink

---
 .../src/components/{Link => SmartLink}/LinkTooltip.tsx          | 0
 .../src/components/{Link => SmartLink}/ToolCard.tsx             | 0
 .../src/components/{Link => SmartLink}/hooks.tsx                | 0
 .../src/components/{Link => SmartLink}/index.tsx                | 2 +-
 .../src/components/{Link => SmartLink}/utils.ts                 | 0
 5 files changed, 1 insertion(+), 1 deletion(-)
 rename gatsby-theme-oi-wiki/src/components/{Link => SmartLink}/LinkTooltip.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{Link => SmartLink}/ToolCard.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{Link => SmartLink}/hooks.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{Link => SmartLink}/index.tsx (99%)
 rename gatsby-theme-oi-wiki/src/components/{Link => SmartLink}/utils.ts (100%)

diff --git a/gatsby-theme-oi-wiki/src/components/Link/LinkTooltip.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/LinkTooltip.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/Link/LinkTooltip.tsx
rename to gatsby-theme-oi-wiki/src/components/SmartLink/LinkTooltip.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/Link/ToolCard.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/ToolCard.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/Link/ToolCard.tsx
rename to gatsby-theme-oi-wiki/src/components/SmartLink/ToolCard.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/Link/hooks.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/hooks.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/Link/hooks.tsx
rename to gatsby-theme-oi-wiki/src/components/SmartLink/hooks.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/Link/index.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
similarity index 99%
rename from gatsby-theme-oi-wiki/src/components/Link/index.tsx
rename to gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
index 3e0a708b..450a96e5 100644
--- a/gatsby-theme-oi-wiki/src/components/Link/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
@@ -140,4 +140,4 @@ const SmartLink: React.FC<SmartLinkProps> = (props) => {
   }
 }
 
-export { SmartLink }
+export default SmartLink
diff --git a/gatsby-theme-oi-wiki/src/components/Link/utils.ts b/gatsby-theme-oi-wiki/src/components/SmartLink/utils.ts
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/Link/utils.ts
rename to gatsby-theme-oi-wiki/src/components/SmartLink/utils.ts

From 3f92055868e90cb16ac47de4762897cc960b6f88 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Thu, 23 Sep 2021 22:33:43 +0800
Subject: [PATCH 07/59] refactor: Footer

---
 .../src/components/Footer.tsx                 | 43 ++++++++++++-------
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    |  3 ++
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Footer.tsx b/gatsby-theme-oi-wiki/src/components/Footer.tsx
index 20be2673..f7a101c9 100644
--- a/gatsby-theme-oi-wiki/src/components/Footer.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Footer.tsx
@@ -1,19 +1,30 @@
-import { Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { css } from '@emotion/react'
+import Typography from '@mui/material/Typography'
 import { graphql, useStaticQuery } from 'gatsby'
 import React, { useEffect } from 'react'
-import { SmartLink } from './Link'
+import styled from '@mui/material/styles/styled'
+import Box from '@mui/material/Box'
+import SmartLink from './SmartLink'
 
-const useStyles = makeStyles((theme) => ({
-  link: {
-    color: theme.palette.footer.text,
-  },
-}))
+const BG_COLOR = `rgb(238, 238, 238)`
+const COLOR = `rgb(97, 97, 97)`
+
+const linkStyle = css`
+  color: ${COLOR};
+`
+
+const Container = styled(Box)(({ theme }) => css`
+  background-color: ${BG_COLOR};
+  color: ${COLOR};
+  padding: ${theme.spacing(3)};
+  ${theme.breakpoints.up('lg')}: {
+    margin-left: 250px;
+  }
+`)
 
 let eggShowed = false
 
 const Footer: React.FC = () => {
-  const classes = useStyles()
   const data = useStaticQuery<GatsbyTypes.lastestCommitQuery>(graphql`
     query lastestCommit {
       allGitCommit(limit: 1) {
@@ -39,28 +50,30 @@ const Footer: React.FC = () => {
   }, [hash, hashFrag])
 
   return (
-    <>
+    <Container>
       <Typography gutterBottom>
         Copyright © 2016 - {dateStr?.substr(0, 4)} OI Wiki Team
       </Typography>
       <Typography gutterBottom>
         最近更新：
-        <SmartLink className={classes.link} href="https://github.com/OI-wiki/OI-wiki/commits">
+        <SmartLink className={linkStyle.name} href="https://github.com/OI-wiki/OI-wiki/commits">
           {hashFrag}
         </SmartLink>
         , {dateStr?.substr(0, 10)}
       </Typography>
       <Typography>
         联系方式：
-        <SmartLink className={classes.link} href="https://t.me/OIwiki">
+        <SmartLink className={linkStyle.name} href="https://t.me/OIwiki">
           Telegram 群组
         </SmartLink>{' / '}
-        <SmartLink className={classes.link} href="https://jq.qq.com/?_wv=1027&k=5EfkM6K">
+        <SmartLink className={linkStyle.name} href="https://jq.qq.com/?_wv=1027&k=5EfkM6K">
           QQ 群组
         </SmartLink>
       </Typography>
-    </>
+    </Container>
   )
 }
 
-export default Footer
+const FooterMemo = React.memo(Footer, () => true)
+
+export default FooterMemo
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 34690738..871a0504 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -6,6 +6,7 @@ import rehypeReact, { Options } from 'rehype-react'
 import { Root } from 'hast'
 import Grid from '@mui/material/Grid'
 import Header from '../components/Header'
+import Footer from '../components/Footer'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -92,6 +93,8 @@ const Doc: React.FC<DocProps> = (props) => {
         <article>
           {contentParser(mdx.htmlAst)}
         </article>
+
+        <Footer/>
       </Grid>
     </>
   )

From 3a8238f76cc35b215fc00ab96e2c34e5cb21a2fc Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Fri, 24 Sep 2021 00:16:33 +0800
Subject: [PATCH 08/59] feat: Main component

doc content wrapper
---
 gatsby-theme-oi-wiki/src/components/Main.tsx | 37 ++++++++++++++++++++
 gatsby-theme-oi-wiki/src/templates/Doc.tsx   | 20 +++++++----
 2 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/components/Main.tsx

diff --git a/gatsby-theme-oi-wiki/src/components/Main.tsx b/gatsby-theme-oi-wiki/src/components/Main.tsx
new file mode 100644
index 00000000..e3dbcbf0
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Main.tsx
@@ -0,0 +1,37 @@
+import styled from '@mui/material/styles/styled'
+import Box from '@mui/material/Box'
+import React from 'react'
+import Grid, { GridProps } from '@mui/material/Grid'
+import Footer from './Footer'
+import { navSidebarStore } from '../stores/sidebarStore'
+
+const Content = styled(Box)`
+  flex-flow: row;
+  flex-grow: 1;
+  margin: auto;
+  padding: 0 50px 120px;
+  width: 100%;
+`
+
+const Main: React.FC<GridProps> = (props) => {
+  const { children, ...others } = props
+  const width = `calc(100vw - ${navSidebarStore.width}px)`
+
+  return (
+    <Grid
+      container={true}
+      flexGrow={1}
+      flexDirection="column"
+      position="relative"
+      {...others}>
+      <Content sx={{ width }}>
+        {children}
+      </Content>
+
+      <Footer/>
+    </Grid>
+  )
+}
+
+export default Main
+
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 871a0504..f13c5cf9 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -6,7 +6,7 @@ import rehypeReact, { Options } from 'rehype-react'
 import { Root } from 'hast'
 import Grid from '@mui/material/Grid'
 import Header from '../components/Header'
-import Footer from '../components/Footer'
+import Main from '../components/Main'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -64,6 +64,7 @@ const processor = unified()
 const contentParser = (htmlAst: Root): JSX.Element =>
   (processor.stringify(htmlAst) as never as JSX.Element)
 
+
 const Doc: React.FC<DocProps> = (props) => {
   const { data, location } = props
   const { mdx } = data
@@ -87,14 +88,19 @@ const Doc: React.FC<DocProps> = (props) => {
 
   return (
     <>
-      <Grid container={true} flexDirection="column">
-
+      <Grid container={true} direction="column">
         <Header title={title}/>
-        <article>
-          {contentParser(mdx.htmlAst)}
-        </article>
 
-        <Footer/>
+        <Grid container={true} item={true} flexGrow={1} sx={{ flexFlow: 'row' }}>
+
+          <Main item={true}>
+            <article>
+              {contentParser(mdx.htmlAst)}
+            </article>
+          </Main>
+
+        </Grid>
+
       </Grid>
     </>
   )

From a5e8a4ef9707e8070f6c3353d27b4f90246bfee0 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Fri, 24 Sep 2021 00:18:24 +0800
Subject: [PATCH 09/59] refactor: NavSidebar

The original name is Sidebar
---
 .../src/components/NavSidebar.tsx             | 253 ++++++++++++++++++
 .../src/stores/sidebarStore.ts                |  33 +++
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    |   2 +
 3 files changed, 288 insertions(+)
 create mode 100644 gatsby-theme-oi-wiki/src/components/NavSidebar.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/stores/sidebarStore.ts

diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar.tsx b/gatsby-theme-oi-wiki/src/components/NavSidebar.tsx
new file mode 100644
index 00000000..f25be060
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/NavSidebar.tsx
@@ -0,0 +1,253 @@
+import { css } from '@emotion/react'
+import styled from '@mui/material/styles/styled'
+import ListItem from '@mui/material/ListItem'
+import List from '@mui/material/List'
+import React, { useState } from 'react'
+import { Link } from 'gatsby'
+import trimTrailingSlash from '../lib/trailingSlash'
+import Collapse from '@mui/material/Collapse'
+import Typography from '@mui/material/Typography'
+import ListItemText from '@mui/material/ListItemText'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import Box from '@mui/material/Box'
+import { headerStore } from '../stores/headerStore'
+import { navSidebarStore } from '../stores/sidebarStore'
+import { observer } from 'mobx-react-lite'
+import IconButton from '@mui/material/IconButton'
+import FormatIndentDecreaseSharp from '@mui/icons-material/FormatIndentDecreaseSharp'
+import FormatIndentIncreaseSharp from '@mui/icons-material/FormatIndentIncreaseSharp'
+import { StrIndexObj } from '../types/common'
+import { flattenObject } from './NavAndDrawer/utils'
+import pathList from '../sidebar.yaml'
+
+enum NodeType {
+  Leaf, NonLeaf
+}
+
+interface PathListLeafNode {
+  name: string;
+  type: NodeType.Leaf;
+  path: string;
+}
+
+interface PathListNonLeafNode {
+  name: string;
+  type: NodeType.NonLeaf;
+  children: Array<PathListNode>;
+}
+
+type PathListNode = PathListLeafNode | PathListNonLeafNode
+
+type TypedPathList = Array<PathListNode>
+
+interface LeafItemProps extends PathListLeafNode {
+  padding: number;
+  selected: boolean;
+}
+
+interface NonLeafItemProps extends Omit<PathListNonLeafNode, 'children'> {
+  padding: number;
+  childItems: React.ReactElement[];
+  isOpen: boolean;
+}
+
+type PathListType = Array<Record<string, string> | Array<NavSidebarProps>>
+
+export interface NavSidebarProps {
+  pathname: string
+}
+
+
+const listItemStyle = css`
+  line-height: 1.2;
+  padding-top: 5px;
+  padding-bottom: 5px;
+`
+
+const NonLeafListItem = styled(ListItem)(listItemStyle)
+
+const LeafListItem = styled(ListItem)(({ theme }) => css`
+  ${listItemStyle};
+  color: ${theme.palette.text.primary};
+
+  &:hover {
+    text-decoration: none;
+  }
+`)
+
+const StyledList = styled(List)`
+  width: 100%;
+  height: 100%;
+`
+
+const WrapperBox = styled(Box)(({ theme }) => css`
+  border-inline: 1px solid ${theme.palette.divider};
+  position: sticky;
+  z-index: 1;
+  transition: width 225ms ease-in-out, top 225ms ease-in-out;
+  box-sizing: border-box;
+`)
+
+const ContainerBox = styled(Box)`
+  overflow-y: auto;
+  position: absolute;
+  height: inherit;
+  width: 100%;
+  transition: transform 225ms ease-in-out;
+`
+
+const NonLeafItem: React.FC<NonLeafItemProps> = (props) => {
+  const { name, padding, childItems, isOpen } = props
+  const [open, setOpen] = useState(isOpen)
+
+  return (
+    <div>
+      <NonLeafListItem
+        onClick={() => setOpen(!open)}
+        style={{ paddingLeft: `${padding}px` }}
+      >
+        <ListItemText
+          primary={
+            <Typography variant="body2" component="span">
+              {name}
+            </Typography>
+          }
+        />
+        {open ? <ExpandLess fontSize="small"/> : <ExpandMore fontSize="small"/>}
+      </NonLeafListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit={true}>
+        <List disablePadding>{childItems}</List>
+      </Collapse>
+    </div>
+  )
+}
+
+const LeafItem: React.FC<LeafItemProps> = (props) => {
+  const { name, path, padding, selected } = props
+
+  return (
+    <Link key={name} to={path}>
+      <LeafListItem selected={selected} sx={{ paddingLeft: `${padding}px` }}>
+        <ListItemText
+          primary={
+            <Typography variant="body2" component="span">
+              {name}
+            </Typography>
+          }
+        />
+      </LeafListItem>
+    </Link>
+  )
+}
+
+function listItemBuilder(node: PathListNode, padding: number, pathname: string): [React.ReactElement, boolean] {
+  if (node.type === NodeType.Leaf) {
+    const selected = trimTrailingSlash(node.path) === trimTrailingSlash(pathname)
+
+    return [
+      <LeafItem key={node.path} padding={padding} selected={selected} {...node}/>,
+      selected,
+    ]
+  } else {
+    const children = node.children
+    let isOpen = false
+    const items: NonLeafItemProps['childItems'] = []
+
+    children.forEach((v) => {
+      const [item, selected] = listItemBuilder(v, padding + 16, pathname)
+      if (selected) isOpen = selected
+      items.push(item)
+    })
+
+    return [
+      <NonLeafItem key={node.name} isOpen={isOpen} childItems={items} padding={padding} {...node} />,
+      isOpen,
+    ]
+  }
+}
+
+const getTabIDFromLocation = (location: string, pathList: StrIndexObj<StrIndexObj>): number => {
+  const locationTrimmed = trimTrailingSlash(location)
+  for (const v of Object.entries(pathList)) {
+    if (Object.values(flattenObject(v[1])).map(v => trimTrailingSlash(v as string)).indexOf(locationTrimmed) > -1) return +v[0]
+  }
+  return -1
+}
+
+function getTypedPathList(pathList: PathListType): TypedPathList {
+  const resArray: TypedPathList = []
+  for (const i of pathList) {
+    const [[name, a]] = Object.entries(i)
+    if (typeof a === 'string') {
+      resArray.push({ name, path: a, type: NodeType.Leaf })
+    } else {
+      resArray.push({ name, children: getTypedPathList(a), type: NodeType.NonLeaf })
+    }
+  }
+  return resArray
+}
+
+const ICON_SIZE = 40
+const BTN_SIZE = ICON_SIZE + 20
+
+const StyledIconBtn = styled(IconButton)`
+  position: absolute;
+  top: 0;
+  width: ${BTN_SIZE}px;
+  height: ${BTN_SIZE}px;
+
+  opacity: 0.2;
+  transition: opacity 225ms;
+
+  &:hover {
+    opacity: 1;
+  }
+`
+
+const NavCollapseBtn = observer(() => {
+  return (
+    <StyledIconBtn
+      aria-label="collapse nav sidebar"
+      onClick={navSidebarStore.toggleCollapsed}
+      sx={{ right: -BTN_SIZE }}>
+      {navSidebarStore.collapsed
+        ? <FormatIndentDecreaseSharp/>
+        : <FormatIndentIncreaseSharp/>
+      }
+    </StyledIconBtn>
+  )
+})
+
+const NavSidebar: React.FC<NavSidebarProps> = observer((props) => {
+  const { pathname } = props
+  const top = headerStore.appear ? headerStore.height : 0
+  const width = navSidebarStore.collapsed ? 0 : navSidebarStore.width
+  const translateX = navSidebarStore.collapsed ? -navSidebarStore.width : 0
+  const tocList = React.useMemo(
+    () => getTypedPathList(pathList)
+      .map((item) => listItemBuilder(item, 16, pathname))
+      .map(([x]) => x),
+    [pathname],
+  )
+
+  return (
+    <WrapperBox sx={{
+      top,
+      width,
+      height: `calc(100vh - ${top}px)`,
+      borderLeft: 'unset',
+    }}>
+      <ContainerBox sx={{
+        transform: `translate3d(${translateX}px, 0, 0)`,
+      }}>
+        <StyledList>
+          {tocList}
+        </StyledList>
+      </ContainerBox>
+      <NavCollapseBtn/>
+    </WrapperBox>
+  )
+})
+
+export default NavSidebar
diff --git a/gatsby-theme-oi-wiki/src/stores/sidebarStore.ts b/gatsby-theme-oi-wiki/src/stores/sidebarStore.ts
new file mode 100644
index 00000000..dfc584b1
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/stores/sidebarStore.ts
@@ -0,0 +1,33 @@
+import { CreateObservableOptions, observable } from 'mobx'
+
+interface SidebarStore {
+  collapsed: boolean;
+  width: number;
+
+  setCollapsed(val: boolean): void
+
+  toggleCollapsed(): void
+}
+
+const sidebarStoreModel: SidebarStore = {
+  collapsed: false,
+  width: 300,
+
+  setCollapsed(val) {
+    this.collapsed = val
+  },
+
+  toggleCollapsed() {
+    this.collapsed = !this.collapsed
+  },
+}
+
+const sidebarStoreOption: CreateObservableOptions = {
+  autoBind: true,
+}
+
+const tocSidebarStore = observable(sidebarStoreModel, undefined, sidebarStoreOption)
+
+const navSidebarStore = observable(sidebarStoreModel, undefined, sidebarStoreOption)
+
+export { tocSidebarStore, navSidebarStore }
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index f13c5cf9..ecb5814b 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -7,6 +7,7 @@ import { Root } from 'hast'
 import Grid from '@mui/material/Grid'
 import Header from '../components/Header'
 import Main from '../components/Main'
+import NavSidebar from '../components/NavSidebar'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -92,6 +93,7 @@ const Doc: React.FC<DocProps> = (props) => {
         <Header title={title}/>
 
         <Grid container={true} item={true} flexGrow={1} sx={{ flexFlow: 'row' }}>
+          <NavSidebar pathname={location.pathname}/>
 
           <Main item={true}>
             <article>

From 57a2fab48191b27a3463375602204be6b56b7053 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sat, 25 Sep 2021 22:49:54 +0800
Subject: [PATCH 10/59] refactor(navsidebar): extract types and functions, fix
 scrollbar style

---
 .../src/components/NavSidebar.tsx             | 253 ------------------
 .../src/components/NavSidebar/index.tsx       | 107 ++++++++
 .../components/NavSidebar/listItemBuilder.tsx | 102 +++++++
 .../src/components/NavSidebar/types.ts        |  38 +++
 .../src/components/NavSidebar/utils.ts        |  27 ++
 .../src/stores/sidebarStore.ts                |   2 +-
 .../src/theme/scrollbarStyle.ts               |  25 ++
 7 files changed, 300 insertions(+), 254 deletions(-)
 delete mode 100644 gatsby-theme-oi-wiki/src/components/NavSidebar.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/NavSidebar/listItemBuilder.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/NavSidebar/types.ts
 create mode 100644 gatsby-theme-oi-wiki/src/components/NavSidebar/utils.ts
 create mode 100644 gatsby-theme-oi-wiki/src/theme/scrollbarStyle.ts

diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar.tsx b/gatsby-theme-oi-wiki/src/components/NavSidebar.tsx
deleted file mode 100644
index f25be060..00000000
--- a/gatsby-theme-oi-wiki/src/components/NavSidebar.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import { css } from '@emotion/react'
-import styled from '@mui/material/styles/styled'
-import ListItem from '@mui/material/ListItem'
-import List from '@mui/material/List'
-import React, { useState } from 'react'
-import { Link } from 'gatsby'
-import trimTrailingSlash from '../lib/trailingSlash'
-import Collapse from '@mui/material/Collapse'
-import Typography from '@mui/material/Typography'
-import ListItemText from '@mui/material/ListItemText'
-import ExpandLess from '@mui/icons-material/ExpandLess'
-import ExpandMore from '@mui/icons-material/ExpandMore'
-import Box from '@mui/material/Box'
-import { headerStore } from '../stores/headerStore'
-import { navSidebarStore } from '../stores/sidebarStore'
-import { observer } from 'mobx-react-lite'
-import IconButton from '@mui/material/IconButton'
-import FormatIndentDecreaseSharp from '@mui/icons-material/FormatIndentDecreaseSharp'
-import FormatIndentIncreaseSharp from '@mui/icons-material/FormatIndentIncreaseSharp'
-import { StrIndexObj } from '../types/common'
-import { flattenObject } from './NavAndDrawer/utils'
-import pathList from '../sidebar.yaml'
-
-enum NodeType {
-  Leaf, NonLeaf
-}
-
-interface PathListLeafNode {
-  name: string;
-  type: NodeType.Leaf;
-  path: string;
-}
-
-interface PathListNonLeafNode {
-  name: string;
-  type: NodeType.NonLeaf;
-  children: Array<PathListNode>;
-}
-
-type PathListNode = PathListLeafNode | PathListNonLeafNode
-
-type TypedPathList = Array<PathListNode>
-
-interface LeafItemProps extends PathListLeafNode {
-  padding: number;
-  selected: boolean;
-}
-
-interface NonLeafItemProps extends Omit<PathListNonLeafNode, 'children'> {
-  padding: number;
-  childItems: React.ReactElement[];
-  isOpen: boolean;
-}
-
-type PathListType = Array<Record<string, string> | Array<NavSidebarProps>>
-
-export interface NavSidebarProps {
-  pathname: string
-}
-
-
-const listItemStyle = css`
-  line-height: 1.2;
-  padding-top: 5px;
-  padding-bottom: 5px;
-`
-
-const NonLeafListItem = styled(ListItem)(listItemStyle)
-
-const LeafListItem = styled(ListItem)(({ theme }) => css`
-  ${listItemStyle};
-  color: ${theme.palette.text.primary};
-
-  &:hover {
-    text-decoration: none;
-  }
-`)
-
-const StyledList = styled(List)`
-  width: 100%;
-  height: 100%;
-`
-
-const WrapperBox = styled(Box)(({ theme }) => css`
-  border-inline: 1px solid ${theme.palette.divider};
-  position: sticky;
-  z-index: 1;
-  transition: width 225ms ease-in-out, top 225ms ease-in-out;
-  box-sizing: border-box;
-`)
-
-const ContainerBox = styled(Box)`
-  overflow-y: auto;
-  position: absolute;
-  height: inherit;
-  width: 100%;
-  transition: transform 225ms ease-in-out;
-`
-
-const NonLeafItem: React.FC<NonLeafItemProps> = (props) => {
-  const { name, padding, childItems, isOpen } = props
-  const [open, setOpen] = useState(isOpen)
-
-  return (
-    <div>
-      <NonLeafListItem
-        onClick={() => setOpen(!open)}
-        style={{ paddingLeft: `${padding}px` }}
-      >
-        <ListItemText
-          primary={
-            <Typography variant="body2" component="span">
-              {name}
-            </Typography>
-          }
-        />
-        {open ? <ExpandLess fontSize="small"/> : <ExpandMore fontSize="small"/>}
-      </NonLeafListItem>
-      <Collapse in={open} timeout="auto" unmountOnExit={true}>
-        <List disablePadding>{childItems}</List>
-      </Collapse>
-    </div>
-  )
-}
-
-const LeafItem: React.FC<LeafItemProps> = (props) => {
-  const { name, path, padding, selected } = props
-
-  return (
-    <Link key={name} to={path}>
-      <LeafListItem selected={selected} sx={{ paddingLeft: `${padding}px` }}>
-        <ListItemText
-          primary={
-            <Typography variant="body2" component="span">
-              {name}
-            </Typography>
-          }
-        />
-      </LeafListItem>
-    </Link>
-  )
-}
-
-function listItemBuilder(node: PathListNode, padding: number, pathname: string): [React.ReactElement, boolean] {
-  if (node.type === NodeType.Leaf) {
-    const selected = trimTrailingSlash(node.path) === trimTrailingSlash(pathname)
-
-    return [
-      <LeafItem key={node.path} padding={padding} selected={selected} {...node}/>,
-      selected,
-    ]
-  } else {
-    const children = node.children
-    let isOpen = false
-    const items: NonLeafItemProps['childItems'] = []
-
-    children.forEach((v) => {
-      const [item, selected] = listItemBuilder(v, padding + 16, pathname)
-      if (selected) isOpen = selected
-      items.push(item)
-    })
-
-    return [
-      <NonLeafItem key={node.name} isOpen={isOpen} childItems={items} padding={padding} {...node} />,
-      isOpen,
-    ]
-  }
-}
-
-const getTabIDFromLocation = (location: string, pathList: StrIndexObj<StrIndexObj>): number => {
-  const locationTrimmed = trimTrailingSlash(location)
-  for (const v of Object.entries(pathList)) {
-    if (Object.values(flattenObject(v[1])).map(v => trimTrailingSlash(v as string)).indexOf(locationTrimmed) > -1) return +v[0]
-  }
-  return -1
-}
-
-function getTypedPathList(pathList: PathListType): TypedPathList {
-  const resArray: TypedPathList = []
-  for (const i of pathList) {
-    const [[name, a]] = Object.entries(i)
-    if (typeof a === 'string') {
-      resArray.push({ name, path: a, type: NodeType.Leaf })
-    } else {
-      resArray.push({ name, children: getTypedPathList(a), type: NodeType.NonLeaf })
-    }
-  }
-  return resArray
-}
-
-const ICON_SIZE = 40
-const BTN_SIZE = ICON_SIZE + 20
-
-const StyledIconBtn = styled(IconButton)`
-  position: absolute;
-  top: 0;
-  width: ${BTN_SIZE}px;
-  height: ${BTN_SIZE}px;
-
-  opacity: 0.2;
-  transition: opacity 225ms;
-
-  &:hover {
-    opacity: 1;
-  }
-`
-
-const NavCollapseBtn = observer(() => {
-  return (
-    <StyledIconBtn
-      aria-label="collapse nav sidebar"
-      onClick={navSidebarStore.toggleCollapsed}
-      sx={{ right: -BTN_SIZE }}>
-      {navSidebarStore.collapsed
-        ? <FormatIndentDecreaseSharp/>
-        : <FormatIndentIncreaseSharp/>
-      }
-    </StyledIconBtn>
-  )
-})
-
-const NavSidebar: React.FC<NavSidebarProps> = observer((props) => {
-  const { pathname } = props
-  const top = headerStore.appear ? headerStore.height : 0
-  const width = navSidebarStore.collapsed ? 0 : navSidebarStore.width
-  const translateX = navSidebarStore.collapsed ? -navSidebarStore.width : 0
-  const tocList = React.useMemo(
-    () => getTypedPathList(pathList)
-      .map((item) => listItemBuilder(item, 16, pathname))
-      .map(([x]) => x),
-    [pathname],
-  )
-
-  return (
-    <WrapperBox sx={{
-      top,
-      width,
-      height: `calc(100vh - ${top}px)`,
-      borderLeft: 'unset',
-    }}>
-      <ContainerBox sx={{
-        transform: `translate3d(${translateX}px, 0, 0)`,
-      }}>
-        <StyledList>
-          {tocList}
-        </StyledList>
-      </ContainerBox>
-      <NavCollapseBtn/>
-    </WrapperBox>
-  )
-})
-
-export default NavSidebar
diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx b/gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx
new file mode 100644
index 00000000..6610f358
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx
@@ -0,0 +1,107 @@
+import { css } from '@emotion/react'
+import styled from '@mui/material/styles/styled'
+import List from '@mui/material/List'
+import React from 'react'
+import Box from '@mui/material/Box'
+import { headerStore } from '../../stores/headerStore'
+import { navSidebarStore } from '../../stores/sidebarStore'
+import { observer } from 'mobx-react-lite'
+import IconButton from '@mui/material/IconButton'
+import FormatIndentDecreaseSharp from '@mui/icons-material/FormatIndentDecreaseSharp'
+import FormatIndentIncreaseSharp from '@mui/icons-material/FormatIndentIncreaseSharp'
+import pathList from '../../sidebar.yaml'
+import scrollbarStyle from '../../theme/scrollbarStyle'
+import { NavSidebarProps } from './types'
+import { getTypedPathList } from './utils'
+import listItemBuilder from './listItemBuilder'
+
+const StyledList = styled(List)`
+  width: 100%;
+  height: 100%;
+`
+
+const WrapperBox = styled(Box)(({ theme }) => css`
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  width: auto;
+  transition: transform 225ms ease-in-out;
+  border-inline: 1px solid ${theme.palette.divider};
+  flex-shrink: 0;
+  z-index: 1;
+`)
+
+const ContainerBox = styled(Box)`
+  ${scrollbarStyle};
+  --scrollbar-size: 0.33rem;
+
+  position: relative;
+  height: inherit;
+  width: ${navSidebarStore.width}px;
+  transition: transform 225ms ease-in-out;
+`
+
+
+const ICON_SIZE = 40
+const BTN_SIZE = ICON_SIZE + 20
+
+const StyledIconBtn = styled(IconButton)`
+  position: absolute;
+  top: 0;
+  width: ${BTN_SIZE}px;
+  height: ${BTN_SIZE}px;
+
+  opacity: 0.2;
+  transition: opacity 225ms;
+
+  &:hover {
+    opacity: 1;
+  }
+`
+
+const NavCollapseBtn = observer(() => {
+  return (
+    <StyledIconBtn
+      aria-label="collapse nav sidebar"
+      onClick={navSidebarStore.toggleCollapsed}
+      sx={{ right: -BTN_SIZE }}>
+      {navSidebarStore.collapsed
+        ? <FormatIndentDecreaseSharp/>
+        : <FormatIndentIncreaseSharp/>
+      }
+    </StyledIconBtn>
+  )
+})
+
+const NavSidebar: React.FC<NavSidebarProps> = observer((props) => {
+  const { pathname } = props
+  const scaleX = navSidebarStore.collapsed ? 0 : 1
+  const translateX = navSidebarStore.collapsed ? -navSidebarStore.width : 0
+  const translateY = headerStore.appear ? headerStore.height : 0
+  const navList = React.useMemo(
+    () => getTypedPathList(pathList)
+      .map((item) => listItemBuilder(item, 16, pathname))
+      .map(([x]) => x),
+    [pathname],
+  )
+
+  return (
+    <WrapperBox
+      sx={{
+        transform: `translate3d(${translateX}px, ${translateY}px, 0)`,
+        height: `calc(100vh - ${translateY}px)`,
+        borderLeft: 'unset',
+      }}
+    >
+      <ContainerBox sx={{ transform: `scale3d(${scaleX}, 1, 1)` }}>
+        <StyledList>
+          {navList}
+        </StyledList>
+      </ContainerBox>
+      <NavCollapseBtn/>
+    </WrapperBox>
+  )
+})
+
+export default NavSidebar
+export { BTN_SIZE, ContainerBox, ICON_SIZE, StyledIconBtn, WrapperBox }
diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar/listItemBuilder.tsx b/gatsby-theme-oi-wiki/src/components/NavSidebar/listItemBuilder.tsx
new file mode 100644
index 00000000..537c745d
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/NavSidebar/listItemBuilder.tsx
@@ -0,0 +1,102 @@
+import { css } from '@emotion/react'
+import styled from '@mui/material/styles/styled'
+import ListItem from '@mui/material/ListItem'
+import React, { useState } from 'react'
+import ListItemText from '@mui/material/ListItemText'
+import Typography from '@mui/material/Typography'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import Collapse from '@mui/material/Collapse'
+import List from '@mui/material/List'
+import { Link } from 'gatsby'
+import trimTrailingSlash from '../../lib/trailingSlash'
+import { LeafItemProps, NodeType, NonLeafItemProps, PathListNode } from './types'
+
+const listItemStyle = css`
+  line-height: 1.2;
+  padding-top: 5px;
+  padding-bottom: 5px;
+`
+
+const NonLeafListItem = styled(ListItem)(listItemStyle)
+
+const LeafListItem = styled(ListItem)(({ theme }) => css`
+  ${listItemStyle};
+  color: ${theme.palette.text.primary};
+
+  &:hover {
+    text-decoration: none;
+  }
+`)
+
+const NonLeafItem: React.FC<NonLeafItemProps> = (props) => {
+    const { name, padding, childItems, isOpen } = props
+    const [open, setOpen] = useState(isOpen)
+
+    return (
+        <div>
+            <NonLeafListItem
+                onClick={() => setOpen(!open)}
+                style={{ paddingLeft: `${padding}px` }}
+            >
+                <ListItemText
+                    primary={
+                        <Typography variant="body2" component="span">
+                            {name}
+                        </Typography>
+                    }
+                />
+                {open ? <ExpandLess fontSize="small"/> : <ExpandMore fontSize="small"/>}
+            </NonLeafListItem>
+            <Collapse in={open} timeout="auto" unmountOnExit={true}>
+                <List disablePadding>{childItems}</List>
+            </Collapse>
+        </div>
+    )
+}
+
+const LeafItem: React.FC<LeafItemProps> = (props) => {
+    const { name, path, padding, selected } = props
+
+    return (
+        <Link key={name} to={path}>
+            <LeafListItem selected={selected} sx={{ paddingLeft: `${padding}px` }}>
+                <ListItemText
+                    primary={
+                        <Typography variant="body2" component="span">
+                            {name}
+                        </Typography>
+                    }
+                />
+            </LeafListItem>
+        </Link>
+    )
+}
+
+function listItemBuilder(node: PathListNode, padding: number, pathname: string): [React.ReactElement, boolean] {
+    if (node.type === NodeType.Leaf) {
+        const selected = trimTrailingSlash(node.path) === trimTrailingSlash(pathname)
+
+        return [
+            <LeafItem key={node.path} padding={padding} selected={selected} {...node}/>,
+            selected,
+        ]
+    } else {
+        const children = node.children
+        let isOpen = false
+        const items: NonLeafItemProps['childItems'] = []
+
+        children.forEach((v) => {
+            const [item, selected] = listItemBuilder(v, padding + 16, pathname)
+            if (selected) isOpen = selected
+            items.push(item)
+        })
+
+        return [
+            <NonLeafItem key={node.name} isOpen={isOpen} childItems={items} padding={padding} {...node} />,
+            isOpen,
+        ]
+    }
+}
+
+export default listItemBuilder
diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar/types.ts b/gatsby-theme-oi-wiki/src/components/NavSidebar/types.ts
new file mode 100644
index 00000000..0738105a
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/NavSidebar/types.ts
@@ -0,0 +1,38 @@
+import React from 'react'
+
+export enum NodeType {
+  Leaf, NonLeaf
+}
+
+export interface PathListLeafNode {
+  name: string;
+  type: NodeType.Leaf;
+  path: string;
+}
+
+export interface PathListNonLeafNode {
+  name: string;
+  type: NodeType.NonLeaf;
+  children: Array<PathListNode>;
+}
+
+export type PathListNode = PathListLeafNode | PathListNonLeafNode
+
+export type TypedPathList = Array<PathListNode>
+
+export interface LeafItemProps extends PathListLeafNode {
+  padding: number;
+  selected: boolean;
+}
+
+export interface NonLeafItemProps extends Omit<PathListNonLeafNode, 'children'> {
+  padding: number;
+  childItems: React.ReactElement[];
+  isOpen: boolean;
+}
+
+export type PathListType = Array<Record<string, string> | Array<NavSidebarProps>>
+
+export interface NavSidebarProps {
+  pathname: string
+}
diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar/utils.ts b/gatsby-theme-oi-wiki/src/components/NavSidebar/utils.ts
new file mode 100644
index 00000000..7fb5a610
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/NavSidebar/utils.ts
@@ -0,0 +1,27 @@
+import { StrIndexObj } from '../../types/common'
+import trimTrailingSlash from '../../lib/trailingSlash'
+import { flattenObject } from '../NavAndDrawer/utils'
+import { NodeType, PathListType, TypedPathList } from './types'
+
+const getTabIDFromLocation = (location: string, pathList: StrIndexObj<StrIndexObj>): number => {
+  const locationTrimmed = trimTrailingSlash(location)
+  for (const v of Object.entries(pathList)) {
+    if (Object.values(flattenObject(v[1])).map(v => trimTrailingSlash(v as string)).indexOf(locationTrimmed) > -1) return +v[0]
+  }
+  return -1
+}
+
+function getTypedPathList(pathList: PathListType): TypedPathList {
+  const resArray: TypedPathList = []
+  for (const i of pathList) {
+    const [[name, a]] = Object.entries(i)
+    if (typeof a === 'string') {
+      resArray.push({ name, path: a, type: NodeType.Leaf })
+    } else {
+      resArray.push({ name, children: getTypedPathList(a), type: NodeType.NonLeaf })
+    }
+  }
+  return resArray
+}
+
+export { getTabIDFromLocation, getTypedPathList }
diff --git a/gatsby-theme-oi-wiki/src/stores/sidebarStore.ts b/gatsby-theme-oi-wiki/src/stores/sidebarStore.ts
index dfc584b1..aae17495 100644
--- a/gatsby-theme-oi-wiki/src/stores/sidebarStore.ts
+++ b/gatsby-theme-oi-wiki/src/stores/sidebarStore.ts
@@ -11,7 +11,7 @@ interface SidebarStore {
 
 const sidebarStoreModel: SidebarStore = {
   collapsed: false,
-  width: 300,
+  width: 260,
 
   setCollapsed(val) {
     this.collapsed = val
diff --git a/gatsby-theme-oi-wiki/src/theme/scrollbarStyle.ts b/gatsby-theme-oi-wiki/src/theme/scrollbarStyle.ts
new file mode 100644
index 00000000..29ba9721
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/scrollbarStyle.ts
@@ -0,0 +1,25 @@
+import { css } from '@emotion/react'
+import { grey } from '@mui/material/colors'
+
+const scrollbarStyle = css`
+  --scrollbar-size: 0.4rem;
+
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    // width relative to self font-size
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${grey[400]};
+    border-radius: 4px;
+
+    &:hover {
+      background-color: ${grey[600]};
+    }
+  }
+`
+
+export default scrollbarStyle

From 69db5d7567b8759d8855b76a2b22575c167de819 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sat, 25 Sep 2021 22:51:53 +0800
Subject: [PATCH 11/59] refactor(header): change appear logic, add onTop status

---
 .../src/components/{Header.tsx => Header/index.tsx} | 13 ++++++++-----
 gatsby-theme-oi-wiki/src/stores/headerStore.ts      | 13 ++++++++++---
 2 files changed, 18 insertions(+), 8 deletions(-)
 rename gatsby-theme-oi-wiki/src/components/{Header.tsx => Header/index.tsx} (82%)

diff --git a/gatsby-theme-oi-wiki/src/components/Header.tsx b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
similarity index 82%
rename from gatsby-theme-oi-wiki/src/components/Header.tsx
rename to gatsby-theme-oi-wiki/src/components/Header/index.tsx
index 509dd77c..b0514400 100644
--- a/gatsby-theme-oi-wiki/src/components/Header.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
@@ -2,16 +2,16 @@ import React, { useState } from 'react'
 import Slide from '@mui/material/Slide'
 import styled from '@emotion/styled'
 import { AppBar, Button, IconButton, Tooltip } from '@mui/material'
-import { HEADER_HEIGHT, headerStore } from '../stores/headerStore'
-import useSiteMetadata from '../hooks/useSiteMetadata'
+import { HEADER_HEIGHT, headerStore } from '../../stores/headerStore'
+import useSiteMetadata from '../../hooks/useSiteMetadata'
 import Grid from '@mui/material/Grid'
 import { Link } from 'gatsby'
 import { observer } from 'mobx-react-lite'
 import { useScroll } from '@use-gesture/react'
 import { Helmet } from 'react-helmet'
-import { Nullable } from '../types/common'
+import { Nullable } from '../../types/common'
 import School from '@mui/icons-material/School'
-import NavBtnStack from './Header/NavBtnStack'
+import NavBtnStack from './NavBtnStack'
 
 interface HeaderProps {
   title?: Nullable<string>
@@ -27,6 +27,7 @@ const StyledAppBar = styled(AppBar)`
   height: ${HEADER_HEIGHT}px;
 `
 
+const DIS = headerStore.height + 20
 const Header: React.FC<HeaderProps> = observer((props) => {
   const { title } = props
   const { title: siteTitle, description } = useSiteMetadata()
@@ -34,8 +35,10 @@ const Header: React.FC<HeaderProps> = observer((props) => {
 
   if (typeof window !== 'undefined') {
     useScroll(({ xy: [, y], delta: [, dy] }) => {
+      headerStore.setOnTop(y <= DIS)
       setElevation(y > 0 ? 2 : 0)
-      headerStore.setAppear(y <= 260 || dy < 0)
+      if (dy < -10 || y <= DIS) headerStore.setAppear(true)
+      if (dy > 5) headerStore.setAppear(false)
     }, {
       target: window,
     })
diff --git a/gatsby-theme-oi-wiki/src/stores/headerStore.ts b/gatsby-theme-oi-wiki/src/stores/headerStore.ts
index ab2323f4..338c1ce8 100644
--- a/gatsby-theme-oi-wiki/src/stores/headerStore.ts
+++ b/gatsby-theme-oi-wiki/src/stores/headerStore.ts
@@ -1,11 +1,14 @@
-import { action, computed, observable } from 'mobx'
+import { computed, observable } from 'mobx'
 
 export interface HeaderStore {
   appear: boolean;
+  onTop: boolean;
 
   height: number;
 
   setAppear(val: boolean): void;
+
+  setOnTop(val: boolean): void;
 }
 
 
@@ -13,6 +16,7 @@ const HEADER_HEIGHT = 60
 
 const headerStore = observable<HeaderStore>({
   appear: true,
+  onTop: true,
 
   get height() {
     return HEADER_HEIGHT
@@ -21,10 +25,13 @@ const headerStore = observable<HeaderStore>({
   setAppear(val) {
     this.appear = val
   },
+  setOnTop(val) {
+    this.onTop = val
+  },
 }, {
   height: computed,
-
-  setAppear: action.bound,
+}, {
+  autoBind: true,
 })
 
 export { headerStore, HEADER_HEIGHT }

From c3e62d37f0a86be5becb3b3049cab92066c916a6 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sat, 25 Sep 2021 22:54:15 +0800
Subject: [PATCH 12/59] refactor: TocSidebar component

---
 .../components/TocSidebar/TocContainer.tsx    | 152 ++++++++++++++++++
 .../src/components/TocSidebar/TocList.tsx     |  95 +++++++++++
 .../src/components/TocSidebar/index.tsx       |  45 ++++++
 .../src/components/TocSidebar/util.ts         |  88 ++++++++++
 4 files changed, 380 insertions(+)
 create mode 100644 gatsby-theme-oi-wiki/src/components/TocSidebar/TocContainer.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/TocSidebar/TocList.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/TocSidebar/util.ts

diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/TocContainer.tsx b/gatsby-theme-oi-wiki/src/components/TocSidebar/TocContainer.tsx
new file mode 100644
index 00000000..43320f23
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/TocContainer.tsx
@@ -0,0 +1,152 @@
+import { Nullable } from '../../types/common'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import useThrottledOnScroll from '../../lib/useThrottledOnScroll'
+import Typography from '@mui/material/Typography'
+import TocList, { TocListProps, TocNode } from './TocList'
+import { bindHTMLElement, getNextItem, getPrevItem, nodeSetActive, tocConverter, TocItem } from './util'
+import styled from '@mui/material/styles/styled'
+import Grid from '@mui/material/Grid'
+import { css } from '@emotion/react'
+
+export interface TocContainerProps {
+  toc: TocItem[];
+}
+
+
+const Container = styled(Grid)(({ theme }) => css`
+  flex-shrink: 0;
+  padding: ${theme.spacing(2, 2, 2, 0)};
+  display: block;
+
+  ${theme.breakpoints.down('md')} {
+    display: none;
+  }
+`)
+
+const Title = styled(Typography)(({ theme }) => css`
+  margin-top: ${theme.spacing(2)};
+  padding-left: ${theme.spacing(1.5)};
+`)
+
+const TocContainer: React.FC<TocContainerProps> = (props) => {
+  const { toc } = props
+
+  const newItems = useRef(tocConverter(toc))
+  const clickedRef = useRef(false)
+  const unsetClickedRef = useRef<ReturnType<typeof setTimeout>>()
+  const [activeState, setActiveState] = useState<Nullable<TocNode>>(null)
+  const lstScrollTopRef = useRef(0)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const handleClick: TocListProps['onClick'] = (item) => (event) => {
+    event.preventDefault()
+
+    const hash = item.url
+    const yDis = (item.element?.getBoundingClientRect().top || 0) + window?.pageYOffset
+
+    // smoothScrollTo(yDis)
+    window?.scrollTo(0, yDis)
+
+    window?.history.pushState(null, '', hash)
+    clickedRef.current = true
+
+    // clear last unfinished timeout
+    if (unsetClickedRef.current) clearTimeout(unsetClickedRef.current)
+    unsetClickedRef.current = setTimeout(() => {
+      clickedRef.current = false
+    }, 100)
+
+    if (activeState?.url !== hash) {
+      updateActive(item)
+    }
+  }
+
+  const updateActive = useCallback((state: Nullable<TocNode>): void => {
+    if (activeState?.url === state?.url) return
+
+    nodeSetActive(activeState, false)
+    nodeSetActive(state, true)
+    setActiveState(state)
+  }, [activeState])
+
+
+  const activeTocOnScroll = useCallback((): void => {
+    if (clickedRef.current) return
+
+    const TO_TOP_DIS = 20
+    const pageScrollTop = window?.pageYOffset || document.documentElement.scrollTop
+    let node: Nullable<TocNode> = activeState || newItems.current[0]
+
+    // down dir
+    if (pageScrollTop > lstScrollTopRef.current) {
+      let minDisNode = node
+      while (node) {
+        if (
+          node.element &&
+          node.element.getBoundingClientRect().top > TO_TOP_DIS + 20
+        ) {
+          break
+        } else {
+          if (node !== minDisNode) minDisNode = node
+          node = node.children.length > 0
+            ? node.children[0]
+            : getNextItem(newItems.current, node)
+        }
+      }
+      node = minDisNode
+    } else {
+      while (node) {
+        // node may have no ele which caused by error id
+        if (
+          !node.element ||
+          node.element.getBoundingClientRect().top <= TO_TOP_DIS
+        ) {
+          break
+        } else {
+          node = getPrevItem(newItems.current, node)
+        }
+      }
+    }
+
+    if (activeState !== node) {
+      updateActive(node)
+
+      // scroll the toc
+      // if (node?.selfElement) node.selfElement.scrollIntoView()
+      // else containerRef.current?.scrollTo({ top: 0 })
+
+      //  change hash
+      window.history.replaceState(null, '', node?.url)
+    }
+
+    lstScrollTopRef.current = pageScrollTop
+  }, [activeState, updateActive])
+
+  useEffect(() => {
+    bindHTMLElement(newItems.current)
+  }, [toc])
+
+  useThrottledOnScroll(activeTocOnScroll, 100)
+
+  useEffect(
+    () => {
+      return () => {
+        clearTimeout(unsetClickedRef.current as never as number)
+      }
+    },
+    [],
+  )
+
+  return (
+    newItems.current.length > 0
+      ? <Container ref={containerRef} aria-label="pageTOC">
+        <Title gutterBottom={true}>目录</Title>
+        <TocList data={newItems.current} onClick={handleClick}/>
+      </Container>
+      : <></>
+  )
+}
+
+const TocContainerMemo = React.memo(TocContainer)
+
+export default TocContainerMemo
diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/TocList.tsx b/gatsby-theme-oi-wiki/src/components/TocSidebar/TocList.tsx
new file mode 100644
index 00000000..b60eb35e
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/TocList.tsx
@@ -0,0 +1,95 @@
+import { Nullable, OnClickHandler } from '../../types/common'
+import React from 'react'
+import styled from '@mui/material/styles/styled'
+import Link from '@mui/material/Link'
+
+export interface TocNode {
+  url: string;
+  title: string;
+  level: number;
+  status: 'active' | 'expanded' | 'collapse'
+  children: TocNode[];
+  parent: Nullable<TocNode>;
+  element: Nullable<HTMLElement>;
+  selfElement: Nullable<HTMLElement>
+  index: number;
+}
+
+interface Props {
+  onClick?: (item: TocNode) => OnClickHandler<HTMLSpanElement>;
+  data: TocNode;
+}
+
+export interface TocListProps {
+  onClick?: (item: TocNode) => OnClickHandler<HTMLSpanElement>;
+  data: TocNode[]
+}
+
+interface StyledULProps extends React.HTMLAttributes<HTMLUListElement> {
+  status?: TocNode['status']
+}
+
+const StyledUL = styled('ul')<StyledULProps>`
+  padding-left: 0;
+  list-style: none;
+  overflow-y: hidden;
+  transition: all 400ms ease-in-out;
+  max-height: ${({ status }) => status === 'collapse' ? 0 : 600}px;
+`
+
+const StyledLI = styled('li')`
+  padding: 8px 0 0;
+`
+
+const StyledLink = styled(Link)`
+  display: block;
+  text-underline: none;
+  border-left: 4px solid transparent;
+`
+
+const TocItem: React.FC<Props> = (props) => {
+  const { data, onClick, ...restProps } = props
+  return (
+    <StyledLink
+      href={data.url}
+      onClick={(e) => {
+        onClick && onClick(data)(e)
+      }}
+      color={data.status !== 'collapse' ? 'secondary' : 'textSecondary'}
+      sx={{
+        paddingLeft: `${data.level + 1}em`,
+        borderLeftColor: (theme) => (data.status === 'active'
+          ? theme.palette.secondary.main
+          : 'transparent'),
+      }}
+      {...restProps}
+    >
+      <span dangerouslySetInnerHTML={{ __html: data.title }}/>
+    </StyledLink>)
+}
+
+const TocBlock: React.FC<Props> = (props) => {
+  const { data, onClick, ...restProps } = props
+  return (
+    <StyledLI id={`toc-${data.url}`}>
+      <TocItem data={data} onClick={onClick} {...restProps} />
+      {data.children.length > 0 &&
+      <StyledUL status={data.status}>
+        {data.children.map(i => <TocBlock key={i.url} data={i} onClick={onClick}   {...restProps}/>)}
+      </StyledUL>
+      }
+    </StyledLI>
+  )
+}
+
+const TocList: React.FC<TocListProps> = (props) => {
+  const { data, onClick, ...restProps } = props
+  return (
+    <StyledUL>
+      {data.map(i => <TocBlock data={i} onClick={onClick} {...restProps} key={i.url}/>)}
+    </StyledUL>
+  )
+}
+
+
+export default TocList
diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx b/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
new file mode 100644
index 00000000..863992e9
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
@@ -0,0 +1,45 @@
+import FormatIndentDecreaseSharp from '@mui/icons-material/FormatIndentDecreaseSharp'
+import FormatIndentIncreaseSharp from '@mui/icons-material/FormatIndentIncreaseSharp'
+import React from 'react'
+import { tocSidebarStore } from '../../stores/sidebarStore'
+import { BTN_SIZE, ContainerBox, StyledIconBtn, WrapperBox } from '../NavSidebar'
+import { observer } from 'mobx-react-lite'
+import { headerStore } from '../../stores/headerStore'
+import TocContainer, { TocContainerProps } from './TocContainer'
+
+type TocSidebarProps = TocContainerProps
+
+const TocCollapseBtn = observer(() => {
+  return (
+    <StyledIconBtn
+      aria-label="collapse toc sidebar"
+      onClick={tocSidebarStore.toggleCollapsed}
+      sx={{ left: -BTN_SIZE }}>
+      {tocSidebarStore.collapsed
+        ? <FormatIndentDecreaseSharp/>
+        : <FormatIndentIncreaseSharp/>}
+    </StyledIconBtn>
+  )
+})
+
+const TocSidebar: React.FC<TocSidebarProps> = observer((props) => {
+  const top = headerStore.appear ? headerStore.height : 0
+  const scaleX = tocSidebarStore.collapsed ? 0 : 1
+  const translateX = tocSidebarStore.collapsed ? tocSidebarStore.width : 0
+
+  return (
+    <WrapperBox sx={{
+      transform: `translate3d(${translateX}px, ${top}px, 0)`,
+      height: `calc(100vh - ${top}px)`,
+      borderRight: 'unset',
+      right: 0,
+    }}>
+      <ContainerBox sx={{ transform: `scale3d(${scaleX}, 1, 1)` }}>
+        <TocContainer toc={props.toc}/>
+      </ContainerBox>
+      <TocCollapseBtn/>
+    </WrapperBox>
+  )
+})
+
+export default TocSidebar
diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/util.ts b/gatsby-theme-oi-wiki/src/components/TocSidebar/util.ts
new file mode 100644
index 00000000..516300fe
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/util.ts
@@ -0,0 +1,88 @@
+import { TocNode } from './TocList'
+import { DeepRequiredNonNull, Nullable } from '../../types/common'
+import Slug from 'github-slugger'
+
+export type TocItem = DeepRequiredNonNull<Pick<GatsbyTypes.MarkdownHeading, 'id' | 'value' | 'depth'>>
+
+
+const getIDFromHash = (url: string): string => url.substring(1, url.length)
+
+const tocConverter = (items: TocItem[]): TocNode[] => {
+  const minLevel = items.reduce((v, i) => Math.min(v, i.depth), 5)
+  const curNode: Nullable<TocNode>[] = Array.from({ length: 6 }, () => null)
+  const data: TocNode[] = []
+  const REF_EXPR = /ref\d+$/
+  let index: number
+
+  const slugs = new Slug()
+  slugs.reset()
+
+  items.forEach((item) => {
+    const level = item.depth - minLevel
+    const title = item.value.replace(/<[^>]*>?/gm, '')
+    index = level > 0 ? (curNode[level - 1]?.children.length || 0) : data.length
+    const newNode: TocNode = {
+      url: `#${slugs.slug(title)}`.replace(REF_EXPR, ''),
+      title: title.replace(REF_EXPR, ''),
+      level,
+      index,
+      children: [],
+      status: 'collapse',
+      element: null,
+      parent: null,
+      selfElement: null,
+    }
+    curNode[level] = newNode
+
+    if (level === 0) {
+      data.push(newNode)
+    } else {
+      if (curNode[level - 1]) curNode[level - 1]?.children.push(newNode)
+      newNode.parent = curNode[level - 1]
+    }
+  })
+  return data
+}
+
+const bindHTMLElement = (toc: TocNode[]): void => {
+  toc.forEach((i, idx, arr) => {
+    if (i.element === null) arr[idx].element = document.getElementById(getIDFromHash(i.url))
+    if (i.selfElement === null) arr[idx].selfElement = document.getElementById(`toc-${i.url}`)
+    if (i.children) bindHTMLElement(i.children)
+  })
+}
+
+const nodeSetActive = (node: Nullable<TocNode>, val: boolean): void => {
+  for (let u = node; u !== null; u = u.parent) u.status = val ? 'expanded' : 'collapse'
+  if (val && node) node.status = 'active'
+}
+
+const getLstChild = (node: Nullable<TocNode>): Nullable<TocNode> => (
+  (node && node.children.length > 0)
+    ? getLstChild(node.children[node.children.length - 1])
+    : node
+)
+
+const getPrevItem = (rootList: TocNode[], node: TocNode): Nullable<TocNode> => {
+  const parent = node.parent
+  const prevIdx = node.index - 1
+  return prevIdx >= 0
+    ? getLstChild((parent === null ? rootList : parent.children)[prevIdx])
+    : parent
+}
+
+const getNextItem = (rootList: TocNode[], node: TocNode): Nullable<TocNode> => {
+  const parent = node.parent
+  const nextIdx = node.index + 1
+  if (parent === null) {
+    return rootList.length > nextIdx
+      ? rootList[nextIdx]
+      : null
+  } else {
+    return parent.children.length > nextIdx
+      ? parent.children[nextIdx]
+      : getNextItem(rootList, parent)
+  }
+}
+
+export { getIDFromHash, tocConverter, bindHTMLElement, nodeSetActive, getLstChild, getPrevItem, getNextItem }

From 59ba62f6ee60548a6d0a908443446da7c8cbb603 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sat, 25 Sep 2021 23:04:18 +0800
Subject: [PATCH 13/59] refactor(doc): add img's stand-in and Tocsidebar, amend
 style

---
 .../src/components/stand-in/Img.tsx           | 12 ++++++++++
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    | 24 +++++++++++++------
 2 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/Img.tsx

diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Img.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Img.tsx
new file mode 100644
index 00000000..5edd2d65
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Img.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import styled from '@mui/material/styles/styled'
+
+const StyledImg = styled('img')`
+  max-width: 100%;
+`
+
+const Img: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (props) => {
+  return <StyledImg {...props}/>
+}
+
+export default Img
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index ecb5814b..9649c939 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -1,13 +1,16 @@
 import React from 'react'
 import { graphql } from 'gatsby'
-import { DeepRequiredNonNull } from '../types/common'
+import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
 import unified from 'unified'
 import rehypeReact, { Options } from 'rehype-react'
 import { Root } from 'hast'
 import Grid from '@mui/material/Grid'
 import Header from '../components/Header'
 import Main from '../components/Main'
+import TocSidebar from '../components/TocSidebar'
+import Img from '../components/stand-in/Img'
 import NavSidebar from '../components/NavSidebar'
+import styled from '@mui/material/styles/styled'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -52,7 +55,7 @@ export const query = graphql`
 
 
 interface DocProps {
-  data: DeepRequiredNonNull<GatsbyTypes.DocInfoQuery>,
+  data: DeepWriteable<DeepRequiredNonNull<GatsbyTypes.DocInfoQuery>>,
   location: Location
 }
 
@@ -60,11 +63,19 @@ interface DocProps {
 const processor = unified()
   .use(rehypeReact, {
     createElement: React.createElement,
+    Fragment: React.Fragment,
+    components: {
+      img: Img,
+    },
   } as Options<typeof React.createElement>)
 
 const contentParser = (htmlAst: Root): JSX.Element =>
   (processor.stringify(htmlAst) as never as JSX.Element)
 
+const MainContentDiv = styled(Grid)`
+  flex-grow: 1;
+  flex-flow: row;
+`
 
 const Doc: React.FC<DocProps> = (props) => {
   const { data, location } = props
@@ -92,16 +103,15 @@ const Doc: React.FC<DocProps> = (props) => {
       <Grid container={true} direction="column">
         <Header title={title}/>
 
-        <Grid container={true} item={true} flexGrow={1} sx={{ flexFlow: 'row' }}>
+        <MainContentDiv className="maincontentdiv" container={true} item={true}>
           <NavSidebar pathname={location.pathname}/>
 
           <Main item={true}>
-            <article>
-              {contentParser(mdx.htmlAst)}
-            </article>
+            {contentParser(mdx.htmlAst)}
           </Main>
 
-        </Grid>
+          <TocSidebar toc={headings}/>
+        </MainContentDiv>
 
       </Grid>
     </>

From 732b4035a681eafd107a62d1c5b2a9c8dfdaa5a9 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sat, 25 Sep 2021 23:06:55 +0800
Subject: [PATCH 14/59] refactor(main): transition and style

---
 gatsby-theme-oi-wiki/src/components/Main.tsx | 41 ++++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Main.tsx b/gatsby-theme-oi-wiki/src/components/Main.tsx
index e3dbcbf0..d05f87a9 100644
--- a/gatsby-theme-oi-wiki/src/components/Main.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Main.tsx
@@ -3,35 +3,44 @@ import Box from '@mui/material/Box'
 import React from 'react'
 import Grid, { GridProps } from '@mui/material/Grid'
 import Footer from './Footer'
-import { navSidebarStore } from '../stores/sidebarStore'
+import { observer } from 'mobx-react-lite'
+import { navSidebarStore, tocSidebarStore } from '../stores/sidebarStore'
+
+const Container = styled(Grid)`
+  flex-grow: 1;
+  flex-flow: column;
+  position: relative;
+  margin: 0;
+  transition: margin 225ms ease-in-out;
+
+
+  &[data-expanded] > div {
+    padding-inline: 120px;
+  }
+`
 
 const Content = styled(Box)`
   flex-flow: row;
   flex-grow: 1;
   margin: auto;
-  padding: 0 50px 120px;
   width: 100%;
+  padding: 0 50px 120px;
+  transition: padding 225ms ease-in-out;
 `
 
-const Main: React.FC<GridProps> = (props) => {
+const Main: React.FC<GridProps> = observer((props) => {
   const { children, ...others } = props
-  const width = `calc(100vw - ${navSidebarStore.width}px)`
+  const ml = (navSidebarStore.collapsed ? 0 : navSidebarStore.width) + 'px'
+  const mr = (tocSidebarStore.collapsed ? 0 : tocSidebarStore.width) + 'px'
+  const expanded = navSidebarStore.collapsed || tocSidebarStore.collapsed ? true : undefined
 
   return (
-    <Grid
-      container={true}
-      flexGrow={1}
-      flexDirection="column"
-      position="relative"
-      {...others}>
-      <Content sx={{ width }}>
-        {children}
-      </Content>
-
+    <Container container={true} sx={{ ml, mr }} data-expanded={expanded} {...others}>
+      <Content as='article'>{children}</Content>
       <Footer/>
-    </Grid>
+    </Container>
   )
-}
+})
 
 export default Main
 

From 972322b46d4357b2417f049706587bd00ab56d89 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sun, 26 Sep 2021 15:54:01 +0800
Subject: [PATCH 15/59] refactor: add stand-in of Pre, Code, Img, amend
 hightlight-themes => code-highlight

---
 gatsby-theme-oi-wiki/src/components/Main.tsx  |   5 +
 .../src/components/stand-in/Code.tsx          |  29 ++++
 .../src/components/stand-in/Img.tsx           |   2 +
 .../src/components/stand-in/Pre.tsx           |  31 +++++
 .../src/gatsby-func/WrapRootElement.tsx       |   3 +
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    |   4 +
 .../src/theme/code-hightlight/darkPlus.ts     |  17 +++
 .../src/theme/code-hightlight/lightPlus.ts    |  17 +++
 gatsby-theme-oi-wiki/src/theme/globalStyle.ts |  25 ++++
 .../src/theme/hightlight-themes/darkplus.ts   |  13 --
 .../src/theme/hightlight-themes/lightplus.ts  |  13 --
 gatsby-theme-oi-wiki/src/theme/index.ts       |   2 +
 .../src/utils/createCssVarPalette.ts          |   8 +-
 gatsby-theme-oi-wiki/static/extra.css         | 126 +++++++++---------
 14 files changed, 202 insertions(+), 93 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/Code.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/Pre.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/theme/code-hightlight/darkPlus.ts
 create mode 100644 gatsby-theme-oi-wiki/src/theme/code-hightlight/lightPlus.ts
 create mode 100644 gatsby-theme-oi-wiki/src/theme/globalStyle.ts
 delete mode 100644 gatsby-theme-oi-wiki/src/theme/hightlight-themes/darkplus.ts
 delete mode 100644 gatsby-theme-oi-wiki/src/theme/hightlight-themes/lightplus.ts

diff --git a/gatsby-theme-oi-wiki/src/components/Main.tsx b/gatsby-theme-oi-wiki/src/components/Main.tsx
index d05f87a9..ca9b8ea1 100644
--- a/gatsby-theme-oi-wiki/src/components/Main.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Main.tsx
@@ -26,6 +26,11 @@ const Content = styled(Box)`
   width: 100%;
   padding: 0 50px 120px;
   transition: padding 225ms ease-in-out;
+
+  font-size: 1rem;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-weight: 400;
+  line-height: 1.5;
 `
 
 const Main: React.FC<GridProps> = observer((props) => {
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Code.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Code.tsx
new file mode 100644
index 00000000..0c814a4d
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Code.tsx
@@ -0,0 +1,29 @@
+import styled from '@mui/material/styles/styled'
+
+const Code = styled('code')`
+  &::selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+
+  @media print {
+    text-shadow: none;
+  }
+
+  span.shiki-line {
+    :before {
+      content: counter(shiki-line-number);
+      display: inline-block;
+      counter-increment: shiki-line-number;
+      color: #888;
+      margin-right: 1em;
+      margin-left: -8px;
+      text-align: right;
+      min-width: 2em;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+`
+
+export default Code
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Img.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Img.tsx
index 5edd2d65..92c52f06 100644
--- a/gatsby-theme-oi-wiki/src/components/stand-in/Img.tsx
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Img.tsx
@@ -3,6 +3,8 @@ import styled from '@mui/material/styles/styled'
 
 const StyledImg = styled('img')`
   max-width: 100%;
+  margin: 0 auto;
+  filter: var(--image-filter);
 `
 
 const Img: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (props) => {
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Pre.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Pre.tsx
new file mode 100644
index 00000000..e04978ff
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Pre.tsx
@@ -0,0 +1,31 @@
+import styled from '@mui/material/styles/styled'
+import scrollbarStyle from '../../theme/scrollbarStyle'
+
+const Pre = styled('pre')`
+  ${scrollbarStyle};
+
+  counter-reset: shiki-line-number;
+
+  overflow: auto;
+  font-size: 13px;
+  text-shadow: none;
+  direction: ltr;
+  text-align: left;
+  white-space: pre-wrap;
+  word-spacing: normal;
+  word-break: normal;
+  tab-size: 2;
+  hyphens: none;
+
+  &::selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+
+
+  @media print {
+    text-shadow: none;
+  }
+`
+
+export default Pre
diff --git a/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx b/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx
index 6b6007da..55e5759d 100644
--- a/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx
+++ b/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx
@@ -6,6 +6,8 @@ import { theme } from '../theme'
 import { cssVarsStore, VARS_STORE_ID } from '../stores/cssVarsStore'
 import { observer } from 'mobx-react-lite'
 import { autorun } from 'mobx'
+import { GlobalStyles } from '@mui/material'
+import globalStyle from '../theme/globalStyle'
 
 const StoreHandler: React.FC = observer(() => {
 
@@ -34,6 +36,7 @@ const WrapRootElement = ({ element }: WrapRootElementBrowserArgs): JSX.Element =
       <StoreHandler/>
       <ThemeProvider theme={theme}>
         <CssBaseline/>
+        <GlobalStyles styles={globalStyle(theme)}/>
         {element}
       </ThemeProvider>
     </React.StrictMode>
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 9649c939..34914218 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -11,6 +11,8 @@ import TocSidebar from '../components/TocSidebar'
 import Img from '../components/stand-in/Img'
 import NavSidebar from '../components/NavSidebar'
 import styled from '@mui/material/styles/styled'
+import Pre from '../components/stand-in/Pre'
+import Code from '../components/stand-in/Code'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -66,6 +68,8 @@ const processor = unified()
     Fragment: React.Fragment,
     components: {
       img: Img,
+      pre: Pre,
+      code: Code,
     },
   } as Options<typeof React.createElement>)
 
diff --git a/gatsby-theme-oi-wiki/src/theme/code-hightlight/darkPlus.ts b/gatsby-theme-oi-wiki/src/theme/code-hightlight/darkPlus.ts
new file mode 100644
index 00000000..5c0c34eb
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/code-hightlight/darkPlus.ts
@@ -0,0 +1,17 @@
+import { css } from '@emotion/react'
+
+const darkPlus = css`
+  --shiki-color-text: #D4D4D4;
+  --shiki-color-backround: #1E1E1E;
+  --shiki-token-consant: #b5cea8;
+  --shiki-token-strig: #ce9178;
+  --shiki-token-commnt: #6A9955;
+  --shiki-token-keywrd: #569cd6;
+  --shiki-token-paraeter: #9CDCFE;
+  --shiki-token-funcion: #DCDCAA;
+  --shiki-token-strig-expression: #d16969;
+  --shiki-token-puncuation: #D4D4D4;
+  --shiki-token-link: #D4D4D4;
+`
+
+export default darkPlus
diff --git a/gatsby-theme-oi-wiki/src/theme/code-hightlight/lightPlus.ts b/gatsby-theme-oi-wiki/src/theme/code-hightlight/lightPlus.ts
new file mode 100644
index 00000000..82c3f3a9
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/code-hightlight/lightPlus.ts
@@ -0,0 +1,17 @@
+import { css } from '@emotion/react'
+
+const lightPlus = css`
+  --shiki-color-text: #000000;
+  --shiki-color-background: #FFFFFF;
+  --shiki-token-constant: #098658;
+  --shiki-token-string: #a31515;
+  --shiki-token-comment: #008000;
+  --shiki-token-keyword: #0000ff;
+  --shiki-token-parameter: #001080;
+  --shiki-token-function: #795E26;
+  --shiki-token-string-expression: #800000;
+  --shiki-token-punctuation: #000000;
+  --shiki-token-link: #000000;
+`
+
+export default lightPlus
diff --git a/gatsby-theme-oi-wiki/src/theme/globalStyle.ts b/gatsby-theme-oi-wiki/src/theme/globalStyle.ts
new file mode 100644
index 00000000..df23ecf3
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/globalStyle.ts
@@ -0,0 +1,25 @@
+import { css, SerializedStyles } from '@emotion/react'
+import { Theme } from '@mui/material/styles/createTheme'
+
+// the css here will be injected by the <GlobalStyles>
+// position: src/gatsby-func/WrapRootElement.tsx
+const globalStyle = (theme: Theme): SerializedStyles => css`
+  :root {
+    --code-block-font: "Fira Mono", "Menlo", "Monaco", "Consolas", "Andale Mono", "Ubuntu Mono", "Courier New", "Hack", "Fira Code", "Jetbrains Mono", monospace;
+
+    &[data-monofont=fallback] {
+      --code-block-font: monospace;
+    }
+  }
+
+  codeblock.gatsby-highlight {
+    background-color: var(--shiki-color-background);
+    padding: 2px 16px;
+    margin: 8px 0;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px ${theme.palette.divider};
+    font-family: var(--code-block-font);
+  }
+`
+
+export default globalStyle
diff --git a/gatsby-theme-oi-wiki/src/theme/hightlight-themes/darkplus.ts b/gatsby-theme-oi-wiki/src/theme/hightlight-themes/darkplus.ts
deleted file mode 100644
index fe71216f..00000000
--- a/gatsby-theme-oi-wiki/src/theme/hightlight-themes/darkplus.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  '--shiki-color-text': '#D4D4D4',
-  '--shiki-color-background': '#1E1E1E',
-  '--shiki-token-constant': '#b5cea8',
-  '--shiki-token-string': '#ce9178',
-  '--shiki-token-comment': '#6A9955',
-  '--shiki-token-keyword': '#569cd6',
-  '--shiki-token-parameter': '#9CDCFE',
-  '--shiki-token-function': '#DCDCAA',
-  '--shiki-token-string-expression': '#d16969',
-  '--shiki-token-punctuation': '#D4D4D4',
-  '--shiki-token-link': '#D4D4D4',
-}
diff --git a/gatsby-theme-oi-wiki/src/theme/hightlight-themes/lightplus.ts b/gatsby-theme-oi-wiki/src/theme/hightlight-themes/lightplus.ts
deleted file mode 100644
index fce0c539..00000000
--- a/gatsby-theme-oi-wiki/src/theme/hightlight-themes/lightplus.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  '--shiki-color-text': '#000000',
-  '--shiki-color-background': '#FFFFFF',
-  '--shiki-token-constant': '#098658',
-  '--shiki-token-string': '#a31515',
-  '--shiki-token-comment': '#008000',
-  '--shiki-token-keyword': '#0000ff',
-  '--shiki-token-parameter': '#001080',
-  '--shiki-token-function': '#795E26',
-  '--shiki-token-string-expression': '#800000',
-  '--shiki-token-punctuation': '#000000',
-  '--shiki-token-link': '#000000',
-}
diff --git a/gatsby-theme-oi-wiki/src/theme/index.ts b/gatsby-theme-oi-wiki/src/theme/index.ts
index f4539a52..94e20d4b 100644
--- a/gatsby-theme-oi-wiki/src/theme/index.ts
+++ b/gatsby-theme-oi-wiki/src/theme/index.ts
@@ -9,7 +9,9 @@ const commonTypo: CSSProperties = {
 }
 
 const theme = createTheme({
+  unstable_strictMode: true,
   typography: {
+    fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
     h1: {
       fontSize: '2.5rem',
       paddingBottom: '.3rem',
diff --git a/gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts b/gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts
index e5ca22d1..d7b5f67f 100644
--- a/gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts
+++ b/gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts
@@ -1,6 +1,8 @@
 import { decomposeColor, hslToRgb } from '@mui/system/colorManipulator'
 import { Palette, PaletteColor, TypeAction, TypeText } from '@mui/material/styles/createPalette'
 import { css, SerializedStyles } from '@emotion/react'
+import lightPlus from '../theme/code-hightlight/lightPlus'
+import darkPlus from '../theme/code-hightlight/darkPlus'
 
 const paletteColorKeys: (keyof Palette)[] = [
   'primary',
@@ -135,12 +137,14 @@ const computeCss = (light: VarMap, dark: VarMap): SerializedStyles => {
   return css`
     :root {
       color-scheme: light;
-      ${mapToStr(light)}
+      ${lightPlus};
+      ${mapToStr(light)};
     }
 
     :root[data-theme="dark"] {
       color-scheme: dark;
-      ${mapToStr(dark)}
+      ${darkPlus};
+      ${mapToStr(dark)};
     }
   `
 }
diff --git a/gatsby-theme-oi-wiki/static/extra.css b/gatsby-theme-oi-wiki/static/extra.css
index e0040b3f..4cd0744b 100644
--- a/gatsby-theme-oi-wiki/static/extra.css
+++ b/gatsby-theme-oi-wiki/static/extra.css
@@ -78,74 +78,70 @@
 
 /* pseudocode.js end */
 /* code block start */
-pre.shiki {
-  counter-reset: shiki-line-number;
-}
-
-code span.shiki-line:before {
-  counter-increment: shiki-line-number;
-  content: counter(shiki-line-number);
-  color: #888;
-  margin-right: 1em;
-  margin-left: -8px;
-  text-align: right;
-  min-width: 2em;
-  display: inline-block;
-  pointer-events: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-pre.shiki {
-  overflow: auto;
-  font-size: 13px;
-  text-shadow: none;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  -moz-tab-size: 2;
-  -o-tab-size: 2;
-  tab-size: 2;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-
-pre.shiki::selection,
-code.shiki::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre::-webkit-scrollbar {
-  width: .4rem;
-  height: .4rem;
-}
-
-pre::-webkit-scrollbar-thumb {
-  border-radius: 2px;
-  background-color: rgba(255, 255, 255, .25);
-}
-
-@media print {
-  code.shiki,
-  pre.shiki {
-    text-shadow: none;
-  }
-}
+/*pre.shiki {*/
+/*  counter-reset: shiki-line-number;*/
+/*}*/
+
+/*code span.shiki-line:before {*/
+/*  counter-increment: shiki-line-number;*/
+/*  content: counter(shiki-line-number);*/
+/*  color: #888;*/
+/*  margin-right: 1em;*/
+/*  margin-left: -8px;*/
+/*  text-align: right;*/
+/*  min-width: 2em;*/
+/*  display: inline-block;*/
+/*  pointer-events: none;*/
+/*  -webkit-user-select: none;*/
+/*  -moz-user-select: none;*/
+/*  -ms-user-select: none;*/
+/*  user-select: none;*/
+/*}*/
+
+/*pre.shiki {*/
+/*  overflow: auto;*/
+/*  font-size: 13px;*/
+/*  text-shadow: none;*/
+/*  direction: ltr;*/
+/*  text-align: left;*/
+/*  white-space: pre;*/
+/*  word-spacing: normal;*/
+/*  word-break: normal;*/
+/*  -moz-tab-size: 2;*/
+/*  -o-tab-size: 2;*/
+/*  tab-size: 2;*/
+/*  -webkit-hyphens: none;*/
+/*  -moz-hyphens: none;*/
+/*  -ms-hyphens: none;*/
+/*  hyphens: none;*/
+/*}*/
+
+
+/*pre.shiki::selection,*/
+/*code.shiki::selection {*/
+/*  text-shadow: none;*/
+/*  background: #b3d4fc;*/
+/*}*/
+
+/*pre::-webkit-scrollbar {*/
+/*  width: .4rem;*/
+/*  height: .4rem;*/
+/*}*/
+
+/*pre::-webkit-scrollbar-thumb {*/
+/*  border-radius: 2px;*/
+/*  background-color: rgba(255, 255, 255, .25);*/
+/*}*/
+
+/*@media print {*/
+/*  code.shiki,*/
+/*  pre.shiki {*/
+/*    text-shadow: none;*/
+/*  }*/
+/*}*/
 
 /* code block end */
 
-main img {
-  display: block;
-  margin: 0 auto;
-}
 
 .footnotes p {
   display: inline;

From 8bea7fd3088259be729566b9101056398a8104ac Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sun, 26 Sep 2021 16:02:41 +0800
Subject: [PATCH 16/59] feat(stand-in): Table

---
 .../src/components/stand-in/Table.tsx         | 61 +++++++++++++++++++
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    |  2 +
 2 files changed, 63 insertions(+)
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/Table.tsx

diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Table.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Table.tsx
new file mode 100644
index 00000000..b1717af3
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Table.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { css } from '@emotion/react'
+import MTable, { TableProps } from '@mui/material/Table'
+import TableContainer from '@mui/material/TableContainer'
+import Paper from '@mui/material/Paper'
+import styled from '@mui/material/styles/styled'
+import TableCell from '@mui/material/TableCell'
+import TableBody from '@mui/material/TableBody'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+
+const StyledTable: React.FC<TableProps> = (props) => {
+  const { sx, ...others } = props
+
+  return (
+    <TableContainer component={Paper} sx={{
+      display: 'inline-block',
+      maxWidth: '100%',
+      width: 'auto',
+    }}>
+      <MTable sx={{
+        maxWidth: '100%',
+        width: 'auto',
+        lineHeight: '1.4rem',
+        ...sx,
+      }} {...others}/>
+    </TableContainer>
+  )
+}
+
+const StyledTd = styled(TableCell)`
+  padding: 14px 20px;
+`
+
+const StyledTh = styled(StyledTd)(({ theme }) => css`
+  font-weight: ${theme.typography.fontWeightBold};
+  background-color: ${theme.palette.grey.A700};
+  color: white;
+  min-width: 0;
+  vertical-align: center;
+  padding: 12px 20px;
+`)
+
+const StyledTr = styled(TableRow)(({ theme }) => css`
+  transition: background-color ${theme.transitions.duration.shortest}ms;
+
+  &:hover {
+    background-color: ${theme.palette.grey.A100};
+  }
+`)
+
+const Table = {
+  table: StyledTable,
+  thead: TableHead,
+  tbody: TableBody,
+  tr: StyledTr,
+  th: StyledTh,
+  td: StyledTd,
+}
+
+export default Table
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 34914218..3426dfb6 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -13,6 +13,7 @@ import NavSidebar from '../components/NavSidebar'
 import styled from '@mui/material/styles/styled'
 import Pre from '../components/stand-in/Pre'
 import Code from '../components/stand-in/Code'
+import Table from '../components/stand-in/Table'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -70,6 +71,7 @@ const processor = unified()
       img: Img,
       pre: Pre,
       code: Code,
+      ...Table,
     },
   } as Options<typeof React.createElement>)
 

From 62bf9c3cef5633fd678db80d3d313e5425c794c7 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sun, 26 Sep 2021 16:07:56 +0800
Subject: [PATCH 17/59] feat(stand-in): Blockquote

---
 .../src/components/stand-in/Blockquote.tsx            | 11 +++++++++++
 gatsby-theme-oi-wiki/src/templates/Doc.tsx            |  2 ++
 2 files changed, 13 insertions(+)
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/Blockquote.tsx

diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Blockquote.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Blockquote.tsx
new file mode 100644
index 00000000..51eb3319
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Blockquote.tsx
@@ -0,0 +1,11 @@
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+
+const Blockquote = styled('blockquote')(({ theme }) => css`
+  margin: 1rem 0;
+  padding: 0 1.5rem;
+  color: ${theme.palette.text.primary};
+  border-left: .25rem solid ${theme.palette.grey['300']};
+`)
+
+export default Blockquote
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 3426dfb6..8bf71f20 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -14,6 +14,7 @@ import styled from '@mui/material/styles/styled'
 import Pre from '../components/stand-in/Pre'
 import Code from '../components/stand-in/Code'
 import Table from '../components/stand-in/Table'
+import Blockquote from '../components/stand-in/Blockquote'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -71,6 +72,7 @@ const processor = unified()
       img: Img,
       pre: Pre,
       code: Code,
+      blockquote: Blockquote,
       ...Table,
     },
   } as Options<typeof React.createElement>)

From ff9c3b025a54111abaa4062904fc4a93ac9cb129 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sun, 26 Sep 2021 16:14:45 +0800
Subject: [PATCH 18/59] refactor(doc): extract components object to
 stand-in/index.tsx

---
 .../src/components/stand-in/index.ts               | 13 +++++++++++++
 gatsby-theme-oi-wiki/src/templates/Doc.tsx         | 14 ++------------
 2 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/index.ts

diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/index.ts b/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
new file mode 100644
index 00000000..cd80efe4
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
@@ -0,0 +1,13 @@
+import Img from './Img'
+import Pre from './Pre'
+import Code from './Code'
+import Blockquote from './Blockquote'
+import Table from './Table'
+
+export default {
+  img: Img,
+  pre: Pre,
+  code: Code,
+  blockquote: Blockquote,
+  ...Table,
+}
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 8bf71f20..7680ea0a 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -8,13 +8,9 @@ import Grid from '@mui/material/Grid'
 import Header from '../components/Header'
 import Main from '../components/Main'
 import TocSidebar from '../components/TocSidebar'
-import Img from '../components/stand-in/Img'
 import NavSidebar from '../components/NavSidebar'
 import styled from '@mui/material/styles/styled'
-import Pre from '../components/stand-in/Pre'
-import Code from '../components/stand-in/Code'
-import Table from '../components/stand-in/Table'
-import Blockquote from '../components/stand-in/Blockquote'
+import components from '../components/stand-in'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -68,13 +64,7 @@ const processor = unified()
   .use(rehypeReact, {
     createElement: React.createElement,
     Fragment: React.Fragment,
-    components: {
-      img: Img,
-      pre: Pre,
-      code: Code,
-      blockquote: Blockquote,
-      ...Table,
-    },
+    components,
   } as Options<typeof React.createElement>)
 
 const contentParser = (htmlAst: Root): JSX.Element =>

From ffb047ab51a478019bf7b12f9132569f8062f2bc Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sun, 26 Sep 2021 16:17:37 +0800
Subject: [PATCH 19/59] feat(stand-in): List

---
 .../src/components/stand-in/List.tsx           | 18 ++++++++++++++++++
 .../src/components/stand-in/index.ts           |  2 ++
 2 files changed, 20 insertions(+)
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/List.tsx

diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/List.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/List.tsx
new file mode 100644
index 00000000..b11d8516
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/List.tsx
@@ -0,0 +1,18 @@
+import { css } from '@emotion/react'
+import styled from '@mui/material/styles/styled'
+
+const listStyle = css`
+  padding-inline-start: 0;
+  margin-inline-start: 1rem;
+`
+
+const UList = styled('ul')(listStyle)
+
+const OList = styled('ol')(listStyle)
+
+const List = {
+  ul: UList,
+  ol: OList,
+}
+
+export default List
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/index.ts b/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
index cd80efe4..125fa48b 100644
--- a/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
@@ -3,6 +3,7 @@ import Pre from './Pre'
 import Code from './Code'
 import Blockquote from './Blockquote'
 import Table from './Table'
+import List from './List'
 
 export default {
   img: Img,
@@ -10,4 +11,5 @@ export default {
   code: Code,
   blockquote: Blockquote,
   ...Table,
+  ...List,
 }

From 99c8657c3661b6dd9be19836d62b4652917ed506 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sun, 26 Sep 2021 20:06:31 +0800
Subject: [PATCH 20/59] feat(stand-in): CodeBlock

---
 gatsby-theme-oi-wiki/.eslintrc.js             |   2 +-
 .../src/components/stand-in/Codeblock.tsx     | 115 ++++++++++++++++++
 .../src/components/stand-in/index.ts          |   2 +
 gatsby-theme-oi-wiki/src/theme/globalStyle.ts |  11 +-
 4 files changed, 119 insertions(+), 11 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/Codeblock.tsx

diff --git a/gatsby-theme-oi-wiki/.eslintrc.js b/gatsby-theme-oi-wiki/.eslintrc.js
index 4d64c2d8..f67d285d 100644
--- a/gatsby-theme-oi-wiki/.eslintrc.js
+++ b/gatsby-theme-oi-wiki/.eslintrc.js
@@ -64,7 +64,7 @@ module.exports = {
         '@typescript-eslint/ban-ts-comment': 'warn',
         'no-unused-vars': 'off',
         '@typescript-eslint/no-unused-vars': [
-          'warn',
+          'warn', { 'argsIgnorePattern': '^_' },
         ],
         '@typescript-eslint/explicit-module-boundary-types': 'off',
         '@typescript-eslint/no-explicit-any': 'off',
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Codeblock.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Codeblock.tsx
new file mode 100644
index 00000000..d074dc6c
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Codeblock.tsx
@@ -0,0 +1,115 @@
+import { LangType } from '../../lib/play/codeLang'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import Box from '@mui/material/Box'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import IconButton, { IconButtonProps } from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import SvgIcon from '@mui/material/SvgIcon'
+import Stack from '@mui/material/Stack'
+import AssignmentOutlined from '@mui/icons-material/AssignmentOutlined'
+import CodeOutlined from '@mui/icons-material/CodeOutlined'
+import { navigate } from 'gatsby'
+import has from 'lodash/has'
+
+interface ToolBtnProps extends IconButtonProps {
+  title: string;
+  Icon: typeof SvgIcon;
+}
+
+interface CodeBlockProps extends React.HTMLAttributes<HTMLElement> {
+  'data-language': string;
+}
+
+
+const StyledBox = styled(Box)(({ theme }) => css`
+  position: relative;
+  background-color: var(--shiki-color-background);
+  padding: 26px 16px 8px;
+  margin: 8px 0;
+  border-radius: .4rem;
+  box-shadow: ${theme.shadows[2]};
+  font-family: var(--code-block-font);
+`)
+
+const ToolBtnStack = styled(Stack)`
+  position: absolute;
+  right: 8px;
+  top: 0;
+  flex-flow: row;
+`
+
+const StyledIconBtn = styled(IconButton)`
+  color: inherit;
+  opacity: 0.6;
+
+  &:hover {
+    opacity: 1;
+  }
+`
+
+const ToolBtn: React.FC<ToolBtnProps> = (props) => {
+  const { title, Icon, ...others } = props
+
+  return (
+    <Tooltip title={title}>
+      <StyledIconBtn {...others}>
+        <Icon/>
+      </StyledIconBtn>
+    </Tooltip>
+  )
+}
+
+// map to lang defined in codeLang.ts
+const LANG_MAP: Readonly<Record<string, LangType>> = Object.freeze({
+  cpp: 'C++',
+  python: 'Python3',
+})
+
+const CodeBlock: React.FC<CodeBlockProps> = (props) => {
+  const { children, 'data-language': dataLng, ...others } = props
+  const ref = useRef<HTMLElement>(null)
+  const [copied, setCopied] = useState(false)
+  const tooltip = useMemo(() => copied ? 'copied' : 'copy', [copied])
+  const runEnabled = has(LANG_MAP, dataLng)
+
+  const getCode = useCallback(
+    () => ref.current?.querySelector('pre')?.innerText, [],
+  )
+
+  const copyAction = useCallback(async () => {
+    await Promise.resolve(getCode() || Promise.reject('cannot find any code'))
+      .then((v) => navigator.clipboard.writeText(v))
+      .then(() => {
+        setCopied(true)
+        setTimeout(() => {
+          setCopied(false)
+        }, 1500)
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  }, [getCode])
+
+  const runAction = (): void => {
+    navigate('/play', {
+      state: {
+        code: getCode(),
+        lang: LANG_MAP[dataLng],
+      },
+    })
+  }
+
+  return (
+    <StyledBox ref={ref} {...others}>
+      <ToolBtnStack>
+        <ToolBtn title={tooltip} Icon={AssignmentOutlined} onClick={copyAction}/>
+        {runEnabled && <ToolBtn title="run" Icon={CodeOutlined} onClick={runAction}/>}
+      </ToolBtnStack>
+
+      {children}
+    </StyledBox>
+  )
+}
+
+export default CodeBlock
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/index.ts b/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
index 125fa48b..2967630f 100644
--- a/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
@@ -4,11 +4,13 @@ import Code from './Code'
 import Blockquote from './Blockquote'
 import Table from './Table'
 import List from './List'
+import CodeBlock from './Codeblock'
 
 export default {
   img: Img,
   pre: Pre,
   code: Code,
+  codeblock: CodeBlock,
   blockquote: Blockquote,
   ...Table,
   ...List,
diff --git a/gatsby-theme-oi-wiki/src/theme/globalStyle.ts b/gatsby-theme-oi-wiki/src/theme/globalStyle.ts
index df23ecf3..4ed684d2 100644
--- a/gatsby-theme-oi-wiki/src/theme/globalStyle.ts
+++ b/gatsby-theme-oi-wiki/src/theme/globalStyle.ts
@@ -3,7 +3,7 @@ import { Theme } from '@mui/material/styles/createTheme'
 
 // the css here will be injected by the <GlobalStyles>
 // position: src/gatsby-func/WrapRootElement.tsx
-const globalStyle = (theme: Theme): SerializedStyles => css`
+const globalStyle = (_theme: Theme): SerializedStyles => css`
   :root {
     --code-block-font: "Fira Mono", "Menlo", "Monaco", "Consolas", "Andale Mono", "Ubuntu Mono", "Courier New", "Hack", "Fira Code", "Jetbrains Mono", monospace;
 
@@ -11,15 +11,6 @@ const globalStyle = (theme: Theme): SerializedStyles => css`
       --code-block-font: monospace;
     }
   }
-
-  codeblock.gatsby-highlight {
-    background-color: var(--shiki-color-background);
-    padding: 2px 16px;
-    margin: 8px 0;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px ${theme.palette.divider};
-    font-family: var(--code-block-font);
-  }
 `
 
 export default globalStyle

From 35cdfebc93d978961d81be94bc8b5f8cdd4e65b7 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sun, 26 Sep 2021 22:24:44 +0800
Subject: [PATCH 21/59] refactor(main): style of Content

---
 gatsby-theme-oi-wiki/src/components/Main.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Main.tsx b/gatsby-theme-oi-wiki/src/components/Main.tsx
index ca9b8ea1..ad845eda 100644
--- a/gatsby-theme-oi-wiki/src/components/Main.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Main.tsx
@@ -12,11 +12,6 @@ const Container = styled(Grid)`
   position: relative;
   margin: 0;
   transition: margin 225ms ease-in-out;
-
-
-  &[data-expanded] > div {
-    padding-inline: 120px;
-  }
 `
 
 const Content = styled(Box)`
@@ -28,9 +23,12 @@ const Content = styled(Box)`
   transition: padding 225ms ease-in-out;
 
   font-size: 1rem;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   font-weight: 400;
   line-height: 1.5;
+
+  &[data-expanded] {
+    padding-inline: 120px;
+  }
 `
 
 const Main: React.FC<GridProps> = observer((props) => {
@@ -40,8 +38,8 @@ const Main: React.FC<GridProps> = observer((props) => {
   const expanded = navSidebarStore.collapsed || tocSidebarStore.collapsed ? true : undefined
 
   return (
-    <Container container={true} sx={{ ml, mr }} data-expanded={expanded} {...others}>
-      <Content as='article'>{children}</Content>
+    <Container container={true} sx={{ ml, mr }} {...others}>
+      <Content as='article' data-expanded={expanded}>{children}</Content>
       <Footer/>
     </Container>
   )

From a2aabe2ba090f2237d0c66a849d8cd3edcee9ac5 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sun, 26 Sep 2021 23:15:05 +0800
Subject: [PATCH 22/59] fix(stand-in): inline code style

---
 .../src/components/stand-in/Code.tsx          | 42 +++++++++----------
 .../src/components/stand-in/Pre.tsx           | 17 ++++++++
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Code.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Code.tsx
index 0c814a4d..690e5643 100644
--- a/gatsby-theme-oi-wiki/src/components/stand-in/Code.tsx
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Code.tsx
@@ -1,29 +1,25 @@
 import styled from '@mui/material/styles/styled'
+import { grey } from '@mui/material/colors'
+import React from 'react'
 
-const Code = styled('code')`
-  &::selection {
-    text-shadow: none;
-    background: #b3d4fc;
-  }
+const StyledCode = styled('code')`
+  color: ${grey[800]};
+  background-color: ${grey[100]};
+  word-break: break-word;
+  font-family: var(--code-block-font);
+  font-size: .9rem;
 
-  @media print {
-    text-shadow: none;
-  }
-
-  span.shiki-line {
-    :before {
-      content: counter(shiki-line-number);
-      display: inline-block;
-      counter-increment: shiki-line-number;
-      color: #888;
-      margin-right: 1em;
-      margin-left: -8px;
-      text-align: right;
-      min-width: 2em;
-      pointer-events: none;
-      user-select: none;
-    }
-  }
+  border-radius: .2rem;
+  padding: 0.2rem 0.4rem 0;
+  margin: 0 0.2rem;
+  box-decoration-break: clone;
 `
 
+const Code: React.FC<React.HTMLAttributes<HTMLElement>> = (props) => {
+  const { children, className, ...others } = props
+  return typeof className === 'undefined'
+    ? <StyledCode {...others}>{children}</StyledCode>
+    : <code className={className} {...others}>{children}</code>
+}
+
 export default Code
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Pre.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Pre.tsx
index e04978ff..e81f9713 100644
--- a/gatsby-theme-oi-wiki/src/components/stand-in/Pre.tsx
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Pre.tsx
@@ -26,6 +26,23 @@ const Pre = styled('pre')`
   @media print {
     text-shadow: none;
   }
+
+  & > code {
+    span.shiki-line {
+      :before {
+        content: counter(shiki-line-number);
+        display: inline-block;
+        counter-increment: shiki-line-number;
+        color: #888;
+        margin-right: 1em;
+        margin-left: -8px;
+        text-align: right;
+        min-width: 2em;
+        pointer-events: none;
+        user-select: none;
+      }
+    }
+  }
 `
 
 export default Pre

From c6e39e8d4c5afbcd0145afd7f017a0ffd50f5e41 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sun, 26 Sep 2021 23:17:00 +0800
Subject: [PATCH 23/59] refactor(globalstyle): extract pseudoCodeStyle

---
 gatsby-theme-oi-wiki/src/theme/globalStyle.ts |  5 +-
 .../src/theme/pseudoCodeStyle.ts              | 83 +++++++++++++++++++
 2 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts

diff --git a/gatsby-theme-oi-wiki/src/theme/globalStyle.ts b/gatsby-theme-oi-wiki/src/theme/globalStyle.ts
index 4ed684d2..ea28fa80 100644
--- a/gatsby-theme-oi-wiki/src/theme/globalStyle.ts
+++ b/gatsby-theme-oi-wiki/src/theme/globalStyle.ts
@@ -1,9 +1,10 @@
 import { css, SerializedStyles } from '@emotion/react'
 import { Theme } from '@mui/material/styles/createTheme'
+import pseudoCodeStyle from './pseudoCodeStyle'
 
 // the css here will be injected by the <GlobalStyles>
 // position: src/gatsby-func/WrapRootElement.tsx
-const globalStyle = (_theme: Theme): SerializedStyles => css`
+const globalStyle = (theme: Theme): SerializedStyles => css`
   :root {
     --code-block-font: "Fira Mono", "Menlo", "Monaco", "Consolas", "Andale Mono", "Ubuntu Mono", "Courier New", "Hack", "Fira Code", "Jetbrains Mono", monospace;
 
@@ -11,6 +12,8 @@ const globalStyle = (_theme: Theme): SerializedStyles => css`
       --code-block-font: monospace;
     }
   }
+
+  ${pseudoCodeStyle(theme)};
 `
 
 export default globalStyle
diff --git a/gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts b/gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts
new file mode 100644
index 00000000..bc4b5ae7
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts
@@ -0,0 +1,83 @@
+import { css, SerializedStyles } from '@emotion/react'
+import { Theme } from '@mui/material/styles/createTheme'
+
+const pseudoCodeStyle = (theme: Theme): SerializedStyles => css`
+  .ps-root {
+    font-family: MJXTEX, "Times New Roman", Times, serif;
+    font-size: 1em;
+    font-weight: 100;
+    -webkit-font-smoothing: antialiased !important;
+  }
+
+  .ps-root .ps-algorithm {
+    margin: 0.8em 0;
+    border-top: 3px solid ${theme.palette.text.secondary};
+    border-bottom: 2px solid rgba(var(--text-secondary));
+  }
+
+  .ps-root .ps-algorithm.with-caption > .ps-line:first-child {
+    border-bottom: 2px solid ${theme.palette.text.secondary};
+    padding-top: .5em;
+  }
+
+  .ps-root .katex {
+    text-indent: 0;
+    font-size: 1em;
+  }
+
+  .ps-root .MathJax,
+  .ps-root .MathJax_CHTML {
+    text-indent: 0;
+    font-size: 1em !important;
+  }
+
+  .ps-root .ps-line {
+    margin: 0;
+    padding: 0;
+    line-height: 1.2;
+  }
+
+  .ps-root .ps-funcname {
+    font-family: MJXTEX, "Times New Roman", Times, serif;
+    font-weight: 400;
+    font-variant: small-caps;
+    font-style: normal;
+    text-transform: none;
+  }
+
+  .ps-root .ps-keyword {
+    font-family: MJXTEX-B, "Times New Roman", Times, serif;
+    font-weight: 700;
+    font-variant: normal;
+    font-style: normal;
+    text-transform: none;
+  }
+
+  .ps-root .ps-comment {
+    font-family: MJXTEX, "Times New Roman", Times, serif;
+    font-weight: 400;
+    font-variant: normal;
+    font-style: normal;
+    text-transform: none;
+  }
+
+  .ps-root .ps-linenum {
+    font-size: 0.8em;
+    line-height: 1em;
+    width: 1.6em;
+    text-align: right;
+    display: inline-block;
+    position: relative;
+    padding-right: 0.3em;
+  }
+
+  .ps-root .ps-algorithmic.with-linenum .ps-line.ps-code {
+    text-indent: -1.6em;
+  }
+
+  .ps-root .ps-algorithmic.with-linenum .ps-line.ps-code > span {
+    text-indent: 0;
+  }
+`
+
+export default pseudoCodeStyle

From 5d21d69a989710cc13e09d9d42e957d9071f2618 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 27 Sep 2021 00:18:15 +0800
Subject: [PATCH 24/59] refactor(stand-in): link, refactor components obj =>
 getComponents func

---
 .../src/{lib => components}/MDRenderer.tsx    |  4 +--
 .../src/components/stand-in/Link.tsx          | 14 ++++++++++
 .../src/components/stand-in/index.ts          | 20 +++++++++++--
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    | 28 +++++++------------
 gatsby-theme-oi-wiki/src/types/location.d.ts  | 11 ++++++++
 5 files changed, 55 insertions(+), 22 deletions(-)
 rename gatsby-theme-oi-wiki/src/{lib => components}/MDRenderer.tsx (83%)
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/types/location.d.ts

diff --git a/gatsby-theme-oi-wiki/src/lib/MDRenderer.tsx b/gatsby-theme-oi-wiki/src/components/MDRenderer.tsx
similarity index 83%
rename from gatsby-theme-oi-wiki/src/lib/MDRenderer.tsx
rename to gatsby-theme-oi-wiki/src/components/MDRenderer.tsx
index 4ad73fa9..c8b5f5d5 100644
--- a/gatsby-theme-oi-wiki/src/lib/MDRenderer.tsx
+++ b/gatsby-theme-oi-wiki/src/components/MDRenderer.tsx
@@ -9,10 +9,10 @@ export interface MDRendererProps {
 }
 
 const MDRenderer: React.FC<MDRendererProps> = (props) => {
-  const processor = unified().use(rehypeReact, {
+  const processor = React.useMemo(() => unified().use(rehypeReact, {
     createElement: React.createElement,
     components: props.components,
-  })
+  }), [props.components])
 
   return processor.stringify(props.htmlAst) as never as JSX.Element
 }
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx
new file mode 100644
index 00000000..7fff616e
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx
@@ -0,0 +1,14 @@
+import SmartLink, { SmartLinkProps } from '../SmartLink'
+import React from 'react'
+
+interface DefaultProps extends SmartLinkProps {
+  isIndex: boolean;
+  pathname: string;
+}
+
+const Link: (defaultProps: DefaultProps) => React.FC<SmartLinkProps> = (defaultProps) => {
+  return function Link(props) {
+    return <SmartLink {...defaultProps} {...props}/>
+  }
+}
+export default Link
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/index.ts b/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
index 2967630f..e6f2594d 100644
--- a/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
@@ -5,13 +5,29 @@ import Blockquote from './Blockquote'
 import Table from './Table'
 import List from './List'
 import CodeBlock from './Codeblock'
+import { ComponentLike } from 'rehype-react'
+import { FC } from 'react'
+import Link from './Link'
 
-export default {
+interface GetComponentsArg {
+  pathname: string;
+  isIndex: boolean;
+}
+
+type Components = Record<string, ComponentLike<ReturnType<FC>>>
+
+const getComponents = (arg: GetComponentsArg): Components => ({
   img: Img,
   pre: Pre,
   code: Code,
   codeblock: CodeBlock,
   blockquote: Blockquote,
+  a: Link({
+    pathname: arg.pathname,
+    isIndex: arg.isIndex,
+  }),
   ...Table,
   ...List,
-}
+}) as unknown as Components
+
+export default getComponents
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 7680ea0a..2b8ccb11 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -1,16 +1,15 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
-import unified from 'unified'
-import rehypeReact, { Options } from 'rehype-react'
-import { Root } from 'hast'
 import Grid from '@mui/material/Grid'
 import Header from '../components/Header'
 import Main from '../components/Main'
 import TocSidebar from '../components/TocSidebar'
 import NavSidebar from '../components/NavSidebar'
 import styled from '@mui/material/styles/styled'
-import components from '../components/stand-in'
+import getComponents from '../components/stand-in'
+import MDRenderer from '../components/MDRenderer'
+import { HistoryLocation } from '../types/location'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -56,20 +55,9 @@ export const query = graphql`
 
 interface DocProps {
   data: DeepWriteable<DeepRequiredNonNull<GatsbyTypes.DocInfoQuery>>,
-  location: Location
+  location: HistoryLocation
 }
 
-
-const processor = unified()
-  .use(rehypeReact, {
-    createElement: React.createElement,
-    Fragment: React.Fragment,
-    components,
-  } as Options<typeof React.createElement>)
-
-const contentParser = (htmlAst: Root): JSX.Element =>
-  (processor.stringify(htmlAst) as never as JSX.Element)
-
 const MainContentDiv = styled(Grid)`
   flex-grow: 1;
   flex-flow: row;
@@ -95,17 +83,21 @@ const Doc: React.FC<DocProps> = (props) => {
   const isIndex = mdx.fields.isIndex
   const isWIP = wordCount === 0 || (tags?.findIndex((x: string) => x === 'WIP') >= 0)
 
+  const components = getComponents({
+    pathname: location.pathname,
+    isIndex,
+  })
 
   return (
     <>
-      <Grid container={true} direction="column">
+      <Grid container={true} direction="column" minHeight="100vh">
         <Header title={title}/>
 
         <MainContentDiv className="maincontentdiv" container={true} item={true}>
           <NavSidebar pathname={location.pathname}/>
 
           <Main item={true}>
-            {contentParser(mdx.htmlAst)}
+            <MDRenderer htmlAst={mdx.htmlAst} components={components}/>
           </Main>
 
           <TocSidebar toc={headings}/>
diff --git a/gatsby-theme-oi-wiki/src/types/location.d.ts b/gatsby-theme-oi-wiki/src/types/location.d.ts
new file mode 100644
index 00000000..6868c1a3
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/types/location.d.ts
@@ -0,0 +1,11 @@
+export interface HLocation<S = unknown> {
+  pathname: string;
+  search: string;
+  state: S;
+  hash: string;
+  key?: string | undefined;
+}
+
+export type WindowLocation<S = unknown> = Window['location'] & HLocation<S>;
+
+export type HistoryLocation = WindowLocation & { state?: any };

From b803a57522a98a94df4dff9d675cc560c1197dae Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 27 Sep 2021 01:14:27 +0800
Subject: [PATCH 25/59] feat(stand-in): Details, Summary

---
 .../src/components/stand-in/Details.tsx       | 44 +++++++++++++
 .../src/components/stand-in/Summary.tsx       | 64 +++++++++++++++++++
 .../src/components/stand-in/index.ts          |  4 ++
 3 files changed, 112 insertions(+)
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/Details.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/stand-in/Summary.tsx

diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Details.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Details.tsx
new file mode 100644
index 00000000..6b1bdddb
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Details.tsx
@@ -0,0 +1,44 @@
+import styled from '@mui/material/styles/styled'
+import Accordion from '@mui/material/Accordion'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import { css } from '@emotion/react'
+import Box from '@mui/material/Box'
+import React from 'react'
+
+const StyledAccordion = styled(Accordion)(({ theme }) => css`
+  margin: 1.2em 0;
+  border-left: .3rem solid ${theme.palette.primary.light};
+  box-shadow: ${theme.shadows[1]};
+
+  &.Mui-expanded {
+    margin: 1.2em 0;
+  }
+`)
+
+const StyledAccordionDetails = styled(AccordionDetails)`
+  padding: 0;
+`
+
+const Block = styled(Box)(({ theme }) => css`
+  margin-inline: ${theme.spacing(2)};
+`)
+
+const Details: React.FC<React.HTMLAttributes<HTMLDetailsElement>> = (props) => {
+  const { className, children } = props
+  const contentArr = Array.isArray(children) ? children : [children]
+
+  return (
+    <StyledAccordion
+      variant="outlined"
+      className={className}
+      defaultExpanded={!!className?.match('open')}
+    >
+      {contentArr[0]}
+      <StyledAccordionDetails>
+        <Block>{contentArr.slice(1)}</Block>
+      </StyledAccordionDetails>
+    </StyledAccordion>
+  )
+}
+
+export default Details
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Summary.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Summary.tsx
new file mode 100644
index 00000000..3715037c
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Summary.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import Edit from '@mui/icons-material/Edit'
+import styled from '@mui/material/styles/styled'
+import { blue } from '@mui/material/colors'
+import { css } from '@emotion/react'
+
+const summaryStyle = css`
+  min-height: 36px;
+  height: auto;
+`
+
+const StyledAccordionSummary = styled(AccordionSummary)`
+  ${summaryStyle};
+
+  &.Mui-expanded {
+    ${summaryStyle};
+  }
+
+  .MuiAccordionSummary-content {
+    margin-block: 8px;
+
+    &.Mui-expanded {
+      margin-block: 8px;
+    }
+
+    p {
+      margin-block: 8px;
+    }
+  }
+
+  .MuiAccordionSummary-expandIconWrapper {
+    padding: 2px;
+
+    &.Mui-expanded {
+      padding: 2px;
+    }
+  }
+`
+
+const StyledEditIcon = styled(Edit)`
+  margin: 0 10px 2px -5px;
+  align-self: center;
+  color: ${blue[500]};
+`
+
+const Summary: React.FC<React.HTMLAttributes<HTMLElement>> = (props) => {
+  const { children, ...others } = props
+
+  return (
+    <StyledAccordionSummary
+      expandIcon={<ExpandMore/>}
+      aria-controls="expand"
+      {...others}
+    >
+      <StyledEditIcon/>
+      {children}
+    </StyledAccordionSummary>
+  )
+
+}
+
+export default Summary
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/index.ts b/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
index e6f2594d..cda7a2ac 100644
--- a/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/index.ts
@@ -8,6 +8,8 @@ import CodeBlock from './Codeblock'
 import { ComponentLike } from 'rehype-react'
 import { FC } from 'react'
 import Link from './Link'
+import Details from './Details'
+import Summary from './Summary'
 
 interface GetComponentsArg {
   pathname: string;
@@ -26,6 +28,8 @@ const getComponents = (arg: GetComponentsArg): Components => ({
     pathname: arg.pathname,
     isIndex: arg.isIndex,
   }),
+  details: Details,
+  summary: Summary,
   ...Table,
   ...List,
 }) as unknown as Components

From 6eec6a348d6fe398fb9b9cb3d76442c67c83ddd4 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 27 Sep 2021 16:21:41 +0800
Subject: [PATCH 26/59] fix(stand-in/link): tooltip

---
 gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx b/gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx
index 7fff616e..d3c1bf54 100644
--- a/gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx
+++ b/gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx
@@ -8,7 +8,7 @@ interface DefaultProps extends SmartLinkProps {
 
 const Link: (defaultProps: DefaultProps) => React.FC<SmartLinkProps> = (defaultProps) => {
   return function Link(props) {
-    return <SmartLink {...defaultProps} {...props}/>
+    return <SmartLink tooltip={true} {...defaultProps} {...props}/>
   }
 }
 export default Link

From b685f5b119f26c4c0ef66350761dea3d201213c7 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 27 Sep 2021 16:22:52 +0800
Subject: [PATCH 27/59] refactor(pseudocodestyle): simplify css selectors

---
 .../src/theme/pseudoCodeStyle.ts              | 117 +++++++++---------
 1 file changed, 58 insertions(+), 59 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts b/gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts
index bc4b5ae7..09df56c1 100644
--- a/gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts
+++ b/gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts
@@ -7,76 +7,75 @@ const pseudoCodeStyle = (theme: Theme): SerializedStyles => css`
     font-size: 1em;
     font-weight: 100;
     -webkit-font-smoothing: antialiased !important;
-  }
 
-  .ps-root .ps-algorithm {
-    margin: 0.8em 0;
-    border-top: 3px solid ${theme.palette.text.secondary};
-    border-bottom: 2px solid rgba(var(--text-secondary));
-  }
+    .ps-algorithm {
+      margin: 0.8em 0;
+      border-top: 3px solid ${theme.palette.text.secondary};
+      border-bottom: 2px solid rgba(var(--text-secondary));
 
-  .ps-root .ps-algorithm.with-caption > .ps-line:first-child {
-    border-bottom: 2px solid ${theme.palette.text.secondary};
-    padding-top: .5em;
-  }
+      &.with-caption > .ps-line > span:first-of-type {
+        border-bottom: 2px solid ${theme.palette.text.secondary};
+        padding-top: .5em;
+      }
+    }
 
-  .ps-root .katex {
-    text-indent: 0;
-    font-size: 1em;
-  }
+    .ps-algorithmic.with-linenum .ps-line.ps-code {
+      text-indent: -1.6em;
 
-  .ps-root .MathJax,
-  .ps-root .MathJax_CHTML {
-    text-indent: 0;
-    font-size: 1em !important;
-  }
+      & > span {
+        text-indent: 0;
+      }
+    }
 
-  .ps-root .ps-line {
-    margin: 0;
-    padding: 0;
-    line-height: 1.2;
-  }
+    .katex {
+      text-indent: 0;
+      font-size: 1em;
+    }
 
-  .ps-root .ps-funcname {
-    font-family: MJXTEX, "Times New Roman", Times, serif;
-    font-weight: 400;
-    font-variant: small-caps;
-    font-style: normal;
-    text-transform: none;
-  }
+    .MathJax, .MathJax_CHTML {
+      text-indent: 0;
+      font-size: 1em !important;
+    }
 
-  .ps-root .ps-keyword {
-    font-family: MJXTEX-B, "Times New Roman", Times, serif;
-    font-weight: 700;
-    font-variant: normal;
-    font-style: normal;
-    text-transform: none;
-  }
+    .ps-line {
+      margin: 0;
+      padding: 0;
+      line-height: 1.2;
+    }
 
-  .ps-root .ps-comment {
-    font-family: MJXTEX, "Times New Roman", Times, serif;
-    font-weight: 400;
-    font-variant: normal;
-    font-style: normal;
-    text-transform: none;
-  }
+    .ps-keyword {
+      font-family: MJXTEX-B, "Times New Roman", Times, serif;
+      font-weight: 700;
+      font-variant: normal;
+      font-style: normal;
+      text-transform: none;
+    }
 
-  .ps-root .ps-linenum {
-    font-size: 0.8em;
-    line-height: 1em;
-    width: 1.6em;
-    text-align: right;
-    display: inline-block;
-    position: relative;
-    padding-right: 0.3em;
-  }
+    .ps-comment {
+      font-family: MJXTEX, "Times New Roman", Times, serif;
+      font-weight: 400;
+      font-variant: normal;
+      font-style: normal;
+      text-transform: none;
+    }
 
-  .ps-root .ps-algorithmic.with-linenum .ps-line.ps-code {
-    text-indent: -1.6em;
-  }
+    .ps-linenum {
+      font-size: 0.8em;
+      line-height: 1em;
+      width: 1.6em;
+      text-align: right;
+      display: inline-block;
+      position: relative;
+      padding-right: 0.3em;
+    }
 
-  .ps-root .ps-algorithmic.with-linenum .ps-line.ps-code > span {
-    text-indent: 0;
+    .ps-funcname {
+      font-family: MJXTEX, "Times New Roman", Times, serif;
+      font-weight: 400;
+      font-variant: small-caps;
+      font-style: normal;
+      text-transform: none;
+    }
   }
 `
 

From 2c92df160b2937642ce005f034e2d7bebf9ce177 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 27 Sep 2021 16:25:00 +0800
Subject: [PATCH 28/59] feat(headerstore): appearLock

---
 gatsby-theme-oi-wiki/src/components/Header/index.tsx |  4 ++++
 gatsby-theme-oi-wiki/src/stores/headerStore.ts       | 11 ++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Header/index.tsx b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
index b0514400..2a4a58f2 100644
--- a/gatsby-theme-oi-wiki/src/components/Header/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
@@ -41,6 +41,10 @@ const Header: React.FC<HeaderProps> = observer((props) => {
       if (dy > 5) headerStore.setAppear(false)
     }, {
       target: window,
+      enabled: !headerStore.appearLock,
+      eventOptions: {
+        passive: true,
+      },
     })
   }
 
diff --git a/gatsby-theme-oi-wiki/src/stores/headerStore.ts b/gatsby-theme-oi-wiki/src/stores/headerStore.ts
index 338c1ce8..3bd65df4 100644
--- a/gatsby-theme-oi-wiki/src/stores/headerStore.ts
+++ b/gatsby-theme-oi-wiki/src/stores/headerStore.ts
@@ -2,12 +2,15 @@ import { computed, observable } from 'mobx'
 
 export interface HeaderStore {
   appear: boolean;
+  appearLock: boolean;
   onTop: boolean;
 
   height: number;
 
   setAppear(val: boolean): void;
 
+  setAppearLock(val: boolean): void;
+
   setOnTop(val: boolean): void;
 }
 
@@ -16,6 +19,7 @@ const HEADER_HEIGHT = 60
 
 const headerStore = observable<HeaderStore>({
   appear: true,
+  appearLock: false,
   onTop: true,
 
   get height() {
@@ -23,7 +27,12 @@ const headerStore = observable<HeaderStore>({
   },
 
   setAppear(val) {
-    this.appear = val
+    if (!this.appearLock) {
+      this.appear = val
+    }
+  },
+  setAppearLock(val: boolean) {
+    this.appearLock = val
   },
   setOnTop(val) {
     this.onTop = val

From 06179bef73ff2a79543222b81de6c17578b5a3f9 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 27 Sep 2021 22:35:48 +0800
Subject: [PATCH 29/59] refactor: EditWarn components

* move inside EditWarn to WrapRootElement
* add body2 style
---
 .../src/components/EditWarn.tsx               | 53 ++++++++-----------
 .../src/gatsby-func/WrapRootElement.tsx       |  2 +
 .../src/stores/editWarnStore.ts               | 26 +++++++++
 gatsby-theme-oi-wiki/src/theme/index.ts       |  6 ++-
 4 files changed, 56 insertions(+), 31 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/stores/editWarnStore.ts

diff --git a/gatsby-theme-oi-wiki/src/components/EditWarn.tsx b/gatsby-theme-oi-wiki/src/components/EditWarn.tsx
index d43f8287..c6e2e663 100644
--- a/gatsby-theme-oi-wiki/src/components/EditWarn.tsx
+++ b/gatsby-theme-oi-wiki/src/components/EditWarn.tsx
@@ -1,59 +1,52 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core'
-
 import React from 'react'
-import { SmartLink } from './Link'
+import SmartLink from './SmartLink'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import { observer } from 'mobx-react-lite'
+import { editWarnStore } from '../stores/editWarnStore'
+import { computed } from 'mobx'
 
 const EditWarning = (): JSX.Element => {
   return (
     <>
-      <p>首先，感谢您能够为 OI Wiki 做出自己的贡献。</p>
-      <p>
+      <Typography variant="body2">首先，感谢您能够为 OI Wiki 做出自己的贡献。</Typography>
+      <Typography variant="body2">
         不过在开始之前，我们需要您了解并熟知
-        <SmartLink to="/intro/htc/" target="_blank" rel="noopener noreferrer nofollow">如何参与</SmartLink>
+        <SmartLink href="/intro/htc/" target="_blank" rel="noopener noreferrer nofollow">如何参与</SmartLink>
         里的内容，以避免在编辑时产生不必要的麻烦。
-      </p>
-      <p>在阅读完之后，请点击下方的按钮，然后开始编辑。</p>
+      </Typography>
+      <Typography variant="body2">在阅读完之后，请点击下方的按钮，然后开始编辑。</Typography>
     </>
   )
 }
 
-export interface EditWarnProps {
-  relativePath: string;
-  dialogOpen: boolean;
-  setDialogOpen: (props: boolean) => any;
-  location: Location;
-}
+const EDIT_URL = 'https://github.com/OI-wiki/OI-wiki/edit/master/docs/'
+const EditWarn: React.FC = observer(() => {
+  const targetUrl = computed(() => EDIT_URL + editWarnStore.relativePath).get()
 
-const EditWarn: React.FC<EditWarnProps> = (props) => {
-  const { relativePath, dialogOpen, setDialogOpen } = props
-  const editURL = 'https://github.com/OI-wiki/OI-wiki/edit/master/docs/'
   const onClose = (): void => {
-    setDialogOpen(false)
+    editWarnStore.setOpen(false)
   }
 
   return (
     <Dialog
-      open={dialogOpen}
+      open={editWarnStore.open}
       onClose={onClose}
     >
       <DialogTitle>编辑前须知</DialogTitle>
       <DialogContent><EditWarning/></DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          取消
-        </Button>
-        <Button
-          component="a"
-          href={editURL + relativePath}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-          onClick={onClose}
-        >
+        <Button onClick={onClose}>取消</Button>
+        <Button component={SmartLink} href={targetUrl} onClick={onClose}>
           开始编辑
         </Button>
       </DialogActions>
     </Dialog>
   )
-}
+})
 
 export default EditWarn
diff --git a/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx b/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx
index 55e5759d..d7ee06b9 100644
--- a/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx
+++ b/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx
@@ -8,6 +8,7 @@ import { observer } from 'mobx-react-lite'
 import { autorun } from 'mobx'
 import { GlobalStyles } from '@mui/material'
 import globalStyle from '../theme/globalStyle'
+import EditWarn from '../components/EditWarn'
 
 const StoreHandler: React.FC = observer(() => {
 
@@ -37,6 +38,7 @@ const WrapRootElement = ({ element }: WrapRootElementBrowserArgs): JSX.Element =
       <ThemeProvider theme={theme}>
         <CssBaseline/>
         <GlobalStyles styles={globalStyle(theme)}/>
+        <EditWarn/>
         {element}
       </ThemeProvider>
     </React.StrictMode>
diff --git a/gatsby-theme-oi-wiki/src/stores/editWarnStore.ts b/gatsby-theme-oi-wiki/src/stores/editWarnStore.ts
new file mode 100644
index 00000000..24e46160
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/stores/editWarnStore.ts
@@ -0,0 +1,26 @@
+import { observable } from 'mobx'
+
+interface EditWarnStore {
+  open: boolean;
+  relativePath: string;
+
+  setOpen(val: boolean): void;
+
+  setRelativePath(val: string): void;
+}
+
+const editWarnStore = observable<EditWarnStore>({
+  open: false,
+  relativePath: '',
+
+  setOpen(val: boolean) {
+    this.open = val
+  },
+  setRelativePath(val: string) {
+    this.relativePath = val
+  },
+}, undefined, {
+  autoBind: true,
+})
+
+export { editWarnStore }
diff --git a/gatsby-theme-oi-wiki/src/theme/index.ts b/gatsby-theme-oi-wiki/src/theme/index.ts
index 94e20d4b..8b189bbf 100644
--- a/gatsby-theme-oi-wiki/src/theme/index.ts
+++ b/gatsby-theme-oi-wiki/src/theme/index.ts
@@ -40,7 +40,11 @@ const theme = createTheme({
       fontSize: '1rem',
       ...commonTypo,
     },
-
+    body2: {
+      fontSize: '0.875rem',
+      lineHeight: '1.5rem',
+      marginBlockEnd: '0.5rem',
+    },
   },
 })
 

From 0deb1ff2b905c747c457be09b05dfff91c40aaba Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 27 Sep 2021 22:39:33 +0800
Subject: [PATCH 30/59] refactor: Title component

---
 gatsby-theme-oi-wiki/src/components/Title.tsx | 113 +++++++++---------
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    |   2 +
 2 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Title.tsx b/gatsby-theme-oi-wiki/src/components/Title.tsx
index 1a390804..51ad3c27 100644
--- a/gatsby-theme-oi-wiki/src/components/Title.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Title.tsx
@@ -1,68 +1,65 @@
-import React, { useState } from 'react'
-import { createStyles, Grid, Hidden, IconButton, makeStyles, Tooltip, Typography } from '@material-ui/core'
-import EditIcon from '@material-ui/icons/Edit'
-import EditWarn from './EditWarn'
+import React, { useEffect } from 'react'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import Tooltip from '@mui/material/Tooltip'
+import Edit from '@mui/icons-material/Edit'
+import IconButton from '@mui/material/IconButton'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import { observer } from 'mobx-react-lite'
+import { editWarnStore } from '../stores/editWarnStore'
 
-export interface TitleProps {
-  title: string,
-  noEdit: boolean,
-  noMeta?: boolean,
-  relativePath: string,
-  location: Location,
+interface EditBtnProps {
+  relativePath: string;
 }
 
-const useStyles = makeStyles((theme) => createStyles({
-  boldText: {
-    fontWeight: 'bold',
-    display: 'inline-block',
-    verticalAlign: 'middle',
-  },
-  iconButton: {
-    float: 'right',
-    padding: 0,
-    margin: 12,
-  },
-  subText: {
-    color: theme.palette.subTitle,
-    lineHeight: 1.8,
-  },
-}))
+export interface TitleProps extends EditBtnProps {
+  title: string;
+  noEdit: boolean;
+}
+
+const StyledGrid = styled(Grid)`
+  align-items: center;
+  position: relative;
+`
+
+const StyledTyp = styled(Typography)(({ theme }) => css`
+  font-weight: ${theme.typography.fontWeightBold};
+`)
+
+const StyledIconBtn = styled(IconButton)`
+  margin: 0.8rem;
+  position: absolute;
+  right: 0;
+`
+
+
+const EditBtn: React.FC<EditBtnProps> = observer((props) => {
+  useEffect(() => {
+    editWarnStore.setRelativePath(props.relativePath)
+  }, [props.relativePath])
+
+  const editAction = (): void => {
+    editWarnStore.setOpen(true)
+  }
+
+  return (
+    <Tooltip title="编辑页面" arrow={true}>
+      <StyledIconBtn onClick={editAction}>
+        <Edit/>
+      </StyledIconBtn>
+    </Tooltip>
+  )
+})
 
 const Title: React.FC<TitleProps> = (props) => {
-  const classes = useStyles()
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const { relativePath, location, title, noEdit } = props
+  const { relativePath, title, noEdit } = props
 
   return (
-    <>
-      <EditWarn
-        relativePath={relativePath}
-        dialogOpen={dialogOpen}
-        setDialogOpen={setDialogOpen}
-        location={location}
-      />
-      <Grid container spacing={2}>
-        <Grid item xs>
-          <Typography variant="h4" className={classes.boldText} component="h1">
-            {title}
-          </Typography>
-        </Grid>
-        <Grid item xs={1}>
-          {!noEdit &&
-          <Hidden xsDown implementation="css">
-            <Tooltip title="编辑页面" placement="left" arrow>
-              <IconButton
-                onClick={() => setDialogOpen(true)}
-                className={classes.iconButton}
-              >
-                <EditIcon fontSize="small"/>
-              </IconButton>
-            </Tooltip>
-          </Hidden>
-          }
-        </Grid>
-      </Grid>
-    </>
+    <StyledGrid container={true}>
+      <StyledTyp variant="h1" flexGrow={1}>{title}</StyledTyp>
+      {!noEdit && <EditBtn relativePath={relativePath}/>}
+    </StyledGrid>
   )
 }
 
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 2b8ccb11..0c85ac5d 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -10,6 +10,7 @@ import styled from '@mui/material/styles/styled'
 import getComponents from '../components/stand-in'
 import MDRenderer from '../components/MDRenderer'
 import { HistoryLocation } from '../types/location'
+import Title from '../components/Title'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -97,6 +98,7 @@ const Doc: React.FC<DocProps> = (props) => {
           <NavSidebar pathname={location.pathname}/>
 
           <Main item={true}>
+            <Title title={title} noEdit={noEdit} relativePath={relativePath}/>
             <MDRenderer htmlAst={mdx.htmlAst} components={components}/>
           </Main>
 

From 993184af9788fcf478217a93c9121099c967a87e Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 28 Sep 2021 01:11:10 +0800
Subject: [PATCH 31/59] refactor: Time component

---
 gatsby-theme-oi-wiki/src/components/Time.tsx  | 40 -------------------
 .../src/components/Time/index.tsx             | 37 +++++++++++++++++
 .../Time/utils.ts}                            |  4 +-
 3 files changed, 40 insertions(+), 41 deletions(-)
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Time.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/Time/index.tsx
 rename gatsby-theme-oi-wiki/src/{lib/relativeTime.ts => components/Time/utils.ts} (91%)

diff --git a/gatsby-theme-oi-wiki/src/components/Time.tsx b/gatsby-theme-oi-wiki/src/components/Time.tsx
deleted file mode 100644
index b6155771..00000000
--- a/gatsby-theme-oi-wiki/src/components/Time.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import timeDifference from '../lib/relativeTime'
-
-const defaultProps = {
-  defaultShowRelative: true,
-  updateInterval: 30 * 1000,
-}
-
-export interface TimeProps extends Partial<typeof defaultProps> {
-  time: number | Date | string
-}
-
-const Time: React.FC<TimeProps> = (props) => {
-  const { time, defaultShowRelative, updateInterval } = { ...defaultProps, ...props }
-  const [relativeMode, setRelativeMode] = useState(defaultShowRelative)
-  const [now, setNow] = useState(Date.now())
-  const timestamp = +new Date(time)
-
-  const toggle = (): void => {
-    setRelativeMode(!relativeMode)
-  }
-
-  useEffect(() => {
-    const t = setInterval(() => {
-      setNow(Date.now())
-    }, updateInterval)
-
-    return () => {
-      clearInterval(t)
-    }
-  }, [updateInterval])
-
-  return <span
-    style={{ cursor: 'pointer' }}
-    onClick={toggle}>
-    {relativeMode ? timeDifference(now, timestamp) : new Date(timestamp).toLocaleString()}
-  </span>
-}
-
-export default Time
diff --git a/gatsby-theme-oi-wiki/src/components/Time/index.tsx b/gatsby-theme-oi-wiki/src/components/Time/index.tsx
new file mode 100644
index 00000000..7b623bc8
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Time/index.tsx
@@ -0,0 +1,37 @@
+import React, { useMemo, useState } from 'react'
+import { timeDifference } from './utils'
+import Typography from '@mui/material/Typography'
+import { Tooltip } from '@mui/material'
+
+export interface TimeProps {
+  time: number | Date | string;
+  showRelative: boolean,
+}
+
+
+const Time: React.FC<TimeProps> = (props) => {
+  const { time, showRelative = true } = props
+  const [relativeMode, setRelativeMode] = useState(showRelative)
+
+  const timeStr = useMemo(() => {
+    const timestamp = new Date(time)
+    return relativeMode
+      ? timeDifference(Date.now(), +timestamp)
+      : timestamp.toLocaleString()
+  }, [relativeMode, time])
+
+
+  const toggle = (): void => {
+    setRelativeMode(!relativeMode)
+  }
+
+  return (
+    <Tooltip title="click to switch between relative and absolute time" arrow={true}>
+      <Typography component="span" sx={{ cursor: 'pointer' }} onClick={toggle}>
+        {timeStr}
+      </Typography>
+    </Tooltip>
+  )
+}
+
+export default Time
diff --git a/gatsby-theme-oi-wiki/src/lib/relativeTime.ts b/gatsby-theme-oi-wiki/src/components/Time/utils.ts
similarity index 91%
rename from gatsby-theme-oi-wiki/src/lib/relativeTime.ts
rename to gatsby-theme-oi-wiki/src/components/Time/utils.ts
index 3ab1c134..59c37fbe 100644
--- a/gatsby-theme-oi-wiki/src/lib/relativeTime.ts
+++ b/gatsby-theme-oi-wiki/src/components/Time/utils.ts
@@ -6,7 +6,7 @@
  * @param {number} previous in milliseconds
  * @return {string}  string
  */
-export default function timeDifference (current: number, previous: number): string {
+function timeDifference(current: number, previous: number): string {
   const msPerMinute = 60 * 1000
   const msPerHour = msPerMinute * 60
   const msPerDay = msPerHour * 24
@@ -31,3 +31,5 @@ export default function timeDifference (current: number, previous: number): stri
   }
   return `约 ${Math.round(elapsed / msPerYear)} 年前`
 }
+
+export { timeDifference }

From dc16f6d0aed7cd2c42ea8cb2f35f2bda692b06df Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 28 Sep 2021 01:12:02 +0800
Subject: [PATCH 32/59] refactor: Tags component

---
 gatsby-theme-oi-wiki/src/components/Tags.tsx | 48 +++++++++-----------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Tags.tsx b/gatsby-theme-oi-wiki/src/components/Tags.tsx
index 713c3536..f414f9f0 100644
--- a/gatsby-theme-oi-wiki/src/components/Tags.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Tags.tsx
@@ -1,36 +1,32 @@
-import Chip from '@material-ui/core/Chip'
-import { makeStyles } from '@material-ui/core/styles'
 import kebabCase from 'lodash/kebabCase'
 import React from 'react'
+import styled from '@mui/material/styles/styled'
+import Chip from '@mui/material/Chip'
+import { css } from '@emotion/react'
+import SmartLink from './SmartLink'
+import Box from '@mui/material/Box'
 
-const useStyles = makeStyles((theme) => ({
-  chip: {
-    margin: theme.spacing(0.5),
-  },
-}))
+const StyledChip = styled(Chip)(({ theme }) => css`
+  margin: ${theme.spacing(0.5)};
+`) as typeof Chip
 
-interface Props{
-  tags: Array<string>
+export interface TagsProps {
+  tags: string[]
 }
 
-const Tags: React.FC<Props> = (props: Props) => {
-  const arr = props.tags
-  const classes = useStyles()
+const Tags: React.FC<TagsProps> = (props: TagsProps) => {
   return (
-    <div>
-      {arr &&
-        arr.map((tag) => (
-          <Chip
-            label={` #${tag} `}
-            href={'/tags/' + kebabCase(tag)}
-            key={`tag-${tag}`}
-            component="a"
-            variant="outlined"
-            clickable
-            className={classes.chip}
-          />
-        ))}
-    </div>
+    <Box>
+      {props.tags.map((tag) => (
+        <StyledChip
+          key={`tag-${tag}`}
+          component={SmartLink}
+          href={'/tags/' + kebabCase(tag)}
+          label={` #${tag} `}
+          variant="outlined"
+          clickable={true}/>
+      ))}
+    </Box>
   )
 }
 

From b074a9ad2b6ccebe5b22f344b5f625d63379d0df Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 28 Sep 2021 01:13:44 +0800
Subject: [PATCH 33/59] refactor: Meta component

---
 gatsby-theme-oi-wiki/src/components/Meta.tsx  | 176 ++++++++++--------
 .../src/components/SmartLink/index.tsx        |   2 +
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    |  11 +-
 3 files changed, 110 insertions(+), 79 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Meta.tsx b/gatsby-theme-oi-wiki/src/components/Meta.tsx
index e03e76a7..869f7306 100644
--- a/gatsby-theme-oi-wiki/src/components/Meta.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Meta.tsx
@@ -1,99 +1,121 @@
-import { makeStyles, Paper, Typography } from '@material-ui/core'
-import CopyrightIcon from '@material-ui/icons/Copyright'
-import EditIcon from '@material-ui/icons/Edit'
-import { Group as GroupIcon, History as HistoryIcon } from '@material-ui/icons'
-import React, { useState } from 'react'
-import { SmartLink, SmartLinkProps } from './Link'
-import Tags from './Tags'
-import EditWarn from './EditWarn'
+import React, { useEffect, useMemo } from 'react'
+import Tags, { TagsProps } from './Tags'
 import { uniq } from '../utils/common'
 import Time from '../components/Time'
+import SmartLink, { SmartLinkProps } from './SmartLink'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import Typography from '@mui/material/Typography'
+import { Copyright, Group, History } from '@mui/icons-material'
+import Paper from '@mui/material/Paper'
+import { observer } from 'mobx-react-lite'
+import Edit from '@mui/icons-material/Edit'
+import { editWarnStore } from '../stores/editWarnStore'
+import Box from '@mui/material/Box'
 
-const useStyles = makeStyles((theme: any) => ({
-  metaIcon: {
-    verticalAlign: 'sub',
-  },
-  paper: {
-    padding: theme.spacing(2),
-  },
-  meta: {
-    margin: '20px 0 10px',
-    paddingLeft: '.5rem',
-    textDecoration: 'none',
-  },
-  subText: {
-    // make typescript and eslint happy
-    lineHeight: 1.8,
-  },
-  authorLink: {
-    color: (theme.palette as unknown as { subTitle: string }).subTitle,
-    paddingLeft: theme.spacing(1),
-    display: 'inline-block',
-  },
-}))
-
-export interface MetaProps {
-  tags: string[];
+interface AuthorsBlockProps {
+  authors: string;
+}
+
+interface EditBlockProps {
   relativePath: string;
+}
+
+export interface MetaProps extends Partial<AuthorsBlockProps & TagsProps>, EditBlockProps {
   modifiedTime: string;
-  location: Location;
-  authors?: string;
   title: string;
 }
 
-const Meta: React.FC<MetaProps> = (props) => {
-  const { tags, relativePath, modifiedTime, location, ...rest } = props
-  const classes = useStyles()
-  const [dialogOpen, setDialogOpen] = useState(false)
 
-  const Author: React.FC<{ name: string }> = ({ name }) =>
-    <SmartLink href={`https://github.com/${name}`} className={classes.authorLink}>
-      {`@${name}`}
-    </SmartLink>
+const StyledSmartLink = styled(SmartLink)(({ theme }) => css`
+  color: ${theme.palette.grey.A700};
+  margin-left: ${theme.spacing(1)};
+`)
+
+const iconStyle = css`
+  vertical-align: sub;
+  font-size: 1.25rem;
+`
+
+const StyledGroupIcon = styled(Group)(iconStyle)
+const StyledHistoryIcon = styled(History)(iconStyle)
+const StyledEditIcon = styled(Edit)(iconStyle)
+const StyledCopyrightIcon = styled(Copyright)(iconStyle)
+
+const StyledPaper = styled(Paper)(({ theme }) => css`
+  padding: ${theme.spacing(2)};
+`)
+
+const StyledBox = styled(Box)`
+  margin: 20px 0 10px;
+  padding-left: .5rem;
+  text-decoration: none;
+`
+
+const Author: React.FC<{ name: string }> = ({ name }) =>
+  <StyledSmartLink href={`https://github.com/${name}`}>
+    {`@${name}`}
+  </StyledSmartLink>
+
+const AuthorsBlock: React.FC<AuthorsBlockProps> = (props) => {
+  const { authors } = props
+  const authorArr = useMemo(() => uniq(authors.split(',').map(v => v.trim())), [authors])
+
+  return (
+    <Typography gutterBottom={true}>
+      <span>
+        <StyledGroupIcon/>{' 贡献者：'}
+      </span>
+      {authorArr.map((v) => <Author key={v} name={v}/>)}
+    </Typography>
+  )
+}
+
+const EditBlock: React.FC<EditBlockProps> = observer((props) => {
+  useEffect(() => {
+    editWarnStore.setRelativePath(props.relativePath)
+  }, [props.relativePath])
 
   const click: SmartLinkProps['onClick'] = (e) => {
     e.preventDefault()
-    setDialogOpen(true)
+    editWarnStore.setOpen(true)
   }
 
-  return <>
-    <EditWarn relativePath={relativePath} dialogOpen={dialogOpen} setDialogOpen={setDialogOpen} location={location}/>
-    <Paper className={classes.paper} variant="outlined">
-      <Tags tags={tags}/>
-      <div className={classes.meta}>
-        {props.authors &&
-        <Typography gutterBottom>
-            <span>
-              <GroupIcon fontSize="small" className={classes.metaIcon}/>
-              {' 贡献者：'}
-            </span>
-          {uniq(props.authors.split(',').map(v => v.trim()))
-            .map(name => <Author key={name} name={name}/>)
-          }
-        </Typography>
-        }
-        <Typography gutterBottom>
+  return (
+    <Typography gutterBottom={true}>
+      <span>
+        <StyledEditIcon/>
+        {' 发现错误？想一起完善？ '}
+        <SmartLink onClick={click} href=".">在 GitHub 上编辑此页！</SmartLink>
+      </span>
+    </Typography>
+  )
+})
+
+const Meta: React.FC<MetaProps> = (props) => {
+  const { tags, relativePath, modifiedTime, authors, ...rest } = props
+
+  return (
+    <StyledPaper variant="outlined">
+      {tags && <Tags tags={tags}/>}
+
+      <StyledBox>
+        {authors && <AuthorsBlock authors={authors}/>}
+
+        <Typography gutterBottom={true}>
           <span>
-            <HistoryIcon fontSize="small" className={classes.metaIcon}/>
+            <StyledHistoryIcon fontSize="small"/>
             {' 本页面最近更新：'}
           </span>
-          <Time time={modifiedTime} updateInterval={5 * 60 * 60 * 1000} defaultShowRelative={false}/>，
-          <SmartLink to='./changelog/' {...rest} state={{ ...rest }}>更新历史</SmartLink>
+          <Time time={modifiedTime} showRelative={false}/>，
+          <SmartLink href='./changelog/' {...rest} state={{ ...rest }}>更新历史</SmartLink>
         </Typography>
 
-        <Typography gutterBottom>
-          <span>
-            <EditIcon fontSize="small" className={classes.metaIcon}/>
-            {' 发现错误？想一起完善？ '}
-            <SmartLink onClick={click} to=".">
-              在 GitHub 上编辑此页！
-            </SmartLink>
-          </span>
-        </Typography>
+        <EditBlock relativePath={relativePath}/>
 
         <Typography>
           <span>
-            <CopyrightIcon fontSize="small" className={classes.metaIcon}/>
+            <StyledCopyrightIcon/>
             {' 本页面的全部内容在 '}
             <strong>
               <SmartLink href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh">CC BY-SA 4.0</SmartLink>
@@ -103,9 +125,9 @@ const Meta: React.FC<MetaProps> = (props) => {
             {' 协议之条款下提供，附加条款亦可能应用'}
           </span>
         </Typography>
-      </div>
-    </Paper>
-  </>
+      </StyledBox>
+    </StyledPaper>
+  )
 }
 
 export default Meta
diff --git a/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
index 450a96e5..2f96abd8 100644
--- a/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
@@ -76,6 +76,8 @@ export interface SmartLinkProps extends LinkProps {
   pathname?: string;
   /** 用于 markdown 内链的修复, 设置为 true 可以避免相关影响 */
   isIndex?: boolean;
+  /** state data only exist on GatsbyLink */
+  state?: Record<string, any>
 }
 
 const SCROLL_PADDING = 24
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 0c85ac5d..17f02636 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -11,6 +11,7 @@ import getComponents from '../components/stand-in'
 import MDRenderer from '../components/MDRenderer'
 import { HistoryLocation } from '../types/location'
 import Title from '../components/Title'
+import Meta from '../components/Meta'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -70,8 +71,8 @@ const Doc: React.FC<DocProps> = (props) => {
 
   const title = mdx.fields.slug === '/' ? '' : mdx.frontmatter.title
   const description = mdx.frontmatter.description || mdx.excerpt
-  const authors = mdx.frontmatter.author || ''
-  const tags = mdx.frontmatter.tags || []
+  const authors = mdx.frontmatter.author
+  const tags = mdx.frontmatter.tags
   const noMeta = mdx.frontmatter.noMeta || false
   const noComment = mdx.frontmatter.noComment || false
   const noEdit = false
@@ -100,6 +101,12 @@ const Doc: React.FC<DocProps> = (props) => {
           <Main item={true}>
             <Title title={title} noEdit={noEdit} relativePath={relativePath}/>
             <MDRenderer htmlAst={mdx.htmlAst} components={components}/>
+            {!noMeta && <Meta
+              modifiedTime={modifiedTime}
+              title={title}
+              tags={tags}
+              authors={authors}
+              relativePath={relativePath}/>}
           </Main>
 
           <TocSidebar toc={headings}/>

From 3cb8f5f9581e176dc01f2bf2c8c578a308ee12ea Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 28 Sep 2021 15:18:11 +0800
Subject: [PATCH 34/59] feat(headerstore): current height

---
 gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx | 5 ++---
 gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx  | 4 +---
 gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx | 3 +--
 gatsby-theme-oi-wiki/src/stores/headerStore.ts           | 5 +++++
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx b/gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx
index 6610f358..ba32a0ab 100644
--- a/gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx
@@ -77,7 +77,6 @@ const NavSidebar: React.FC<NavSidebarProps> = observer((props) => {
   const { pathname } = props
   const scaleX = navSidebarStore.collapsed ? 0 : 1
   const translateX = navSidebarStore.collapsed ? -navSidebarStore.width : 0
-  const translateY = headerStore.appear ? headerStore.height : 0
   const navList = React.useMemo(
     () => getTypedPathList(pathList)
       .map((item) => listItemBuilder(item, 16, pathname))
@@ -88,8 +87,8 @@ const NavSidebar: React.FC<NavSidebarProps> = observer((props) => {
   return (
     <WrapperBox
       sx={{
-        transform: `translate3d(${translateX}px, ${translateY}px, 0)`,
-        height: `calc(100vh - ${translateY}px)`,
+        transform: `translate3d(${translateX}px, ${headerStore.currentHeight}px, 0)`,
+        height: `calc(100vh - ${headerStore.currentHeight}px)`,
         borderLeft: 'unset',
       }}
     >
diff --git a/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
index 2f96abd8..a1021293 100644
--- a/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
@@ -11,7 +11,6 @@ import Link, { LinkProps } from '@mui/material/Link'
 import { getElementViewPosition } from './utils'
 import { observer } from 'mobx-react-lite'
 import { headerStore } from '../../stores/headerStore'
-import { computed } from 'mobx'
 import { Theme } from '@mui/material/styles/createTheme'
 
 const MD_EXPR = /\.(md|markdown|mdtext|mdx)/g
@@ -84,13 +83,12 @@ const SCROLL_PADDING = 24
 
 const RefLink: React.FC<SmartLinkProps> = observer((props) => {
   const { href = '', children, ...others } = props
-  const headerHeight = computed((): number => headerStore.appear ? headerHeight : 0).get()
 
   const onClick: OnClickHandler = (e) => {
     e.preventDefault()
 
     const target = document.getElementById(href.substring(1, href.length))
-    const yDis = getElementViewPosition(target).y + window?.pageYOffset - headerHeight - SCROLL_PADDING
+    const yDis = getElementViewPosition(target).y + window?.pageYOffset - headerStore.currentHeight - SCROLL_PADDING
 
     smoothScrollTo(yDis)
   }
diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx b/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
index 863992e9..6ea42215 100644
--- a/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
@@ -23,14 +23,13 @@ const TocCollapseBtn = observer(() => {
 })
 
 const TocSidebar: React.FC<TocSidebarProps> = observer((props) => {
-  const top = headerStore.appear ? headerStore.height : 0
   const scaleX = tocSidebarStore.collapsed ? 0 : 1
   const translateX = tocSidebarStore.collapsed ? tocSidebarStore.width : 0
 
   return (
     <WrapperBox sx={{
       transform: `translate3d(${translateX}px, ${top}px, 0)`,
-      height: `calc(100vh - ${top}px)`,
+      height: `calc(100vh - ${headerStore.currentHeight}px)`,
       borderRight: 'unset',
       right: 0,
     }}>
diff --git a/gatsby-theme-oi-wiki/src/stores/headerStore.ts b/gatsby-theme-oi-wiki/src/stores/headerStore.ts
index 3bd65df4..95078b5e 100644
--- a/gatsby-theme-oi-wiki/src/stores/headerStore.ts
+++ b/gatsby-theme-oi-wiki/src/stores/headerStore.ts
@@ -6,6 +6,7 @@ export interface HeaderStore {
   onTop: boolean;
 
   height: number;
+  currentHeight: number;
 
   setAppear(val: boolean): void;
 
@@ -25,6 +26,9 @@ const headerStore = observable<HeaderStore>({
   get height() {
     return HEADER_HEIGHT
   },
+  get currentHeight() {
+    return this.appear ? this.height : 0
+  },
 
   setAppear(val) {
     if (!this.appearLock) {
@@ -39,6 +43,7 @@ const headerStore = observable<HeaderStore>({
   },
 }, {
   height: computed,
+  currentHeight: computed,
 }, {
   autoBind: true,
 })

From 72601b066b584a5cac3edf46584c48a27b6fd2f6 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 28 Sep 2021 15:43:08 +0800
Subject: [PATCH 35/59] refactor: folder name stand-in => customed, gatsby-func
 => gatsby
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 代小呆 <diauweb@live.com>
---
 gatsby-theme-oi-wiki/gatsby-browser.js                      | 2 +-
 gatsby-theme-oi-wiki/gatsby-ssr.js                          | 6 +++---
 .../src/components/{stand-in => customed}/Blockquote.tsx    | 0
 .../src/components/{stand-in => customed}/Code.tsx          | 0
 .../src/components/{stand-in => customed}/Codeblock.tsx     | 0
 .../src/components/{stand-in => customed}/Details.tsx       | 0
 .../src/components/{stand-in => customed}/Img.tsx           | 0
 .../src/components/{stand-in => customed}/Link.tsx          | 0
 .../src/components/{stand-in => customed}/List.tsx          | 0
 .../src/components/{stand-in => customed}/Pre.tsx           | 0
 .../src/components/{stand-in => customed}/Summary.tsx       | 0
 .../src/components/{stand-in => customed}/Table.tsx         | 0
 .../src/components/{stand-in => customed}/index.ts          | 0
 .../src/{gatsby-func => gatsby}/WrapRootElement.tsx         | 0
 .../src/{gatsby-func => gatsby}/onPreRenderHTML.tsx         | 0
 .../src/{gatsby-func => gatsby}/onRenderBody.tsx            | 0
 gatsby-theme-oi-wiki/src/templates/Doc.tsx                  | 2 +-
 17 files changed, 5 insertions(+), 5 deletions(-)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/Blockquote.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/Code.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/Codeblock.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/Details.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/Img.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/Link.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/List.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/Pre.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/Summary.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/Table.tsx (100%)
 rename gatsby-theme-oi-wiki/src/components/{stand-in => customed}/index.ts (100%)
 rename gatsby-theme-oi-wiki/src/{gatsby-func => gatsby}/WrapRootElement.tsx (100%)
 rename gatsby-theme-oi-wiki/src/{gatsby-func => gatsby}/onPreRenderHTML.tsx (100%)
 rename gatsby-theme-oi-wiki/src/{gatsby-func => gatsby}/onRenderBody.tsx (100%)

diff --git a/gatsby-theme-oi-wiki/gatsby-browser.js b/gatsby-theme-oi-wiki/gatsby-browser.js
index e8c2a261..549e3626 100644
--- a/gatsby-theme-oi-wiki/gatsby-browser.js
+++ b/gatsby-theme-oi-wiki/gatsby-browser.js
@@ -1,5 +1,5 @@
 import('./static/extra.css')
-import WrapRootElement from './src/gatsby-func/WrapRootElement'
+import WrapRootElement from './src/gatsby/WrapRootElement'
 
 const onRouteUpdate = () => {
   if (process.env.GATSBY_IS_DEV) {
diff --git a/gatsby-theme-oi-wiki/gatsby-ssr.js b/gatsby-theme-oi-wiki/gatsby-ssr.js
index 702a7929..ecf5fff9 100644
--- a/gatsby-theme-oi-wiki/gatsby-ssr.js
+++ b/gatsby-theme-oi-wiki/gatsby-ssr.js
@@ -1,6 +1,6 @@
-import WrapRootElement from './src/gatsby-func/WrapRootElement'
-import onRenderBody from './src/gatsby-func/onRenderBody'
-import onPreRenderHTML from './src/gatsby-func/onPreRenderHTML'
+import WrapRootElement from './src/gatsby/WrapRootElement'
+import onRenderBody from './src/gatsby/onRenderBody'
+import onPreRenderHTML from './src/gatsby/onPreRenderHTML'
 import { enableStaticRendering } from 'mobx-react-lite'
 
 enableStaticRendering(true)
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Blockquote.tsx b/gatsby-theme-oi-wiki/src/components/customed/Blockquote.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/Blockquote.tsx
rename to gatsby-theme-oi-wiki/src/components/customed/Blockquote.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Code.tsx b/gatsby-theme-oi-wiki/src/components/customed/Code.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/Code.tsx
rename to gatsby-theme-oi-wiki/src/components/customed/Code.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Codeblock.tsx b/gatsby-theme-oi-wiki/src/components/customed/Codeblock.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/Codeblock.tsx
rename to gatsby-theme-oi-wiki/src/components/customed/Codeblock.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Details.tsx b/gatsby-theme-oi-wiki/src/components/customed/Details.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/Details.tsx
rename to gatsby-theme-oi-wiki/src/components/customed/Details.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Img.tsx b/gatsby-theme-oi-wiki/src/components/customed/Img.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/Img.tsx
rename to gatsby-theme-oi-wiki/src/components/customed/Img.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx b/gatsby-theme-oi-wiki/src/components/customed/Link.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/Link.tsx
rename to gatsby-theme-oi-wiki/src/components/customed/Link.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/List.tsx b/gatsby-theme-oi-wiki/src/components/customed/List.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/List.tsx
rename to gatsby-theme-oi-wiki/src/components/customed/List.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Pre.tsx b/gatsby-theme-oi-wiki/src/components/customed/Pre.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/Pre.tsx
rename to gatsby-theme-oi-wiki/src/components/customed/Pre.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Summary.tsx b/gatsby-theme-oi-wiki/src/components/customed/Summary.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/Summary.tsx
rename to gatsby-theme-oi-wiki/src/components/customed/Summary.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/Table.tsx b/gatsby-theme-oi-wiki/src/components/customed/Table.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/Table.tsx
rename to gatsby-theme-oi-wiki/src/components/customed/Table.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/stand-in/index.ts b/gatsby-theme-oi-wiki/src/components/customed/index.ts
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/stand-in/index.ts
rename to gatsby-theme-oi-wiki/src/components/customed/index.ts
diff --git a/gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx b/gatsby-theme-oi-wiki/src/gatsby/WrapRootElement.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/gatsby-func/WrapRootElement.tsx
rename to gatsby-theme-oi-wiki/src/gatsby/WrapRootElement.tsx
diff --git a/gatsby-theme-oi-wiki/src/gatsby-func/onPreRenderHTML.tsx b/gatsby-theme-oi-wiki/src/gatsby/onPreRenderHTML.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/gatsby-func/onPreRenderHTML.tsx
rename to gatsby-theme-oi-wiki/src/gatsby/onPreRenderHTML.tsx
diff --git a/gatsby-theme-oi-wiki/src/gatsby-func/onRenderBody.tsx b/gatsby-theme-oi-wiki/src/gatsby/onRenderBody.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/gatsby-func/onRenderBody.tsx
rename to gatsby-theme-oi-wiki/src/gatsby/onRenderBody.tsx
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 17f02636..9ffdd461 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -7,7 +7,7 @@ import Main from '../components/Main'
 import TocSidebar from '../components/TocSidebar'
 import NavSidebar from '../components/NavSidebar'
 import styled from '@mui/material/styles/styled'
-import getComponents from '../components/stand-in'
+import getComponents from '../components/customed'
 import MDRenderer from '../components/MDRenderer'
 import { HistoryLocation } from '../types/location'
 import Title from '../components/Title'

From 601381412dcdeff8e6c36c09cfd4de3aedb4278d Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 28 Sep 2021 16:05:26 +0800
Subject: [PATCH 36/59] refactor(smartlink): simplify getElementViewPosition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 代小呆 <diauweb@live.com>
---
 .../src/components/SmartLink/utils.ts               | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/SmartLink/utils.ts b/gatsby-theme-oi-wiki/src/components/SmartLink/utils.ts
index 0fb650cc..b72678e1 100644
--- a/gatsby-theme-oi-wiki/src/components/SmartLink/utils.ts
+++ b/gatsby-theme-oi-wiki/src/components/SmartLink/utils.ts
@@ -6,18 +6,7 @@ export type Position = Pick<DOMRect, 'x' | 'y'>
  * 获取元素的绝对位置坐标（相对于浏览器视区左上角）
  */
 export const getElementViewPosition = (el: Nullable<HTMLElement>): Position => {
-  if (el === null) {
-    return {
-      x: 0,
-      y: 0,
-    }
-  } else {
-    const rect = el.getBoundingClientRect()
-    return {
-      x: rect.x || rect.top,
-      y: rect.y || rect.bottom,
-    }
-  }
+  return el?.getBoundingClientRect() ?? { x: 0, y: 0 }
 }
 
 export type Size = Pick<DOMRect, 'width' | 'height'>

From e783caf5738c62d6696b7e91ffdae46f9ea6b40a Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 28 Sep 2021 21:12:57 +0800
Subject: [PATCH 37/59] fix(tocsidebar): change top to
 headerStore.currentHeight

---
 gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx b/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
index 6ea42215..8d86d209 100644
--- a/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
@@ -28,7 +28,7 @@ const TocSidebar: React.FC<TocSidebarProps> = observer((props) => {
 
   return (
     <WrapperBox sx={{
-      transform: `translate3d(${translateX}px, ${top}px, 0)`,
+      transform: `translate3d(${translateX}px, ${headerStore.currentHeight}px, 0)`,
       height: `calc(100vh - ${headerStore.currentHeight}px)`,
       borderRight: 'unset',
       right: 0,

From e4eb1664a5fca6867663998738f8552973cc5428 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 28 Sep 2021 21:35:24 +0800
Subject: [PATCH 38/59] refactor(theme/index): rename commonTypo =>
 commonTypStyle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 代小呆 <diauweb@live.com>
---
 gatsby-theme-oi-wiki/src/theme/index.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/theme/index.ts b/gatsby-theme-oi-wiki/src/theme/index.ts
index 8b189bbf..e43dc6e5 100644
--- a/gatsby-theme-oi-wiki/src/theme/index.ts
+++ b/gatsby-theme-oi-wiki/src/theme/index.ts
@@ -2,7 +2,7 @@ import createTheme from '@mui/material/styles/createTheme'
 import { grey } from '@mui/material/colors'
 import { CSSProperties } from '@mui/material/styles/createTypography'
 
-const commonTypo: CSSProperties = {
+const commonTypStyle: CSSProperties = {
   fontWeight: 'bold',
   marginBlockEnd: '1rem',
   marginBlockStart: '1.5rem',
@@ -16,29 +16,29 @@ const theme = createTheme({
       fontSize: '2.5rem',
       paddingBottom: '.3rem',
       borderBlockEnd: `1px solid ${grey['300']}`,
-      ...commonTypo,
+      ...commonTypStyle,
     },
     h2: {
       fontSize: '2rem',
       paddingBottom: '.3rem',
       borderBlockEnd: `1px solid ${grey['300']}`,
-      ...commonTypo,
+      ...commonTypStyle,
     },
     h3: {
       fontSize: '1.75rem',
-      ...commonTypo,
+      ...commonTypStyle,
     },
     h4: {
       fontSize: '1.5rem',
-      ...commonTypo,
+      ...commonTypStyle,
     },
     h5: {
       fontSize: '1.25rem',
-      ...commonTypo,
+      ...commonTypStyle,
     },
     h6: {
       fontSize: '1rem',
-      ...commonTypo,
+      ...commonTypStyle,
     },
     body2: {
       fontSize: '0.875rem',

From ed511900f26800aaa718430db2eec4600e6e4d65 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Wed, 29 Sep 2021 23:31:14 +0800
Subject: [PATCH 39/59] refactor: Indicator component

---
 .../src/components/Indicator.tsx              | 59 +++++++++----------
 1 file changed, 27 insertions(+), 32 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Indicator.tsx b/gatsby-theme-oi-wiki/src/components/Indicator.tsx
index f835e38a..17a378c4 100644
--- a/gatsby-theme-oi-wiki/src/components/Indicator.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Indicator.tsx
@@ -1,27 +1,30 @@
-import { makeStyles, Typography } from '@material-ui/core'
-import clsx from 'clsx'
 import React from 'react'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import Typography from '@mui/material/Typography'
 
-const useStyles = makeStyles((theme) => ({
-  indicator: {
-    padding: `${theme.spacing(0.5)}px ${theme.spacing(1)}px`,
-    color: theme.palette.common.white,
-    borderRadius: theme.shape.borderRadius,
-    display: 'inline-block',
-  },
-  info: {
-    background: theme.palette.info.main,
-  },
-  success: {
-    background: theme.palette.success.main,
-  },
-  warning: {
-    background: theme.palette.warning.main,
-  },
-  error: {
-    background: theme.palette.error.main,
-  },
-}))
+const StyledTyp = styled(Typography)(({ theme }) => css`
+  padding: ${theme.spacing(0.5)}px ${theme.spacing(1)}px;
+  color: ${theme.palette.common.white};
+  border-radius: ${theme.shape.borderRadius};
+  display: inline-block;
+
+  &.info {
+    background-color: ${theme.palette.info.main};
+  }
+
+  &.success {
+    background-color: ${theme.palette.success.main};
+  }
+
+  &.warning {
+    background-color: ${theme.palette.warning.main};
+  }
+
+  &.error {
+    background-color: ${theme.palette.error.main};
+  }
+`)
 
 export interface IndicatorProps {
   type: 'info' | 'success' | 'error' | 'warning' | undefined
@@ -29,18 +32,10 @@ export interface IndicatorProps {
 }
 
 const Indicator: React.FC<IndicatorProps> = ({ type, msg }: IndicatorProps) => {
-  const classes = useStyles()
   return (
-    <Typography
-      className={clsx(classes.indicator, {
-        [classes.info]: type === 'info',
-        [classes.success]: type === 'success',
-        [classes.error]: type === 'error',
-        [classes.warning]: type === 'warning',
-      })}
-    >
+    <StyledTyp className={type}>
       {msg}
-    </Typography>
+    </StyledTyp>
   )
 }
 

From e42990ce407a3c5a3ee25a66cadc4f32e5951200 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 4 Oct 2021 22:24:20 +0800
Subject: [PATCH 40/59] refactor(title): prop title => children

---
 gatsby-theme-oi-wiki/src/components/Title.tsx |  5 +-
 gatsby-theme-oi-wiki/src/pages/tags.tsx       | 48 +++++++++++++++++++
 2 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/pages/tags.tsx

diff --git a/gatsby-theme-oi-wiki/src/components/Title.tsx b/gatsby-theme-oi-wiki/src/components/Title.tsx
index 51ad3c27..98058e81 100644
--- a/gatsby-theme-oi-wiki/src/components/Title.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Title.tsx
@@ -14,7 +14,6 @@ interface EditBtnProps {
 }
 
 export interface TitleProps extends EditBtnProps {
-  title: string;
   noEdit: boolean;
 }
 
@@ -53,11 +52,11 @@ const EditBtn: React.FC<EditBtnProps> = observer((props) => {
 })
 
 const Title: React.FC<TitleProps> = (props) => {
-  const { relativePath, title, noEdit } = props
+  const { relativePath, noEdit, children } = props
 
   return (
     <StyledGrid container={true}>
-      <StyledTyp variant="h1" flexGrow={1}>{title}</StyledTyp>
+      <StyledTyp variant="h1" flexGrow={1}>{children}</StyledTyp>
       {!noEdit && <EditBtn relativePath={relativePath}/>}
     </StyledGrid>
   )
diff --git a/gatsby-theme-oi-wiki/src/pages/tags.tsx b/gatsby-theme-oi-wiki/src/pages/tags.tsx
new file mode 100644
index 00000000..2e57db0d
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/pages/tags.tsx
@@ -0,0 +1,48 @@
+import styled from '@mui/material/styles/styled'
+import { graphql, useStaticQuery } from 'gatsby'
+import kebabCase from 'lodash/kebabCase'
+import React from 'react'
+import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
+import { css } from '@emotion/react'
+import Layout from '../components/Layout'
+import Chip from '@mui/material/Chip'
+import Title from '../components/Title'
+
+const StyledChip = styled(Chip)(({ theme }) => css`
+  margin: ${theme.spacing(0.5)};
+`) as typeof Chip
+
+const TagsPage: React.FC = () => {
+  const { allMarkdownRemark: { group } } = useStaticQuery<GatsbyTypes.TagListQuery>(graphql`
+    query TagList {
+      allMarkdownRemark(limit: 2000) {
+        group(field: frontmatter___tags) {
+          fieldValue
+          totalCount
+        }
+      }
+    }
+  `) as DeepWriteable<DeepRequiredNonNull<GatsbyTypes.TagListQuery>>
+
+  const title = '标签页'
+
+  return (
+    <Layout title={title} withNav={false} withToc={false}>
+      <Title noEdit={true} relativePath="">{title}</Title>
+      {group
+        .sort((a, b) => b.totalCount - a.totalCount)
+        .map(({ fieldValue, totalCount }) => (
+          <StyledChip
+            key={fieldValue}
+            label={`${fieldValue}(${totalCount})`}
+            component="a"
+            href={'/tags/' + kebabCase(fieldValue)}
+            clickable={true}
+            variant="outlined"
+          />
+        ))}
+    </Layout>
+  )
+}
+
+export default TagsPage

From 04d725c1a6746a7395400b70f3fc24369109ec2f Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 4 Oct 2021 22:31:14 +0800
Subject: [PATCH 41/59] refactor: extract Layout component

---
 .../src/components/Header/index.tsx           |  2 +-
 .../src/components/Layout.tsx                 | 43 +++++++++++++++++++
 .../src/components/TocSidebar/index.tsx       |  2 +-
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    | 42 +++++-------------
 4 files changed, 56 insertions(+), 33 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/components/Layout.tsx

diff --git a/gatsby-theme-oi-wiki/src/components/Header/index.tsx b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
index 2a4a58f2..0d3184bd 100644
--- a/gatsby-theme-oi-wiki/src/components/Header/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
@@ -13,7 +13,7 @@ import { Nullable } from '../../types/common'
 import School from '@mui/icons-material/School'
 import NavBtnStack from './NavBtnStack'
 
-interface HeaderProps {
+export interface HeaderProps {
   title?: Nullable<string>
 }
 
diff --git a/gatsby-theme-oi-wiki/src/components/Layout.tsx b/gatsby-theme-oi-wiki/src/components/Layout.tsx
new file mode 100644
index 00000000..2067e2e5
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Layout.tsx
@@ -0,0 +1,43 @@
+import Grid from '@mui/material/Grid'
+import Header, { HeaderProps } from './Header'
+import NavSidebar from './NavSidebar'
+import Main from './Main'
+import TocSidebar, { TocSidebarProps } from './TocSidebar'
+import React from 'react'
+import styled from '@mui/material/styles/styled'
+import { NavSidebarProps } from './NavSidebar/types'
+import { observer } from 'mobx-react-lite'
+
+const MainContentDiv = styled(Grid)`
+  flex-grow: 1;
+  flex-flow: row;
+`
+
+export interface LayoutProps extends HeaderProps, Partial<NavSidebarProps>, Partial<TocSidebarProps> {
+  withNav?: boolean;
+  withToc?: boolean;
+}
+
+
+const Layout: React.FC<LayoutProps> = observer((props) => {
+  const { title, withNav = true, withToc = true, pathname = '', toc = [], children } = props
+
+  return (
+    <Grid container={true} direction="column" minHeight="100vh">
+      <Header title={title}/>
+
+      <MainContentDiv className="maincontentdiv" container={true} item={true}>
+        {withNav && <NavSidebar pathname={pathname}/>}
+
+        <Main item={true} withNav={withNav} withToc={withToc}>
+          {children}
+        </Main>
+
+        {withToc && <TocSidebar toc={toc}/>}
+      </MainContentDiv>
+
+    </Grid>
+  )
+})
+
+export default Layout
diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx b/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
index 8d86d209..be88b237 100644
--- a/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
@@ -7,7 +7,7 @@ import { observer } from 'mobx-react-lite'
 import { headerStore } from '../../stores/headerStore'
 import TocContainer, { TocContainerProps } from './TocContainer'
 
-type TocSidebarProps = TocContainerProps
+export type TocSidebarProps = TocContainerProps
 
 const TocCollapseBtn = observer(() => {
   return (
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 9ffdd461..9791e32e 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -1,17 +1,12 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
-import Grid from '@mui/material/Grid'
-import Header from '../components/Header'
-import Main from '../components/Main'
-import TocSidebar from '../components/TocSidebar'
-import NavSidebar from '../components/NavSidebar'
-import styled from '@mui/material/styles/styled'
 import getComponents from '../components/customed'
 import MDRenderer from '../components/MDRenderer'
 import { HistoryLocation } from '../types/location'
 import Title from '../components/Title'
 import Meta from '../components/Meta'
+import Layout from '../components/Layout'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -60,10 +55,6 @@ interface DocProps {
   location: HistoryLocation
 }
 
-const MainContentDiv = styled(Grid)`
-  flex-grow: 1;
-  flex-flow: row;
-`
 
 const Doc: React.FC<DocProps> = (props) => {
   const { data, location } = props
@@ -91,29 +82,18 @@ const Doc: React.FC<DocProps> = (props) => {
   })
 
   return (
-    <>
-      <Grid container={true} direction="column" minHeight="100vh">
-        <Header title={title}/>
-
-        <MainContentDiv className="maincontentdiv" container={true} item={true}>
-          <NavSidebar pathname={location.pathname}/>
-
-          <Main item={true}>
-            <Title title={title} noEdit={noEdit} relativePath={relativePath}/>
-            <MDRenderer htmlAst={mdx.htmlAst} components={components}/>
-            {!noMeta && <Meta
-              modifiedTime={modifiedTime}
-              title={title}
-              tags={tags}
-              authors={authors}
-              relativePath={relativePath}/>}
-          </Main>
+    <Layout title={title} pathname={location.pathname} toc={headings}>
+      <Title noEdit={noEdit} relativePath={relativePath}>{title}</Title>
 
-          <TocSidebar toc={headings}/>
-        </MainContentDiv>
+      <MDRenderer htmlAst={mdx.htmlAst} components={components}/>
 
-      </Grid>
-    </>
+      {!noMeta && <Meta
+        modifiedTime={modifiedTime}
+        title={title}
+        tags={tags}
+        authors={authors}
+        relativePath={relativePath}/>}
+    </Layout>
   )
 }
 

From 83c33f7917c46a5294aa49a733a1fd985df3c1f1 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 4 Oct 2021 22:35:59 +0800
Subject: [PATCH 42/59] feat(main): prop withToc, withNav

---
 gatsby-theme-oi-wiki/src/components/Main.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Main.tsx b/gatsby-theme-oi-wiki/src/components/Main.tsx
index ad845eda..040b1b53 100644
--- a/gatsby-theme-oi-wiki/src/components/Main.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Main.tsx
@@ -5,6 +5,7 @@ import Grid, { GridProps } from '@mui/material/Grid'
 import Footer from './Footer'
 import { observer } from 'mobx-react-lite'
 import { navSidebarStore, tocSidebarStore } from '../stores/sidebarStore'
+import { LayoutProps } from './Layout'
 
 const Container = styled(Grid)`
   flex-grow: 1;
@@ -31,11 +32,15 @@ const Content = styled(Box)`
   }
 `
 
-const Main: React.FC<GridProps> = observer((props) => {
-  const { children, ...others } = props
-  const ml = (navSidebarStore.collapsed ? 0 : navSidebarStore.width) + 'px'
-  const mr = (tocSidebarStore.collapsed ? 0 : tocSidebarStore.width) + 'px'
-  const expanded = navSidebarStore.collapsed || tocSidebarStore.collapsed ? true : undefined
+interface MainProps extends GridProps, Pick<LayoutProps, 'withNav' | 'withToc'> {
+}
+
+const Main: React.FC<MainProps> = observer((props) => {
+  const { children, withNav = true, withToc = true, ...others } = props
+
+  const ml = (!withNav || navSidebarStore.collapsed ? 0 : navSidebarStore.width) + 'px'
+  const mr = (!withToc || tocSidebarStore.collapsed ? 0 : tocSidebarStore.width) + 'px'
+  const expanded = !withNav || !withToc || navSidebarStore.collapsed || tocSidebarStore.collapsed ? true : undefined
 
   return (
     <Container container={true} sx={{ ml, mr }} {...others}>

From b0cfdd25bbe0f2b31151694121959d7df1a273cd Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Mon, 4 Oct 2021 22:37:48 +0800
Subject: [PATCH 43/59] refactor: template Tag

---
 gatsby-theme-oi-wiki/gatsby-node.js        | 21 ++++-
 gatsby-theme-oi-wiki/src/templates/Tag.tsx | 89 ++++++++++++++++++++++
 2 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/templates/Tag.tsx

diff --git a/gatsby-theme-oi-wiki/gatsby-node.js b/gatsby-theme-oi-wiki/gatsby-node.js
index dabdc791..e406e6cb 100644
--- a/gatsby-theme-oi-wiki/gatsby-node.js
+++ b/gatsby-theme-oi-wiki/gatsby-node.js
@@ -1,4 +1,4 @@
-const _ = require('lodash')
+const kebabCase = require('lodash/kebabCase')
 const git = require('simple-git')
 const { createFilePath } = require('gatsby-source-filesystem')
 const { SitemapManager } = require('sitemap-manager')
@@ -81,9 +81,10 @@ exports.createPages = async (args) => {
 
   const { createPage } = actions
   const data = result.data
-  const docTemplate = require.resolve('./src/templates/Doc.tsx')
 
+  // Extract doc data from query
   const posts = data.postsRemark.edges
+  const docTemplate = require.resolve('./src/templates/Doc.tsx')
 
   for (const index in posts) {
     const { node } = posts[index]
@@ -105,6 +106,22 @@ exports.createPages = async (args) => {
       },
     })
   }
+
+
+  // Extract tag data from query
+  const tags = result.data.tagsGroup.group
+  const tagsTemplate = require.resolve('./src/templates/Tag.tsx')
+
+  // Make tag pages
+  tags.forEach((tag) => {
+    createPage({
+      path: `/tags/${kebabCase(tag.fieldValue)}/`,
+      component: tagsTemplate,
+      context: {
+        tag: tag.fieldValue,
+      },
+    })
+  })
 }
 
 // exports.createPages = async ({ actions, graphql, reporter }) => {
diff --git a/gatsby-theme-oi-wiki/src/templates/Tag.tsx b/gatsby-theme-oi-wiki/src/templates/Tag.tsx
new file mode 100644
index 00000000..443d3cfe
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/templates/Tag.tsx
@@ -0,0 +1,89 @@
+import { graphql } from 'gatsby'
+import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
+import { HistoryLocation } from '../types/location'
+import React from 'react'
+import Layout from '../components/Layout'
+import Title from '../components/Title'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import { Button, ListItemIcon, ListItemText } from '@mui/material'
+import { ArrowBackIos, Book } from '@mui/icons-material'
+
+export const query = graphql`
+  query TagInfo($tag: String) {
+    allMarkdownRemark(
+      limit: 2000
+      sort: { fields: [frontmatter___title], order: DESC }
+      filter: { frontmatter: { tags: { in: [$tag] } } }
+    ) {
+      totalCount
+      edges {
+        node {
+          fields {
+            slug
+          }
+          frontmatter {
+            title
+          }
+        }
+      }
+    }
+  }
+`
+
+
+interface TagsProps {
+  data: DeepWriteable<DeepRequiredNonNull<GatsbyTypes.TagInfoQuery>>;
+  location: HistoryLocation;
+  pageContext: {
+    tag: string;
+  }
+}
+
+interface TagListProps {
+  edges: TagsProps['data']['allMarkdownRemark']['edges']
+}
+
+
+const TagList: React.FC<TagListProps> = (props) => {
+  const { edges } = props
+  return (
+    <List>
+      {edges.map((edge) => {
+        const { node: { fields: { slug }, frontmatter: { title } } } = edge
+        return (
+          <ListItem button={true} divider={true} component="a" href={slug} key={slug}>
+            <ListItemIcon>
+              <Book/>
+            </ListItemIcon>
+            <ListItemText primary={title}/>
+          </ListItem>
+        )
+      })}
+    </List>
+  )
+}
+
+const Tag: React.FC<TagsProps> = (props) => {
+  const { data: { allMarkdownRemark: { edges, totalCount } }, pageContext: { tag } } = props
+
+  return (
+    <Layout title={`标签页 - ${tag}`} withToc={false} withNav={false}>
+      <Title noEdit={true} relativePath="">
+        共 {totalCount} 篇文章被打上了 <code>{tag}</code> 标签：
+      </Title>
+
+      <TagList edges={edges}/>
+
+      <Button
+        variant="outlined"
+        startIcon={<ArrowBackIos/>}
+        href="/tags"
+      >
+        所有标签
+      </Button>
+    </Layout>
+  )
+}
+
+export default Tag

From d3f7dc398c33eae0f6f57ac6bb3d7aba2608927f Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 5 Oct 2021 21:12:32 +0800
Subject: [PATCH 44/59] refactor(tag): interface TagsProps => TagProps

---
 gatsby-theme-oi-wiki/src/templates/Tag.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/templates/Tag.tsx b/gatsby-theme-oi-wiki/src/templates/Tag.tsx
index 443d3cfe..ac6e54b9 100644
--- a/gatsby-theme-oi-wiki/src/templates/Tag.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Tag.tsx
@@ -32,7 +32,7 @@ export const query = graphql`
 `
 
 
-interface TagsProps {
+interface TagProps {
   data: DeepWriteable<DeepRequiredNonNull<GatsbyTypes.TagInfoQuery>>;
   location: HistoryLocation;
   pageContext: {
@@ -41,7 +41,7 @@ interface TagsProps {
 }
 
 interface TagListProps {
-  edges: TagsProps['data']['allMarkdownRemark']['edges']
+  edges: TagProps['data']['allMarkdownRemark']['edges']
 }
 
 
@@ -64,7 +64,7 @@ const TagList: React.FC<TagListProps> = (props) => {
   )
 }
 
-const Tag: React.FC<TagsProps> = (props) => {
+const Tag: React.FC<TagProps> = (props) => {
   const { data: { allMarkdownRemark: { edges, totalCount } }, pageContext: { tag } } = props
 
   return (

From d859eed04e71b16006a84033be2183cc0fa53bf2 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Wed, 6 Oct 2021 00:20:44 +0800
Subject: [PATCH 45/59] refactor: Changelog Template

---
 gatsby-theme-oi-wiki/gatsby-node.js           |  12 ++
 gatsby-theme-oi-wiki/package.json             |   2 +-
 .../src/components/SmartLink/index.tsx        |   2 +-
 .../src/components/Time/index.tsx             |   2 +-
 .../src/templates/Changelog.tsx               | 194 ++++++++++++++++++
 yarn.lock                                     | 140 ++++++++++---
 6 files changed, 325 insertions(+), 27 deletions(-)
 create mode 100644 gatsby-theme-oi-wiki/src/templates/Changelog.tsx

diff --git a/gatsby-theme-oi-wiki/gatsby-node.js b/gatsby-theme-oi-wiki/gatsby-node.js
index e406e6cb..655feea5 100644
--- a/gatsby-theme-oi-wiki/gatsby-node.js
+++ b/gatsby-theme-oi-wiki/gatsby-node.js
@@ -85,6 +85,7 @@ exports.createPages = async (args) => {
   // Extract doc data from query
   const posts = data.postsRemark.edges
   const docTemplate = require.resolve('./src/templates/Doc.tsx')
+  const logTemplate = require.resolve('./src/templates/Changelog.tsx')
 
   for (const index in posts) {
     const { node } = posts[index]
@@ -95,6 +96,7 @@ exports.createPages = async (args) => {
 
     const log = await gitQuery(relativePath).catch(err => console.error(err))
 
+    // Make doc page
     createPage({
       path: node.fields.slug,
       component: docTemplate,
@@ -105,6 +107,16 @@ exports.createPages = async (args) => {
         next,
       },
     })
+    // Make changelog page
+    createPage({
+      path: node.fields.slug + 'changelog/',
+      component: logTemplate,
+      context: {
+        title: node.frontmatter.title,
+        changelog: log,
+        relativePath,
+      },
+    })
   }
 
 
diff --git a/gatsby-theme-oi-wiki/package.json b/gatsby-theme-oi-wiki/package.json
index e4fef7a0..848241e3 100644
--- a/gatsby-theme-oi-wiki/package.json
+++ b/gatsby-theme-oi-wiki/package.json
@@ -16,11 +16,11 @@
     "@emotion/react": "^11.4.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@material-ui/lab": "^4.0.0-alpha.58",
     "@mgtd/remark-shiki": "^2.2.0",
     "@mgtd/vssue-api-github-v3": "^2.4.8",
     "@mgtd/vssue-api-github-v4": "^2.4.5",
     "@mui/icons-material": "^5.0.1",
+    "@mui/lab": "^5.0.0-alpha.49",
     "@mui/material": "^5.0.0",
     "@use-gesture/react": "^10.0.0-beta.26",
     "ace-builds": "^1.4.12",
diff --git a/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
index a1021293..640265b0 100644
--- a/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
@@ -116,7 +116,7 @@ const SmartLink: React.FC<SmartLinkProps> = (props) => {
     return <Link {...others} href={href}>{children}</Link>
   } else if (isAbsoluteURL(href)) {
     return (
-      <StyledLink href={href} target="_blank" rel="noopener noreferrer nofollow">
+      <StyledLink href={href} target="_blank" rel="noopener noreferrer nofollow" {...others as any}>
         {children}
       </StyledLink>
     )
diff --git a/gatsby-theme-oi-wiki/src/components/Time/index.tsx b/gatsby-theme-oi-wiki/src/components/Time/index.tsx
index 7b623bc8..45b8d1ee 100644
--- a/gatsby-theme-oi-wiki/src/components/Time/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Time/index.tsx
@@ -5,7 +5,7 @@ import { Tooltip } from '@mui/material'
 
 export interface TimeProps {
   time: number | Date | string;
-  showRelative: boolean,
+  showRelative?: boolean,
 }
 
 
diff --git a/gatsby-theme-oi-wiki/src/templates/Changelog.tsx b/gatsby-theme-oi-wiki/src/templates/Changelog.tsx
new file mode 100644
index 00000000..2f60eee2
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/templates/Changelog.tsx
@@ -0,0 +1,194 @@
+import React from 'react'
+import { Link as GatsbyLink } from 'gatsby'
+import { LogResult } from 'simple-git'
+import Layout from '../components/Layout'
+import TimelineItem from '@mui/lab/TimelineItem'
+import styled from '@mui/material/styles/styled'
+import TimelineConnector from '@mui/lab/TimelineConnector'
+import TimelineDot from '@mui/lab/TimelineDot'
+import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'
+import TimelineSeparator from '@mui/lab/TimelineSeparator'
+import { css } from '@emotion/react'
+import Typography from '@mui/material/Typography'
+import TimelineContent from '@mui/lab/TimelineContent'
+import Paper from '@mui/material/Paper'
+import Time from '../components/Time'
+import SmartLink from '../components/SmartLink'
+import Grid from '@mui/material/Grid'
+import { lightBlue } from '@mui/material/colors'
+import Timeline from '@mui/lab/Timeline'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import ArrowBackIos from '@mui/icons-material/ArrowBackIos'
+import Divider from '@mui/material/Divider'
+import Title from '../components/Title'
+
+
+interface TimelineBlockProps {
+  left: React.ReactNode;
+  right: React.ReactNode;
+}
+
+interface TimelineBlockListProps {
+  changelog: LogResult;
+  relativePath: string;
+}
+
+type HistoryBlockProps = Pick<TimelineBlockListProps, 'relativePath'>
+
+interface ChangelogProps {
+  pageContext: TimelineBlockListProps & {
+    title: string;
+  }
+}
+
+
+const StyledTimelineItem = styled(TimelineItem)`
+  &:before {
+    content: unset;
+  }
+`
+
+const StyledTimelineOppositeContent = styled(TimelineOppositeContent)(({ theme }) => css`
+  width: 200px;
+  padding-top: 4px;
+  flex: unset;
+
+  ${theme.breakpoints.down('sm')} {
+    order: 1;
+    text-align: left;
+    vertical-align: top;
+  }
+`)
+
+const StyledTimelineContent = styled(TimelineContent)(({ theme }) => css`
+  ${theme.breakpoints.down('sm')} {
+    order: 2;
+    margin-top: 20px;
+    margin-left: -200px;
+  }
+`)
+
+const StyledPaper = styled(Paper)(({ theme }) => css`
+  padding: 6px 16px;
+  margin-top: ${theme.spacing(1)};
+`)
+
+const TimelineBlock: React.FC<TimelineBlockProps> = (props) => {
+  return (
+    <StyledTimelineItem>
+      <StyledTimelineOppositeContent>
+        {props.left}
+      </StyledTimelineOppositeContent>
+      <TimelineSeparator>
+        <TimelineDot variant="outlined"/>
+        <TimelineConnector/>
+      </TimelineSeparator>
+      <StyledTimelineContent>
+        <StyledPaper variant="outlined">
+          {props.right}
+        </StyledPaper>
+      </StyledTimelineContent>
+    </StyledTimelineItem>
+  )
+}
+
+const AuthorTyp = styled(Typography)`
+  margin: 0;
+  line-height: 1.6em;
+`
+
+const HashLink = styled(SmartLink)`
+  margin: 0 0 0 auto;
+  color: inherit;
+
+  &:hover {
+    text-decoration: none;
+    color: ${lightBlue[500]};
+  }
+`
+
+const TimelineBlockList: React.FC<TimelineBlockListProps> = (props) => {
+  const { changelog, relativePath } = props
+
+  return <>
+    {changelog.all.map((item, index) => {
+      const { hash, date, message, author_name: author } = item
+      return (
+        <TimelineBlock
+          key={index + '#'}
+          left={
+            <Typography variant="body2" color="textSecondary">
+              <Time time={date}/>
+            </Typography>
+          }
+          right={
+            <>
+              <Grid container={true} alignItems="center">
+                <SmartLink href={`https://github.com/${author}`}>
+                  <AuthorTyp variant="h5">
+                    {author}
+                  </AuthorTyp>
+                </SmartLink>
+                <HashLink href={`https://github.com/OI-wiki/OI-wiki/commit/${hash}/${relativePath}`}>
+                  <Typography>{hash.substr(0, 7)}</Typography>
+                </HashLink>
+              </Grid>
+              <Typography>{message}</Typography>
+            </>
+          }/>
+      )
+    })}
+  </>
+}
+
+const HistoryBlock: React.FC<HistoryBlockProps> = (props) => {
+  return (
+    <TimelineBlock
+      left="..."
+      right={
+        <>
+          <Typography>...</Typography>
+          {'在 '}
+          <SmartLink href={`https://github.com/OI-wiki/OI-wiki/commits/master/${props.relativePath}`}>GitHub</SmartLink>
+          {' 上查看完整历史'}
+        </>
+      }/>
+  )
+}
+
+const BackBlock: React.FC = () => {
+  return (
+    <Box sx={{ mt: '30px' }}>
+      <Divider/>
+      <Button
+        sx={{ mt: '8px', color: 'inherit' }}
+        size="large"
+        component={GatsbyLink}
+        to="../"
+        startIcon={<ArrowBackIos/>}>
+        返回
+      </Button>
+    </Box>
+  )
+}
+
+const ChangeLog: React.FC<ChangelogProps> = (props) => {
+  const { title, changelog, relativePath } = props.pageContext
+  const pageTitle = `更新历史${title ? ` - ${title}` : ''}`
+
+  return (
+    <Layout withNav={false} withToc={false} title={pageTitle}>
+      <Title noEdit={true} relativePath={relativePath}>{pageTitle}</Title>
+
+      <Timeline>
+        <TimelineBlockList changelog={changelog} relativePath={relativePath}/>
+        <HistoryBlock relativePath={relativePath}/>
+      </Timeline>
+
+      <BackBlock/>
+    </Layout>
+  )
+}
+
+export default ChangeLog
diff --git a/yarn.lock b/yarn.lock
index 77f85342..b952635b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1211,7 +1211,7 @@
     core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.3", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.3", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -1330,6 +1330,39 @@
   dependencies:
     chalk "^4.0.0"
 
+"@date-io/core@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.11.0.tgz#28580cda1c8228ab2c7ed6aee673ef0495f913e6"
+  integrity sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw==
+
+"@date-io/date-fns@^2.10.6":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.11.0.tgz#142fbf954eda7ad66514af7a2802d78c4ea40053"
+  integrity sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
+"@date-io/dayjs@^2.10.6":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.11.0.tgz#41f4b4b9629612e6012accffd848875d1aeffb74"
+  integrity sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
+"@date-io/luxon@^2.10.6":
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.11.1.tgz#31a72f7b5e163c74e8a3b29d8f16c4c30de6ed43"
+  integrity sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
+"@date-io/moment@^2.10.6":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.11.0.tgz#850f8dd090d401845b39276d034dbabe20224ef5"
+  integrity sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
 "@emotion/babel-plugin@^11.3.0":
   version "11.3.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
@@ -2158,26 +2191,6 @@
   dependencies:
     unist-util-visit "^1.4.1"
 
-"@material-ui/lab@^4.0.0-alpha.58":
-  version "4.0.0-alpha.60"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2"
-  integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.2"
-    clsx "^1.0.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
-"@material-ui/utils@^4.11.2":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
-  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
 "@mdx-js/util@^2.0.0-next.8":
   version "2.0.0-next.8"
   resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-2.0.0-next.8.tgz#66ecc27b78e07a3ea2eb1a8fc5a99dfa0ba96690"
@@ -2224,6 +2237,18 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+"@mui/core@5.0.0-alpha.49":
+  version "5.0.0-alpha.49"
+  resolved "https://registry.yarnpkg.com/@mui/core/-/core-5.0.0-alpha.49.tgz#e74d6ec7f83f85b55d48aa05ea6b7cefff88ce1b"
+  integrity sha512-bZ7UgH84AuKf/IT0U+knHEelDxLV0lNVFg7rKkkDfXEwUpTtAZEtZPFJjNngapSB/4MuFjaFsttex+0DGC5Z1Q==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 "@mui/icons-material@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.0.1.tgz#fb7ffeba0b3604aab4a9b91644d2fc1aabb3b4f1"
@@ -2231,6 +2256,25 @@
   dependencies:
     "@babel/runtime" "^7.15.4"
 
+"@mui/lab@^5.0.0-alpha.49":
+  version "5.0.0-alpha.49"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.49.tgz#fd26e4f76c1b28b7884c9e89bd710e7b34a99af2"
+  integrity sha512-AKTh3gAsP5GaveAoBAjEvyuuyFMYzyfUAwo7wvz9A/EiTnkc+2QXsSO7W4ykTIjNoIGBrTd9bTV/YQNK6FpPMw==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@date-io/date-fns" "^2.10.6"
+    "@date-io/dayjs" "^2.10.6"
+    "@date-io/luxon" "^2.10.6"
+    "@date-io/moment" "^2.10.6"
+    "@mui/core" "5.0.0-alpha.49"
+    "@mui/system" "^5.0.2"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    react-transition-group "^4.4.2"
+    rifm "^0.12.0"
+
 "@mui/material@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.0.0.tgz#e5397b7778615933cabee7918230b9e7019ff1b9"
@@ -2259,6 +2303,15 @@
     "@mui/utils" "^5.0.0"
     prop-types "^15.7.2"
 
+"@mui/private-theming@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.0.1.tgz#50a0ea6ad5a8d1d78072859c4bdaaa6b6584d986"
+  integrity sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@mui/utils" "^5.0.1"
+    prop-types "^15.7.2"
+
 "@mui/styled-engine@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.0.0.tgz#caa1e9c0dd434c3b0c5db32be0e17d8237a4b17d"
@@ -2268,6 +2321,15 @@
     "@emotion/cache" "^11.4.0"
     prop-types "^15.7.2"
 
+"@mui/styled-engine@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.0.1.tgz#401e3e0ff846ad1b1e7e097c8050b36d7b68343e"
+  integrity sha512-j40nCbaKr1HAZYqpX61XvZYsadYskjo3u6+pRFFaewSViAkkD1rjjbubpnh15nqVfYmijtHMZJ9/l1x1hamvfQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@emotion/cache" "^11.4.0"
+    prop-types "^15.7.2"
+
 "@mui/system@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.0.0.tgz#ed520742e417aa2b1ad34a7bbaa6ab04758305ef"
@@ -2282,6 +2344,20 @@
     csstype "^3.0.8"
     prop-types "^15.7.2"
 
+"@mui/system@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.0.2.tgz#9999ab61801810ea01c44588fd0dcc1f64dfcedc"
+  integrity sha512-K6wMbiSEYSMeYUw7zmZ2/50JFthqtuTz4OADyKc4ic2RP8ubAf/duH/nkJ4gtsKcewU4RIub0HQHl5F77WVp4Q==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@mui/private-theming" "^5.0.1"
+    "@mui/styled-engine" "^5.0.1"
+    "@mui/types" "^7.0.0"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    csstype "^3.0.9"
+    prop-types "^15.7.2"
+
 "@mui/types@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.0.0.tgz#a7398502bc9c508875aafcbe28aea599b2c3d203"
@@ -2298,6 +2374,17 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+"@mui/utils@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.0.1.tgz#d4f0f41b82db6ac273920a1b5b6a4de7879271f5"
+  integrity sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/prop-types" "^15.7.4"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -4390,7 +4477,7 @@ clone-response@1.0.2, clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
-clsx@^1.0.4, clsx@^1.1.1:
+clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -5023,7 +5110,7 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
-csstype@^3.0.8:
+csstype@^3.0.8, csstype@^3.0.9:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
   integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
@@ -12487,7 +12574,7 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.2:
+react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -13128,6 +13215,11 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
+rifm@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.0.tgz#8d3a9dc0de9c190e0de9bdc8861a91a221dc1341"
+  integrity sha512-PqOl+Mo2lyqrKiD34FPlnQ+ksD3F+a62TQlphiZshgriyHdfjn6jGyqUZhd+s3nsMYXwXYDdjrrv8wX7QsOG3g==
+
 rimraf@^2.6.2:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"

From d6578e9f93a8fd55e0a0a835082395fcd7df8680 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Wed, 6 Oct 2021 00:24:01 +0800
Subject: [PATCH 46/59] fix(header): reset Header appear status when route
 changed

---
 .../src/components/Header/index.tsx           | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Header/index.tsx b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
index 0d3184bd..1e703e25 100644
--- a/gatsby-theme-oi-wiki/src/components/Header/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Slide from '@mui/material/Slide'
 import styled from '@emotion/styled'
 import { AppBar, Button, IconButton, Tooltip } from '@mui/material'
@@ -12,6 +12,7 @@ import { Helmet } from 'react-helmet'
 import { Nullable } from '../../types/common'
 import School from '@mui/icons-material/School'
 import NavBtnStack from './NavBtnStack'
+import { useLocation } from '@reach/router'
 
 export interface HeaderProps {
   title?: Nullable<string>
@@ -32,21 +33,24 @@ const Header: React.FC<HeaderProps> = observer((props) => {
   const { title } = props
   const { title: siteTitle, description } = useSiteMetadata()
   const [elevation, setElevation] = useState(0)
+  const location = useLocation()
 
-  if (typeof window !== 'undefined') {
-    useScroll(({ xy: [, y], delta: [, dy] }) => {
-      headerStore.setOnTop(y <= DIS)
-      setElevation(y > 0 ? 2 : 0)
-      if (dy < -10 || y <= DIS) headerStore.setAppear(true)
-      if (dy > 5) headerStore.setAppear(false)
-    }, {
-      target: window,
-      enabled: !headerStore.appearLock,
-      eventOptions: {
-        passive: true,
-      },
-    })
-  }
+  useEffect(() => {
+    if (window?.scrollY <= DIS) headerStore.setAppear(true)
+  }, [location])
+
+  useScroll(({ xy: [, y], delta: [, dy] }) => {
+    headerStore.setOnTop(y <= DIS)
+    setElevation(y > 0 ? 2 : 0)
+    if (dy < -10 || y <= DIS) headerStore.setAppear(true)
+    if (dy > 5) headerStore.setAppear(false)
+  }, {
+    target: typeof window === 'undefined' ? null : window,
+    enabled: !headerStore.appearLock,
+    eventOptions: {
+      passive: true,
+    },
+  })
 
   return (
     <>

From 8a683e856bd0d4814598f256c874de3509daea89 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Wed, 6 Oct 2021 20:59:02 +0800
Subject: [PATCH 47/59] refactor: 404 page

---
 gatsby-theme-oi-wiki/src/pages/404.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 gatsby-theme-oi-wiki/src/pages/404.tsx

diff --git a/gatsby-theme-oi-wiki/src/pages/404.tsx b/gatsby-theme-oi-wiki/src/pages/404.tsx
new file mode 100644
index 00000000..625e294a
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/pages/404.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import Layout from '../components/Layout'
+import Title from '../components/Title'
+import Typography from '@mui/material/Typography'
+
+
+const NotFoundPage: React.FC = () => {
+  return (
+    <Layout withNav={false} withToc={false} title="404">
+      <Title noEdit={true} relativePath="">404 is Found!</Title>
+      <Typography>如果你是无意间来到这里的，请在下方告诉我们你是从哪里点进来的哦。</Typography>
+    </Layout>
+  )
+}
+
+export default NotFoundPage

From 4efd62b65c7eda2bc3c8fb56b99e956be3be9315 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Wed, 6 Oct 2021 22:21:24 +0800
Subject: [PATCH 48/59] refactor: Pages page

---
 gatsby-theme-oi-wiki/src/pages/pages.tsx | 181 +++++++++++++++++++++++
 1 file changed, 181 insertions(+)
 create mode 100644 gatsby-theme-oi-wiki/src/pages/pages.tsx

diff --git a/gatsby-theme-oi-wiki/src/pages/pages.tsx b/gatsby-theme-oi-wiki/src/pages/pages.tsx
new file mode 100644
index 00000000..2899783e
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/pages/pages.tsx
@@ -0,0 +1,181 @@
+import times from 'lodash/times'
+import { graphql, useStaticQuery } from 'gatsby'
+import React, { useMemo, useState } from 'react'
+import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
+import Card from '@mui/material/Card'
+import CardActions from '@mui/material/CardActions'
+import CardContent from '@mui/material/CardContent'
+import Tags from '../components/Tags'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import Autocomplete from '@mui/material/Autocomplete'
+import TextField from '@mui/material/TextField'
+import useTheme from '@mui/material/styles/useTheme'
+import Layout from '../components/Layout'
+import SmartLink from '../components/SmartLink'
+import match from 'autosuggest-highlight/match'
+import parse from 'autosuggest-highlight/parse'
+import Title from '../components/Title'
+
+
+interface PageItemInfo {
+  id: string;
+  frontmatter: Pick<GatsbyTypes.MarkdownRemarkFrontmatter, 'title' | 'tags'>;
+  fields: Pick<GatsbyTypes.MarkdownRemarkFields, 'slug'>;
+}
+
+interface PageItemProps extends DeepWriteable<DeepRequiredNonNull<PageItemInfo>> {
+  linkComponent: React.ElementType
+}
+
+
+const PageItem: React.FC<PageItemProps> = (props) => {
+  const {
+    frontmatter: { title, tags },
+    fields: { slug: link },
+    linkComponent,
+  } = props
+
+  return (
+    <Grid item={true}>
+      <Card variant="outlined">
+        <CardContent>
+          <Typography variant="h6" component={linkComponent} to={link}>
+            {title}
+          </Typography>
+        </CardContent>
+
+        <CardActions>
+          <Tags tags={tags}/>
+        </CardActions>
+      </Card>
+    </Grid>
+  )
+}
+
+function matchTags(pageTags: string[], selectedTags: string[]): boolean {
+  if (selectedTags.length === 0) return true
+  else if (!pageTags) return false
+  else return selectedTags.every((v) => pageTags.includes(v))
+}
+
+interface ColumnProps {
+  items: Omit<PageItemProps, 'linkComponent'>[];
+  linkComponent: PageItemProps['linkComponent'];
+}
+
+const Column: React.FC<ColumnProps> = ({ items, linkComponent }) => (
+  <Grid container={true} item={true} xs={true} direction="column" spacing={2}>
+    {items.map(props => <PageItem key={props.id} {...props} linkComponent={linkComponent}/>)}
+  </Grid>
+)
+
+interface GridItemsProps {
+  filteredItems: ColumnProps['items'];
+  linkComponent: PageItemProps['linkComponent'];
+}
+
+const GridItems: React.FC<GridItemsProps> = (props) => {
+  const { filteredItems } = props
+
+  const theme = useTheme()
+  const columnCount = useMemo(() => {
+    const matchIndex = theme.breakpoints.keys.reverse().findIndex((key, i, arr) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const matches = useMediaQuery(theme.breakpoints.up(key), { noSsr: true })
+      return matches || i === arr.length - 1
+    })
+    return 5 - matchIndex
+  }, [theme.breakpoints])
+
+  return (
+    <>
+      {times(columnCount).map(i =>
+        <Column
+          key={i}
+          items={filteredItems.filter((_, idx) => idx % columnCount === i)}
+          linkComponent={props.linkComponent}
+        />,
+      )}
+    </>
+  )
+}
+
+const PagesPage: React.FC = () => {
+  const { allMarkdownRemark: { edges, group } } = useStaticQuery<GatsbyTypes.PageListQuery>(graphql`
+    query PageList {
+      allMarkdownRemark {
+        edges {
+          node {
+            id
+            frontmatter {
+              title
+              tags
+            }
+            fields {
+              slug
+            }
+          }
+        }
+        group(field: frontmatter___tags) {
+          fieldValue
+          totalCount
+        }
+      }
+    }`) as DeepWriteable<DeepRequiredNonNull<GatsbyTypes.PageListQuery>>
+
+  const articles = edges.map(x => x.node)
+  const tags = group.map(({ fieldValue }) => fieldValue)
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const filteredItems = articles.filter((v) => !!v.frontmatter.title && matchTags(v.frontmatter.tags, selectedTags))
+  const title = '目录页'
+
+  return (
+    <Layout withToc={false} withNav={false} title={title}>
+      <Title noEdit={true} relativePath="">{title}</Title>
+      <Grid container={true} spacing={2} justifyContent="center">
+        <Grid item={true} xs={12}>
+          <Autocomplete
+            value={selectedTags}
+            onChange={(_, v) => {
+              setSelectedTags(v)
+            }}
+            multiple={true}
+            disableCloseOnSelect={true}
+            filterSelectedOptions={true}
+            options={tags}
+            getOptionLabel={(option) => option}
+            renderOption={(_, option, { inputValue }) => {
+              const matches = match(option, inputValue)
+              const parts = parse(option, matches)
+              return parts.map((part, index) => (
+                <span
+                  key={index}
+                  style={{ fontWeight: part.highlight ? 700 : 400 }}
+                >
+                  {part.text}
+                </span>
+              ))
+            }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                variant="outlined"
+                placeholder="键入以按标签搜索..."
+              />
+            )}
+          />
+
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container spacing={2} justifyContent="center">
+            <GridItems filteredItems={filteredItems} linkComponent={SmartLink}/>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Layout>
+  )
+}
+
+export default PagesPage

From d88439e3b912397bac3fe724b934d2b4bd4a2ed4 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Thu, 7 Oct 2021 23:58:54 +0800
Subject: [PATCH 49/59] refactor: page Play and related components

---
 .../src/components/CodeEditor/index.tsx       |  45 ----
 .../src/components/Output.tsx                 | 144 -----------
 .../{ => Play}/CodeEditor/Editor.tsx          |  23 +-
 .../src/components/Play/CodeEditor/index.tsx  |  39 +++
 .../components/{ => Play}/CodeLangMenu.tsx    |  22 +-
 .../src/components/{ => Play}/Indicator.tsx   |  17 +-
 .../src/components/Play/Output.tsx            | 152 ++++++++++++
 .../{lib/play => components/Play}/codeLang.ts |   0
 .../play => components/Play}/useRunner.ts     |  38 ++-
 .../src/components/customed/Codeblock.tsx     |   2 +-
 .../src/hooks/useThemeMode.ts                 |   7 +
 gatsby-theme-oi-wiki/src/pages/play.tsx       | 223 ++++++++++++++++++
 .../src/stores/cssVarsStore.ts                |   8 +-
 gatsby-theme-oi-wiki/src/types/ThemeMode.ts   |   1 +
 14 files changed, 476 insertions(+), 245 deletions(-)
 delete mode 100644 gatsby-theme-oi-wiki/src/components/CodeEditor/index.tsx
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Output.tsx
 rename gatsby-theme-oi-wiki/src/components/{ => Play}/CodeEditor/Editor.tsx (51%)
 create mode 100644 gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx
 rename gatsby-theme-oi-wiki/src/components/{ => Play}/CodeLangMenu.tsx (65%)
 rename gatsby-theme-oi-wiki/src/components/{ => Play}/Indicator.tsx (77%)
 create mode 100644 gatsby-theme-oi-wiki/src/components/Play/Output.tsx
 rename gatsby-theme-oi-wiki/src/{lib/play => components/Play}/codeLang.ts (100%)
 rename gatsby-theme-oi-wiki/src/{lib/play => components/Play}/useRunner.ts (77%)
 create mode 100644 gatsby-theme-oi-wiki/src/hooks/useThemeMode.ts
 create mode 100644 gatsby-theme-oi-wiki/src/pages/play.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/types/ThemeMode.ts

diff --git a/gatsby-theme-oi-wiki/src/components/CodeEditor/index.tsx b/gatsby-theme-oi-wiki/src/components/CodeEditor/index.tsx
deleted file mode 100644
index 0eba0c29..00000000
--- a/gatsby-theme-oi-wiki/src/components/CodeEditor/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { makeStyles, Paper, Typography } from '@material-ui/core'
-import React from 'react'
-
-import type { IAceEditorProps } from 'react-ace'
-import type { LangType } from '../../lib/play/codeLang'
-
-export interface CodeEditorProps extends Omit<IAceEditorProps, 'mode'> {
-  title: string
-  lang?: LangType
-}
-
-const useStyles = makeStyles({
-  paper: {
-    height: 'calc(100% - 32px)',
-  },
-  editor: {
-    height: '100%',
-  },
-})
-
-// fix ssr issue related to react-ace
-const Editor = React.lazy(() => import('./Editor'))
-
-const CodeEditor: React.FC<CodeEditorProps> = ({
-  title,
-  lang,
-  ...aceProps
-}) => {
-  const classes = useStyles()
-
-  return (
-    <>
-      <Typography variant="h6">{title}</Typography>
-      <Paper className={classes.paper}>
-        {typeof window !== 'undefined' && (
-          <React.Suspense fallback={<div>Loading editor...</div>}>
-            <Editor className={classes.editor} lang={lang} {...aceProps} />
-          </React.Suspense>
-        )}
-      </Paper>
-    </>
-  )
-}
-
-export default CodeEditor
diff --git a/gatsby-theme-oi-wiki/src/components/Output.tsx b/gatsby-theme-oi-wiki/src/components/Output.tsx
deleted file mode 100644
index 03a8c8e4..00000000
--- a/gatsby-theme-oi-wiki/src/components/Output.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import {
-  Box,
-  Divider,
-  Grid,
-  makeStyles,
-  Paper,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@material-ui/core'
-import AccessTime from '@material-ui/icons/AccessTime'
-import Storage from '@material-ui/icons/Storage'
-import React from 'react'
-import type { TransformedResponseData } from '../lib/play/useRunner'
-import Indicator, { IndicatorProps } from './Indicator'
-import useDarkMode from '../lib/useDarkMode'
-import clsx from 'clsx'
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    minHeight: 240,
-    maxHeight: 400,
-    overflow: 'auto',
-    padding: `0 ${theme.spacing(2)}px`,
-    '& > pre': {
-      margin: 0,
-      paddingBottom: theme.spacing(2),
-      fontSize: 14,
-    },
-  },
-  statusLine: {
-    '& > *': {
-      margin: `${theme.spacing(1)}px 0`,
-    },
-  },
-  basicInfo: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginLeft: 'auto',
-  },
-  basicInfoSm: {
-    alignItems: 'flex-end',
-    flexDirection: 'column',
-  },
-  measurement: ({ darkMode }: { darkMode: boolean }) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    color: theme.palette.grey[darkMode ? 400 : 600],
-    '& > svg': {
-      marginLeft: 16,
-      marginRight: 4,
-    },
-  }),
-  compilationTitle: {
-    color: theme.palette.warning.dark,
-    fontWeight: 'bold',
-  },
-  errorTitle: {
-    color: theme.palette.error.dark,
-    fontWeight: 'bold',
-  },
-  outTitle: {
-    color: theme.palette.info.dark,
-    fontWeight: 'bold',
-  },
-}))
-
-const statusSeverityMap: Record<
-  TransformedResponseData['status'] | 'No Status Info',
-  IndicatorProps['type']
-> = Object.freeze({
-  'Compile Error': 'warning',
-  'Run Finished': 'success',
-  'Time Limit Exceeded': 'error',
-  'Memory Limit Exceeded': 'error',
-  'Runtime Error': 'error',
-  'Execute Failure': 'error',
-  'No Status Info': 'info',
-})
-
-const Output = React.forwardRef<
-  unknown,
-  { output: TransformedResponseData | null }
->(({ output }, ref) => {
-  const classes = useStyles({ darkMode: useDarkMode() })
-  const theme = useTheme()
-  const matches = useMediaQuery(theme.breakpoints.down('xs'))
-
-  const {
-    time = '?',
-    memory = '?',
-    status = 'No Status Info',
-    ceInfo,
-    stdout,
-    stderr,
-  } = output || {}
-
-  return (
-    <Paper ref={ref} className={classes.root}>
-      <Grid container className={classes.statusLine}>
-        <Grid item>
-          <Typography variant="h6">提交详情</Typography>
-        </Grid>
-        <Box
-          className={clsx(classes.basicInfo, {
-            [classes.basicInfoSm]: matches,
-          })}
-        >
-          <Indicator type={statusSeverityMap[status]} msg={status} />
-          <Box style={matches ? { marginTop: 8, marginBottom: -28 } : {}}>
-            <Box className={classes.measurement}>
-              <AccessTime fontSize="small" />
-              <Typography display="inline">{time}ms</Typography>
-            </Box>
-            <Box className={classes.measurement}>
-              <Storage fontSize="small" />
-              <Typography display="inline">{memory}KB</Typography>
-            </Box>
-          </Box>
-        </Box>
-      </Grid>
-      {ceInfo && (
-        <>
-          <Typography className={classes.compilationTitle}>编译信息</Typography>
-          <Divider />
-          <pre>{ceInfo}</pre>
-        </>
-      )}
-      {stderr && (
-        <>
-          <Typography className={classes.errorTitle}>错误信息</Typography>
-          <Divider />
-          <pre>{stderr}</pre>
-        </>
-      )}
-      <Typography className={classes.outTitle}>输出</Typography>
-      <Divider />
-      <pre>{stdout === '' ? '似乎没有输出哦...' : stdout}</pre>
-    </Paper>
-  )
-})
-
-export default Output
diff --git a/gatsby-theme-oi-wiki/src/components/CodeEditor/Editor.tsx b/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/Editor.tsx
similarity index 51%
rename from gatsby-theme-oi-wiki/src/components/CodeEditor/Editor.tsx
rename to gatsby-theme-oi-wiki/src/components/Play/CodeEditor/Editor.tsx
index eb9910f6..ef277a2f 100644
--- a/gatsby-theme-oi-wiki/src/components/CodeEditor/Editor.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/Editor.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import Ace from 'react-ace'
-import useDarkMode from '../../lib/useDarkMode'
-import { langModeMap } from '../../lib/play/codeLang'
+import Ace, { IAceEditorProps } from 'react-ace'
+import useThemeMode from '../../../hooks/useThemeMode'
 
 // add language to support here
 import 'ace-builds/src-noconflict/mode-c_cpp'
@@ -10,22 +9,24 @@ import 'ace-builds/src-noconflict/mode-python'
 // light/dark theme
 import 'ace-builds/src-noconflict/theme-chrome'
 import 'ace-builds/src-noconflict/theme-tomorrow_night'
+import { langModeMap, LangType } from '../codeLang'
 
-import { CodeEditorProps } from '.'
+export interface EditorProps extends Omit<IAceEditorProps, 'mode'> {
+  lang?: LangType
+}
 
-const Editor: React.FC<Omit<CodeEditorProps, 'title'>> = ({
-  lang,
-  ...aceProps
-}) => {
-  const isDarkMode = useDarkMode()
+const Editor: React.FC<EditorProps> = (props) => {
+  const { lang, ...aceProps } = props
+  const themeMode = useThemeMode()
 
   return (
     <Ace
-      theme={isDarkMode ? 'tomorrow_night' : 'chrome'}
+      theme={themeMode === 'dark' ? 'tomorrow_night' : 'chrome'}
+      mode={lang ? langModeMap[lang] : 'text'}
       width=""
       height=""
       fontSize={13}
-      mode={lang ? langModeMap[lang] : 'text'}
+
       {...aceProps}
     />
   )
diff --git a/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx b/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx
new file mode 100644
index 00000000..daa9d39d
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import { NoSsr } from '@mui/material'
+import { EditorProps } from './Editor'
+
+export interface CodeEditorProps extends EditorProps {
+  title: string
+}
+
+const StyledPaper = styled(Paper)`
+  height: calc(100% - 32px);
+`
+
+const editorStyle = {
+  height: '100%',
+}
+
+const Editor = React.lazy(() => import('./Editor'))
+
+const CodeEditor: React.FC<CodeEditorProps> = (props) => {
+  const { title, lang, ...aceProps } = props
+
+  return (
+    <>
+      <Typography variant="h6">{title}</Typography>
+      <StyledPaper>
+        <NoSsr>
+          <React.Suspense fallback={<div>Loading editor...</div>}>
+            <Editor style={editorStyle} lang={lang} {...aceProps} />
+          </React.Suspense>
+        </NoSsr>
+      </StyledPaper>
+    </>
+  )
+}
+
+export default CodeEditor
diff --git a/gatsby-theme-oi-wiki/src/components/CodeLangMenu.tsx b/gatsby-theme-oi-wiki/src/components/Play/CodeLangMenu.tsx
similarity index 65%
rename from gatsby-theme-oi-wiki/src/components/CodeLangMenu.tsx
rename to gatsby-theme-oi-wiki/src/components/Play/CodeLangMenu.tsx
index 323ec797..825c41a3 100644
--- a/gatsby-theme-oi-wiki/src/components/CodeLangMenu.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Play/CodeLangMenu.tsx
@@ -1,21 +1,19 @@
-import type { ButtonProps } from '@material-ui/core'
-import { Button, Menu, MenuItem } from '@material-ui/core'
-import ArrowDropDownOutlined from '@material-ui/icons/ArrowDropDownOutlined'
 import React, { useCallback, useState } from 'react'
-import type { LangType } from '../lib/play/codeLang'
-import { langList } from '../lib/play/codeLang'
+import Menu from '@mui/material/Menu'
+import { Nullable } from '../../types/common'
+import ArrowDropDownOutlined from '@mui/icons-material/ArrowDropDownOutlined'
+import Button, { ButtonProps } from '@mui/material/Button'
+import MenuItem from '@mui/material/MenuItem'
+import { langList, LangType } from './codeLang'
 
 interface CodeLangMenuProps extends ButtonProps {
   lang: LangType
   setLang: React.Dispatch<React.SetStateAction<LangType>>
 }
 
-const CodeLangMenu: React.FC<CodeLangMenuProps> = ({
-  lang,
-  setLang,
-  ...buttonProps
-}) => {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const CodeLangMenu: React.FC<CodeLangMenuProps> = (props) => {
+  const { lang, setLang, ...buttonProps } = props
+  const [anchorEl, setAnchorEl] = useState<Nullable<HTMLElement>>(null)
 
   const handleButtonClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(e.currentTarget)
@@ -33,7 +31,7 @@ const CodeLangMenu: React.FC<CodeLangMenuProps> = ({
     <>
       <Button
         onClick={handleButtonClick}
-        endIcon={<ArrowDropDownOutlined />}
+        endIcon={<ArrowDropDownOutlined/>}
         {...buttonProps}
       >
         {lang}
diff --git a/gatsby-theme-oi-wiki/src/components/Indicator.tsx b/gatsby-theme-oi-wiki/src/components/Play/Indicator.tsx
similarity index 77%
rename from gatsby-theme-oi-wiki/src/components/Indicator.tsx
rename to gatsby-theme-oi-wiki/src/components/Play/Indicator.tsx
index 17a378c4..f8c597a8 100644
--- a/gatsby-theme-oi-wiki/src/components/Indicator.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Play/Indicator.tsx
@@ -31,12 +31,15 @@ export interface IndicatorProps {
   msg: string
 }
 
-const Indicator: React.FC<IndicatorProps> = ({ type, msg }: IndicatorProps) => {
-  return (
-    <StyledTyp className={type}>
-      {msg}
-    </StyledTyp>
-  )
-}
+const Indicator = React.forwardRef<HTMLSpanElement, IndicatorProps>(
+  function Indicator(props, ref) {
+    const { type, msg } = props
+    return (
+      <StyledTyp className={type} ref={ref}>
+        {msg}
+      </StyledTyp>
+    )
+  },
+)
 
 export default Indicator
diff --git a/gatsby-theme-oi-wiki/src/components/Play/Output.tsx b/gatsby-theme-oi-wiki/src/components/Play/Output.tsx
new file mode 100644
index 00000000..54201d87
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Play/Output.tsx
@@ -0,0 +1,152 @@
+import React from 'react'
+import type { TransformedResponseData } from './useRunner'
+import Indicator, { IndicatorProps } from './Indicator'
+import { Nullable } from '../../types/common'
+import styled from '@mui/material/styles/styled'
+import Paper from '@mui/material/Paper'
+import Grid from '@mui/material/Grid'
+import { theme } from '../../theme'
+import { css } from '@emotion/react'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import AccessTime from '@mui/icons-material/AccessTime'
+import Storage from '@mui/icons-material/Storage'
+import Divider from '@mui/material/Divider'
+
+const StyledPaper = styled(Paper)(({ theme }) => css`
+  min-height: 240px;
+  max-height: 400px;
+  overflow: auto;
+  padding: 0 ${theme.spacing(2)};
+`)
+
+const StyledPre = styled('pre')(({ theme }) => css`
+  margin: 0;
+  padding-bottom: ${theme.spacing(2)};
+  font-size: 0.85rem;
+`)
+
+const StatusLineGrid = styled(Grid)`
+  justify-content: space-between;
+
+  & > * {
+    margin: ${theme.spacing(1)}px 0;
+  }
+`
+
+const BasicInfoGrid = styled(Grid)(({ theme }) => css`
+  flex-flow: row;
+  align-items: center;
+  margin-left: auto;
+
+  ${theme.breakpoints.down('xs')} {
+    align-items: flex-end;
+    flex-flow: column;
+  }
+`)
+
+const MeasurementContainerBox = styled(Box)(({ theme }) => css`
+  ${theme.breakpoints.down('xs')} {
+    margin-top: 0;
+    margin-bottom: -28px;
+  }
+`)
+
+const MeasurementBox = styled(Box)(({ theme }) => css`
+  display: inline-flex;
+  align-items: center;
+  color: ${theme.palette.grey[600]};
+
+  @media (prefers-color-scheme: dark) {
+    color: ${theme.palette.grey[400]};
+  }
+
+  & > svg {
+    margin-left: 16px;
+    margin-right: 4px;
+  }
+`)
+
+const CompilationTitle = styled(Typography)(({ theme }) => css`
+  color: ${theme.palette.warning.dark};
+  font-weight: bold;
+`)
+
+const ErrorTitle = styled(Typography)(({ theme }) => css`
+  color: ${theme.palette.error.dark};
+  font-weight: bold;
+`)
+
+const OutTitle = styled(Typography)(({ theme }) => css`
+  color: ${theme.palette.info.dark};
+  font-weight: bold;
+`)
+
+const statusSeverityMap: Record<TransformedResponseData['status'] | 'No Status Info',
+  IndicatorProps['type']> = Object.freeze({
+  'Compile Error': 'warning',
+  'Run Finished': 'success',
+  'Time Limit Exceeded': 'error',
+  'Memory Limit Exceeded': 'error',
+  'Runtime Error': 'error',
+  'Execute Failure': 'error',
+  'No Status Info': 'info',
+})
+
+interface OutputProps {
+  output: Nullable<TransformedResponseData>
+}
+
+const Output = React.forwardRef<HTMLDivElement, OutputProps>(({ output }, ref) => {
+  const {
+    time = '?',
+    memory = '?',
+    status = 'No Status Info',
+    ceInfo,
+    stdout,
+    stderr,
+  } = output || {}
+
+  return (
+    <StyledPaper ref={ref}>
+      <StatusLineGrid container={true}>
+        <Grid item={true}>
+          <Typography variant="h6">提交详情</Typography>
+        </Grid>
+        <BasicInfoGrid container={true} item={true} width="auto">
+          <Indicator type={statusSeverityMap[status]} msg={status}/>
+          <MeasurementContainerBox>
+            <MeasurementBox>
+              <AccessTime fontSize="small"/>
+              <Typography display="inline">{time}ms</Typography>
+            </MeasurementBox>
+            <MeasurementBox>
+              <Storage fontSize="small"/>
+              <Typography display="inline">{memory}KB</Typography>
+            </MeasurementBox>
+          </MeasurementContainerBox>
+        </BasicInfoGrid>
+      </StatusLineGrid>
+
+      {ceInfo && (
+        <>
+          <CompilationTitle>编译信息</CompilationTitle>
+          <Divider/>
+          <StyledPre>{ceInfo}</StyledPre>
+        </>
+      )}
+      {stderr && (
+        <>
+          <ErrorTitle>错误信息</ErrorTitle>
+          <Divider/>
+          <StyledPre>{stderr}</StyledPre>
+        </>
+      )}
+      <OutTitle>输出</OutTitle>
+      <Divider/>
+      <StyledPre>{stdout === '' ? '似乎没有输出哦...' : stdout}</StyledPre>
+    </StyledPaper>
+  )
+})
+
+export default Output
diff --git a/gatsby-theme-oi-wiki/src/lib/play/codeLang.ts b/gatsby-theme-oi-wiki/src/components/Play/codeLang.ts
similarity index 100%
rename from gatsby-theme-oi-wiki/src/lib/play/codeLang.ts
rename to gatsby-theme-oi-wiki/src/components/Play/codeLang.ts
diff --git a/gatsby-theme-oi-wiki/src/lib/play/useRunner.ts b/gatsby-theme-oi-wiki/src/components/Play/useRunner.ts
similarity index 77%
rename from gatsby-theme-oi-wiki/src/lib/play/useRunner.ts
rename to gatsby-theme-oi-wiki/src/components/Play/useRunner.ts
index 9e38f7fe..984121dd 100644
--- a/gatsby-theme-oi-wiki/src/lib/play/useRunner.ts
+++ b/gatsby-theme-oi-wiki/src/components/Play/useRunner.ts
@@ -1,9 +1,8 @@
-/* eslint-disable camelcase */
 import type { AxiosResponse } from 'axios'
 import axios from 'axios'
 import has from 'lodash/has'
 import { useState } from 'react'
-import type { LangType } from './codeLang'
+import { LangType } from './codeLang'
 
 export interface RunnerApiRequestData {
   code: string
@@ -38,8 +37,8 @@ export type TransformedResponseData = {
   [K in keyof RunnerApiResponseData as K extends 'message'
     ? never
     : K extends keyof typeof responseKeyTransformMap
-    ? (typeof responseKeyTransformMap)[K]
-    : K]-?: RunnerApiResponseData[K]
+      ? (typeof responseKeyTransformMap)[K]
+      : K]-?: RunnerApiResponseData[K]
 }
 
 function transformResponseData(
@@ -58,13 +57,17 @@ function transformResponseData(
     }, {} as TransformedResponseData)
 }
 
-function responseDataGuard (data: any): data is RunnerApiResponseData {
+function responseDataGuard(data: any): data is RunnerApiResponseData {
   return typeof data.message === 'string'
 }
 
+function errResponseGuard(err: unknown): err is { response: AxiosResponse } {
+  return has(err, 'response')
+}
+
 export const runnerApi = 'https://api2.duck-ac.cn/259ea31bf8ab6b59/duck-api/run'
 
-export function useRunner (
+export function useRunner(
   req: RunnerApiRequestData,
   onResponse?: (res: TransformedResponseData) => void,
   onError?: (msg: string) => void,
@@ -84,25 +87,19 @@ export function useRunner (
         data: req,
       })
       .then(({ data }) => {
-        if (!responseDataGuard(data)) {
-          throw Error(`Incompatible response data format: ${data}`)
-        }
-        if (data.message === 'OK') {
-          if (onResponse) onResponse(transformResponseData(data))
+        if (responseDataGuard(data)) {
+          if (data.message === 'OK') {
+            onResponse?.(transformResponseData(data))
+          } else {
+            throw new Error(data.message)
+          }
         } else {
-          throw new Error(data.message)
+          throw Error(`Incompatible response data format: ${data}`)
         }
       })
       .catch((err) => {
-        // TODO: mark err as unknown for better type safety
-        // https://github.com/microsoft/TypeScript/pull/41013
         let msg = String(err)
 
-        function errResponseGuard(
-          err: unknown,
-        ): err is { response: AxiosResponse } {
-          return has(err, 'response')
-        }
         if (errResponseGuard(err)) {
           msg = `Server responded ${err.response.data} with code ${err.response.status}`
         } else if (has(err, 'request')) {
@@ -112,8 +109,9 @@ export function useRunner (
         }
 
         if (onError) onError(msg)
-        else if (process.env.NODE_ENV === 'development')
+        else if (process.env.NODE_ENV === 'development') {
           console.error(`Unhandled exception in code runner: ${err}`)
+        }
       })
       .finally(() => {
         setWaiting(false)
diff --git a/gatsby-theme-oi-wiki/src/components/customed/Codeblock.tsx b/gatsby-theme-oi-wiki/src/components/customed/Codeblock.tsx
index d074dc6c..d75386e7 100644
--- a/gatsby-theme-oi-wiki/src/components/customed/Codeblock.tsx
+++ b/gatsby-theme-oi-wiki/src/components/customed/Codeblock.tsx
@@ -1,4 +1,3 @@
-import { LangType } from '../../lib/play/codeLang'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
 import Box from '@mui/material/Box'
 import styled from '@mui/material/styles/styled'
@@ -11,6 +10,7 @@ import AssignmentOutlined from '@mui/icons-material/AssignmentOutlined'
 import CodeOutlined from '@mui/icons-material/CodeOutlined'
 import { navigate } from 'gatsby'
 import has from 'lodash/has'
+import { LangType } from '../../utils/codeLang'
 
 interface ToolBtnProps extends IconButtonProps {
   title: string;
diff --git a/gatsby-theme-oi-wiki/src/hooks/useThemeMode.ts b/gatsby-theme-oi-wiki/src/hooks/useThemeMode.ts
new file mode 100644
index 00000000..f3f834c2
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/hooks/useThemeMode.ts
@@ -0,0 +1,7 @@
+import { ThemeMode } from '../types/ThemeMode'
+
+const useThemeMode = (): ThemeMode => {
+  return document.documentElement.dataset.theme as ThemeMode
+}
+
+export default useThemeMode
diff --git a/gatsby-theme-oi-wiki/src/pages/play.tsx b/gatsby-theme-oi-wiki/src/pages/play.tsx
new file mode 100644
index 00000000..4965ea96
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/pages/play.tsx
@@ -0,0 +1,223 @@
+import { graphql, PageProps, useStaticQuery } from 'gatsby'
+import React, { useCallback, useRef, useState } from 'react'
+import CodeEditor from '../components/Play/CodeEditor'
+import Indicator, { IndicatorProps } from '../components/Play/Indicator'
+import CodeLangMenu from '../components/Play/CodeLangMenu'
+import Output from '../components/Play/Output'
+import { TransformedResponseData, useRunner } from '../components/Play/useRunner'
+import Layout from '../components/Layout'
+import Grid from '@mui/material/Grid'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import Collapse from '@mui/material/Collapse'
+import Fade from '@mui/material/Fade'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Switch from '@mui/material/Switch'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
+import Link from '@mui/material/Link'
+import { Nullable } from '../types/common'
+import Button from '@mui/material/Button'
+import PlayArrow from '@mui/icons-material/PlayArrow'
+import Title from '../components/Title'
+import { LangType } from '../components/Play/codeLang'
+
+export type PlaygroundLocationState = Partial<{
+  lang: LangType
+  code: string
+  input: string
+}>
+
+const LangMenu = styled(CodeLangMenu)`
+  width: 96px;
+  text-transform: none;
+`
+
+const EditorContainerGrid = styled(Grid)(({ theme }) => css`
+  margin-bottom: ${theme.spacing(2)};
+  //align-items: stretch;
+`)
+
+const EditorGrid = styled(Grid)`
+  min-height: 400px;
+`
+
+const Progress = styled(CircularProgress)`
+  position: absolute;
+  left: 50%;
+  right: 50%;
+  margin: auto -12px;
+`
+
+const FooterContainer = styled(Box)(({ theme }) => css`
+  text-align: center;
+  margin-top: ${theme.spacing(4)};
+`)
+
+const FooterLink = styled(Link)`
+  color: #fd9f40;
+
+  &:hover {
+    color: #fc6012;
+  }
+
+  & > img {
+    display: inline;
+    vertical-align: middle;
+    margin-top: -4px;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`
+
+const Footer: React.FC = () => {
+  const judgeDuckImgUrl: string = useStaticQuery(graphql`
+    {
+      allFile(filter: { name: { eq: "judgeduck" } }) {
+        edges {
+          node {
+            publicURL
+          }
+        }
+      }
+    }
+  `).allFile.edges[0].node.publicURL
+
+  return (
+    <FooterContainer>
+      <FooterLink
+        href="https://duck.ac/"
+        underline="none"
+        target="_blank"
+        variant="h6"
+      >
+        {'Powered by '}
+        <img src={judgeDuckImgUrl} alt="JudgeDuck" height={30}/>
+      </FooterLink>
+    </FooterContainer>
+  )
+}
+
+
+const Playground: React.FC<PageProps<unknown, unknown, PlaygroundLocationState>> = ({ location }) => {
+  // state maybe undefined/null in gatsby build
+  const locState = location.state ?? {}
+
+  const [lang, setLang] = useState<LangType>(locState.lang ?? 'C++')
+  const [o2, setO2] = useState(false)
+  const [code, setCode] = useState(locState.code ?? '')
+  const [input, setInput] = useState(locState.input ?? '')
+  const [output, setOutput] = useState<TransformedResponseData | null>(null)
+  const [runInfo, setRunInfo] = useState<IndicatorProps | null>(null)
+
+  const outputRef = useRef<Nullable<HTMLDivElement>>(null)
+
+  const runCodeCb = useCallback((data: TransformedResponseData) => {
+    setOutput(data)
+    setRunInfo(
+      data.status === 'Run Finished'
+        ? { type: 'success', msg: 'Success' }
+        : { type: 'warning', msg: 'Checkout output for error details' },
+    )
+
+    outputRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [])
+  const errorCb = useCallback((msg: string) => {
+    setRunInfo({ type: 'error', msg })
+  }, [])
+
+  const { sendRunnerReq, waiting } = useRunner(
+    { stdin: input, code, language: lang, flags: o2 ? '-O2' : '' },
+    runCodeCb,
+    errorCb,
+  )
+
+  const handleRunClick = useCallback(() => {
+    setRunInfo(null)
+    sendRunnerReq()
+  }, [sendRunnerReq])
+
+  return (
+    <Layout withNav={false} withToc={false} title="Playground">
+      <Title noEdit={true} relativePath="">Playground</Title>
+
+      <Grid container={true} alignItems="center">
+        <Grid item={true}>
+          <ButtonGroup>
+            <LangMenu
+              lang={lang}
+              setLang={setLang}
+              variant="contained"
+              aria-label="select language for code running"
+            />
+            <Button
+              variant="contained"
+              color="secondary"
+              endIcon={<PlayArrow/>}
+              onClick={handleRunClick}
+              disabled={waiting}
+            >
+              运行
+              {waiting && <Progress color="secondary" size={24}/>}
+            </Button>
+          </ButtonGroup>
+        </Grid>
+        <Grid item={true}>
+          <Fade in={!!runInfo}>
+            <Indicator type="info" msg="" {...runInfo} />
+          </Fade>
+        </Grid>
+        <Grid item={true} style={{ marginLeft: 'auto' }}>
+          <FormControlLabel
+            checked={o2}
+            control={
+              <Switch
+                size="small"
+                checked={o2}
+                onChange={(e) => {
+                  setO2(e.target.checked)
+                }}
+              />
+            }
+            label="开启O2优化"
+          />
+        </Grid>
+      </Grid>
+
+      <EditorContainerGrid container={true} width="auto">
+        <EditorGrid item={true} xs={12} md={8}>
+          <CodeEditor
+            lang={lang}
+            title="代码"
+            value={code}
+            onChange={(val) => {
+              setCode(val)
+            }}
+          />
+        </EditorGrid>
+        <EditorGrid item={true} xs={12} md={4}>
+          <CodeEditor
+            title="输入"
+            value={input}
+            onChange={(val) => {
+              setInput(val)
+            }}
+          />
+        </EditorGrid>
+      </EditorContainerGrid>
+
+      <Collapse in={['success', 'warning'].includes(runInfo?.type ?? '')}>
+        <Output ref={outputRef} output={output}/>
+      </Collapse>
+
+      <Footer/>
+
+    </Layout>
+  )
+}
+
+export default Playground
diff --git a/gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts b/gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts
index 2b9017f7..d1821d62 100644
--- a/gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts
+++ b/gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts
@@ -4,6 +4,7 @@ import persistStore from '../utils/persistStore'
 import { SerializedStyles } from '@emotion/react'
 import { Nullable } from '../types/common'
 import { computed, observable } from 'mobx'
+import { ThemeMode } from '../types/ThemeMode'
 
 export interface VarsStore {
   light: VarMap;
@@ -18,14 +19,11 @@ export interface VarsStore {
 
   setStyleEl(el: Nullable<HTMLElement>): void;
 
-  setWithKey(label: ModeLabel, key: string, val: string): void;
+  setWithKey(label: ThemeMode, key: string, val: string): void;
 
-  getWithKey(label: ModeLabel, key: string): string;
+  getWithKey(label: ThemeMode, key: string): string;
 }
 
-export type ModeLabel = 'light' | 'dark'
-
-
 const VARS_STORE_ID = 'css-vars'
 const { lightMap, darkMap } = createCSSVars(theme.palette)
 
diff --git a/gatsby-theme-oi-wiki/src/types/ThemeMode.ts b/gatsby-theme-oi-wiki/src/types/ThemeMode.ts
new file mode 100644
index 00000000..0c5d4cf2
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/types/ThemeMode.ts
@@ -0,0 +1 @@
+export type ThemeMode = 'light' | 'dark'

From eddceba21b02317624af5ca54ba7f2c707b344ce Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Fri, 8 Oct 2021 00:39:46 +0800
Subject: [PATCH 50/59] fix(play): style

---
 .../src/components/Play/CodeEditor/index.tsx   |  2 +-
 .../src/components/Play/Indicator.tsx          | 12 +++++++-----
 gatsby-theme-oi-wiki/src/pages/play.tsx        | 18 ++++++++++--------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx b/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx
index daa9d39d..f2837934 100644
--- a/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx
@@ -10,7 +10,7 @@ export interface CodeEditorProps extends EditorProps {
 }
 
 const StyledPaper = styled(Paper)`
-  height: calc(100% - 32px);
+  height: 60vh;
 `
 
 const editorStyle = {
diff --git a/gatsby-theme-oi-wiki/src/components/Play/Indicator.tsx b/gatsby-theme-oi-wiki/src/components/Play/Indicator.tsx
index f8c597a8..9c8fb04b 100644
--- a/gatsby-theme-oi-wiki/src/components/Play/Indicator.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Play/Indicator.tsx
@@ -4,9 +4,9 @@ import { css } from '@emotion/react'
 import Typography from '@mui/material/Typography'
 
 const StyledTyp = styled(Typography)(({ theme }) => css`
-  padding: ${theme.spacing(0.5)}px ${theme.spacing(1)}px;
+  padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
   color: ${theme.palette.common.white};
-  border-radius: ${theme.shape.borderRadius};
+  border-radius: ${theme.shape.borderRadius}px;
   display: inline-block;
 
   &.info {
@@ -35,9 +35,11 @@ const Indicator = React.forwardRef<HTMLSpanElement, IndicatorProps>(
   function Indicator(props, ref) {
     const { type, msg } = props
     return (
-      <StyledTyp className={type} ref={ref}>
-        {msg}
-      </StyledTyp>
+      <>
+        {msg && <StyledTyp className={type} ref={ref}>
+          {msg}
+        </StyledTyp>}
+      </>
     )
   },
 )
diff --git a/gatsby-theme-oi-wiki/src/pages/play.tsx b/gatsby-theme-oi-wiki/src/pages/play.tsx
index 4965ea96..5fb6d225 100644
--- a/gatsby-theme-oi-wiki/src/pages/play.tsx
+++ b/gatsby-theme-oi-wiki/src/pages/play.tsx
@@ -141,11 +141,13 @@ const Playground: React.FC<PageProps<unknown, unknown, PlaygroundLocationState>>
     sendRunnerReq()
   }, [sendRunnerReq])
 
+  const title = 'Playground'
+
   return (
-    <Layout withNav={false} withToc={false} title="Playground">
-      <Title noEdit={true} relativePath="">Playground</Title>
+    <Layout withNav={false} withToc={false} title={title}>
+      <Title noEdit={true} relativePath="">{title}</Title>
 
-      <Grid container={true} alignItems="center">
+      <Grid container={true} alignItems="center" columnSpacing={3}>
         <Grid item={true}>
           <ButtonGroup>
             <LangMenu
@@ -167,11 +169,11 @@ const Playground: React.FC<PageProps<unknown, unknown, PlaygroundLocationState>>
           </ButtonGroup>
         </Grid>
         <Grid item={true}>
-          <Fade in={!!runInfo}>
-            <Indicator type="info" msg="" {...runInfo} />
-          </Fade>
+          {runInfo && <Fade in={!!runInfo}>
+            <Indicator {...runInfo} />
+          </Fade>}
         </Grid>
-        <Grid item={true} style={{ marginLeft: 'auto' }}>
+        <Grid item={true} ml="auto">
           <FormControlLabel
             checked={o2}
             control={
@@ -188,7 +190,7 @@ const Playground: React.FC<PageProps<unknown, unknown, PlaygroundLocationState>>
         </Grid>
       </Grid>
 
-      <EditorContainerGrid container={true} width="auto">
+      <EditorContainerGrid container={true} columnSpacing={3}>
         <EditorGrid item={true} xs={12} md={8}>
           <CodeEditor
             lang={lang}

From 06c6329c9840e4c444f1952428d67aadfce7b026 Mon Sep 17 00:00:00 2001
From: Ren Baoshuo <i@baoshuo.ren>
Date: Sun, 10 Oct 2021 05:34:44 +0000
Subject: [PATCH 51/59] feat: add github codespaces config

---
 .devcontainer/Dockerfile        |  2 ++
 .devcontainer/devcontainer.json | 10 ++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .devcontainer/Dockerfile
 create mode 100644 .devcontainer/devcontainer.json

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
new file mode 100644
index 00000000..9233dcf1
--- /dev/null
+++ b/.devcontainer/Dockerfile
@@ -0,0 +1,2 @@
+ARG VARIANT="16-buster"
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 00000000..a069f0cc
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,10 @@
+{
+  "name": "Gatsby OI Wiki",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "args": {
+      "VARIANT": "14"
+    }
+  },
+  "postStartCommand": "yarn install"
+}

From 6a2474381214e7589e3ef8485c4b6379da0f49f1 Mon Sep 17 00:00:00 2001
From: Ren Baoshuo <i@baoshuo.ren>
Date: Sun, 10 Oct 2021 05:43:15 +0000
Subject: [PATCH 52/59] fix: gitpod config & button

---
 .gitpod.yml | 4 ++--
 README.md   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.gitpod.yml b/.gitpod.yml
index 5cb483fb..fecc2780 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -1,3 +1,3 @@
 tasks:
-  - init: npm install
-    command: npm run develop
+  - init: yarn install
+    command: yarn dev
diff --git a/README.md b/README.md
index 85bfb1da..71b8c267 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # gatsby-oiwiki
 
-![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)
+[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/OI-wiki/gatsby-oi-wiki)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FOI-wiki%2Fgatsby-oi-wiki.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FOI-wiki%2Fgatsby-oi-wiki?ref=badge_shield)
 
 正在开发中的基于 gatsby 的渲染框架。欢迎您点击下方链接入群并参与项目。

From 1331d6d7ee3757359d8a09cd0b2e2b7b1c532791 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 12 Oct 2021 22:45:08 +0800
Subject: [PATCH 53/59] fix(smartlink): wrong href

---
 .../src/components/Link/index.tsx               | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Link/index.tsx b/gatsby-theme-oi-wiki/src/components/Link/index.tsx
index 745216b5..d251a7e4 100644
--- a/gatsby-theme-oi-wiki/src/components/Link/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Link/index.tsx
@@ -88,14 +88,21 @@ export interface SmartLinkProps<T = any> extends Omit<GatsbyLinkProps<T>, 'to'>
 const SmartLink: React.FC<SmartLinkProps> = (props) => {
   const theme = useTheme()
   const classes = useStyles()
-  
-  // in case Link is constructed wrongly
-  const href = typeof props?.to === 'string' ? props?.to : ''
-  const { tooltip = false, isIndex = true, className, pathname, children, ...others } = props
+
+  const {
+    tooltip = false,
+    isIndex = true,
+    href: link,
+    to,
+    className,
+    pathname,
+    children,
+    ...others
+  } = props
   const classList = clsx(className, classes.link)
   const [settings] = useSetting()
   const isMdDown = useMediaQuery(theme.breakpoints.down('md'))
-
+  const href = to || link || ''
 
   if (className && className.search('anchor') > -1) {
     return <a {...others} href={href}>{children}</a>

From 14083a4cd16b497002478f4fa7bbcca2f91a9d03 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 19 Oct 2021 20:48:34 +0800
Subject: [PATCH 54/59] refactor: Search Component

---
 .../src/components/Header/index.tsx           |   3 +
 .../src/components/Search/ResultList.tsx      |  72 ------
 .../src/components/Search/SearchInput.tsx     |  73 ++++++
 .../src/components/Search/SearchResult.tsx    | 167 ++++++++++++++
 .../src/components/Search/api.ts              |  12 +
 .../src/components/Search/index.tsx           | 208 ++++++++----------
 .../src/components/Search/store.ts            |  47 ++++
 .../src/components/Search/styles.ts           | 143 ------------
 8 files changed, 392 insertions(+), 333 deletions(-)
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Search/ResultList.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/Search/SearchInput.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/Search/SearchResult.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/Search/api.ts
 create mode 100644 gatsby-theme-oi-wiki/src/components/Search/store.ts
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Search/styles.ts

diff --git a/gatsby-theme-oi-wiki/src/components/Header/index.tsx b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
index 1e703e25..f86141ab 100644
--- a/gatsby-theme-oi-wiki/src/components/Header/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
@@ -13,6 +13,7 @@ import { Nullable } from '../../types/common'
 import School from '@mui/icons-material/School'
 import NavBtnStack from './NavBtnStack'
 import { useLocation } from '@reach/router'
+import Search from '../Search'
 
 export interface HeaderProps {
   title?: Nullable<string>
@@ -79,6 +80,8 @@ const Header: React.FC<HeaderProps> = observer((props) => {
 
           <Grid flexGrow={1}/>
 
+          <Search/>
+
           <NavBtnStack/>
         </StyledAppBar>
       </Slide>
diff --git a/gatsby-theme-oi-wiki/src/components/Search/ResultList.tsx b/gatsby-theme-oi-wiki/src/components/Search/ResultList.tsx
deleted file mode 100644
index 418d76a3..00000000
--- a/gatsby-theme-oi-wiki/src/components/Search/ResultList.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { List, ListItem, ListItemIcon, ListItemText, Typography } from '@material-ui/core'
-import { Link } from 'gatsby'
-import React from 'react'
-import { FindInPage as FindInPageIcon } from '@material-ui/icons'
-import { useStyles } from './styles'
-
-export interface ResultItem {
-  url: string;
-  title: string;
-  highlight: string
-}
-
-export interface SearchResultListProps {
-  result: ResultItem[];
-  isFirstRun: React.MutableRefObject<boolean>;
-  searchKey: string;
-  classes: ReturnType<typeof useStyles>;
-}
-
-const SearchResultList: React.FC<SearchResultListProps> = props => {
-  const { result, isFirstRun, searchKey, classes } = props
-  const resultCount = result.length
-  return resultCount === 0
-    ? (isFirstRun.current
-      ? <></>
-      : <Typography variant="body1" className={classes.searchMessage}>没有找到符合条件的结果</Typography>)
-    : (<>
-      <Typography variant="body1" className={classes.searchMessage}>
-        共找到 {resultCount} 条搜索结果：
-      </Typography>
-      <List>
-        {result.map((item) =>
-          <ListItem
-            button
-            divider
-            component={Link}
-            to={item.url}
-            state={{ searchKey: searchKey }}
-            key={item.url}
-          >
-            <ListItemIcon>
-              <FindInPageIcon/>
-            </ListItemIcon>
-            <ListItemText
-              disableTypography={true}
-              primary={
-                <Typography
-                  variant="h6"
-                  className={classes.searchResultPrimary}
-                  dangerouslySetInnerHTML={{
-                    __html: item.title.replace(
-                      searchKey,
-                      `<em>${searchKey}</em>`,
-                    ),
-                  }}
-                />
-              }
-              secondary={
-                <div
-                  className={classes.searchResultSecondary}
-                  dangerouslySetInnerHTML={{
-                    __html: item.highlight || '',
-                  }}
-                />
-              }
-            />
-          </ListItem>)}
-      </List>
-    </>)
-}
-
-export default SearchResultList
diff --git a/gatsby-theme-oi-wiki/src/components/Search/SearchInput.tsx b/gatsby-theme-oi-wiki/src/components/Search/SearchInput.tsx
new file mode 100644
index 00000000..3f50b56b
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Search/SearchInput.tsx
@@ -0,0 +1,73 @@
+import { InputBaseProps } from '@mui/material/InputBase'
+import React from 'react'
+import { InputBase } from '@mui/material'
+import { searchStore } from './store'
+import { observer } from 'mobx-react-lite'
+import styled from '@mui/material/styles/styled'
+import { theme } from '../../theme'
+import clsx from 'clsx'
+
+interface SearchInputProps extends InputBaseProps {
+  isSmallScreen?: boolean
+}
+
+const StyledInputBase = styled(InputBase)`
+  color: inherit;
+  display: block;
+  margin-left: calc(1em + ${theme.spacing(4)});
+  margin-top: 2px;
+  margin-bottom: 2px;
+
+  &.small-screen {
+    margin-top: 9px;
+    margin-bottom: 6px;
+  }
+
+  &.wide-input {
+    ${theme.breakpoints.up('md')} {
+      transition: ${theme.transitions.create('width')};
+      width: 30vw;
+    }
+  }
+
+  .MuiInputBase-input {
+    ${theme.breakpoints.up('md')} {
+      transition: ${theme.transitions.create('width')};
+      width: 15vw;
+
+      &:focus {
+        width: 30vw;
+      }
+    }
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
+  }
+`
+
+const SearchInput: React.FC<SearchInputProps> = observer((props) => {
+  const { isSmallScreen = false, ...others } = props
+
+  return (
+    <StyledInputBase
+      className={clsx({
+        'wide-input': !!searchStore.searchKey,
+        'small-screen': isSmallScreen,
+      })}
+      type="search"
+      placeholder="键入以开始搜索"
+      onFocus={searchStore.enableSearch}
+      onChange={(event => {
+        searchStore.setSearchKey(event.target.value)
+      })}
+      defaultValue={searchStore.searchKey}
+      {...others}
+    />
+  )
+})
+
+export default SearchInput
diff --git a/gatsby-theme-oi-wiki/src/components/Search/SearchResult.tsx b/gatsby-theme-oi-wiki/src/components/Search/SearchResult.tsx
new file mode 100644
index 00000000..b5e2b298
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Search/SearchResult.tsx
@@ -0,0 +1,167 @@
+import { Link } from 'gatsby'
+import React, { useEffect, useMemo, useState } from 'react'
+import styled from '@mui/material/styles/styled'
+import Paper from '@mui/material/Paper'
+import { css } from '@emotion/react'
+import scrollbarStyle from '../../theme/scrollbarStyle'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import FindInPage from '@mui/icons-material/FindInPage'
+import ListItemText from '@mui/material/ListItemText'
+import { searchStore } from './store'
+import { observer } from 'mobx-react-lite'
+import { reaction } from 'mobx'
+import { fetchResult } from './api'
+
+export interface ResultItem {
+  url: string;
+  title: string;
+  highlight: string
+}
+
+export interface SearchResultListProps {
+  result: ResultItem[];
+}
+
+const StyledPaper = styled(Paper)(({ theme }) => css`
+  ${scrollbarStyle};
+
+  min-width: calc(30vw + 1em + ${theme.spacing(4)});
+  max-width: 50vw;
+  max-height: 80vh;
+  margin-top: 12px;
+
+  position: absolute;
+  top: 100%;
+  right: 0 !important;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: ${theme.zIndex.drawer + 2};
+`)
+
+const StyledTyp = styled(Typography)`
+  padding: 8px 8px 8px 20px;
+  background: #f5f5f5;
+` as typeof Typography
+
+const SearchResultPrimaryTyp = styled(Typography)(({ theme }) => css`
+  margin: 0;
+
+  & em {
+    font-style: normal;
+    color: ${theme.palette.secondary.main};
+    background-color: rgba(143, 187, 237, 1);
+  }
+`)
+
+const SearchResultSecondaryBox = styled(Box)(({ theme }) => css`
+  & em {
+    font-style: normal;
+    padding: 0 0 2px;
+    // 使用 box shadow 模拟下划线
+    box-shadow: inset 0 -2px 0 0 ${theme.palette.secondary.main};
+  }
+`)
+
+const SearchMessage: React.FC = (props) => {
+  const { children } = props
+
+  return (
+    <StyledTyp variant="body1">
+      {children}
+    </StyledTyp>
+  )
+}
+
+const SearchResultList: React.FC<SearchResultListProps> = observer((props) => {
+  const { result } = props
+  return (
+    <List>
+      {result.map((item) =>
+        <ListItem
+          key={item.url}
+          button={true}
+          divider={true}
+          component={Link}
+          to={item.url}
+          state={{ searchKey: searchStore.searchKey }}
+        >
+          <ListItemIcon>
+            <FindInPage/>
+          </ListItemIcon>
+          <ListItemText
+            disableTypography={true}
+            primary={
+              <SearchResultPrimaryTyp
+                variant="h6"
+                dangerouslySetInnerHTML={{
+                  __html: item.title.replace(
+                    searchStore.searchKey,
+                    `<em>${searchStore.searchKey}</em>`,
+                  ),
+                }}
+              />
+            }
+            secondary={
+              <SearchResultSecondaryBox
+                dangerouslySetInnerHTML={{
+                  __html: item.highlight || '',
+                }}
+              />
+            }
+          />
+        </ListItem>)
+      }
+    </List>
+  )
+})
+
+
+const SearchResult: React.FC = observer(() => {
+  const [result, setResult] = useState<ResultItem[]>([])
+  const resultCount = useMemo(() => result.length, [result])
+
+  useEffect(() => {
+    const fetchReactionDispose = reaction(() => searchStore.searchKey,
+      (curVal, prevVal) => {
+        if (curVal === '') {
+          setResult([])
+        } else if (curVal !== prevVal) {
+          // the order is tricky here
+          // set result after set isFirstRun
+          // so when there's no result on first run
+          // the user is prompted with the notice
+          fetchResult(curVal).then((value => {
+            searchStore.setIsFirstRun(false)
+            setResult(value)
+          }))
+        }
+      }, {
+        delay: 500,
+      })
+
+    return () => {
+      fetchReactionDispose()
+    }
+  }, [])
+
+  return (
+    <StyledPaper>
+      {(!searchStore.open || searchStore.isFirstRun)
+        ? <></>
+        : resultCount === 0
+          ? <SearchMessage>没有找到符合条件的结果</SearchMessage>
+          : <>
+            <SearchMessage>共找到 {resultCount} 条搜索结果：</SearchMessage>
+            <SearchResultList result={result}/>
+          </>
+      }
+    </StyledPaper>
+  )
+})
+
+export default SearchResult
diff --git a/gatsby-theme-oi-wiki/src/components/Search/api.ts b/gatsby-theme-oi-wiki/src/components/Search/api.ts
new file mode 100644
index 00000000..b14ce99f
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Search/api.ts
@@ -0,0 +1,12 @@
+import { ResultItem } from './SearchResult'
+
+/**
+ * 从 API 获取搜索数据
+ * @param str 要搜索的内容
+ */
+const fetchResult = (str: string): Promise<ResultItem[]> =>
+  fetch(`https://search.oi-wiki.org:8443/?s=${encodeURIComponent(str)}`)
+    .then((response) => response.json())
+
+
+export { fetchResult }
diff --git a/gatsby-theme-oi-wiki/src/components/Search/index.tsx b/gatsby-theme-oi-wiki/src/components/Search/index.tsx
index 7e7b0dc1..46c22a2a 100644
--- a/gatsby-theme-oi-wiki/src/components/Search/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Search/index.tsx
@@ -1,141 +1,113 @@
-import { Backdrop, Dialog, IconButton, InputBase, Paper } from '@material-ui/core'
-import { ArrowBack as ArrowBackIcon, Search as SearchIcon } from '@material-ui/icons'
+import React from 'react'
 
-import clsx from 'clsx'
-import React, { useEffect, useRef, useState } from 'react'
-import useDarkMode from '../../lib/useDarkMode'
+import SearchResult from './SearchResult'
+import { useWindowDimensions } from './hooks'
+import Backdrop from '@mui/material/Backdrop'
+import styled from '@mui/material/styles/styled'
+import Box from '@mui/material/Box'
+import { css } from '@emotion/react'
+import { Dialog } from '@mui/material'
+import IconButton from '@mui/material/IconButton'
+import SearchIcon from '@mui/icons-material/Search'
+import { ArrowBack } from '@mui/icons-material'
+import Paper from '@mui/material/Paper'
+import SearchInput from './SearchInput'
+import { observer } from 'mobx-react-lite'
+import { searchStore } from './store'
 
-import { useStyles } from './styles'
-import SearchResultList from './ResultList'
-import { useDebounce, useWindowDimensions } from './hooks'
 
-/**
- * 从 API 获取搜索数据
- * @param str 要搜索的内容
- */
-const fetchResult = (str: string): Promise<any> =>
-  fetch(`https://search.oi-wiki.org:8443/?s=${encodeURIComponent(str)}`)
-    .then((response) => response.json())
+const SearchContainer = styled(Box)(({ theme }) => css`
+  position: relative;
+  border-radius: ${theme.shape.borderRadius};
+  max-width: calc(30vw + 1em + ${theme.spacing(4)});
+  margin-left: 0;
+  width: 100%;
+  z-index: ${theme.zIndex.drawer + 2};
 
-const Search: React.FC = () => {
-  const [searchKey, setSearchKey] = useState('')
-  const [result, setResult] = useState([])
-  const [open, setOpen] = useState(false)
-  const debouncedKey = useDebounce(searchKey, 500)
-  const classes = useStyles()
+  ${theme.breakpoints.up('md')} {
+    margin-left: ${theme.spacing(3)};
+    width: auto;
+  }
+`)
 
-  const isFirstRun = useRef(true)
+const StyledBackdrop = styled(Backdrop)(({ theme }) => css`
+  z-index: ${theme.zIndex.drawer + 1};
+`)
 
-  const enableDark = useDarkMode()
-  const { width } = useWindowDimensions()
+const SearchIconWrapper = styled(Box)(({ theme }) => css`
+  padding: ${theme.spacing(0, 2)};
+  height: 100%;
+  position: absolute;
+  pointer-events: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`)
+
+const SearchIconBlock: React.FC = () => {
+  return (
+    <SearchIconWrapper>
+      <SearchIcon fontSize="small"/>
+    </SearchIconWrapper>
+  )
+}
+
+const SmallScreenSearchIconBtn = styled(IconButton)(({ theme }) => css`
+  height: 100%;
+  padding: ${theme.spacing(1.5)};
+  color: inherit;
 
-  useEffect(() => {
-    if (debouncedKey !== '') {
-      fetchResult(debouncedKey).then((val) => {
-        // the order is tricky here
-        // set result after set isFirstRun
-        // so when there's no result on first run
-        // the user is prompted with the notice
-        isFirstRun.current = false
-        setResult(val)
-      })
-    } else {
-      setResult([])
-    }
-  }, [debouncedKey])
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`)
+
+const SmallScreenReturnBtn = styled(IconButton)(({ theme }) => css`
+  padding: ${theme.spacing(1.5)};
+  position: absolute;
+  display: flex;
+`)
+
+const SmallScreenDialogHeaderPaper = styled(Paper)`
+  align-items: center;
+  border-radius: 0;
+`
+
+const Search: React.FC = observer(() => {
+  const { width } = useWindowDimensions()
 
   // 600px is sm
   if (width > 600) {
     return <>
-      <div
-        className={clsx(
-          classes.search,
-          (enableDark || !open) ? classes.searchColorBlack : classes.searchColorWhite,
-        )}
-      >
-        <div className={classes.searchIcon}>
-          <SearchIcon fontSize="small"/>
-        </div>
-        <InputBase
-          type="search"
-          placeholder="键入以开始搜索"
-          onChange={(ev) => {
-            setSearchKey(ev.target.value)
-          }}
-          onFocus={() => {
-            setOpen(true)
-          }}
-          classes={{
-            root: clsx(classes.inputRoot, searchKey && classes.wideInput),
-            input: classes.inputInput,
-          }}
-          defaultValue={searchKey}
-        />
-        {open && (
-          <Paper className={classes.resultPaper}>
-            <SearchResultList
-              searchKey={searchKey}
-              result={result}
-              isFirstRun={isFirstRun}
-              classes={classes}
-            />
-          </Paper>
-        )}
-      </div>
-      <Backdrop
-        className={classes.backdrop}
-        open={open}
-        onClick={() => {
-          setOpen(false)
-        }}
-      />
+      <SearchContainer>
+        <SearchIconBlock/>
+        <SearchInput/>
+        <SearchResult/>
+      </SearchContainer>
+      <StyledBackdrop open={searchStore.open} onClick={searchStore.disableSearch}/>
     </>
   } else {
     return <>
-      <IconButton onClick={() => {
-        setOpen(true)
-      }} className={classes.smallScreenSearchIcon}>
+      <SmallScreenSearchIconBtn onClick={searchStore.enableSearch}>
         <SearchIcon/>
-      </IconButton>
+      </SmallScreenSearchIconBtn>
       <Dialog
-        open={open}
-        onClose={() => {
-          setOpen(false)
-        }}
+        open={searchStore.open}
+        onClose={searchStore.disableSearch}
         fullWidth={true}
-        fullScreen
+        fullScreen={true}
       >
-        <Paper component="div" className={classes.dialogHeader}>
-          <IconButton className={classes.smallScreenReturnIcon} onClick={() => {
-            setOpen(false)
-          }}>
-            <ArrowBackIcon/>
-          </IconButton>
-          <InputBase
-            type="search"
-            placeholder="键入以开始搜索"
-            onChange={(ev) => {
-              setSearchKey(ev.target.value)
-            }}
-            classes={{
-              root: classes.smallScreenInputRoot,
-              input: classes.inputInput,
-            }}
-            autoFocus
-            defaultValue={searchKey}
-          />
-        </Paper>
-        {open && (
-          <SearchResultList
-            searchKey={searchKey}
-            result={result}
-            isFirstRun={isFirstRun}
-            classes={classes}
-          />
-        )}
+        <SmallScreenDialogHeaderPaper>
+          <SmallScreenReturnBtn onClick={searchStore.disableSearch}>
+            <ArrowBack/>
+          </SmallScreenReturnBtn>
+          <SearchInput isSmallScreen={true} autoFocus={true}/>
+        </SmallScreenDialogHeaderPaper>
+        <SearchResult/>
       </Dialog>
     </>
   }
-}
+})
 
 export default Search
diff --git a/gatsby-theme-oi-wiki/src/components/Search/store.ts b/gatsby-theme-oi-wiki/src/components/Search/store.ts
new file mode 100644
index 00000000..26c61ac6
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Search/store.ts
@@ -0,0 +1,47 @@
+import { observable } from 'mobx'
+
+interface SearchStore {
+  searchKey: string;
+  open: boolean;
+  isFirstRun: boolean;
+
+  setSearchKey(val: string): void;
+
+  setOpen(val: boolean): void;
+
+  disableSearch(): void;
+
+  enableSearch(): void;
+
+  setIsFirstRun(val: boolean): void;
+}
+
+const searchStore = observable<SearchStore>({
+  searchKey: '',
+  open: false,
+  isFirstRun: true,
+
+  setSearchKey(val) {
+    this.searchKey = val
+  },
+
+  setOpen(val) {
+    this.open = val
+  },
+
+  disableSearch() {
+    this.open = false
+  },
+
+  enableSearch() {
+    this.open = true
+  },
+
+  setIsFirstRun(val) {
+    this.isFirstRun = val
+  },
+}, undefined, {
+  autoBind: true,
+})
+
+export { searchStore }
diff --git a/gatsby-theme-oi-wiki/src/components/Search/styles.ts b/gatsby-theme-oi-wiki/src/components/Search/styles.ts
deleted file mode 100644
index b5b16faa..00000000
--- a/gatsby-theme-oi-wiki/src/components/Search/styles.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import { alpha, makeStyles } from '@material-ui/core/styles'
-import { scrollbarStyle } from '../../styles/scrollbar'
-
-export const useStyles = makeStyles((theme) => ({
-  container: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  searchResultPrimary: {
-    '& em': {
-      fontStyle: 'normal',
-      color: theme.palette.secondary.main,
-      background: 'rgba(143,187,237,.1)',
-    },
-  },
-  searchResultSecondary: {
-    '& em': {
-      fontStyle: 'normal',
-      padding: '0 0 2px',
-      boxShadow: `inset 0 -2px 0 0 ${theme.palette.secondary.main}`,
-      // 使用 box shadow 模拟下划线
-    },
-  },
-  inputRoot: {
-    color: 'inherit',
-    display: 'block',
-    // margin: theme.spacing(1, 1, 1, 0),
-    marginLeft: `calc(1em + ${theme.spacing(4)}px)`,
-    marginTop: '2px',
-    marginBottom: '2px',
-  },
-  smallScreenInputRoot: {
-    color: 'inherit',
-    display: 'block',
-    // margin: theme.spacing(1, 1, 1, 0),
-    marginLeft: `calc(1em + ${theme.spacing(4)}px)`,
-    marginTop: '9px',
-    marginBottom: '6px',
-  },
-  inputInput: {
-    // vertical padding + font size from searchIcon
-    // width: '100%',
-    [theme.breakpoints.up('md')]: {
-      transition: theme.transitions.create('width'),
-      width: '15vw',
-      '&:focus': {
-        width: '30vw',
-      },
-    },
-    [`&::-webkit-search-decoration,
-       &::-webkit-search-cancel-button,
-       &::-webkit-search-results-button,
-       &::-webkit-search-results-decoration`]: {
-      display: 'none',
-    },
-  },
-  wideInput: {
-    [theme.breakpoints.up('md')]: {
-      transition: theme.transitions.create('width'),
-      width: '30vw',
-    },
-  },
-  resultPaper: scrollbarStyle(theme, {
-    marginTop: '12px',
-    minWidth: `calc(30vw + 1em + ${theme.spacing(4)}px)`,
-    maxWidth: '50vw',
-    position: 'absolute',
-    right: '0 !important',
-    top: '100%',
-    maxHeight: '80vh',
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    zIndex: theme.zIndex.drawer + 2,
-  }),
-  backdrop: {
-    zIndex: theme.zIndex.drawer + 1,
-  },
-  search: {
-    position: 'relative',
-    borderRadius: theme.shape.borderRadius,
-    maxWidth: `calc(30vw + 1em + ${theme.spacing(4)}px)`,
-    marginRight: theme.spacing(2),
-    marginLeft: 0,
-    width: '100%',
-    zIndex: theme.zIndex.drawer + 2,
-    [theme.breakpoints.up('md')]: {
-      marginLeft: theme.spacing(3),
-      width: 'auto',
-    },
-  },
-  searchColorBlack: {
-    backgroundColor: alpha(theme.palette.common.black, 0.15),
-    '&:hover': {
-      backgroundColor: alpha(theme.palette.common.black, 0.25),
-    },
-  },
-  searchColorWhite: {
-    backgroundColor: alpha(theme.palette.common.white, 0.8),
-    '&:hover': {
-      backgroundColor: theme.palette.common.white,
-    },
-  },
-  searchIcon: {
-    padding: theme.spacing(0, 2),
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  searchMessage: {
-    padding: '8px 8px 8px 20px',
-    backgroundColor: theme.palette.search.messageBackground,
-  },
-  smallScreenSearchIcon: {
-    padding: theme.spacing(1.5),
-    height: '100%',
-    // position: 'absolute',
-    // pointerEvents: 'none',
-    color: 'inherit',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  smallScreenReturnIcon: {
-    padding: theme.spacing(1.5),
-    // padding: 0,
-    // height: '100%',
-    position: 'absolute',
-    display: 'flex',
-    // alignItems: 'center',
-    // justifyContent: 'center',
-
-  },
-  dialogHeader: {
-    display: 'block',
-    alignItems: 'center',
-    '-webkit-border-radius': '0',
-    '-moz-border-radius': '0',
-    'border-radius': '0',
-  },
-}))

From 607eee26022131e786a8d156740cd45d402a722b Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 19 Oct 2021 21:10:23 +0800
Subject: [PATCH 55/59] fix(pages): missing check of tags

---
 gatsby-theme-oi-wiki/src/pages/pages.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/pages/pages.tsx b/gatsby-theme-oi-wiki/src/pages/pages.tsx
index 2899783e..1fb4d0c6 100644
--- a/gatsby-theme-oi-wiki/src/pages/pages.tsx
+++ b/gatsby-theme-oi-wiki/src/pages/pages.tsx
@@ -21,8 +21,8 @@ import Title from '../components/Title'
 
 interface PageItemInfo {
   id: string;
-  frontmatter: Pick<GatsbyTypes.MarkdownRemarkFrontmatter, 'title' | 'tags'>;
-  fields: Pick<GatsbyTypes.MarkdownRemarkFields, 'slug'>;
+  frontmatter: Partial<Pick<GatsbyTypes.MarkdownRemarkFrontmatter, 'title' | 'tags'>>;
+  fields: Partial<Pick<GatsbyTypes.MarkdownRemarkFields, 'slug'>>;
 }
 
 interface PageItemProps extends DeepWriteable<DeepRequiredNonNull<PageItemInfo>> {
@@ -47,7 +47,7 @@ const PageItem: React.FC<PageItemProps> = (props) => {
         </CardContent>
 
         <CardActions>
-          <Tags tags={tags}/>
+          {!!tags && <Tags tags={tags}/>}
         </CardActions>
       </Card>
     </Grid>

From 4a2341bd29a8d526ca5bf54f67008286ffda0ec6 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 19 Oct 2021 21:25:47 +0800
Subject: [PATCH 56/59] perf(search): reduce the bundle size

---
 gatsby-theme-oi-wiki/src/components/Search/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Search/index.tsx b/gatsby-theme-oi-wiki/src/components/Search/index.tsx
index 46c22a2a..5c2268c4 100644
--- a/gatsby-theme-oi-wiki/src/components/Search/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Search/index.tsx
@@ -6,10 +6,10 @@ import Backdrop from '@mui/material/Backdrop'
 import styled from '@mui/material/styles/styled'
 import Box from '@mui/material/Box'
 import { css } from '@emotion/react'
-import { Dialog } from '@mui/material'
+import Dialog from '@mui/material/Dialog'
 import IconButton from '@mui/material/IconButton'
 import SearchIcon from '@mui/icons-material/Search'
-import { ArrowBack } from '@mui/icons-material'
+import ArrowBack from '@mui/icons-material/ArrowBack'
 import Paper from '@mui/material/Paper'
 import SearchInput from './SearchInput'
 import { observer } from 'mobx-react-lite'

From 2ef16a47a86db4d8a7760cb28452e11ea0250c7e Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Fri, 22 Oct 2021 23:40:02 +0800
Subject: [PATCH 57/59] refactor: CommentCard component

---
 .../Comment/Card/ReactionButton.tsx           |  96 ++++++---
 .../src/components/Comment/Card/index.tsx     | 194 ++++++++++--------
 .../src/components/Comment/Card/styles.ts     |  48 -----
 gatsby-theme-oi-wiki/src/types/common.ts      |   1 +
 4 files changed, 175 insertions(+), 164 deletions(-)
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts

diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
index 61771de6..d5b0f0f1 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
@@ -1,39 +1,68 @@
-import {
-  Avatar,
-  Button,
-  CircularProgress,
-} from '@material-ui/core'
-
 import React, { useState } from 'react'
-import AvatarGroup from '@material-ui/lab/AvatarGroup'
 import clsx from 'clsx'
 import { User } from '@mgtd/vssue-api-github-v4/lib/types'
-import { useStyles } from './styles'
+import SvgIcon from '@mui/material/SvgIcon'
+import Button from '@mui/material/Button'
+import { AvatarGroup, CircularProgress } from '@mui/material'
+import Avatar from '@mui/material/Avatar'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import red from '@mui/material/colors/red'
+
+const StyledBtn = styled(Button)`
+  min-width: 0;
+
+  &.null-reaction {
+    padding: 5px 10px;
+
+    .MuiButton-startIcon {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
 
-import { SvgIconComponent } from '@material-ui/icons'
+  &.clicked {
+    .MuiButton-startIcon {
+      .red {
+        color: ${red[500]}
+      }
+
+      .yellow {
+        color: #ffcf56;
+      }
+    }
+  }
+`
+
+const StyledAvatarGroup = styled(AvatarGroup)(({ theme }) => css`
+  width: ${theme.spacing(3)};
+  height: ${theme.spacing(3)};
+  font-size: ${theme.spacing(1.5)};
+`)
 
 const reactionButtonDefaultProps = {
   initialCount: 0,
   isClicked: false,
 }
 
-type ReactionButtonProps = {
-  icon: SvgIconComponent
-  clickedClass: string
-  disabled: boolean
-  currentUser: User
-  addReaction: () => Promise<void>,
-  removeReaction: () => Promise<void>,
-  users: User[],
-} & Partial<typeof reactionButtonDefaultProps>
+export interface ReactionButtonProps extends Partial<typeof reactionButtonDefaultProps> {
+  icon: typeof SvgIcon;
+  iconClickedClassName: string;
+  disabled: boolean;
+  currentUser: User;
+  addReaction: () => Promise<void>;
+  removeReaction: () => Promise<void>;
+  users: User[];
+}
 
 const ReactionButton: React.FC<ReactionButtonProps> = (props) => {
-  const classes = useStyles()
   const propsMerged = { ...reactionButtonDefaultProps, ...props }
+
   const [isClicked, setIsClicked] = useState(propsMerged.isClicked)
   const [count, setCount] = useState(propsMerged.initialCount)
   const [users, setUsers] = useState(propsMerged.users)
   const [loading, setLoading] = useState(false)
+
   const clickFunc = async (): Promise<void> => {
     if (isClicked) {
       setCount(count - 1)
@@ -52,24 +81,29 @@ const ReactionButton: React.FC<ReactionButtonProps> = (props) => {
     }
     setIsClicked(!isClicked)
   }
+
   const SvgTag = props.icon
+
   return (
-    <Button
-      color="default"
+    <StyledBtn
       size="small"
       disabled={propsMerged.disabled || loading}
-      startIcon={<SvgTag className={clsx(isClicked && props.clickedClass)} />}
-      className={clsx(count === 0 && classes.nullReaction, classes.reactionButton)}
+      startIcon={<SvgTag className={props.iconClickedClassName}/>}
+      className={clsx({ 'null-reaction': count === 0, 'clicked': isClicked })}
       onClick={clickFunc}
-      classes={count === 0 ? { startIcon: classes.nullReactionStartIcon, label: classes.labelMargin } : undefined}
     >
-      {loading ? <CircularProgress size={24} style={{ marginLeft: '4px', marginRight: '4px' }} /> : (count !== 0 && count)}
-      {!loading && <AvatarGroup max={3} style={{ marginLeft: '4px' }} classes={{ avatar: classes.avatarSmall }}>
-        {users.map(({ avatar, username }) => (
-          <Avatar alt={username} src={avatar} key={username} />
-        ))}
-      </AvatarGroup>}
-    </Button>
+      {loading
+        ? <CircularProgress size={24} sx={{ mx: 4 }}/>
+        : <>
+          {count !== 0 && count}
+          <StyledAvatarGroup max={3} sx={{ ml: 4 }}>
+            {users.map(({ avatar, username }) => (
+              <Avatar alt={username} src={avatar} key={username}/>
+            ))}
+          </StyledAvatarGroup>
+        </>
+      }
+    </StyledBtn>
   )
 }
 
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
index 5ca22d2c..d11f1234 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
@@ -1,30 +1,36 @@
-import {
-  Avatar,
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  CircularProgress,
-  IconButton,
-} from '@material-ui/core'
-
-import {
-  Favorite as FavoriteIcon,
-  ThumbUp as ThumbUpIcon,
-  ThumbDown as ThumbDownIcon,
-  Reply as ReplyIcon,
-  Delete as DeleteIcon,
-} from '@material-ui/icons'
-
 import React, { useState } from 'react'
 import { User } from '@mgtd/vssue-api-github-v4/lib/types'
 import Time from '../../Time'
 import { Reactions } from '../types'
 import { useInputContentContext } from '../inputContext'
-import { useStyles } from './styles'
-import ReactionButton from './ReactionButton'
+import ReactionButton, { ReactionButtonProps } from './ReactionButton'
+import Card from '@mui/material/Card'
+import Avatar from '@mui/material/Avatar'
+import CardHeader from '@mui/material/CardHeader'
+import IconButton from '@mui/material/IconButton'
+import CircularProgress from '@mui/material/CircularProgress'
+import { ArrayItemType } from '../../../types/common'
+import Delete from '@mui/icons-material/Delete'
+import Favorite from '@mui/icons-material/Favorite'
+import Reply from '@mui/icons-material/Reply'
+import ThumbDown from '@mui/icons-material/ThumbDown'
+import ThumbUp from '@mui/icons-material/ThumbUp'
+import CardActions from '@mui/material/CardActions'
+import CardContent from '@mui/material/CardContent'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+
+type ReactionUnion = ArrayItemType<Reactions>['type']
 
-interface Props {
+type BtnInfoObj = {
+  [key in ReactionUnion]: Pick<ReactionButtonProps, 'icon' | 'iconClickedClassName'>
+}
+
+type ReactionObj = {
+  [key in ReactionUnion]: ArrayItemType<Reactions>
+}
+
+export interface CommentCardProps {
   disabled: boolean,
   currentUser: User,
   commentID: string | number,
@@ -35,87 +41,105 @@ interface Props {
   time: number | string | Date,
   reactions: Reactions,
   deleteComment: (commentID: string | number, setLoading: (loading: boolean) => void) => Promise<void>,
-  addReaction: (commentID: string | number, reaction: 'heart' | 'unlike' | 'like') => Promise<void>,
-  removeReaction: (commentID: string | number, reaction: 'heart' | 'unlike' | 'like') => Promise<void>
+  addReaction: (commentID: string | number, reaction: ReactionUnion) => Promise<void>,
+  removeReaction: (commentID: string | number, reaction: ReactionUnion) => Promise<void>
 }
 
-const CommentCard: React.FC<Props> = (props) => {
+const StyledCard = styled(Card)(({ theme }) => css`
+  margin-block: ${theme.spacing(1)};
+`)
+
+const StyledCardHeader = styled(CardHeader)(({ theme }) => css`
+  padding: ${theme.spacing(2)} ${theme.spacing(2)} 0;
+`)
+
+const StyledCardContent = styled(CardContent)(({ theme }) => css`
+  padding: 0 ${theme.spacing(2)};
+`)
+
+const btnInfoObj: BtnInfoObj = {
+  like: {
+    icon: ThumbUp,
+    iconClickedClassName: 'yellow',
+  },
+  unlike: {
+    icon: ThumbDown,
+    iconClickedClassName: 'yellow',
+  },
+  heart: {
+    icon: Favorite,
+    iconClickedClassName: 'red',
+  },
+}
+
+const CommentCard: React.FC<CommentCardProps> = (props) => {
   const { name, time, disabled, currentUser, reactions, commentID } = props
-  const classes = useStyles()
-  const like = reactions.find(item => item.type === 'like')
-  const unlike = reactions.find(item => item.type === 'unlike')
-  const heart = reactions.find(item => item.type === 'heart')
+  const reactionObj: ReactionObj = {
+    like: reactions.find(item => item.type === 'like') as ArrayItemType<Reactions>,
+    unlike: reactions.find(item => item.type === 'unlike') as ArrayItemType<Reactions>,
+    heart: reactions.find(item => item.type === 'heart') as ArrayItemType<Reactions>,
+  }
+
   const [deleteLoading, setDeleteLoading] = useState(false)
   const { setInputContent } = useInputContentContext()
+
   return (
-    <Card variant="outlined" className={classes.commentMargin}>
-      <CardHeader
-        avatar={<Avatar alt={name} src={props.avatarLink} />}
+    <StyledCard variant="outlined">
+      <StyledCardHeader
+        subheader={<Time time={time}/>}
+        avatar={<Avatar alt={name} src={props.avatarLink}/>}
         title={<>
-          {props.name} {currentUser.username === props.name &&
-            <IconButton
-              disabled={disabled}
-              size="small"
-              aria-label="delete"
-              className={classes.floatRight}
-              onClick={
-                () => { props.deleteComment(commentID, setDeleteLoading) }
-              }>
-              {deleteLoading
-                ? <CircularProgress size={20} />
-                : <DeleteIcon fontSize="small" />}
-            </IconButton>}
+          {props.name}
+          {currentUser.username === props.name &&
+          <IconButton
+            disabled={disabled}
+            size="small"
+            aria-label="delete"
+            sx={{ float: 'right' }}
+            onClick={() => {
+              props.deleteComment(commentID, setDeleteLoading)
+            }}>
+            {deleteLoading
+              ? <CircularProgress size={20}/>
+              : <Delete fontSize="small"/>}
+          </IconButton>
+          }
           <IconButton
             size="small"
             aria-label="reply"
-            className={classes.floatRight}
+            sx={{ float: 'right' }}
             onClick={() => {
               setInputContent(`> ${props.contentRaw}`)
             }}>
-            <ReplyIcon fontSize="small" />
+            <Reply fontSize="small"/>
           </IconButton>
         </>}
-        classes={{ root: classes.headerRoot }}
-        subheader={<Time time={time} />} />
-      <CardContent classes={{ root: classes.contentRoot }}>
-        <div dangerouslySetInnerHTML={{ __html: props.contentHTML }} />
-      </CardContent>
+      />
+      <StyledCardContent>
+        <div dangerouslySetInnerHTML={{ __html: props.contentHTML }}/>
+      </StyledCardContent>
       <CardActions>
-        <ReactionButton
-          icon={ThumbUpIcon}
-          clickedClass={classes.yellow}
-          disabled={disabled}
-          currentUser={currentUser}
-          initialCount={like.count}
-          isClicked={like.viewerHasReacted}
-          addReaction={async () => { await props.addReaction(commentID, 'like') }}
-          removeReaction={async () => { await props.removeReaction(commentID, 'like') }}
-          users={like.users}
-        />
-        <ReactionButton
-          icon={ThumbDownIcon}
-          clickedClass={classes.yellow}
-          disabled={disabled}
-          currentUser={currentUser}
-          initialCount={unlike.count}
-          isClicked={unlike.viewerHasReacted}
-          addReaction={async () => { await props.addReaction(commentID, 'unlike') }}
-          removeReaction={async () => { await props.removeReaction(commentID, 'unlike') }}
-          users={unlike.users}
-        />
-        <ReactionButton
-          icon={FavoriteIcon}
-          clickedClass={classes.red}
-          disabled={disabled}
-          currentUser={currentUser}
-          initialCount={heart.count}
-          isClicked={heart.viewerHasReacted}
-          addReaction={async () => { await props.addReaction(commentID, 'heart') }}
-          removeReaction={async () => { await props.removeReaction(commentID, 'heart') }}
-          users={heart.users}
-        />
+        {
+          Object.entries(reactionObj).map(([key, data]) => (
+            <ReactionButton
+              key={key}
+              disabled={disabled}
+              currentUser={currentUser}
+              initialCount={data.count}
+              isClicked={data.viewerHasReacted}
+              addReaction={async () => {
+                await props.addReaction(commentID, data.type)
+              }}
+              removeReaction={async () => {
+                await props.removeReaction(commentID, data.type)
+              }}
+              users={data.users}
+              {...btnInfoObj[data.type]}
+            />
+          ))
+        }
       </CardActions>
-    </Card>)
+    </StyledCard>)
 }
 
 export default CommentCard
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts b/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts
deleted file mode 100644
index 2683b10d..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import Red from '@material-ui/core/colors/red'
-
-export const useStyles = makeStyles(theme => ({
-  contentRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-    paddingTop: '0px',
-  },
-  headerRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-    paddingTop: theme.spacing(2),
-  },
-  commentMargin: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
-  },
-  red: {
-    color: Red[500],
-  },
-  yellow: {
-    color: '#ffcf56',
-  },
-  nullReactionStartIcon: {
-    marginLeft: '0px',
-    marginRight: '0px',
-  },
-  nullReaction: {
-    padding: '5px 10px',
-  },
-  reactionButton: {
-    minWidth: '0px',
-  },
-  labelMargin: {
-    marginLeft: '1.5px',
-  },
-  avatarSmall: {
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-    fontSize: theme.spacing(1.5),
-  },
-  floatRight: {
-    float: 'right',
-  },
-}))
diff --git a/gatsby-theme-oi-wiki/src/types/common.ts b/gatsby-theme-oi-wiki/src/types/common.ts
index 494ed2b1..97d36c76 100644
--- a/gatsby-theme-oi-wiki/src/types/common.ts
+++ b/gatsby-theme-oi-wiki/src/types/common.ts
@@ -12,3 +12,4 @@ export type DeepRequiredNonNull<T> = {
 export type DeepWriteable<T> = {
   -readonly [P in keyof T]: DeepWriteable<T[P]>
 };
+export type ArrayItemType<T extends any[]> = T extends (infer U)[] ? U : never;

From d873c01981d71946cc21f10ed066ae3fc88b5314 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Sun, 24 Oct 2021 23:34:32 +0800
Subject: [PATCH 58/59] refactor: Comment Component

---
 .../src/components/Comment/Card/index.tsx     |   2 +-
 .../src/components/Comment/Comment.tsx        | 201 ---------------
 .../src/components/Comment/CommentBlock.tsx   | 239 ++++++++++++++++++
 .../src/components/Comment/CommentInput.tsx   |  92 ++++---
 .../src/components/Comment/api.ts             |  23 --
 .../src/components/Comment/index.tsx          |  37 +--
 ...inputContext.ts => inputContentContext.ts} |   0
 .../src/components/Comment/store.ts           | 166 ++++++++++++
 8 files changed, 469 insertions(+), 291 deletions(-)
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
 create mode 100644 gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Comment/api.ts
 rename gatsby-theme-oi-wiki/src/components/Comment/{inputContext.ts => inputContentContext.ts} (100%)
 create mode 100644 gatsby-theme-oi-wiki/src/components/Comment/store.ts

diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
index d11f1234..26f59e29 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { User } from '@mgtd/vssue-api-github-v4/lib/types'
 import Time from '../../Time'
 import { Reactions } from '../types'
-import { useInputContentContext } from '../inputContext'
+import { useInputContentContext } from '../inputContentContext'
 import ReactionButton, { ReactionButtonProps } from './ReactionButton'
 import Card from '@mui/material/Card'
 import Avatar from '@mui/material/Avatar'
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
deleted file mode 100644
index 0d26fe2c..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import { Button, CircularProgress, Divider, makeStyles, Tooltip, Typography } from '@material-ui/core'
-import React, { useEffect, useState } from 'react'
-import GithubV3 from '@mgtd/vssue-api-github-v3'
-import GithubV4 from '@mgtd/vssue-api-github-v4'
-import createPersistedState from 'use-persisted-state'
-import CommentCard from './Card'
-import CommentInput from './CommentInput'
-import { Comments, Issue, User } from './types'
-import { InputContentProvider } from './inputContext'
-import { getComments } from './api'
-
-const useToken = createPersistedState('github-access-token')
-
-interface Props {
-  clientID: string,
-  clientSecret: string,
-  repo: string,
-  owner: string,
-  admin: Array<string>,
-  id: string,
-}
-
-const useStyles = makeStyles((theme) => ({
-  link: {
-    color: theme.palette.text.primary,
-  },
-}))
-
-const CommentComponent: React.FC<Props> = (props) => {
-  const classes = useStyles()
-  const defaultUser = { username: '未登录用户', avatar: undefined, homepage: undefined }
-  const [token, setToken] = useToken(null)
-  const revokeToken = (): void => {
-    setToken(null)
-    setUser(defaultUser)
-  }
-  const [user, setUser] = useState<User>(defaultUser)
-  const [comments, setComments] = useState<Comments>({ count: 0, page: 0, perPage: 0, data: [] })
-  const [noIssue, setNoIssue] = useState(false)
-  const filteredComments = comments.data.filter(({ isMinimized }) => !isMinimized)
-  const [issue, setIssue] = useState<Issue>()
-  const [createIssueLoading, setCreateIssueLoading] = useState(false)
-  const authorized = user.username !== '未登录用户' && token && !noIssue
-  const isAdmin = props.admin.indexOf(user.username) >= 0
-  const ghAPIV3 = new GithubV3({
-    baseURL: 'https://github.com',
-    owner: props.owner,
-    repo: props.repo,
-    labels: ['gitalk'],
-    clientId: props.clientID,
-    clientSecret: props.clientSecret,
-    state: '123',
-    proxy: url => `https://cors-anywhere.mgt.workers.dev/?${url}`,
-  })
-  const ghAPIV4 = new GithubV4({
-    baseURL: 'https://github.com',
-    owner: props.owner,
-    repo: props.repo,
-    labels: ['gitalk'],
-    clientId: props.clientID,
-    clientSecret: props.clientSecret,
-    state: '123',
-    proxy: url => `https://cors-anywhere.mgt.workers.dev/?${url}`,
-  })
-  useEffect(() => {
-    const asyncFunc = async (): Promise<void> => {
-      let tk = token
-      if (!tk) {
-        tk = await ghAPIV3.handleAuth()
-        if (tk !== null) {
-          setToken(tk)
-        }
-      }
-      const tmp = await getComments(ghAPIV3, ghAPIV4, props.id, revokeToken, tk)
-      if (tmp === 'noIssue') {
-        setNoIssue(true)
-      } else if (tmp !== 'invalidToken') {
-        const [i, c] = tmp
-        setComments(c)
-        setIssue(i)
-      }
-      const u: User = await ghAPIV3.getUser({ accessToken: tk })
-      setUser(u)
-    }
-
-    asyncFunc().catch(reject => {
-      console.log(reject)
-    })
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.clientID, props.clientSecret, props.id])
-  const updateComments = async (): Promise<void> => {
-    const tmp = await getComments(ghAPIV3, ghAPIV4, props.id, revokeToken, token)
-    if (tmp !== 'invalidToken' && tmp !== 'noIssue') {
-      const [, c] = tmp
-      setComments(c)
-    }
-  }
-  const NoIssueComponent = (): React.ReactElement => {
-    return isAdmin
-      ? <Typography variant="body1" style={{ padding: '24px', textAlign: 'center' }}>
-        <Button variant="outlined" color="primary" disabled={createIssueLoading}
-                onClick={async () => {
-                  setCreateIssueLoading(true)
-                  await ghAPIV4.postIssue({ accessToken: token, title: props.id, content: location.href })
-                  // sleep 1s, 直接查询会返回无结果，迷惑
-                  await new Promise(resolve => setTimeout(resolve, 1000))
-                  const tmp = await getComments(ghAPIV3, ghAPIV4, props.id, revokeToken, token)
-                  setCreateIssueLoading(false)
-                  if (tmp !== 'invalidToken' && tmp !== 'noIssue') {
-                    const [i, c] = tmp
-                    setNoIssue(false)
-                    setComments(c)
-                    setIssue(i)
-                  }
-                }}>
-          为本页面创建 Issue
-          {createIssueLoading && <CircularProgress size={20} style={{ marginLeft: '4px' }}/>}
-        </Button>
-      </Typography>
-      : <Typography variant="body1" style={{ padding: '24px', textAlign: 'center' }}>
-        没有找到与本页面相关联的 issue
-      </Typography>
-  }
-  return (
-    <InputContentProvider>
-      <Typography variant="h6">
-        <Tooltip title="在 GitHub 上查看">
-          <a href={issue?.link} className={classes.link}>{`${filteredComments.length} 条评论`}</a>
-        </Tooltip>
-        <Tooltip title={authorized ? '登出' : '登录'}>
-          <div
-            style={{ float: 'right', cursor: 'pointer' }}
-            onClick={() => {
-              if (!token) {
-                ghAPIV3.redirectAuth()
-              } else {
-                setToken(null)
-                setUser(defaultUser)
-              }
-            }}
-          >
-            {user.username}
-          </div>
-        </Tooltip>
-      </Typography>
-      <Divider/>
-      <CommentInput
-        name={user.username}
-        avatarLink={user.avatar}
-        authorized={authorized}
-        showLogin={token === null}
-        handleLogin={() => {
-          ghAPIV3.redirectAuth()
-        }}
-        sendComment={async (v, setLoading) => {
-          setLoading(true)
-          try {
-            await ghAPIV3.postComment({ accessToken: token, issueId: issue.id, content: v })
-          } catch (e) {
-            setLoading(false)
-            return
-          }
-          updateComments()
-          setLoading(false)
-        }}
-      />
-      {noIssue
-        ? <NoIssueComponent/>
-        : filteredComments.map(({ content, author, createdAt, reactions, id, contentRaw }) => (
-          <CommentCard
-            avatarLink={author.avatar}
-            disabled={!authorized}
-            name={author.username}
-            contentHTML={content}
-            contentRaw={contentRaw}
-            time={createdAt}
-            key={id}
-            reactions={reactions}
-            currentUser={user}
-            commentID={id}
-            deleteComment={async (commentId, setDeleteLoading) => {
-              setDeleteLoading(true)
-              await ghAPIV4.deleteComment({ accessToken: token, commentId, issueId: issue.id })
-              updateComments()
-              setDeleteLoading(false)
-            }}
-            addReaction={async (commentId, reaction) => {
-              await ghAPIV4.postCommentReaction({ accessToken: token, commentId, reaction, issueId: issue.id })
-            }}
-            removeReaction={async (commentId, reaction) => {
-              await ghAPIV4.deleteCommentReaction({ accessToken: token, commentId, reaction, issueId: issue.id })
-            }}
-          />
-        ))
-      }
-    </InputContentProvider>
-  )
-}
-
-export default CommentComponent
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx b/gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx
new file mode 100644
index 00000000..ed00ad5e
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx
@@ -0,0 +1,239 @@
+import React, { useEffect, useState } from 'react'
+import CommentCard from './Card'
+import CommentInput from './CommentInput'
+import { InputContentProvider } from './inputContentContext'
+import styled from '@mui/material/styles/styled'
+import SmartLink from '../SmartLink'
+import { css } from '@emotion/react'
+import Box from '@mui/material/Box'
+import { observer } from 'mobx-react-lite'
+import { commentStore } from './store'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import CircularProgress from '@mui/material/CircularProgress'
+import Tooltip from '@mui/material/Tooltip'
+import Divider from '@mui/material/Divider'
+import { useLocation } from '@reach/router'
+import { computed } from 'mobx'
+
+
+const StyledLink = styled(SmartLink)(({ theme }) => css`
+  color: ${theme.palette.text.primary};
+`)
+
+const StyledTyp = styled(Typography)`
+  padding: 24px;
+  text-align: center;
+`
+
+const GithubLink: React.FC = observer(() => {
+  return (
+    <Tooltip title="在 GitHub 上查看">
+      <StyledLink href={commentStore.issue?.link}>{`${commentStore.filteredCommentsData.length} 条评论`}</StyledLink>
+    </Tooltip>
+  )
+})
+
+const LoginBlock: React.FC = observer(() => {
+  return (
+    <Tooltip title={commentStore.authorized ? '登出' : '登录'}>
+      <Box
+        sx={{ float: 'right', cursor: 'pointer' }}
+        onClick={() => {
+          if (commentStore.token) {
+            commentStore.setToken(null)
+            commentStore.resetUser()
+          } else {
+            commentStore.ghApiV3.redirectAuth()
+          }
+        }}
+      >
+        {commentStore.getUserName()}
+      </Box>
+    </Tooltip>
+  )
+})
+
+interface NoIssueBlockProps {
+  id: string;
+  admin: Array<string>;
+}
+
+const NoIssueBlock: React.FC<NoIssueBlockProps> = (props) => {
+  const { admin, id } = props
+  const isAdmin = computed(() => admin.indexOf(commentStore.getUserName())).get()
+  const [createIssueLoading, setCreateIssueLoading] = useState(false)
+  const { href } = useLocation()
+
+  return isAdmin
+    ? <StyledTyp variant="body1">
+      <Button
+        variant="outlined"
+        color="primary"
+        disabled={createIssueLoading}
+        onClick={async () => {
+          setCreateIssueLoading(true)
+          await commentStore.ghApiV4.postIssue({ accessToken: commentStore.token, title: id, content: href })
+          // sleep 1s, 直接查询会返回无结果，迷惑
+          await new Promise(resolve => setTimeout(resolve, 1000))
+          const tmp = await commentStore.getComments(id)
+          setCreateIssueLoading(false)
+          if (tmp !== 'invalidToken' && tmp !== 'noIssue') {
+            const [i, c] = tmp
+            commentStore.setComments(c)
+            commentStore.setIssue(i)
+          }
+        }}>
+        为本页面创建 Issue
+        {createIssueLoading && <CircularProgress size={20} sx={{ ml: 4 }}/>}
+      </Button>
+    </StyledTyp>
+    : <StyledTyp variant="body1">
+      没有找到与本页面相关联的 issue
+    </StyledTyp>
+}
+
+interface CommentListProps {
+  id: string;
+}
+
+const CommentList: React.FC<CommentListProps> = observer((props) => {
+  const { id: issueTitle } = props
+
+  const issueId = computed(() => commentStore.issue?.id || '').get()
+  return (
+    <>
+      {commentStore.filteredCommentsData.map(({ content, author, createdAt, reactions, id, contentRaw }) => (
+        <CommentCard
+          avatarLink={author.avatar || ''}
+          disabled={!commentStore.authorized}
+          name={author.username}
+          contentHTML={content}
+          contentRaw={contentRaw}
+          time={createdAt}
+          key={id}
+          reactions={reactions || []}
+          currentUser={commentStore.user}
+          commentID={id}
+          deleteComment={async (commentId, setDeleteLoading) => {
+            setDeleteLoading(true)
+            await commentStore.ghApiV4.deleteComment({ accessToken: commentStore.token, commentId, issueId })
+            await commentStore.updateComments(issueTitle)
+            setDeleteLoading(false)
+          }}
+          addReaction={async (commentId, reaction) => {
+            await commentStore.ghApiV4.postCommentReaction({
+              accessToken: commentStore.token,
+              commentId,
+              reaction,
+              issueId,
+            })
+          }}
+          removeReaction={async (commentId, reaction) => {
+            await commentStore.ghApiV4.deleteCommentReaction({
+              accessToken: commentStore.token,
+              commentId,
+              reaction,
+              issueId,
+            })
+          }}
+        />
+      ))}
+    </>
+  )
+})
+
+export interface CommentBlockProps {
+  clientID: string,
+  clientSecret: string,
+  repo: string,
+  owner: string,
+  admin: Array<string>,
+  id: string,
+}
+
+const CommentBlock: React.FC<CommentBlockProps> = observer((props) => {
+  const { owner, repo, clientID, clientSecret, admin, id } = props
+
+  useEffect(() => {
+    commentStore.createApiInfo({
+      owner,
+      repo,
+      clientSecret,
+      clientId: clientID,
+    })
+
+    return () => {
+      commentStore.stopStore()
+    }
+  }, [clientID, clientSecret, owner, repo])
+
+
+  useEffect(() => {
+    const asyncFunc = async (): Promise<void> => {
+      if (!commentStore.token) {
+        await commentStore.ghApiV3.handleAuth().then((v) => {
+          if (v !== null) {
+            commentStore.setToken(v)
+          }
+        })
+      }
+
+      const res = await commentStore.getComments(id)
+      if (res !== 'invalidToken' && res !== 'noIssue') {
+        const [issue, comments] = res
+        commentStore.setComments(comments)
+        commentStore.setIssue(issue)
+      }
+
+      commentStore.setUser(
+        await commentStore.ghApiV3.getUser({ accessToken: commentStore.token }),
+      )
+    }
+
+    asyncFunc().catch(reject => {
+      console.log(reject)
+    })
+
+  }, [id])
+
+
+  return (
+    <InputContentProvider>
+      <Typography variant="h6">
+        <GithubLink/>
+        <LoginBlock/>
+      </Typography>
+      <Divider/>
+      <CommentInput
+        name={commentStore.getUserName()}
+        avatarLink={commentStore.user.avatar || ''}
+        authorized={commentStore.authorized}
+        showLogin={commentStore.token === null}
+        handleLogin={() => {
+          commentStore.ghApiV3.redirectAuth()
+        }}
+        sendComment={async (v, setLoading) => {
+          setLoading(true)
+          await commentStore.ghApiV3.postComment({
+            accessToken: commentStore.token,
+            issueId: commentStore.issue?.id || '',
+            content: v,
+          })
+            .then(() => {
+              commentStore.updateComments(id)
+            })
+            .finally(() => {
+              setLoading(false)
+            })
+        }}
+      />
+      {commentStore.noIssue
+        ? <NoIssueBlock admin={admin} id={id}/>
+        : <CommentList id={id}/>
+      }
+    </InputContentProvider>
+  )
+})
+
+export default CommentBlock
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx b/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx
index 674c8dd0..6501bda0 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx
@@ -1,8 +1,15 @@
 import React, { useState } from 'react'
-import { makeStyles, Avatar, TextField, Grid, Button, Hidden, LinearProgress } from '@material-ui/core'
-import { useInputContentContext } from './inputContext'
+import { useInputContentContext } from './inputContentContext'
+import LinearProgress from '@mui/material/LinearProgress'
+import Grid from '@mui/material/Grid'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Avatar from '@mui/material/Avatar'
+import { TextField } from '@mui/material'
 
-interface Props {
+interface CommentInputProps {
   avatarLink: string,
   name: string
   sendComment: (res: string, setLoading: (loading: boolean) => void) => Promise<void>,
@@ -11,64 +18,51 @@ interface Props {
   authorized: boolean,
 }
 
-const useStyles = makeStyles(theme => ({
-  contentRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-  },
-  headerRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-    paddingTop: theme.spacing(2),
-  },
-  commentMargin: {
-    marginTop: theme.spacing(1),
-  },
-  button: {
-    marginBottom: theme.spacing(1),
-    marginTop: theme.spacing(1),
-  },
-  buttonDiv: {
-    textAlign: 'right',
-    marginBottom: theme.spacing(1),
-  },
-}))
+const StyledGrid = styled(Grid)(({ theme }) => css`
+  margin-top: ${theme.spacing(1)};
+`) as typeof Grid
 
-const CommentInput: React.FC<Props> = (props) => {
-  const classes = useStyles()
+const BtnWrapper = styled(Box)(({ theme }) => css`
+  text-align: right;
+  margin-bottom: ${theme.spacing(1)};
+`)
+
+const StyledBtn = styled(Button)(({ theme }) => css`
+  margin-block: ${theme.spacing(1)};
+`)
+
+const CommentInput: React.FC<CommentInputProps> = (props) => {
+  const { name, avatarLink, authorized } = props
   const { inputContent, setInputContent } = useInputContentContext()
-  const [loading, setLoading] = useState<boolean>(false)
+  const [loading, setLoading] = useState(false)
+
   return (
     <>
-      {loading && <LinearProgress />}
-      <Grid container className={classes.commentMargin} justify="space-around" spacing={2}>
-        <Hidden smDown>
-          <Grid item>
-            <Avatar alt={props.name} src={props.avatarLink}/>
-          </Grid>
-        </Hidden>
-        <Grid item xs>
+      {loading && <LinearProgress/>}
+      <StyledGrid container={true} spacing={2} justifyContent="center">
+        <Grid item={true} sx={{ display: { sm: 'none', md: 'block' } }}>
+          <Avatar alt={name} src={avatarLink}/>
+        </Grid>
+        <Grid item={true} xs={true}>
           <TextField
             placeholder="我们鼓励在讨论区讨论有意义的内容及关于文章的勘误，无意义的讨论将会被管理员删除"
-            multiline
-            fullWidth
-            disabled={!props.authorized || loading}
+            multiline={true}
+            fullWidth={true}
+            disabled={!authorized || loading}
             rows={5}
             value={inputContent}
-            onChange={(e) => { setInputContent(e.target.value) }}
+            onChange={(e) => {
+              setInputContent(e.target.value)
+            }}
             variant="outlined"
           />
         </Grid>
-      </Grid>
-      <div className={classes.buttonDiv}>
-        <Button
+      </StyledGrid>
+      <BtnWrapper>
+        <StyledBtn
           variant="contained"
           color="primary"
-          className={classes.button}
           size="small"
-          // disabled={loading && props.showLogin ? false : !props.authorized}
           onClick={() => {
             if (props.showLogin) {
               props.handleLogin()
@@ -78,8 +72,8 @@ const CommentInput: React.FC<Props> = (props) => {
             }
           }}>
           {props.showLogin ? '登录' : '评论'}
-        </Button>
-      </div>
+        </StyledBtn>
+      </BtnWrapper>
     </>
   )
 }
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/api.ts b/gatsby-theme-oi-wiki/src/components/Comment/api.ts
deleted file mode 100644
index 017528df..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/api.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import GithubV3 from '@mgtd/vssue-api-github-v3'
-import GithubV4 from '@mgtd/vssue-api-github-v4'
-import { Comments, Issue } from './types'
-
-export async function getComments (ghAPIV3: GithubV3, ghAPIV4: GithubV4, id: string, revokeToken: () => void, token?: string): Promise<[Issue, Comments] | 'noIssue' | 'invalidToken'> {
-  let issue: Issue
-  try {
-    issue = await ghAPIV3.getIssue({ accessToken: token, issueTitle: id })
-  } catch (e) {
-    revokeToken()
-    return 'invalidToken'
-  }
-  if (issue === null) {
-    return 'noIssue'
-  }
-  let comments: Comments
-  if (!token) {
-    comments = await ghAPIV3.getComments({ accessToken: token, issueId: issue.id, query: { page: 1, perPage: 100 } })
-  } else {
-    comments = await ghAPIV4.getComments({ accessToken: token, issueId: issue.id, query: { page: 1, perPage: 100, sort: 'asce' } })
-  }
-  return [issue, comments]
-}
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/index.tsx b/gatsby-theme-oi-wiki/src/components/Comment/index.tsx
index 478ccaa4..bb311ad2 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/index.tsx
@@ -1,7 +1,13 @@
-import { Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Typography } from '@material-ui/core'
-import { ExpandMore as ExpandMoreIcon, Forum as ForumIcon } from '@material-ui/icons'
 import React from 'react'
-import CommentComponent from './Comment'
+import CommentBlock from './CommentBlock'
+import Forum from '@mui/icons-material/Forum'
+import styled from '@mui/material/styles/styled'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import Typography from '@mui/material/Typography'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import Container from '@mui/material/Container'
 
 export interface CommentSystemProps {
   title: string
@@ -10,7 +16,7 @@ export interface CommentSystemProps {
 export type CommentComponentProps = CommentSystemProps
 
 const CommentSystem: React.FC<CommentSystemProps> = ({ title }) => (
-  <CommentComponent
+  <CommentBlock
     id={`${title} - OI Wiki`}
     owner="OI-wiki"
     repo="gitment"
@@ -31,21 +37,18 @@ const CommentSystem: React.FC<CommentSystemProps> = ({ title }) => (
   />
 )
 
-const useStyles = makeStyles({
-  metaIcon: {
-    verticalAlign: 'sub',
-  },
-})
+const StyledForumIcon = styled(Forum)`
+  vertical-align: sub;
+  font-size: small;
+`
+
+const Comment: React.FC<CommentComponentProps> = (props) => {
+  const { title } = props
 
-const Comment: React.FC<CommentComponentProps> = ({ title }) => {
-  const classes = useStyles()
   return (
-    <Accordion variant="outlined" defaultExpanded>
-      <AccordionSummary
-        expandIcon={<ExpandMoreIcon/>}
-        aria-controls="comment"
-      >
-        <Typography><ForumIcon fontSize="small" className={classes.metaIcon}/>{' 评论'}</Typography>
+    <Accordion variant="outlined" defaultExpanded={true}>
+      <AccordionSummary expandIcon={<ExpandMore/>} aria-controls="comment">
+        <Typography><StyledForumIcon/>{' 评论'}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Container>
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/inputContext.ts b/gatsby-theme-oi-wiki/src/components/Comment/inputContentContext.ts
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/Comment/inputContext.ts
rename to gatsby-theme-oi-wiki/src/components/Comment/inputContentContext.ts
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/store.ts b/gatsby-theme-oi-wiki/src/components/Comment/store.ts
new file mode 100644
index 00000000..2765e6e6
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Comment/store.ts
@@ -0,0 +1,166 @@
+import { Comments, User } from '@mgtd/vssue-api-github-v4/lib/types'
+import { Issue } from './types'
+import { Nullable } from '../../types/common'
+import persistStore from '../../utils/persistStore'
+import GithubV3 from '@mgtd/vssue-api-github-v3'
+import GithubV4 from '@mgtd/vssue-api-github-v4'
+
+interface ApiInfo {
+  baseURL: string;
+  owner: string;
+  repo: string;
+  labels: Array<string>;
+  clientId: string;
+  clientSecret: string;
+  state: string;
+  proxy: string | ((url: string) => string);
+}
+
+export type Result = [Issue, Comments] | 'noIssue' | 'invalidToken'
+
+export interface CommentStore {
+  comments: Nullable<Comments>;
+  user: User;
+  issue: Nullable<Issue>;
+  token: Nullable<string>;
+  apiInfo: Nullable<ApiInfo>;
+
+  setComments(val: Nullable<Comments>): void;
+
+  setUser(val: User): void;
+
+  setIssue(val: Nullable<Issue>): void;
+
+  setToken(val: Nullable<string>): void;
+
+  setApiInfo(val: Nullable<ApiInfo>): void;
+
+  createApiInfo(val: Pick<ApiInfo, 'owner' | 'repo' | 'clientId' | 'clientSecret'>): void;
+
+  revokeToken(): void;
+
+  resetUser(): void;
+
+  getUserName(): string;
+
+  getComments(id: string): Promise<Result>;
+
+  updateComments(id: string): Promise<void>;
+
+  get noIssue(): boolean;
+
+  get filteredCommentsData(): Comments['data'];
+
+  get authorized(): boolean;
+
+  get ghApiV3(): GithubV3;
+
+  get ghApiV4(): GithubV4;
+}
+
+const COMMENT_TOKEN = 'github-access-token'
+
+const DEFAULT_USER: User = {
+  username: '',
+  avatar: '',
+  homepage: '',
+}
+
+const commentStore = persistStore<CommentStore>({
+  comments: null,
+  user: DEFAULT_USER,
+  issue: null,
+  token: null,
+  apiInfo: null,
+
+  setComments(val) {
+    this.comments = val
+  },
+  setUser(val) {
+    this.user = val
+  },
+  setIssue(val) {
+    this.issue = val
+  },
+  setToken(val) {
+    this.token = val
+  },
+  setApiInfo(val) {
+    this.apiInfo = val
+  },
+  createApiInfo(val) {
+    this.setApiInfo({
+      baseURL: 'https://github.com',
+      labels: ['gitalk'],
+      state: '123',
+      proxy: url => `https://cors-anywhere.mgt.workers.dev/?${url}`,
+      ...val,
+    })
+  },
+  revokeToken() {
+    this.setToken(null)
+    this.resetUser()
+  },
+  resetUser() {
+    this.setUser(DEFAULT_USER)
+  },
+  getComments(id) {
+    return this.ghApiV3.getIssue({ accessToken: this.token, issueTitle: id })
+      .catch(() => {
+        this.revokeToken()
+        throw 'invalidToken'
+      })
+      .then((issue) => {
+        if (issue === null) {
+          throw 'noIssue'
+        } else {
+          return issue
+        }
+      })
+      .then(async (issue) => {
+        const comments = this.token
+          ? await this.ghApiV4.getComments({
+            accessToken: this.token,
+            issueId: issue.id,
+            query: { page: 1, perPage: 100, sort: 'asce' },
+          })
+          : await this.ghApiV3.getComments({
+            accessToken: this.token,
+            issueId: issue.id,
+            query: { page: 1, perPage: 100 },
+          })
+        return [issue, comments]
+      })
+  },
+  async updateComments(id) {
+    const res = await commentStore.getComments(id)
+    if (res !== 'invalidToken' && res !== 'noIssue') {
+      commentStore.setComments(res[1])
+    }
+  },
+
+  get getUserName() {
+    return this.user?.username || '未登录用户'
+  },
+  get noIssue() {
+    return !this.issue
+  },
+  get filteredCommentsData() {
+    return this.comments?.data.filter((v: { isMinimized: boolean }) => v.isMinimized) || []
+  },
+  get authorized() {
+    return !!this.user && !!this.token && !this.noIssue
+  },
+  get ghApiV3() {
+    return new GithubV3(this.apiInfo)
+  },
+  get ghApiV4() {
+    return new GithubV4(this.apiInfo)
+  },
+
+}, {
+  name: COMMENT_TOKEN,
+  properties: ['token'],
+})
+
+export { commentStore, COMMENT_TOKEN, DEFAULT_USER }

From 30bb570e45f96f740cbdf71af7add270932b8a89 Mon Sep 17 00:00:00 2001
From: SkyeYoung <iskyex@outlook.com>
Date: Tue, 26 Oct 2021 23:41:37 +0800
Subject: [PATCH 59/59] fix(Comment): style, store

---
 .../Comment/Card/ReactionButton.tsx           | 10 ++---
 .../src/components/Comment/CommentBlock.tsx   | 11 ++----
 .../src/components/Comment/store.ts           | 37 ++++++++++++-------
 gatsby-theme-oi-wiki/src/templates/Doc.tsx    |  3 ++
 4 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
index d5b0f0f1..8d758fc0 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
@@ -34,7 +34,7 @@ const StyledBtn = styled(Button)`
   }
 `
 
-const StyledAvatarGroup = styled(AvatarGroup)(({ theme }) => css`
+const StyledAvatar = styled(Avatar)(({ theme }) => css`
   width: ${theme.spacing(3)};
   height: ${theme.spacing(3)};
   font-size: ${theme.spacing(1.5)};
@@ -93,14 +93,14 @@ const ReactionButton: React.FC<ReactionButtonProps> = (props) => {
       onClick={clickFunc}
     >
       {loading
-        ? <CircularProgress size={24} sx={{ mx: 4 }}/>
+        ? <CircularProgress size={24} sx={{ mx: '4px' }}/>
         : <>
           {count !== 0 && count}
-          <StyledAvatarGroup max={3} sx={{ ml: 4 }}>
+          <AvatarGroup max={3} sx={{ ml: '4px' }}>
             {users.map(({ avatar, username }) => (
-              <Avatar alt={username} src={avatar} key={username}/>
+              <StyledAvatar alt={username} src={avatar} key={username}/>
             ))}
-          </StyledAvatarGroup>
+          </AvatarGroup>
         </>
       }
     </StyledBtn>
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx b/gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx
index ed00ad5e..69a46f13 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx
@@ -48,7 +48,7 @@ const LoginBlock: React.FC = observer(() => {
           }
         }}
       >
-        {commentStore.getUserName()}
+        {commentStore.user.username}
       </Box>
     </Tooltip>
   )
@@ -61,7 +61,7 @@ interface NoIssueBlockProps {
 
 const NoIssueBlock: React.FC<NoIssueBlockProps> = (props) => {
   const { admin, id } = props
-  const isAdmin = computed(() => admin.indexOf(commentStore.getUserName())).get()
+  const isAdmin = computed(() => admin.includes(commentStore.user.username)).get()
   const [createIssueLoading, setCreateIssueLoading] = useState(false)
   const { href } = useLocation()
 
@@ -162,10 +162,6 @@ const CommentBlock: React.FC<CommentBlockProps> = observer((props) => {
       clientSecret,
       clientId: clientID,
     })
-
-    return () => {
-      commentStore.stopStore()
-    }
   }, [clientID, clientSecret, owner, repo])
 
 
@@ -197,7 +193,6 @@ const CommentBlock: React.FC<CommentBlockProps> = observer((props) => {
 
   }, [id])
 
-
   return (
     <InputContentProvider>
       <Typography variant="h6">
@@ -206,7 +201,7 @@ const CommentBlock: React.FC<CommentBlockProps> = observer((props) => {
       </Typography>
       <Divider/>
       <CommentInput
-        name={commentStore.getUserName()}
+        name={commentStore.user.username}
         avatarLink={commentStore.user.avatar || ''}
         authorized={commentStore.authorized}
         showLogin={commentStore.token === null}
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/store.ts b/gatsby-theme-oi-wiki/src/components/Comment/store.ts
index 2765e6e6..affe10b9 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/store.ts
+++ b/gatsby-theme-oi-wiki/src/components/Comment/store.ts
@@ -4,6 +4,7 @@ import { Nullable } from '../../types/common'
 import persistStore from '../../utils/persistStore'
 import GithubV3 from '@mgtd/vssue-api-github-v3'
 import GithubV4 from '@mgtd/vssue-api-github-v4'
+import { observable } from 'mobx'
 
 interface ApiInfo {
   baseURL: string;
@@ -24,6 +25,8 @@ export interface CommentStore {
   issue: Nullable<Issue>;
   token: Nullable<string>;
   apiInfo: Nullable<ApiInfo>;
+  noIssue: boolean;
+
 
   setComments(val: Nullable<Comments>): void;
 
@@ -35,19 +38,18 @@ export interface CommentStore {
 
   setApiInfo(val: Nullable<ApiInfo>): void;
 
+  setNoIssue(val: boolean): void;
+
   createApiInfo(val: Pick<ApiInfo, 'owner' | 'repo' | 'clientId' | 'clientSecret'>): void;
 
   revokeToken(): void;
 
   resetUser(): void;
 
-  getUserName(): string;
-
   getComments(id: string): Promise<Result>;
 
   updateComments(id: string): Promise<void>;
 
-  get noIssue(): boolean;
 
   get filteredCommentsData(): Comments['data'];
 
@@ -58,10 +60,10 @@ export interface CommentStore {
   get ghApiV4(): GithubV4;
 }
 
-const COMMENT_TOKEN = 'github-access-token'
+const COMMENT_STORE_ID = 'github-access-token'
 
 const DEFAULT_USER: User = {
-  username: '',
+  username: '未登录用户',
   avatar: '',
   homepage: '',
 }
@@ -72,6 +74,7 @@ const commentStore = persistStore<CommentStore>({
   issue: null,
   token: null,
   apiInfo: null,
+  noIssue: false,
 
   setComments(val) {
     this.comments = val
@@ -88,6 +91,9 @@ const commentStore = persistStore<CommentStore>({
   setApiInfo(val) {
     this.apiInfo = val
   },
+  setNoIssue(val: boolean) {
+    this.noIssue = val
+  },
   createApiInfo(val) {
     this.setApiInfo({
       baseURL: 'https://github.com',
@@ -112,12 +118,15 @@ const commentStore = persistStore<CommentStore>({
       })
       .then((issue) => {
         if (issue === null) {
+          this.setNoIssue(true)
           throw 'noIssue'
         } else {
           return issue
         }
       })
       .then(async (issue) => {
+        this.setNoIssue(false)
+
         const comments = this.token
           ? await this.ghApiV4.getComments({
             accessToken: this.token,
@@ -129,6 +138,7 @@ const commentStore = persistStore<CommentStore>({
             issueId: issue.id,
             query: { page: 1, perPage: 100 },
           })
+
         return [issue, comments]
       })
   },
@@ -139,14 +149,9 @@ const commentStore = persistStore<CommentStore>({
     }
   },
 
-  get getUserName() {
-    return this.user?.username || '未登录用户'
-  },
-  get noIssue() {
-    return !this.issue
-  },
+
   get filteredCommentsData() {
-    return this.comments?.data.filter((v: { isMinimized: boolean }) => v.isMinimized) || []
+    return this.comments?.data.filter((v: { isMinimized: boolean }) => !v.isMinimized) || []
   },
   get authorized() {
     return !!this.user && !!this.token && !this.noIssue
@@ -159,8 +164,12 @@ const commentStore = persistStore<CommentStore>({
   },
 
 }, {
-  name: COMMENT_TOKEN,
+  name: COMMENT_STORE_ID,
   properties: ['token'],
+}, {
+  decorators: {
+    apiInfo: observable.ref,
+  },
 })
 
-export { commentStore, COMMENT_TOKEN, DEFAULT_USER }
+export { commentStore, COMMENT_STORE_ID, DEFAULT_USER }
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
index 9791e32e..45f116c5 100644
--- a/gatsby-theme-oi-wiki/src/templates/Doc.tsx
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -7,6 +7,7 @@ import { HistoryLocation } from '../types/location'
 import Title from '../components/Title'
 import Meta from '../components/Meta'
 import Layout from '../components/Layout'
+import Comment from '../components/Comment'
 
 export const query = graphql`
   query DocInfo($id: String!) {
@@ -93,6 +94,8 @@ const Doc: React.FC<DocProps> = (props) => {
         tags={tags}
         authors={authors}
         relativePath={relativePath}/>}
+
+      {!noComment && <Comment title={title}/>}
     </Layout>
   )
 }