简体中文 | English
Runner | page | App |
---|---|---|
shaonianche | https://run.duangfei.org | Nike |
yihong0618 | https://yihong.run/running | Nike |
superleeyom | https://running.leeyom.top | Nike |
geekplux | https://activities.geekplux.com | Nike |
guanlan | https://grun.vercel.app | Strava |
tuzimoe | https://run.tuzi.moe | Nike |
ben_29 | https://running.ben29.xyz | Strava |
kcllf | https://running-tau.vercel.app | Garmin-cn |
mq | https://running-iota.vercel.app | Keep |
zhaohongxuan | https://running-page-psi.vercel.app/ | Keep |
yvetterowe | https://run.haoluo.io | Strava |
love-exercise | https://run.kai666666.top/ | Keep |
- GitHub Actions manages automatic synchronization of runs and generation of new pages.
- Gatsby-generated static pages, fast
- Support for Vercel (recommended) automated deployment
- React Hooks
- Mapbox for map display
- Nike and Runtastic (Adidas Run)
automatically backup gpx data for easy backup and uploading to other software.
- Garmin
- Garmin-CN
- Runtastic(Adidas Run)
- Nike Run Club
- Strava
- GPX
- Nike_to_Strava(Using NRC Run, Strava backup data)
Clone or fork the repo.
git clone https://github.com/yihong0618/running_page.git
pip3 install -r requirements.txt
yarn install
yarn develop
Open your browser and visit http://localhost:8000/
If you use English please change
IS_CHINESE = false
insrc/utils/const.js
Suggested changes to your own Mapbox token
const MAPBOX_TOKEN = 'pk.eyJ1IjoieWlob25nMDYxOCIsImEiOiJja2J3M28xbG4wYzl0MzJxZm0ya2Fua2p2In0.PNKfkeQwYuyGOTT_x9BJ4Q';
Download your running data and do not forget to generate svg in total
page.
Make your GPX
data
Copy all your gpx files to GPX_OUT or new gpx files
python3(python) scripts/gpx_sync.py
Get your Garmin
data
python3(python) scripts/garmin_sync.py ${your email} ${your password}
example:
python3(python) scripts/garmin_sync.py example@gmail.com example
Get your Garmin-CN
data
python3(python) scripts/garmin_sync.py ${your email} ${your password} --is-cn
example:
python3(python) scripts/garmin_sync.py example@gmail.com example --is-cn
Get your Runtastic
data
python3(python) scripts/runtastic_sync.py ${your email} ${your password}
example:
python3(python) scripts/runtastic_sync.py example@gmail.com example
Get your Nike Run Club
data
Get Nike's refresh_token
- Login Nike website
- In Develop -> Application-> Storage -> https:unite.nike.com look for
refresh_token
- Execute in the root directory:
python3(python) scripts/nike_sync.py ${nike refresh_token}
example:
python3(python) scripts/nike_sync.py eyJhbGciThiMTItNGIw******
Get your Strava
data
-
Sign in/Sign up Strava account
-
Open after successful Signin Strava Developers -> Create & Manage Your App
-
Create
My API Application
: Enter the following information
- Use the link below to request all permissions: Replace
${your_id}
in the link withMy API Application
Client ID
https://www.strava.com/oauth/authorize?client_id=${your_id}&response_type=code&redirect_uri=http://localhost/exchange_token&approval_prompt=force&scope=read_all,profile:read_all,activity:read_all,profile:write,activity:write
- Get the
code
value in the link
example:
http://localhost/exchange_token?state=&code=1dab37edd9970971fb502c9efdd087f4f3471e6e&scope=read,activity:write,activity:read_all,profile:write,profile:read_all,read_all
code
value:
1dab37edd9970971fb502c9efdd087f4f3471e6
- Use
Client_id
、Client_secret
、Code
getrefresch_token
: Execute inTerminal/iTerm
curl -X POST https://www.strava.com/oauth/token \
-F client_id=${Your Client ID} \
-F client_secret=${Your Client Secret} \
-F code=${Your Code} \
-F grant_type=authorization_code
example:
curl -X POST https://www.strava.com/oauth/token \
-F client_id=12345 \
-F client_secret=b21******d0bfb377998ed1ac3b0 \
-F code=d09******b58abface48003 \
-F grant_type=authorization_code
- Sync
Strava
data
python3(python) scripts/strava_sync.py ${client_id} ${client_secret} ${refresch_token}
References:
https://developers.strava.com/docs/getting-started
https://github.com/barrald/strava-uploader
https://github.com/strava/go.strava
Get your Nike Run Club
data and upload to strava
- follow the nike and strava steps
- Execute in the root directory:
python3(python) scripts/nike_to_strava_sync.py ${nike_refresh_token} ${client_id} ${client_secret} ${strava_refresch_token}
example:
python3(python) scripts/nike_to_strava_sync.py eyJhbGciThiMTItNGIw****** xxx xxx xxx
Running data display
- Generate SVG data display
- Display of results:Click to view、Click to view
python scripts/gen_svg.py --from-db --title "${{ env.TITLE }}" --type github --athlete "${{ env.ATHLETE }}" --special-distance 10 --special-distance2 20 --special-color yellow --special-color2 red --output assets/github.svg --use-localtime --min-distance 0.5
python scripts/gen_svg.py --from-db --title "${{ env.TITLE_GRID }}" --type grid --athlete "${{ env.ATHLETE }}" --output assets/grid.svg --min-distance 10.0 --special-color yellow --special-color2 red --special-distance 20 --special-distance2 40 --use-localtime
Generate year circular svg show
python3(python) scripts/gen_svg.py --from-db --type circular --use-localtime
For more display effects, see:
https://github.com/flopp/GpxTrackPoster
Use vercel
deploy
- vercel connects to your GitHub repo.
- Awaiting completion of deployment
- Visits
Modifying information in GitHub Actions
Actions source code The following steps need to be taken
- change to your app type and info
Add your secret in repo Settings > Secrets (add only the ones you need).
3. add your GitHub secret and have the same name as the GitHub secret in your project.
- Complete this document.
- Support Garmin, Garmin China
- support for nike+strava
- Support English
- Refine the code
- add new features
- Any Issues PR welcome.
- You can PR share your Running page in README I will merge it.
Before submitting PR:
- Format Python code with Black
- @flopp great repo GpxTrackPoster
- @shaonianche icon design and doc
- @geekplux Friendly help and encouragement