style:rewrite style

.editorconfig

@@ -0,0 +1,12 @@
+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

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "bracketSpacing": true
+}

README-CN.md

@@ -100,33 +100,24 @@ const MAPBOX_TOKEN = 'pk.eyJ1IjoieWlob25nMDYxOCIsImEiOiJja2J3M28xbG4wYzl0MzJxZm0
 
 ## 一些个性化选项
 
-### 左上角的头像
-
-修改 `src/utils/const.js` 里的 `export const AVATAR =
-  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU';` 换成你想要的图片的链接。
-
-### 右上角默认的 Blog 和 About
-
-修改 `src/utils/const.js` 里的 `NAVS`，换成你想要的链接，如：
-
-```javascript
-export const NAVS = [
-  { text: 'Blog', link: 'https://yihong.run/running' },
-  { text: 'About', link: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md' },
-];
-```
-
-你也可以自行添加多个链接，照葫芦画瓢即可。
-
-### 页面标题与网站链接
-
 在仓库目录下找到 `gatsby-config.js`，找到以下内容并修改成你自己想要的。
 
 ```javascript
 siteMetadata: {
-  title: 'Running page',
-  siteUrl: 'https://yihong.run',
+  siteTitle: 'Running Page', #网站标题
+  siteUrl: 'https://yihong.run', #网站域名
+  logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU', #左上角LOGO
   description: 'Personal site and blog',
+  navLinks: [
+    {
+      name: 'Blog', #右上角导航名称
+      url: 'https://yihong.run/running', #右上角导航链接 
+    },
+    {
+      name: 'About',
+      url: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md',
+    },
+  ],
 },
 ```
 

README.md

@@ -17,7 +17,7 @@
 </p>
 
 
-English | [简体中文](https://github.com/yihong0618/running_page/blob/master/README-CN.md)| [Wiki](https://wiki.mfydev.run/)
+English | [简体中文](https://github.com/yihong0618/running_page/blob/master/README-CN.md) | [Wiki](https://wiki.mfydev.run/)
 
 ## [Runner's Page Show](https://github.com/yihong0618/running_page/issues/12)
 
@@ -100,33 +100,24 @@ const MAPBOX_TOKEN = 'pk.eyJ1IjoieWlob25nMDYxOCIsImEiOiJja2J3M28xbG4wYzl0MzJxZm0
 
 ## Custom your page
 
-### avatar
-
-Modify `export const AVATAR =
-  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU';` Replace it with the link to the image you want.
-
-### NAVS
-
-Change `NAVS` in `src/utils/const.js` to the link you want, just like:
-
-```javascript
-export const NAVS = [
-  { text: 'Blog', link: 'https://yihong.run/running' },
-  { text: 'About', link: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md' },
-];
-```
-
-You can also add multiple links, just like the above.
-
-### Title and site link
-
 Find `gatsby-config.js` in the repository directory, find the following content, and change it to what you want.
 
 ```javascript
 siteMetadata: {
-  title: 'Running page',
-  siteUrl: 'https://yihong.run',
+  siteTitle: 'Running Page', #website title
+  siteUrl: 'https://yihong.run', #website url
+  logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU', #logo img
   description: 'Personal site and blog',
+  navLinks: [
+    {
+      name: 'Blog', #navigation name
+      url: 'https://yihong.run/running', #navigation url
+    },
+    {
+      name: 'About',
+      url: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md',
+    },
+  ],
 },
 ```
 

gatsby-config.js

@@ -1,7 +1,7 @@
 module.exports = {
   pathPrefix: '/', // Change to `/running_page` when running on github pages
   siteMetadata: {
-    siteTitle: 'Running',
+    siteTitle: 'Running Page',
     siteUrl: 'https://yihong.run',
     logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU',
     description: 'Personal site and blog',

src/components/Header/index.jsx

@@ -2,7 +2,7 @@ import { Link } from 'gatsby';
 import React from 'react';
 import useSiteMetadata from 'src/hooks/useSiteMetadata';
 
-const Header = ({ siteTitle }) => {
+const Header = () => {
   const { logo, siteUrl, navLinks } = useSiteMetadata();
 
   return (

src/components/Layout/style.module.scss

@@ -13,6 +13,7 @@
     text-decoration:none;
   }
   h1 {
-    font-size: 3.5rem;
+    font-size: 3rem;
+    font-weight: 700;
   }
 }

src/components/LocationStat/LocationSummary.jsx

@@ -4,7 +4,9 @@ import useActivities from 'src/hooks/useActivities';
 
 // only support China for now
 const LocationSummary = () => {
-  const { years, countries, provinces, cities } = useActivities();
+  const {
+    years, countries, provinces, cities,
+  } = useActivities();
   return (
     <div style={{ cursor: 'pointer' }}>
       <section>

src/components/LocationStat/index.jsx

@@ -8,7 +8,7 @@ import PeriodStat from './PeriodStat';
 const LocationStat = ({ changeYear, changeCity, changeTitle }) => (
   <div className="fl w-100 w-30-l pb5 pr5-l">
     <section className="pb4" style={{ paddingBottom: '0rem' }}>
-      <p>
+      <p style={{ lineHeight: 1.8 }}>
         {CHINESE_LOCATION_INFO_MESSAGE_FIRST}
         .
         <br />

src/components/RunMap/RunMaker.jsx

@@ -1,10 +1,12 @@
+import EndSvg from 'assets/end.svg';
+import StartSvg from 'assets/start.svg';
 import React from 'react';
 import { Marker } from 'react-map-gl';
-import StartSvg from 'assets/start.svg';
-import EndSvg from 'assets/end.svg';
 import styles from './style.module.scss';
 
-const RunMarker = ({ startLon, startLat, endLon, endLat }) => {
+const RunMarker = ({
+  startLon, startLat, endLon, endLat,
+}) => {
   const size = 20;
   return (
     <div>

src/components/RunMap/RunMapButtons.jsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import { MAIN_COLOR } from 'src/utils/const';
+import React, { useEffect, useState } from 'react';
 import useActivities from 'src/hooks/useActivities';
+import { MAIN_COLOR } from 'src/utils/const';
 import styles from './style.module.scss';
 
 const RunMapButtons = ({ changeYear, thisYear, mapButtonYear }) => {
@@ -23,10 +23,10 @@ const RunMapButtons = ({ changeYear, thisYear, mapButtonYear }) => {
       elements[index].style.color = 'white';
     }
     if (elements[yearsButtons.indexOf(mapButtonYear)]) {
-      elements[yearsButtons.indexOf(mapButtonYear)].style.color = MAIN_COLOR
+      elements[yearsButtons.indexOf(mapButtonYear)].style.color = MAIN_COLOR;
     }
     setIndex(yearsButtons.indexOf(mapButtonYear));
-  })
+  });
   return (
     <div>
       <ul className={styles.buttons}>

src/components/RunMap/index.jsx

@@ -1,16 +1,15 @@
-import React from 'react';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
-import ReactMapGL, { Source, Layer } from 'react-map-gl';
+import React from 'react';
+import ReactMapGL, { Layer, Source } from 'react-map-gl';
+import useActivities from 'src/hooks/useActivities';
 import {
-  MAPBOX_TOKEN,
   IS_CHINESE,
-  MAIN_COLOR,
-  PROVINCE_FILL_COLOR,
+  MAIN_COLOR, MAPBOX_TOKEN,
+  PROVINCE_FILL_COLOR
 } from 'src/utils/const';
-import {geoJsonForMap} from 'src/utils/utils'
-import useActivities from 'src/hooks/useActivities';
-import RunMapButtons from './RunMapButtons';
+import { geoJsonForMap } from 'src/utils/utils';
 import RunMarker from './RunMaker';
+import RunMapButtons from './RunMapButtons';
 import styles from './style.module.scss';
 
 const RunMap = ({
@@ -20,7 +19,7 @@ const RunMap = ({
   changeYear,
   geoData,
   thisYear,
-  mapButtonYear
+  mapButtonYear,
 }) => {
   const { provinces } = useActivities();
   const addControlHandler = (event) => {
@@ -30,7 +29,7 @@ const RunMap = ({
       map.addControl(
         new MapboxLanguage({
           defaultLanguage: 'zh',
-        })
+        }),
       );
       map.setLayoutProperty('country-label-lg', 'text-field', [
         'get',
@@ -47,9 +46,8 @@ const RunMap = ({
     geoData = geoJsonForMap();
   }
 
-  const isSingleRun =
-    geoData.features.length === 1 &&
-    geoData.features[0].geometry.coordinates.length;
+  const isSingleRun = geoData.features.length === 1
+    && geoData.features[0].geometry.coordinates.length;
   let startLon;
   let startLat;
   let endLon;

src/components/RunMap/style.module.scss

@@ -1,36 +1,36 @@
+@import '../../styles/variables.scss';
+
 .locationSVG {
   height: 100%;
-  width:  100%;
+  width: 100%;
   margin: 1rem 0 0;
   border: 0;
   padding: 0;
 }
 
 .buttons {
-  width: 90%;
   margin: 0 auto;
 }
 
 .button {
   display: inline-block;
   position: relative;
   cursor: pointer;
-  width: 10%;
-  padding: 10px;
-  margin-top: 1px;
-  font-size: 10px;
+  width: 9%;
+  padding: 1.3rem;
+  margin-top: .1rem;
+  font-size: 1rem;
   text-align: center;
-  color: write;
-  font-family: sans-serif;
-  font-weight: bold;
+  color: white;
+  font-family: $global-font-family;
 }
 
 .runTitle {
-  height: 26px;
+  height: 29px;
   width: 710px;
   position: absolute;
   bottom: 0px;
   left: 120px;
-  font-family: sans-serif;
+  font-family: $global-font-family;
   cursor: pointer;
 }

src/components/RunTable/RunRow.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import { formatPace, titleForRun } from 'src/utils/utils';
 import { MAIN_COLOR } from 'src/utils/const';
+import { formatPace, titleForRun } from 'src/utils/utils';
 import styles from './style.module.scss';
 
-const RunRow = ({ runs, run, locateActivity, runIndex, setRunIndex }) => {
+const RunRow = ({
+  runs, run, locateActivity, runIndex, setRunIndex,
+}) => {
   const distance = (run.distance / 1000.0).toFixed(1);
   const pace = run.average_speed;
 

src/components/RunTable/index.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
+import { MAIN_COLOR } from 'src/utils/const';
+import { sortDateFunc, sortDateFuncReverse } from 'src/utils/utils';
 import RunRow from './RunRow';
 import styles from './style.module.scss';
-import { sortDateFunc, sortDateFuncReverse } from 'src/utils/utils';
-import { MAIN_COLOR } from 'src/utils/const';
 
 const RunTable = ({
   runs,
@@ -13,18 +13,14 @@ const RunTable = ({
 }) => {
   const [sortFuncInfo, setSortFuncInfo] = useState('');
   // TODO refactor?
-  const sortKMFunc = (a, b) =>
-    sortFuncInfo === 'KM' ? a.distance - b.distance : b.distance - a.distance;
-  const sortPaceFunc = (a, b) =>
-    sortFuncInfo === 'Pace'
-      ? a.average_speed - b.average_speed
-      : b.average_speed - a.average_speed;
-  const sortBPMFunc = (a, b) =>
-    sortFuncInfo === 'BPM'
-      ? a.average_heartrate - b.average_heartrate
-      : b.average_heartrate - a.average_heartrate;
-  const sortDateFuncClick =
-    sortFuncInfo === 'Date' ? sortDateFunc : sortDateFuncReverse;
+  const sortKMFunc = (a, b) => (sortFuncInfo === 'KM' ? a.distance - b.distance : b.distance - a.distance);
+  const sortPaceFunc = (a, b) => (sortFuncInfo === 'Pace'
+    ? a.average_speed - b.average_speed
+    : b.average_speed - a.average_speed);
+  const sortBPMFunc = (a, b) => (sortFuncInfo === 'BPM'
+    ? a.average_heartrate - b.average_heartrate
+    : b.average_heartrate - a.average_heartrate);
+  const sortDateFuncClick = sortFuncInfo === 'Date' ? sortDateFunc : sortDateFuncReverse;
   const sortFuncMap = new Map([
     ['KM', sortKMFunc],
     ['Pace', sortPaceFunc],

src/components/SVGStat/style.module.scss

@@ -4,4 +4,3 @@
   min-width: 700px;
   margin: 1rem 0 0;
 }
-

src/components/Stat/index.jsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import { intComma } from 'src/utils/utils';
 
-const Stat = ({ value, description, className, citySize, onClick }) => (
+const divStyle = {
+  fontWeight: '700',
+};
+
+const Stat = ({
+  value, description, className, citySize, onClick,
+}) => (
   <div className={`${className} pb2 w-100`} onClick={onClick}>
-    <span className={`f${citySize || 1} fw9 i`}>{intComma(value)}</span>
+    <span className={`f${citySize || 1} fw9 i`} style={divStyle}>{intComma(value)}</span>
     <span className="f3 fw6 i">{description}</span>
   </div>
 );

src/components/Stat/style.module.scss

@@ -0,0 +1,3 @@
+.divStyle {
+  font-weight: '700';
+}