Merge pull request #3 from reactnativecn/feat/new-site

feat/nextjs

.github/workflows/gh-pages.yml

@@ -11,33 +11,16 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 14
-
-      - name: Get yarn cache
-        id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Cache dependencies
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('cnwebsite/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
       - name: Build
         run: |
-          cd site && yarn && yarn build && cd -
-          mv site/public ./
-          cp CNAME public/
-          mv agreement public/agreement
-          cp .nojekyll public/
+          cd site && pnpm i && pnpm build && cd -
+          mv site/out ./
+          cp CNAME out/
+          mv agreement out/agreement
+          cp .nojekyll out/
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./public
+          publish_dir: ./out

.gitignore

@@ -45,6 +45,6 @@ config/components/package.json
 
 # gatsby files
 .cache/
-public
+# public
 false
 .eslintcache

site/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

site/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

site/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

site/src/components/home/Banner.jsx → site/components/home/Banner.jsx

@@ -1,12 +1,13 @@
-import React from 'react';
-import GitHubButton from 'react-github-button';
+import GitHubButton from "react-github-button";
 // import QueueAnim from 'rc-queue-anim';
 // import TweenOne from 'rc-tween-one';
-import { Button } from 'antd';
-import { Link } from 'gatsby';
+import { Button } from "antd";
+import Link from "next/link";
+
 // import BannerSVGAnim from './BannerSVGAnim';
-import logo from '../../images/logo.svg';
-import hero from '../../images/home_hero.svg';
+import logo from "../../public/images/logo.svg";
+import hero from "../../public/images/home_hero.svg";
+import Image from "next/image";
 
 function Banner(props) {
   const { isMobile } = props;
@@ -19,16 +20,17 @@ function Banner(props) {
       )} */}
       <div className="banner-title-wrapper">
         {/* <h1 key="h1">Pushy</h1> */}
-        <img src={logo} style={{ margin: '0 0 25px 20px' }} alt="Pushy" />
+        <Image src={logo} style={{ margin: "0 0 25px 20px" }} alt="Pushy" />
         <p>极速热更新框架 for React Native</p>
         <hr />
         <p style={{ marginTop: 30, fontSize: 16 }}>
-          高速节点勤分发 &nbsp;&nbsp;&nbsp;山河浩广若比邻<br/>
+          高速节点勤分发 &nbsp;&nbsp;&nbsp;山河浩广若比邻
+          <br />
           增量算法尽优化 &nbsp;&nbsp;&nbsp;字节四两拨千斤
         </p>
         <div className="button-wrapper">
-          <Link to="/docs/getting-started.html">
-            <Button style={{ margin: '0 16px' }} type="primary" ghost>
+          <Link href="/docs/getting-started">
+            <Button style={{ margin: "0 16px" }} type="primary" ghost>
               立即免费体验
             </Button>
           </Link>
@@ -42,7 +44,7 @@ function Banner(props) {
       </div>
       {!isMobile && (
         <div className="banner-image-wrapper">
-          <img height="100%" src={hero} alt="" />
+          <Image height={420} src={hero} alt="" />
         </div>
       )}
     </div>