refactor: update all to MUI v5

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',
@@ -73,7 +73,9 @@ module.exports = {
     {
       files: [
         '.eslintrc.js',
-        'gatsby-*.js',
+        'gatsby-node.js',
+        'gatsby-config.js',
+        'gatsby-config.esm.js',
         'plugins/**/*.js',
       ],
       env: {

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 }

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)
+//   })
+// }