[Official website] Beautify the homepage and add some components

website/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: ['plugin:react/recommended', 'standard'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: ['react'],
+  rules: {}
+}

website/gatsby-browser.js

@@ -3,14 +3,17 @@
  *
  * See: https://www.gatsbyjs.com/docs/browser-apis/
  */
+require("antd/lib/menu/style/index.css")
 require("./src/styles/global.css")
+require("./src/styles/normal.css")
 const React = require("react")
 // const { default: AppHeader } = require("./src/components/AppHeader")
 
 const Layout = require("./src/components/documentsMenu/menu").default
 const JsonLayout = require("./src/components/jsonMenu/menu").default
 const SqlLayout = require("./src/components/sqlMenu/menu").default
 const SpaceLayout = require("./src/components/space/spaceLayout").default
+const Context = require("./src/components/Context/index").default
 // const AppFooter = require("./src/components/AppFooter").default
 
 // You can delete this file if you're not using it
@@ -22,17 +25,19 @@ exports.wrapPageElement = ({ element, props }) => {
   const flag = element.key.includes("documents") || element.key.includes("examples") || element.key.includes("download")
   console.log(element.key)
   return (
-    <div>
-      {flag ? (
-        <>
-          {element.key.includes("documents") && <Layout {...props}>{element}</Layout>}
-          {element.key.includes("examples/json") && <JsonLayout {...props}>{element}</JsonLayout>}
-          {element.key.includes("examples/sql") && <SqlLayout {...props}>{element}</SqlLayout>}
-        </>
-      ) : (
-        <SpaceLayout {...props}>{element}</SpaceLayout>
-      )}
-    </div>
+    <Context>
+      <>
+        {flag ? (
+          <>
+            {element.key.includes("documents") && <Layout {...props}>{element}</Layout>}
+            {element.key.includes("examples/json") && <JsonLayout {...props}>{element}</JsonLayout>}
+            {element.key.includes("examples/sql") && <SqlLayout {...props}>{element}</SqlLayout>}
+          </>
+        ) : (
+          <SpaceLayout {...props}>{element}</SpaceLayout>
+        )}
+      </>
+    </Context>
   )
 }
 

website/gatsby-config.js

@@ -1,5 +1,6 @@
 const path = require("path")
 module.exports = {
+  pathPrefix: `/chunjun`,
   siteMetadata: {
     title: `Gatsby Default Starter`,
     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
@@ -34,7 +35,15 @@ module.exports = {
         path: path.resolve(__dirname, "src/images"),
       },
     },
-
+    {
+      resolve: `gatsby-plugin-nprogress`,
+      options: {
+        // Setting a color is optional.
+        color: `tomato`,
+        // Disable the loading spinner.
+        showSpinner: false,
+      },
+    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     `json-content`,
@@ -62,21 +71,7 @@ module.exports = {
         ],
       },
     },
-
-    {
-      resolve: `gatsby-plugin-manifest`,
-      options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        // This will impact how browsers show your PWA/website
-        // https://css-tricks.com/meta-theme-color-and-trickery/
-        // theme_color: `#663399`,
-        display: `minimal-ui`,
-        icon: `src/images/logo-dark.svg`, // This path is relative to the root of the site.
-      },
-    },
+
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

website/gatsby-node.js

@@ -7,3 +7,17 @@ exports.createPages = async ({ actions }) => {
     defer: true,
   })
 }
+exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
+  if (stage === "build-html" || stage === "develop-html") {
+    actions.setWebpackConfig({
+      module: {
+        rules: [
+          {
+            test: /react-json-view|gatsby-plugin-mantine|gatsby-link|gatsby-plugin-manifest/,
+            use: loaders.null(),
+          },
+        ],
+      },
+    })
+  }
+}

website/gatsby-ssr.js

@@ -1,7 +1,11 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.com/docs/ssr-apis/
- */
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { createStylesServer, ServerStyles } from '@mantine/ssr';
 
-// You can delete this file if you're not using it
+const stylesServer = createStylesServer();
+
+export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) => {
+  const html = renderToString(bodyComponent);
+  setHeadComponents([<ServerStyles html={html} server={stylesServer} />]);
+  replaceBodyHTMLString(html);
+};

website/githubInfo/build.js

@@ -0,0 +1,18 @@
+/**
+ * @description 获取chunjun repo 成员的脚步
+ *  使用node 执行后 成员信息会保存在同级目录的 member.json下
+ */
+const axios = require('axios');
+const contributorsApi = 'https://api.github.com/repos/DTStack/chunjun/contributors'
+const fs = require('fs')
+const path = require('path')
+const fileName = 'members.json'
+axios
+    .get(contributorsApi)
+    .then(res => {
+        fs.writeFileSync(path.resolve(__dirname, './' + fileName), JSON.stringify(res.data, null, '\t'))
+    })
+    .catch(error => {
+        console.error(error);
+    });
+

website/package.json

@@ -5,18 +5,24 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
+    "@ant-design/icons": "^4.7.0",
     "@icon-park/react": "^1.3.5",
     "@mantine/core": "^4.2.5",
     "@mantine/hooks": "^4.2.5",
-    "antd": "^4.21.0",
+    "@mantine/ssr": "^4.2.11",
+    "@octokit/core": "^4.0.4",
+    "antd": "^4.21.5",
     "aos": "^2.3.4",
     "autoprefixer": "^10.4.7",
+    "axios": "^0.27.2",
+    "eslint-plugin-react": "^7.30.1",
     "gatsby": "^4.17.2",
     "gatsby-link": "^4.17.0",
     "gatsby-plugin-gatsby-cloud": "^4.17.0",
     "gatsby-plugin-image": "^2.17.0",
     "gatsby-plugin-manifest": "^4.17.0",
     "gatsby-plugin-mantine": "^4.0.0",
+    "gatsby-plugin-nprogress": "^4.17.0",
     "gatsby-plugin-offline": "^5.17.0",
     "gatsby-plugin-postcss": "^5.16.0",
     "gatsby-plugin-react-helmet": "^5.17.0",
@@ -32,28 +38,41 @@
     "gatsby-transformer-plaintext": "^2.0.0",
     "gatsby-transformer-remark": "^5.14.0",
     "gatsby-transformer-sharp": "^4.17.0",
+    "gh-pages": "^4.0.0",
+    "highlight.js": "^11.5.1",
+    "lodash": "^4.17.21",
     "node-sass": "^6.0.1",
     "postcss": "^8.4.14",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-helmet": "^6.1.0",
     "react-highlight": "^0.14.0",
+    "react-icons": "^4.4.0",
+    "react-json-tree": "^0.17.0",
     "react-json-view": "^1.21.3",
+    "react-spring": "^9.4.5",
+    "react-transition-group": "^4.4.2",
     "tailwindcss": "^3.1.0"
   },
   "devDependencies": {
+    "eslint": "^8.0.1",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
     "prettier": "^2.6.2"
   },
   "keywords": [
     "gatsby"
   ],
   "license": "0BSD",
   "scripts": {
+    "deploy": "node githubInfo/build &&  gatsby build --prefix-paths && gh-pages -d public",
     "build": "gatsby build",
-    "develop": "gatsby develop",
+    "develop": "node githubInfo/build && gatsby develop  ",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
-    "start": "gatsby develop",
+    "start": "node githubInfo/build &&  gatsby develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"

website/src/assets/sass/index.scss

@@ -1,20 +1,3 @@
-:root {
-  --white-color: #fff;
-  --hover-text-color: #5f27cd;
-
-  --dark-bg: #11081f;
-  --white-bg: #fff;
-
-  --light-gray-bg: #fef9f4;
-  --medium-gray-bg: #fef9f4;
-
-  --black-text-color: #333;
-  --second-text-color: #666;
-  --blue: #5352ed;
-
-  --font-size-base: 14px;
-  --font-size-lg: 16px;
-}
 *,
 *::before,
 *::after {