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] --- 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 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 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 = [ - , - , - , - , -