diff --git a/README-CN.md b/README-CN.md index 9d094490b2b..27410df70e0 100644 --- a/README-CN.md +++ b/README-CN.md @@ -5,7 +5,7 @@ R.I.P. 希望大家都能健康顺利的跑过终点，逝者安息。 # [打造个人跑步主页](https://yihong.run/running) -[English](README-EN.md) | 简体中文 +[English](README-EN.md) | 简体中文 | [Wiki](https://wiki.mfydev.run/)
GIF 展示 @@ -509,8 +509,9 @@ Actions [源码](https://github.com/yihong0618/running_page/blob/master/.github/ # 特别感谢 - @[flopp](https://github.com/flopp) 特别棒的项目 [GpxTrackPoster](https://github.com/flopp/GpxTrackPoster) - @[shaonianche](https://github.com/shaonianche) icon 设计及文档 -- @[geekplux](https://github.com/geekplux) 帮助及鼓励, 重构了前端代码，学到了不少~ -- @[ben-29](https://github.com/ben-29) 搞定了咕咚，和我一起搞定了悦跑圈，太厉害了。 +- @[geekplux](https://github.com/geekplux) 帮助及鼓励, 重构了前端代码，学到了不少 +- @[ben-29](https://github.com/ben-29) 搞定了咕咚，和我一起搞定了悦跑圈，太厉害了 +- @[MFYDev](https://github.com/MFYDev) Wiki # 赞赏 谢谢就够了 diff --git a/README.md b/README.md index e66d7c7dcd4..0a0a2bb0c1e 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@

-English | [简体中文](https://github.com/yihong0618/running_page/blob/master/README-CN.md) +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) @@ -432,7 +432,8 @@ Before submitting PR: - @[flopp](https://github.com/flopp) great repo [GpxTrackPoster](https://github.com/flopp/GpxTrackPoster) - @[shaonianche](https://github.com/shaonianche) icon design and doc -- @[geekplux](https://github.com/geekplux) Friendly help and encouragement, refactored the whole front-end code, learned a lot~ +- @[geekplux](https://github.com/geekplux) Friendly help and encouragement, refactored the whole front-end code, learned a lot +- @[MFYDev](https://github.com/MFYDev) Wiki # Support Thanks is enough. diff --git a/gatsby-config.js b/gatsby-config.js index 4f770731c3d..b17c04df90c 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,9 +1,20 @@ module.exports = { pathPrefix: '/', // Change to `/running_page` when running on github pages siteMetadata: { - title: 'Running page', + siteTitle: 'Running', siteUrl: 'https://yihong.run', + logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU', 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', + }, + ], }, plugins: [ 'gatsby-transformer-json', diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 9925193b836..339076c4bb1 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -1,43 +1,36 @@ -import React from 'react'; import { Link } from 'gatsby'; -import { AVATAR, NAVS } from 'src/utils/const'; +import React from 'react'; +import useSiteMetadata from 'src/hooks/useSiteMetadata'; const Header = ({ siteTitle }) => { - if (!AVATAR && !NAVS) return null; + const { logo, siteUrl, navLinks } = useSiteMetadata(); + return ( - <> +
- +
); }; diff --git a/src/components/Layout/index.jsx b/src/components/Layout/index.jsx index e4512eed2be..a8035685909 100644 --- a/src/components/Layout/index.jsx +++ b/src/components/Layout/index.jsx @@ -7,18 +7,21 @@ import 'src/styles/index.scss'; import styles from './style.module.scss'; const Layout = ({ children }) => { - const { title, description } = useSiteMetadata(); + const { siteTitle, description } = useSiteMetadata(); return (
- {title} + {/* {title} */} - + -
+
{children}
); diff --git a/src/components/Layout/style.module.scss b/src/components/Layout/style.module.scss index cfdf1eeb8d9..d56c4d07806 100644 --- a/src/components/Layout/style.module.scss +++ b/src/components/Layout/style.module.scss @@ -7,7 +7,12 @@ h1, h3, h4, - li { + li, + a { color: $nike; + text-decoration:none; + } + h1 { + font-size: 3.5rem; } } diff --git a/src/components/LocationStat/index.jsx b/src/components/LocationStat/index.jsx index 2ce37a8327e..cd774eb3fd6 100644 --- a/src/components/LocationStat/index.jsx +++ b/src/components/LocationStat/index.jsx @@ -1,17 +1,19 @@ import React from 'react'; import YearStat from 'src/components/YearStat'; -import LocationSummary from './LocationSummary'; +import { CHINESE_LOCATION_INFO_MESSAGE_FIRST, CHINESE_LOCATION_INFO_MESSAGE_SECOND } from '../../utils/const'; import CitiesStat from './CitiesStat'; +import LocationSummary from './LocationSummary'; import PeriodStat from './PeriodStat'; -import { CHINESE_LOCATION_INFO_MESSAGE_FIRST, CHINESE_LOCATION_INFO_MESSAGE_SECOND } from '../../utils/const' const LocationStat = ({ changeYear, changeCity, changeTitle }) => (

- {CHINESE_LOCATION_INFO_MESSAGE_FIRST}. + {CHINESE_LOCATION_INFO_MESSAGE_FIRST} + .
- {CHINESE_LOCATION_INFO_MESSAGE_SECOND}. + {CHINESE_LOCATION_INFO_MESSAGE_SECOND} + .

Yesterday you said tomorrow. diff --git a/src/hooks/useSiteMetadata.js b/src/hooks/useSiteMetadata.js index ddc03736ce2..5310eb5493e 100644 --- a/src/hooks/useSiteMetadata.js +++ b/src/hooks/useSiteMetadata.js @@ -1,4 +1,4 @@ -import { useStaticQuery, graphql } from 'gatsby'; +import { graphql, useStaticQuery } from 'gatsby'; const useSiteMetadata = () => { const { site } = useStaticQuery( @@ -6,13 +6,18 @@ const useSiteMetadata = () => { query SiteMetaData { site { siteMetadata { - title + siteTitle siteUrl description + logo + navLinks { + name + url + } } } } - ` + `, ); return site.siteMetadata; }; diff --git a/src/pages/404.jsx b/src/pages/404.jsx index f5547f470ff..7af80b06db6 100644 --- a/src/pages/404.jsx +++ b/src/pages/404.jsx @@ -1,20 +1,22 @@ import React from 'react'; import Layout from 'src/components/Layout'; +import useSiteMetadata from 'src/hooks/useSiteMetadata'; -const NotFoundPage = () => ( - -

404

-

This page doesn't exist.

-

- If you wanna more message, you could visit{' '} - - https://github.com/yihong0618/running_page - -

- -); +const NotFoundPage = () => { + const { siteUrl } = useSiteMetadata(); + return ( + +

404

+

This page doesn't exist.

+

+ If you wanna more message, you could visit + {' '} + + {siteUrl} + +

+ + ); +}; export default NotFoundPage; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 509910323a8..4b8ca397a7e 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,31 +1,32 @@ -import React, { useState, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import Layout from 'src/components/Layout'; -import SVGStat from 'src/components/SVGStat'; -import YearsStat from 'src/components/YearsStat'; import LocationStat from 'src/components/LocationStat'; -import RunTable from 'src/components/RunTable'; import RunMap from 'src/components/RunMap'; +import RunTable from 'src/components/RunTable'; +import SVGStat from 'src/components/SVGStat'; +import YearsStat from 'src/components/YearsStat'; import useActivities from 'src/hooks/useActivities'; +import useSiteMetadata from 'src/hooks/useSiteMetadata'; +import { IS_CHINESE } from 'src/utils/const'; import { - titleForShow, - scrollToMap, - geoJsonForRuns, + filterAndSortRuns, filterCityRuns, - filterYearRuns, filterTitleRuns, - filterAndSortRuns, - sortDateFunc, + filterYearRuns, + geoJsonForRuns, getBoundsForGeoData, + scrollToMap, + sortDateFunc, + titleForShow } from 'src/utils/utils'; -import { IS_CHINESE, USE_ANIMATION_FOR_GRID } from 'src/utils/const'; export default () => { + const { siteTitle } = useSiteMetadata(); const { activities, thisYear } = useActivities(); const [year, setYear] = useState(thisYear); - const [mapButtonYear,setMapButtonYear] = useState(thisYear) const [runIndex, setRunIndex] = useState(-1); const [runs, setActivity] = useState( - filterAndSortRuns(activities, year, filterYearRuns, sortDateFunc) + filterAndSortRuns(activities, year, filterYearRuns, sortDateFunc), ); const [title, setTitle] = useState(''); const [geoData, setGeoData] = useState(geoJsonForRuns(runs)); @@ -38,6 +39,7 @@ export default () => { height: 400, ...bounds, }); + const changeByItem = (item, name, func) => { scrollToMap(); setActivity(filterAndSortRuns(activities, item, func, sortDateFunc)); @@ -48,7 +50,7 @@ export default () => { const changeYear = (y) => { // default year setYear(y); - setMapButtonYear(y) + if (viewport.zoom > 3) { setViewport({ width: '100%', @@ -56,6 +58,7 @@ export default () => { ...bounds, }); } + changeByItem(y, 'Year', filterYearRuns); clearInterval(intervalId); }; @@ -92,6 +95,7 @@ export default () => { if (i >= runsNum) { clearInterval(id); } + const tempRuns = runs.slice(0, i); setGeoData(geoJsonForRuns(tempRuns)); i += sliceNume; @@ -104,13 +108,16 @@ export default () => { if (year !== 'Total') { return; } + let rectArr = document.querySelectorAll('rect'); + if (rectArr.length !== 0) { rectArr = Array.from(rectArr).slice(1); } rectArr.forEach((rect) => { const rectColor = rect.getAttribute('fill'); + // not run has no click event if (rectColor !== '#444444') { const runDate = rect.innerHTML; @@ -126,15 +133,17 @@ export default () => { rect.addEventListener( 'click', () => locateActivity(runLocate), - false + false, ); } } }); let polylineArr = document.querySelectorAll('polyline'); + if (polylineArr.length !== 0) { - polylineArr = Array.from(polylineArr).slice(); + polylineArr = Array.from(polylineArr).slice(1); } + // add picked runs svg event polylineArr.forEach((polyline) => { // not run has no click event @@ -143,28 +152,6 @@ export default () => { const [runName] = runDate.match(/\d{4}-\d{1,2}-\d{1,2}/) || [ `${+thisYear + 1}`, ]; - if (USE_ANIMATION_FOR_GRID) { - const length = polyline.getTotalLength(); - polyline.style.transition = polyline.style.WebkitTransition = 'none'; - polyline.style.strokeDasharray = length + ' ' + length; - polyline.style.strokeDashoffset = length; - polyline.getBoundingClientRect(); - polyline.style.animation = polyline.style.WebkitTransition = - 'dash 5s linear alternate infinite'; - polyline.style.strokeDashoffset = '0'; - let keyFrames = document.createElement('style'); - // tricky for (length-1000) - keyFrames.innerHTML = `\ - @keyframes dash {\ - from {\ - stroke-dasharray: 0 ${length};\ - }\ - to {\ - stroke-dasharray: ${length} ${length-1000};\ - }\ - }`; - polyline.appendChild(keyFrames) - } const run = runs .filter((r) => r.start_date_local.slice(0, 10) === runName) .sort((a, b) => b.distance - a.distance)[0]; @@ -181,7 +168,9 @@ export default () => {
-

Running

+

+ {siteTitle} +

{viewport.zoom <= 3 && IS_CHINESE ? ( { setViewport={setViewport} changeYear={changeYear} thisYear={thisYear} - mapButtonYear={mapButtonYear} /> {year === 'Total' ? ( diff --git a/src/utils/const.js b/src/utils/const.js index 53fbf2cda2a..30d4150b82c 100644 --- a/src/utils/const.js +++ b/src/utils/const.js @@ -1,6 +1,5 @@ // const -const MAPBOX_TOKEN = - 'pk.eyJ1IjoieWlob25nMDYxOCIsImEiOiJja2J3M28xbG4wYzl0MzJxZm0ya2Fua2p2In0.PNKfkeQwYuyGOTT_x9BJ4Q'; +const MAPBOX_TOKEN = 'pk.eyJ1IjoieWlob25nMDYxOCIsImEiOiJja2J3M28xbG4wYzl0MzJxZm0ya2Fua2p2In0.PNKfkeQwYuyGOTT_x9BJ4Q'; const MUNICIPALITY_CITIES_ARR = [ '北京市', '上海市', @@ -13,14 +12,12 @@ const MUNICIPALITY_CITIES_ARR = [ // IF you outside China please make sure IS_CHINESE = false const IS_CHINESE = true; const USE_ANIMATION_FOR_GRID = false; -const CHINESE_INFO_MESSAGE = (yearLength, year) => - `我用 App 记录自己跑步 ${yearLength} 年了，下面列表展示的是 ${year} 的数据`; -const ENGLISH_INFO_MESSAGE = (yearLength, year) => - `Running Journey with ${yearLength} Years, the table shows year ${year} data`; +const CHINESE_INFO_MESSAGE = (yearLength, year) => `我用 App 记录自己跑步 ${yearLength} 年了，下面列表展示的是 ${year} 的数据`; +const ENGLISH_INFO_MESSAGE = (yearLength, year) => `Running Journey with ${yearLength} Years, the table shows year ${year} data`; // not support English for now -const CHINESE_LOCATION_INFO_MESSAGE_FIRST = "我跑过了一些地方，希望随着时间推移，地图点亮的地方越来越多"; -const CHINESE_LOCATION_INFO_MESSAGE_SECOND = "不要停下来，不要停下奔跑的脚步"; +const CHINESE_LOCATION_INFO_MESSAGE_FIRST = '我跑过了一些地方，希望随着时间推移，地图点亮的地方越来越多'; +const CHINESE_LOCATION_INFO_MESSAGE_SECOND = '不要停下来，不要停下奔跑的脚步'; const INFO_MESSAGE = IS_CHINESE ? CHINESE_INFO_MESSAGE : ENGLISH_INFO_MESSAGE; const FULL_MARATHON_RUN_TITLE = IS_CHINESE ? '全程马拉松' : 'Full Marathon'; @@ -52,13 +49,6 @@ export { USE_ANIMATION_FOR_GRID, }; -export const AVATAR = - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU'; // Temp avatar -export const NAVS = [ - { text: 'Blog', link: 'https://github.com/yihong0618/running_page' }, - { text: 'About', link: 'https://github.com/yihong0618/running_page' }, -]; - const nike = 'rgb(224,237,94)'; // if you want change the main color change here src/styles/variables.scss export const MAIN_COLOR = nike; export const PROVINCE_FILL_COLOR = '#47b8e0';