feat: website

.eslintrc.js

@@ -44,7 +44,7 @@ const config = {
       jsx: true,
     },
     ecmaVersion: 2020,
-    project: ['tsconfig.json', 'tools/tsconfig.json', 'tsconfigs/tsconfig.eslint.json'],
+    project: ['tsconfig.json', 'tools/tsconfig.json', 'tsconfigs/tsconfig.eslint.json', 'docs/tsconfig.json'],
   },
   settings: {
     react: {

.github/workflows/commit.yaml

@@ -20,7 +20,7 @@ jobs:
           node-version: 16
           cache: yarn
       - name: Install dependencies
-        run: yarn install
+        run: yarn install && yarn docs install
       - name: Cache lint result
         uses: actions/cache@v3
         with:

docs/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  plugins: ['@emotion'],
 }

docs/docusaurus.config.js

@@ -29,9 +29,18 @@ const config = {
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
           editUrl: 'https://github.com/perfsee/perfsee/tree/main/docs/',
-          routeBasePath: '/',
+          routeBasePath: '/docs',
         },
         blog: false,
+        pages: {
+          path: 'src/pages',
+          routeBasePath: '/',
+          include: ['**/*.{js,jsx,ts,tsx,md,mdx}'],
+          exclude: ['**/_*.{js,jsx,ts,tsx,md,mdx}', '**/_*/**', '**/*.test.{js,jsx,ts,tsx}', '**/__tests__/**'],
+          rehypePlugins: [],
+          beforeDefaultRemarkPlugins: [],
+          beforeDefaultRehypePlugins: [],
+        },
       },
     ],
   ],
@@ -117,7 +126,7 @@ const config = {
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} Perfsee. Built with Docusaurus.`,
+        copyright: `Copyright © ${new Date().getFullYear()} Perfsee.`,
       },
       prism: {
         theme: lightCodeTheme,

docs/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const url: string
+  export default url
+}

docs/i18n/cn/docusaurus-theme-classic/footer.json

@@ -20,7 +20,7 @@
     "description": "The label of footer link with label=GitHub linking to https://github.com/perfsee/perfsee"
   },
   "copyright": {
-    "message": "Copyright © 2022 perfsee. Built with Docusaurus.",
+    "message": "Copyright © 2022 perfsee.",
     "description": "The footer copyright"
   }
 }

docs/package.json

@@ -16,8 +16,12 @@
   },
   "dependencies": {
     "@docusaurus/core": "2.0.1",
+    "@docusaurus/plugin-content-pages": "^2.0.1",
     "@docusaurus/preset-classic": "2.0.1",
+    "@docusaurus/theme-common": "^2.0.1",
     "@easyops-cn/docusaurus-search-local": "^0.31.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
@@ -26,7 +30,9 @@
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.0.1",
-    "@tsconfig/docusaurus": "^1.0.6"
+    "@emotion/babel-plugin": "^11.10.0",
+    "@tsconfig/docusaurus": "^1.0.6",
+    "@typescript-eslint/parser": "^5.30.7"
   },
   "browserslist": {
     "production": [

docs/src/components/advantages/index.tsx

@@ -0,0 +1,53 @@
+import KeySvg from '@site/assets/pages/key.svg'
+import RadarSvg from '@site/assets/pages/radar.svg'
+import TipsSvg from '@site/assets/pages/tips.svg'
+import WaterfallSvg from '@site/assets/pages/waterfalls.svg'
+import React from 'react'
+
+import { Card, Container, IconWrap } from './styled'
+
+export const Advantages = () => {
+  return (
+    <Container>
+      <Card>
+        <IconWrap bgColor="#e1eaff">
+          <RadarSvg />
+        </IconWrap>
+        <h2>In-depth details and analysis</h2>
+        <span>
+          Pioneering analyze front-end application's performance from perspectives, including packaged products,
+          integrated test environments, and back to source code.
+        </span>
+      </Card>
+      <Card>
+        <IconWrap bgColor="#d5f6f2">
+          <TipsSvg />
+        </IconWrap>
+        <h2>Lower threshold for performance analysis</h2>
+        <span>
+          Provide professional optimization advice based on multiple perspectives. Even newcomers with little experience
+          in performance optimization can follow the diagram.
+        </span>
+      </Card>
+      <Card>
+        <IconWrap bgColor="#d9f3fd">
+          <KeySvg />
+        </IconWrap>
+        <h2>Bridging the R&D process</h2>
+        <span>
+          From development to deployment, the Perfsee toolset has been permeated through the development process,
+          tracking performance changes between releases in real time.
+        </span>
+      </Card>
+      <Card>
+        <IconWrap bgColor="#d9f5d6">
+          <WaterfallSvg />
+        </IconWrap>
+        <h2>Data interfacing with RUM</h2>
+        <span>
+          Based on RUM data, gives further guidance on performance analysis and comparison with the online version.
+        </span>
+      </Card>
+    </Container>
+  )
+}

docs/src/components/advantages/styled.tsx

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled'
+
+export const Container = styled.div({
+  margin: '60px 0 150px',
+  padding: '0 60px',
+
+  display: 'flex',
+  justifyContent: 'space-around',
+
+  '@media(max-width: 960px)': {
+    flexWrap: 'wrap',
+  },
+
+  '@media(max-width: 480px)': {
+    margin: '60px 0 90px',
+  },
+})
+
+export const Card = styled.div({
+  maxWidth: '320px',
+  minWidth: '230px',
+  padding: '10px',
+  textAlign: 'center',
+  marginBottom: '30px',
+
+  h2: {
+    fontSize: '24px',
+    fontWeight: 'bold',
+    margin: '12px 0',
+  },
+
+  span: {
+    fontSize: '14px',
+  },
+})
+
+export const IconWrap = styled.div<{ bgColor: string }>(({ bgColor }) => ({
+  width: '48px',
+  height: '48px',
+  margin: '0 auto',
+  borderRadius: '24px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: bgColor,
+
+  svg: {
+    width: '24px',
+    height: '24px',
+  },
+}))

docs/src/components/banner/index.tsx

@@ -0,0 +1,30 @@
+import BannerLeftImage from '@site/assets/pages/banner-bg-left.png'
+import BannerRightImage from '@site/assets/pages/banner-bg-right.png'
+import React from 'react'
+
+import { PrimaryButton, DefaultButton } from '../button'
+
+import { BannerContainer, BannerLeftBgWrap, BannerRightBgWrap, ButtonsWrap, ContentWrap, Slogan } from './styled'
+
+export const HomeBanner = () => {
+  return (
+    <BannerContainer>
+      <BannerLeftBgWrap>
+        <img src={BannerLeftImage} />
+      </BannerLeftBgWrap>
+      <BannerRightBgWrap>
+        <img src={BannerRightImage} />
+      </BannerRightBgWrap>
+      <ContentWrap>
+        <Slogan>
+          <p>Care more about your</p>
+          <b>website performance</b>
+        </Slogan>
+        <ButtonsWrap>
+          <PrimaryButton href="https://perfsee.com">Try now</PrimaryButton>
+          <DefaultButton href="/docs">Docs</DefaultButton>
+        </ButtonsWrap>
+      </ContentWrap>
+    </BannerContainer>
+  )
+}