feat: change to SPA and vite (#472)

feat: change to react and vite

Signed-off-by: Frost Ming <[email protected]>

.github/workflows/ci.yml

@@ -15,18 +15,14 @@ jobs:
         uses: actions/setup-python@v4
         with:
           python-version: ${{ matrix.python-version }}
+          cache: pip
       # from pdm
       - name: Set Variables and install dep
         id: set_variables
         run: |
-          sudo apt-get install libxml2-dev libxslt-dev python3-dev 
+          sudo apt-get install libxml2-dev libxslt-dev python3-dev
           echo "PY=$(python -c 'import hashlib, sys;print(hashlib.sha256(sys.version.encode()+sys.executable.encode()).hexdigest())')" >> $GITHUB_OUTPUT
           echo "PIP_CACHE=$(pip cache dir)" >> $GITHUB_OUTPUT
-      - name: Cache PIP
-        uses: actions/cache@v2
-        with:
-          path: ${{ steps.set_variables.outputs.PIP_CACHE }}
-          key: ${{ runner.os }}-pip-${{ steps.set_variables.outputs.PY }}
       - name: Install dependencies
         run: |
           python -m pip install --upgrade pip

.github/workflows/gh-pages.yml

@@ -43,9 +43,9 @@ jobs:
       - run: |
           yarn install
       - run: |
-          PATH_PREFIX=/${{ github.event.repository.name }} yarn build --prefix-paths
-      - run: |
-          cp -r assets/ public/static
+          yarn build
+        env:
+          PATH_PREFIX: /
 
       - name: GitHub Pages
         uses: crazy-max/[email protected]
@@ -55,7 +55,7 @@ jobs:
           # Create incremental commit instead of doing push force
           keep_history: true
           # Build directory to deploy
-          build_dir: public
+          build_dir: build
           # Write the given domain name to the CNAME file
           #fqdn: custom.domain.name # optional
           # Prevent Jekyll from building the site

.gitignore

@@ -5,7 +5,6 @@
 node_modules
 yarn-error.log
 
-/public
 # Build directory
 /build
 .DS_Store

README-CN.md

@@ -86,11 +86,10 @@ R.I.P. 希望大家都能健康顺利的跑过终点，逝者安息。
 ## 特性
 
 1. GitHub Actions 管理自动同步跑步进程及自动生成新的页面
-2. Gatsby 生成的静态网页，速度快
-3. 支持 Vercel(推荐) 和 GitHub Pages 自动部署
-4. React Hooks
-5. Mapbox 进行地图展示
-6. Nike 及 Runtastic(Adidas Run) 以及佳明（佳明中国）及 Keep 等，自动备份 gpx 数据，方便备份及上传到其它软件
+2. 支持 Vercel(推荐) 和 GitHub Pages 自动部署
+3. React Hooks
+4. Mapbox 进行地图展示
+5. Nike 及 Runtastic(Adidas Run) 以及佳明（佳明中国）及 Keep 等，自动备份 gpx 数据，方便备份及上传到其它软件
 
 > 因为数据存在 gpx 和 data.db 中，理论上支持几个软件一起，你可以把之前各类 app 的数据都同步到这里（建议本地同步，之后 actions 选择正在用的 app）
 
@@ -179,7 +178,7 @@ const MAPBOX_TOKEN =
 
 ## 一些个性化选项
 
-- 在仓库目录下找到 `gatsby-config.js`，找到以下内容并修改成你自己想要的。
+- 在仓库目录下找到 `src/static/site-metadata.ts`，找到以下内容并修改成你自己想要的。
 
 ```javascript
 siteMetadata: {
@@ -786,7 +785,7 @@ python3(python) scripts/gen_svg.py --from-db --type circular --use-localtime
 
 2. 点击 `Begin setup` 后，修改项目的 `Build settings`。
 
-3. 在 `Framework preset` 中选择 `Gatsby` 框架。
+3. 在 `Framework preset` 中选择 `Create React App` 框架。
 
 4. 向下滚动，点击 `Environment variables` 修改变量如下：
 
@@ -802,7 +801,7 @@ python3(python) scripts/gen_svg.py --from-db --type circular --use-localtime
 1. 为 GitHub Actions 添加代码提交权限
    访问仓库的 `Settings > Actions > General`页面，找到`Workflow permissions`的设置项，将选项配置为`Read and write permissions`，支持 CI 将运动数据更新后提交到仓库中。
 2. 更新配置并提交代码
-   1. 更新[./gatsby-config.js](./gatsby-config.js#L3)中的`siteMetadata`节点；
+   1. 更新[./src/static/site-metadata.ts](./src/static/site-metadata.ts#L12)中的`data`对象；
       （按需）如果启用自定义域名模式或者变更 Fork 后的仓库名称，请变更`pathPrefix`的值。
    2. 更新 GitHub CI 的配置 [.github/workflows/run_data_sync.yml](.github/workflows/run_data_sync.yml#L24) 中的配置；
    3. （按需）如需使用自定义域名，可以修改 [.github/workflows/gh-pages.yml](.github/workflows/gh-pages.yml#L60) 中的 `fqdn`（默认已注释掉）

README.md

@@ -85,11 +85,10 @@ English | [简体中文](https://github.com/yihong0618/running_page/blob/master/
 ## Features
 
 1. GitHub Actions manages automatic synchronization of runs and generation of new pages.
-2. Gatsby-generated static pages, fast
-3. Support for Vercel (recommended) and GitHub Pages automated deployment
-4. React Hooks
-5. Mapbox for map display
-6. Supports most sports apps such as nike strava...
+2. Support for Vercel (recommended) and GitHub Pages automated deployment
+3. React Hooks
+4. Mapbox for map display
+5. Supports most sports apps such as nike strava...
 
 > automatically backup gpx data for easy backup and uploading to other software.<br>
 > Note: If you don't want to make the data public, you can choose strava's fuzzy processing, or private repositories.
@@ -164,7 +163,7 @@ const MAPBOX_TOKEN =
 
 ## Custom your page
 
-- Find `gatsby-config.js` in the repository directory, find the following content, and change it to what you want.
+- Find `src/static/site-metadata.ts` in the repository directory, find the following content, and change it to what you want.
 
 ```javascript
 siteMetadata: {
@@ -617,7 +616,7 @@ For more display effects, see:
 
 2. After clicking `Begin setup`, modify Project's `Build settings`.
 
-3. Select `Framework preset` to `Gatsby`
+3. Select `Framework preset` to `Create React App`
 
 4. Scroll down, click `Environment variables`, then variable below:
 
@@ -632,7 +631,7 @@ For more display effects, see:
 
 1. If you are using a custom domain for GitHub Pages, open [.github/workflows/gh-pages.yml](.github/workflows/gh-pages.yml), change `fqdn` value to the domain name of your site.
 
-2. (_Skip this step if you're **NOT** using a custom domain_) Modify `gatsby-config.js`, change `pathPrefix` value to the root path. If the repository name is `running_page`, the value will be `/running_page`.
+2. (_Skip this step if you're **NOT** using a custom domain_) Modify `.github/workflows/gh-pages.yml`, change `PATH_PREFIX` value to the root path. If the repository name is `running_page`, the value will be `/running_page`.
 
 3. Go to repository's `Actions -> Workflows -> All Workflows`, choose `Publish GitHub Pages` from the left panel, click `Run workflow`. Make sure the workflow runs without errors, and `gh-pages` branch is created.
 

assets/index.tsx

@@ -0,0 +1 @@
+export const yearStats = import.meta.glob('./year_*.svg', { import: 'ReactComponent' })

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/images/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Running Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -7,42 +7,35 @@
     "@mapbox/mapbox-gl-language": "^1.0.0",
     "@mapbox/polyline": "^1.1.1",
     "@vercel/analytics": "^0.1.6",
-    "gatsby": "^4.25.0",
-    "gatsby-alias-imports": "^1.0.6",
-    "gatsby-plugin-manifest": "^4.16.0",
-    "gatsby-plugin-offline": "^5.16.0",
-    "gatsby-plugin-react-helmet": "^5.16.0",
-    "gatsby-plugin-react-svg": "^3.1.0",
-    "gatsby-plugin-sass": "^5.16.0",
-    "gatsby-plugin-vercel": "^1.0.4",
-    "gatsby-source-filesystem": "^4.16.0",
-    "gatsby-transformer-json": "^4.16.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "gcoord": "^0.3.2",
     "geojson": "^0.5.0",
     "mapbox-gl": "^2.8.2",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-map-gl": "^5.1.22",
+    "react-router-dom": "^6.15.0",
     "sass": "^1.52.3",
     "sass-mq": "^6.0.0",
     "tachyons": "^4.12.0",
-    "tachyons-sass": "git+https://github.com/tachyons-css/tachyons-sass.git"
+    "tachyons-sass": "git+https://github.com/tachyons-css/tachyons-sass.git",
+    "vite": "^4.3.9",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.0"
   },
   "license": "MIT",
   "private": true,
   "scripts": {
     "data:clean": "rm scripts/data.db {GPX,TCX,FIT}_OUT/* activities/* src/static/activities.json",
     "data:download:garmin": "python3 scripts/garmin_sync.py",
     "data:analysis": "python3 scripts/gen_svg.py --from-db --type github --output assets/github.svg",
-    "build": "gatsby clean && gatsby build",
-    "build-prefix": "gatsby build --prefix-paths",
-    "develop": "gatsby develop",
-    "serve": "gatsby serve",
-    "serve-prefix": "gatsby serve --prefix-paths",
+    "build": "vite build",
+    "develop": "vite dev",
+    "serve": "vite serve",
     "lint": "eslint --ext .ts,.tsx src --fix",
-    "check": "prettier --write src/**/*.{scss,json,ts,tsx} *.{md,yaml,json,ts,js}",
+    "check": "prettier --write src/main.tsx src/**/*.{scss,json,ts,tsx} *.{md,yaml,json,ts,js}",
     "ci": "yarn run check && yarn run lint && yarn run build && yarn run test"
   },
   "engineStrict": true,
@@ -59,7 +52,6 @@
     "@types/node": "^20.3.3",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@types/react-helmet": "^6.1.6",
     "@typescript-eslint/parser": "^5.59.2",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.8.0",

src/components/Header/index.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'gatsby';
+import { Link } from 'react-router-dom';
 import React from 'react';
 import useSiteMetadata from '@/hooks/useSiteMetadata';
 

src/components/Layout/index.tsx

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import Header from '@/components/Header';
 import useSiteMetadata from '@/hooks/useSiteMetadata';
-import '@/styles/index.scss';
 import styles from './style.module.scss';
 
 const Layout = ({ children }: React.PropsWithChildren) => {

src/components/RunMap/RunMaker.tsx

@@ -1,5 +1,5 @@
-import EndSvg from '@assets/end.svg';
-import StartSvg from '@assets/start.svg';
+import { ReactComponent as EndSvg } from '@assets/end.svg';
+import { ReactComponent as StartSvg } from '@assets/start.svg';
 import React from 'react';
 import { Marker } from 'react-map-gl';
 import styles from './style.module.scss';

src/components/SVGStat/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import GitHubSvg from '@assets/github.svg';
-import GridSvg from '@assets/grid.svg';
+import { ReactComponent as GitHubSvg } from '@assets/github.svg';
+import { ReactComponent as GridSvg } from '@assets/grid.svg';
 import styles from './style.module.scss';
 
 const SVGStat = () => (

src/components/YearStat/index.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
 import Stat from '@/components/Stat';
 import useActivities from '@/hooks/useActivities';
-import useHover from '@/hooks/useHover';
 import { formatPace } from '@/utils/utils';
 import styles from './style.module.scss';
+import useHover from '@/hooks/useHover';
+import { yearStats } from '@assets/index'
 
 const YearStat = ({ year, onClick }: { year: string, onClick: (_year: string) => void }) => {
   let { activities: runs, years } = useActivities();
   // for hover
   const [hovered, eventHandlers] = useHover();
   // lazy Component
-  const YearSVG = React.lazy(() =>
-    import(`@assets/year_${year}.svg`).catch(() => ({
-      default: () => <div />,
-    }))
+  const YearSVG = React.lazy(() => yearStats[`./year_${year}.svg`]()
+    .then((res) => ({ default: res }))
+    .catch((err) => {
+      console.error(err);
+      return { default: () => <div>Failed to load SVG</div> };
+    })
   );
 
   if (years.includes(year)) {