Merge branch 'master' of https://github.com/yihong0618/running_page

docs:update readme yihong0618#134
OrdinarySK · May 31, 2021 · 0a63cc1 · 0a63cc1
1 parent aa4db87
commit 0a63cc1
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 119 deletions.
diff --git 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/)
 
 <details>
 <summary>GIF 展示</summary>
@@ -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
@@ -17,7 +17,7 @@
 </p>
 
 
-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
@@ -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
@@ -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 (
-    <>
+    <div>
       <nav
         className="db flex justify-between w-100 ph5-l"
         style={{ marginTop: '3rem' }}
       >
-        {AVATAR && (
-          <div className="dib w-25 v-mid">
-            <Link to="/" className="link dim">
-              <picture>
-                <img
-                  className="dib w3 h3 br-100"
-                  alt={siteTitle || 'avatar'}
-                  src={AVATAR}
-                />
-              </picture>
-            </Link>
-          </div>
-        )}
-        {NAVS && (
-          <div className="dib w-75 v-mid tr">
-            {NAVS.map((n, i) => (
-              <a
-                key={i}
-                href={n.link}
-                className="light-gray link dim f6 f5-l mr3 mr4-l"
-              >
-                {n.text}
-              </a>
-            ))}
-          </div>
-        )}
+        <div className="dib w-25 v-mid">
+          <Link to={siteUrl} className="link dim">
+            <picture>
+              <img className="dib w3 h3 br-100" alt="logo" src={logo} />
+            </picture>
+          </Link>
+        </div>
+        <div className="dib w-75 v-mid tr">
+          {navLinks.map((n, i) => (
+            <a
+              key={i.name}
+              href={n.url}
+              className="light-gray link dim f6 f5-l mr3 mr4-l"
+            >
+              {n.name}
+            </a>
+          ))}
+        </div>
       </nav>
-    </>
+    </div>
   );
 };
 

diff --git 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 (
     <div>
       <Helmet bodyAttributes={{ class: styles.body }}>
         <html lang="en" />
-        <title>{title}</title>
+        {/* <title>{title}</title> */}
         <meta name="description" content={description} />
         <meta name="keywords" content="running" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
       </Helmet>
-      <Header title={title} />
+      <Header title={siteTitle} />
       <div className="pa3 pa5-l">{children}</div>
     </div>
   );

diff --git 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
@@ -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 }) => (
   <div className="fl w-100 w-30-l pb5 pr5-l">
     <section className="pb4" style={{ paddingBottom: '0rem' }}>
       <p>
-        {CHINESE_LOCATION_INFO_MESSAGE_FIRST}.
+        {CHINESE_LOCATION_INFO_MESSAGE_FIRST}
+        .
         <br />
-        {CHINESE_LOCATION_INFO_MESSAGE_SECOND}.
+        {CHINESE_LOCATION_INFO_MESSAGE_SECOND}
+        .
         <br />
         <br />
         Yesterday you said tomorrow.

diff --git a/src/hooks/useSiteMetadata.js b/src/hooks/useSiteMetadata.js
@@ -1,18 +1,23 @@
-import { useStaticQuery, graphql } from 'gatsby';
+import { graphql, useStaticQuery } from 'gatsby';
 
 const useSiteMetadata = () => {
   const { site } = useStaticQuery(
     graphql`
       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
@@ -1,20 +1,22 @@
 import React from 'react';
 import Layout from 'src/components/Layout';
+import useSiteMetadata from 'src/hooks/useSiteMetadata';
 
-const NotFoundPage = () => (
-  <Layout>
-    <h1 className="f-headline">404</h1>
-    <p>This page doesn&#39;t exist.</p>
-    <p className="moon-gray">
-      If you wanna more message, you could visit{' '}
-      <a
-        className="moon-gray b"
-        href="https://github.com/yihong0618/running_page"
-      >
-        https://github.com/yihong0618/running_page
-      </a>
-    </p>
-  </Layout>
-);
+const NotFoundPage = () => {
+  const { siteUrl } = useSiteMetadata();
+  return (
+    <Layout>
+      <h1 className="f-headline">404</h1>
+      <p>This page doesn&#39;t exist.</p>
+      <p className="moon-gray">
+        If you wanna more message, you could visit
+        {' '}
+        <a className="moon-gray b" href={siteUrl}>
+          {siteUrl}
+        </a>
+      </p>
+    </Layout>
+  );
+};
 
 export default NotFoundPage;