diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index d1a2d087..9de0004e 100644 --- a/.github/workflows/gh-pages.yml +++ b/.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 diff --git a/.gitignore b/.gitignore index ced25051..693a3448 100644 --- a/.gitignore +++ b/.gitignore @@ -45,6 +45,6 @@ config/components/package.json # gatsby files .cache/ -public +# public false .eslintcache diff --git a/site/.editorconfig b/site/.editorconfig deleted file mode 100644 index 7e3649ac..00000000 --- a/site/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# http://editorconfig.org -root = true - -[*] -indent_style = space -indent_size = 2 -end_of_line = lf -charset = utf-8 -trim_trailing_whitespace = true -insert_final_newline = true - -[*.md] -trim_trailing_whitespace = false - -[Makefile] -indent_style = tab diff --git a/site/.eslintignore b/site/.eslintignore deleted file mode 100644 index 31a81298..00000000 --- a/site/.eslintignore +++ /dev/null @@ -1,10 +0,0 @@ -docs/ -webpack.config.js -node_modules/ -_site -_scaffold_site -scaffold -site -config/components/es -config/components/lib -config/components/dist diff --git a/site/.eslintrc.js b/site/.eslintrc.js deleted file mode 100644 index 4594b11a..00000000 --- a/site/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - extends: [require.resolve('@umijs/fabric/dist/eslint')], -}; diff --git a/site/.eslintrc.json b/site/.eslintrc.json new file mode 100644 index 00000000..bffb357a --- /dev/null +++ b/site/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/site/.gitignore b/site/.gitignore new file mode 100644 index 00000000..8f322f0d --- /dev/null +++ b/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 diff --git a/site/.prettierignore b/site/.prettierignore deleted file mode 100644 index 8c998b20..00000000 --- a/site/.prettierignore +++ /dev/null @@ -1,5 +0,0 @@ -**/*.svg -package.json -.umi -.umi-production -.cache \ No newline at end of file diff --git a/site/.prettierrc b/site/.prettierrc deleted file mode 100644 index 84d393d1..00000000 --- a/site/.prettierrc +++ /dev/null @@ -1,14 +0,0 @@ -{ - "singleQuote": true, - "trailingComma": "all", - "printWidth": 100, - "proseWrap": "never", - "overrides": [ - { - "files": ".prettierrc", - "options": { - "parser": "json" - } - } - ] -} diff --git a/site/.stylelintrc.js b/site/.stylelintrc.js deleted file mode 100644 index c2030787..00000000 --- a/site/.stylelintrc.js +++ /dev/null @@ -1,5 +0,0 @@ -const fabric = require('@umijs/fabric'); - -module.exports = { - ...fabric.stylelint, -}; diff --git a/site/README.md b/site/README.md new file mode 100644 index 00000000..c4033664 --- /dev/null +++ b/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. diff --git a/site/_publishflow.md b/site/_publishflow.md deleted file mode 100644 index e26e10aa..00000000 --- a/site/_publishflow.md +++ /dev/null @@ -1,22 +0,0 @@ -```mermaid -flowchart TD - codebase["🖥️  项目代码库"] - subgraph 发布原生基准版本 - tagNativeVersion["🏷️  (在 git 上)标记原生版本号"] - newNativeVersion["🗂️  新的原生基准版本"] - nativePackage["📦  原生完整包(apk或ipa文件)"] - tagNativeVersion--"🔨  编译"-->nativePackage - nativePackage--"⬆️  使用
pushy uploadApk/uploadIpa
命令上传"-->newNativeVersion - end - subgraph 发布热更新版本 - tagBundleVersion["🏷️  (在 git 上)标记热更新版本号"] - bundlePackage["🎁  js代码与资源包(ppk文件)"] - tagBundleVersion--"🔨  使用
pushy bundle
命令生成并上传"-->bundlePackage - someNativeVersions["🗂️  一个或多个原生基准版本"] - bundlePackage--"🖇️  绑定"-->someNativeVersions - end - user["👨‍👩‍👧‍👦  安装有对应原生基准版本的用户"] - codebase--"✏️  改动js代码,
或添加、更新js组件,
或添加、更新js代码中引用的图片等资源"-->发布热更新版本 - codebase--"🖊️  改动原生代码、设置,
或添加、更新原生组件,
或添加、更新原生代码中引用的图片等资源"-->发布原生基准版本 - 发布热更新版本--"📲  推送增量热更新(diff文件)"-->user -``` diff --git a/site/src/components/home/Banner.jsx b/site/components/home/Banner.jsx similarity index 70% rename from site/src/components/home/Banner.jsx rename to site/components/home/Banner.jsx index ae07b8e7..53f34d72 100644 --- a/site/src/components/home/Banner.jsx +++ b/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) { )} */}
{/*

Pushy

*/} - Pushy + Pushy

极速热更新框架 for React Native


- 高速节点勤分发    山河浩广若比邻
+ 高速节点勤分发    山河浩广若比邻 +
增量算法尽优化    字节四两拨千斤

- - @@ -42,7 +44,7 @@ function Banner(props) {
{!isMobile && (
- +
)}
diff --git a/site/src/components/home/Page1.jsx b/site/components/home/Page1.jsx similarity index 65% rename from site/src/components/home/Page1.jsx rename to site/components/home/Page1.jsx index 2d165cfa..5834eff8 100644 --- a/site/src/components/home/Page1.jsx +++ b/site/components/home/Page1.jsx @@ -1,48 +1,47 @@ -/* eslint-disable eslint-comments/disable-enable-pair */ /* eslint-disable react/jsx-one-expression-per-line */ -import React from 'react'; -import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; -import Parallax from 'rc-scroll-anim/lib/ScrollParallax'; -import QueueAnim from 'rc-queue-anim'; -import TweenOne from 'rc-tween-one'; +import React from "react"; +import OverPack from "rc-scroll-anim/es/ScrollOverPack"; +import Parallax from "rc-scroll-anim/es/ScrollParallax"; +import QueueAnim from "rc-queue-anim"; +import TweenOne, { TweenOneGroup } from "rc-tween-one"; -import deltaIcon from '../../images/smartphone-3.svg'; -import publishIcon from '../../images/internet-1.svg'; -import downloadIcon from '../../images/wifi.svg'; -import strategyIcon from '../../images/strategy.svg'; -import reliableIcon from '../../images/circuit.svg'; -import supportIcon from '../../images/chat.svg'; +import deltaIcon from "../../public/images/smartphone-3.svg"; +import publishIcon from "../../public/images/internet-1.svg"; +import downloadIcon from "../../public/images/wifi.svg"; +import strategyIcon from "../../public/images/strategy.svg"; +import reliableIcon from "../../public/images/circuit.svg"; +import supportIcon from "../../public/images/chat.svg"; +import Image from "next/image"; -const { TweenOneGroup } = TweenOne; const featuresCN = [ { - title: '增量更新', - content: ['基于 bsdiff/hdiff 算法创建', 'kb 级别超小更新包'], + title: "增量更新", + content: ["基于 bsdiff/hdiff 算法创建", "kb 级别超小更新包"], src: deltaIcon, }, { - title: '快捷发布', - content: ['命令行工具 & 网页双端管理', '支持CI部署'], + title: "快捷发布", + content: ["命令行工具 & 网页双端管理", "支持CI部署"], src: publishIcon, }, { - title: '极速下载', - content: ['基于阿里云高速CDN分发', '全国范围秒速更新'], + title: "极速下载", + content: ["基于阿里云高速CDN分发", "全国范围秒速更新"], src: downloadIcon, }, { - title: '稳定可靠', - content: ['自带崩溃回滚机制', '安全可靠'], + title: "稳定可靠", + content: ["自带崩溃回滚机制", "安全可靠"], src: reliableIcon, }, { - title: '灵活扩展', - content: ['开放定制元信息', '提供灵活自由的更新策略'], + title: "灵活扩展", + content: ["开放定制元信息", "提供灵活自由的更新策略"], src: strategyIcon, }, { - title: '技术支持', - content: ['遇到技术问题?', '工作时间段内小时级别响应'], + title: "技术支持", + content: ["遇到技术问题?", "工作时间段内小时级别响应"], src: supportIcon, }, ]; @@ -83,7 +82,7 @@ class Page1 extends React.Component { delay, opacity: 0.4, ...pointPos[e.index], - ease: 'easeOutBack', + ease: "easeOutBack", duration: 300, }, { @@ -102,12 +101,12 @@ class Page1 extends React.Component { featuresCN.forEach((item, i) => { const isHover = hoverNum === i; const pointChild = [ - 'point-0 left', - 'point-0 right', - 'point-ring', - 'point-1', - 'point-2', - 'point-3', + "point-0 left", + "point-0 right", + "point-ring", + "point-1", + "point-2", + "point-3", ].map((className) => ( - img + img

{item.title}

{item.content.map((t, tkey) => ( @@ -182,7 +187,7 @@ class Page1 extends React.Component { className="page1-bg" animation={{ translateY: 200, - ease: 'linear', + ease: "linear", playScale: [0, 1.65], }} location="page1-wrapper" @@ -197,12 +202,15 @@ class Page1 extends React.Component {
{children} -
- Icons made by{' '} - +
+ Icons made by{" "} + Swifticons - {' '} - from{' '} + {" "} + from{" "} www.flaticon.com diff --git a/site/src/components/home/Page2.jsx b/site/components/home/Page2.jsx similarity index 94% rename from site/src/components/home/Page2.jsx rename to site/components/home/Page2.jsx index cc91ca7c..37ac8497 100644 --- a/site/src/components/home/Page2.jsx +++ b/site/components/home/Page2.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +// import React from 'react'; import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; import QueueAnim from 'rc-queue-anim'; import { Button } from 'antd'; @@ -33,7 +33,7 @@ function Page2() { diff --git a/site/components/home/home.scss b/site/components/home/home.scss new file mode 100644 index 00000000..b8a4f13e --- /dev/null +++ b/site/components/home/home.scss @@ -0,0 +1,328 @@ +@use "../../styles/theme.scss" as *; + +.home-wrapper { + width: 100%; + // color: #697b8c; + .ant-btn { + min-width: 110px; + height: 40px; + font-size: 16px; + border-radius: 20px; + } + + h3 { + font-size: 18px !important; + font-weight: 900; + } + + svg g { + transform-origin: 50% 50%; + transform-box: fill-box; + } + + .banner-wrapper { + position: relative; + width: 100%; + max-width: 1500px; + height: 526px; + margin: auto; + .banner-title-wrapper { + position: absolute; + top: 0; + bottom: 0; + left: 8%; + z-index: 1; + width: 40%; + max-width: 480px; + height: 245px; + margin: auto; + > * { + will-change: transform; + } + h1 { + margin: 12px 0; + font-size: 54px; + font-family: "Futura", "Helvetica Neue For Number", -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", + "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, + Arial, sans-serif; + } + p { + font-size: 20px; + } + .button-wrapper { + display: flex; + align-items: center; + margin-top: 64px; + line-height: 40px; + .github-btn { + display: inline-block; + height: 28px; + .gh-btn { + display: flex; + align-items: center; + height: 28px; + padding: 0 12px; + font-size: 13px; + background: rgba(243, 243, 243, 1); + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 1) 0%, + rgba(243, 243, 243, 1) 100% + ); + border: 1px solid #ebedf0; + border-radius: 4px; + &:hover { + color: $primary-color; + } + .gh-ico { + margin-right: 8px; + } + } + .gh-count { + height: 28px; + padding: 2px 8px; + font-size: 13px; + line-height: 22px; + background: #fff; + border: 1px solid #ebedf0; + border-radius: 4px; + } + } + } + .title-line { + transform: translateX(-64px); + animation: bannerTitleLine 3s ease-in-out 0s infinite; + } + } + + .banner-image-wrapper { + position: absolute; + top: 0; + right: 8%; + bottom: 0; + // width: 45%; + // max-width: 598px; + height: 420px; + margin: auto; + } + } + + .home-banner-image { + display: none; + } + + .title-line-wrapper { + width: 100%; + height: 2px; + overflow: hidden; + .title-line { + width: 64px; + height: 100%; + background: linear-gradient( + to right, + rgba(24, 144, 255, 0) 0%, + rgba(24, 144, 255, 1) 100% + ); + transform: translateX(-64px); + } + } + + .home-page { + margin: 50px auto; + h2 { + color: #314659; + font-weight: 300; + font-size: 28px; + letter-spacing: 0.6px; + text-align: center; + span { + font-weight: 600; + } + } + } + + .home-page-wrapper { + position: relative; + width: 100%; + max-width: 1280px; + margin: auto; + } + + /** page1 **/ + .page1 { + height: 864px; + } + .page1-line.title-line-wrapper { + width: 312px; + margin: 24px auto 76px; + .title-line { + animation: page1TitleLine 3s ease-in-out 1.5s infinite; + } + } + + .page1-bg { + position: absolute; + top: 0; + width: 100%; + color: #ebedf0; + font-size: 320px; + text-align: center; + transform: translateY(864px); + opacity: 0.25; + } + + .page1-box-wrapper { + display: flex; + align-items: flex-start; + margin-bottom: 62px; + li { + display: inline-block; + width: 33.33%; + will-change: transform; + .page1-box { + position: relative; + width: 194px; + margin: auto; + text-align: center; + .page1-image { + position: relative; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; + margin: 20px auto 32px; + background: #fff; + border-radius: 40px; + transition: box-shadow 0.3s ease-out, transform 0.3s ease-out; + img { + width: 100%; + height: 100%; + } + } + &:hover .page1-image { + transform: translateY(-5px); + } + h3 { + margin: 8px auto; + color: #0d1a26; + font-size: 16px; + } + p { + margin-bottom: 0; + } + } + } + } + .page1-point-wrapper { + position: absolute; + top: 0; + left: 50%; + width: 0; + .point-0 { + width: 4px; + height: 4px; + } + .point-2, + .point-ring { + width: 10px; + height: 10px; + } + .point-ring { + background: transparent !important; + border-style: solid; + border-width: 1px; + } + .point-1 { + width: 6px; + height: 6px; + } + .point-3 { + width: 15px; + height: 15px; + } + .action { + position: absolute; + display: inline-block; + border-radius: 100%; + transform: translate(0, 30px); + opacity: 0; + } + } + + /** page2 **/ + .page2 { + height: 588px; + text-align: center; + + .page2-content { + will-change: transform; + } + } + + .page2-line { + width: 114px; + margin: 148px auto 24px; + + .title-line { + animation: page2TitleLine 3s ease-in-out 0s infinite; + } + } + + .page-content { + width: 760px; + margin: 24px auto 32px; + line-height: 28px; + } + + .home-code { + width: 90%; + max-width: 840px; + margin: 16px auto; + padding: 20px 50px; + color: #151e26; + font-size: 16px; + line-height: 28px; + text-align: left; + background: #f2f4f5; + border-radius: 4px; + span { + color: #f5222d; + } + } + + @keyframes bannerTitleLine { + 0%, + 25% { + transform: translateX(-64px); + } + 75%, + 100% { + transform: translateX(544px); + } + } + + @keyframes page1TitleLine { + 0%, + 25% { + transform: translateX(-64px); + } + 75%, + 100% { + transform: translateX(376px); + } + } + + @keyframes page2TitleLine { + 0%, + 25% { + transform: translateX(-64px); + } + 75%, + 100% { + transform: translateX(178px); + } + } +} diff --git a/site/components/home/index.tsx b/site/components/home/index.tsx new file mode 100644 index 00000000..324a0bae --- /dev/null +++ b/site/components/home/index.tsx @@ -0,0 +1,15 @@ +import Banner from "./Banner"; +import Page1 from "./Page1"; +import Page2 from "./Page2"; + +function Home(props: any) { + return ( +
+ + + +
+ ); +} + +export default Home; diff --git a/site/src/components/layout/Footer.tsx b/site/components/layout/Footer.tsx similarity index 74% rename from site/src/components/layout/Footer.tsx rename to site/components/layout/Footer.tsx index 66893cd7..ca3508d5 100644 --- a/site/src/components/layout/Footer.tsx +++ b/site/components/layout/Footer.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import { Row, Col } from 'antd'; +// import React from 'react'; +import { Row, Col } from "antd"; function Footer() { return ( @@ -13,7 +13,9 @@ function Footer() { 邮箱 hi@charmlot.com
- QQ群 729013783 + + QQ群 729013783 +
@@ -36,9 +38,7 @@ function Footer() {

帮助

- - 常见问题 - + 常见问题

链接

- + React Native中文网
- + ReactJS
@@ -69,10 +77,16 @@ function Footer() {
-

React Native中文网 © {new Date().getFullYear()} 武汉青罗网络科技有限公司

+

+ React Native中文网 © {new Date().getFullYear()}{" "} + 武汉青罗网络科技有限公司 +

鄂ICP备20002031号-3 鄂公网安备 42011202001821号 diff --git a/site/src/components/layout/Header.tsx b/site/components/layout/Header.tsx similarity index 52% rename from site/src/components/layout/Header.tsx rename to site/components/layout/Header.tsx index f1a7a2b6..c44708e9 100644 --- a/site/src/components/layout/Header.tsx +++ b/site/components/layout/Header.tsx @@ -1,38 +1,26 @@ -import React from 'react'; -import { Link } from 'gatsby'; -import { MenuOutlined } from '@ant-design/icons'; -import { Row, Col, Menu, Button, Popover } from 'antd'; -import logo from '../../images/logo.svg'; +// import React from 'react'; +// import { Link } from 'gatsby'; +import Link from "next/link"; +import { withRouter } from "next/router"; + +import { MenuOutlined } from "@ant-design/icons"; +import { Row, Col, Menu, Button, Popover } from "antd"; +import logo from "../../public/images/logo.svg"; +import Image from "next/image"; +import { Component } from "react"; interface HeaderProps { isMobile: boolean; - location: { - pathname: string; - }; } interface HeaderState { inputValue?: string; menuVisible: boolean; - menuMode?: 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline'; + menuMode?: "horizontal" | "vertical" | "inline"; } -class Header extends React.Component { +class Header extends Component { state: HeaderState = { menuVisible: false, - menuMode: 'horizontal', - }; - - timer: number; - - componentDidUpdate(preProps: HeaderProps) { - const { isMobile } = this.props; - if (isMobile !== preProps.isMobile) { - this.setMenuMode(isMobile); - } - } - - setMenuMode = (isMobile: boolean) => { - this.setState({ menuMode: isMobile ? 'inline' : 'horizontal' }); }; handleHideMenu = () => { @@ -54,51 +42,52 @@ class Header extends React.Component { }; render() { - const { menuMode, menuVisible } = this.state; - const { location } = this.props; - const path = location.pathname; + const { isMobile } = this.props; + const { menuVisible } = this.state; + const menuMode = isMobile ? "inline" : "horizontal"; - const module = location.pathname - .replace(/(^\/|\/$)/g, '') - .split('/') + // @ts-ignore + const path = this.props.router.pathname; + + const currentModule = path + .replace(/(^\/|\/$)/g, "") + .split("/") .slice(0, -1) - .join('/'); - let activeMenuItem = module || 'home'; - if (/^blog/.test(path)) { - activeMenuItem = 'blog'; - } else if (path.includes('/docs/faq.html')) { - activeMenuItem = 'faq'; + .join("/"); + let activeMenuItem = currentModule || "home"; + if (path.includes("/docs/faq")) { + activeMenuItem = "faq"; } else if (/docs/.test(path)) { - activeMenuItem = 'docs'; + activeMenuItem = "docs"; } else if (/pricing/.test(path)) { - activeMenuItem = 'pricing'; - } else if (path === '/') { - activeMenuItem = 'home'; + activeMenuItem = "pricing"; + } else if (path === "/") { + activeMenuItem = "home"; } const menu = [

- 首页 + 首页 - 文档 + 文档 - 价格 + 价格 - 常见问题 + 常见问题 {/* - Blog + Blog */} , ]; return (