refactor: use packages and upgrade Gatsby to v4

g1eny0ung commented 2 years ago

This PR mainly refactors the whole website by extracting markdown processing-related logic into packages and upgrading Gatsby to v4.

Also, many major logical changes were made during the upgrade. In general, they can be grouped into the following sections:

[x] Move all download-related logic to packages/download.
[x] Move all text processing methods to packages/content.
[x] Use a configuration file docs.json to handle all docs' info. This allows us to unify all behavior related to version processing and so on.

[x] Use gatsby-plugin-layout to apply Layout components to all pages and templates automatically.
[x] Use gatsby-plugin-react-intl to replace the manually wrapped react-intl.
- However, there is a special situation here for our site that needs to be handled. Since most of our pages are created manually, we need to add this plugin-related param in the context. Below is the real code:
```
// create-pages/doc.js
createPage({
path,
component: template,
context: {
// ...
// gatsby-plugin-react-intl
intl: {
  language: lang,
  messages: messages[lang],
  routed: lang !== 'en',
  defaultLanguage: 'en',
  redirectDefaultLanguageToRoot: true,
  ignoredPaths: [],
},
```
[x] Merge en and zh pages into one gatsby-source-filesystem. There is no need to split them.
[x] Remove gatsby-transformer-remark. Since we use MDX to parse the markdown docs. Its no need to introduce an additional parser.
[x] Upgrade gatsby-plugin-purgecss. Remove useless configurations.
[x] Refer to https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/#opting-out-of-type-inference, speed up by bypassing the type inference.

[x] Rewrite all Bulma-related elements with @seagreenio/react-bulma to enhance the componentization.
[x] Refactor TOC of every different doc.
- First, bump it into a single layout component to avoid the problem of re-rendering due to page jumping.
- Optimize the animation of fold and unfold group items.
- Better visual effects
[x] Move the language switch to the navbar. This allows you to quickly switch between languages.
[x] For more independent components, use CSS modules.

[x] Deprecate consolidate-duplicate-urls.sh, write canonical url to the doc template directly.

netlify[bot] commented 2 years ago

❌ Deploy Preview for tidb-5-3-docs-zh failed.

🔨 Explore the source changes: 37a14771708b5cb47e22acf4846137f61de67585

netlify[bot] commented 2 years ago

✔️ Deploy Preview for quirky-swirles-2928a8 ready!

🔨 Explore the source changes: 1a410c416482bade51a30cc54933b748aa4efaa1

g1eny0ung commented 2 years ago

I will now merge this PR.

pingcap / website-docs