feat: Mdx add author sub title (#40)

* feat: Mdx add author sub title

* prettier format

* update

docs/.prettierrc

@@ -1,7 +1,6 @@
 {
-  "endOfLine": "lf",
-  "semi": false,
-  "singleQuote": false,
+  "semi": true,
+  "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5"
 }

docs/content/components/badge.mdx

@@ -1,6 +1,7 @@
 ---
 title: Badges 徽标数
 date: 2019-05-21
+author: wangkailang
 ---
 
 出现在按钮、图标、文字旁的数字或状态标记。

docs/content/components/range-picker.mdx

@@ -1,6 +1,7 @@
 ---
 title: RangePicker 区间时间选择框
 date: 2019-07-30
+author: wangkailang
 ---
 
 选定开始时间和结束时间输出时间区间。

docs/content/components/well.mdx

@@ -1,6 +1,7 @@
 ---
 title: Well 水井
 date: 2019-08-07
+author: shenghou
 ---
 
 将 well 用在元素上，能显示嵌入（inset）的效果，与面板（panel）有些类似，不过 panel 功能更丰富。

docs/src/Layout/index.js

@@ -13,7 +13,7 @@ import './style.scss';
 const Layout = props => {
   return (
     <div>
-      {<TopBar slug={props.slug} location={props.location}/>}
+      {<TopBar slug={props.slug} location={props.location} />}
       <Grid fluid className="Main">
         {props.children}
       </Grid>

docs/src/components/GitHubIcon.js

@@ -6,6 +6,6 @@ const GitHubIcon = () => (
       <path d="m20 0c-11 0-20 9-20 20 0 8.8 5.7 16.3 13.7 19 1 0.2 1.3-0.5 1.3-1 0-0.5 0-2 0-3.7-5.5 1.2-6.7-2.4-6.7-2.4-0.9-2.3-2.2-2.9-2.2-2.9-1.9-1.2 0.1-1.2 0.1-1.2 2 0.1 3.1 2.1 3.1 2.1 1.7 3 4.6 2.1 5.8 1.6 0.2-1.3 0.7-2.2 1.3-2.7-4.5-0.5-9.2-2.2-9.2-9.8 0-2.2 0.8-4 2.1-5.4-0.2-0.5-0.9-2.6 0.2-5.3 0 0 1.7-0.5 5.5 2 1.6-0.4 3.3-0.6 5-0.6 1.7 0 3.4 0.2 5 0.7 3.8-2.6 5.5-2.1 5.5-2.1 1.1 2.8 0.4 4.8 0.2 5.3 1.3 1.4 2.1 3.2 2.1 5.4 0 7.6-4.7 9.3-9.2 9.8 0.7 0.6 1.4 1.9 1.4 3.7 0 2.7 0 4.9 0 5.5 0 0.6 0.3 1.2 1.3 1 8-2.7 13.7-10.2 13.7-19 0-11-9-20-20-20z" />
     </g>
   </svg>
-)
+);
 
 export default GitHubIcon;

docs/src/components/Header/index.js

@@ -8,7 +8,7 @@ export default ({ post }) => {
   const { frontmatter = {} } = post || {};
   const slug = lodash.get(post, 'fields.slug');
   const path = slug.replace(/\/$/, '.mdx');
-  const { title, date } = frontmatter || {};
+  const { title, date, author } = frontmatter || {};
   return (
     <div className="Header">
       <SEO title={title} />
@@ -32,7 +32,18 @@ export default ({ post }) => {
           </a>
         </OverlayTrigger>
       </h1>
-      {date && <p>{post.frontmatter.date}</p>}
+      <div className="Header__Sub">
+        {date && <b>{post.frontmatter.date}</b>}
+        {author && (
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://github.com/${author}`}
+          >
+            {author}
+          </a>
+          )}
+      </div>
     </div>
   )
 }

docs/src/components/Header/style.scss

@@ -8,4 +8,10 @@
       font-size: 16px;
     }
   }
+  &__Sub {
+    margin-bottom: 5px;
+    b {
+      margin-right: 5px;
+    }
+  }
 }

docs/src/components/seo.js

@@ -5,10 +5,10 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
-import PropTypes from "prop-types"
-import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import { useStaticQuery, graphql } from 'gatsby';
 
 function SEO({ description, lang, meta, title }) {
   const { site } = useStaticQuery(
@@ -23,9 +23,9 @@ function SEO({ description, lang, meta, title }) {
         }
       }
     `
-  )
+  );
 
-  const metaDescription = description || site.siteMetadata.description
+  const metaDescription = description || site.siteMetadata.description;
 
   return (
     <Helmet
@@ -69,20 +69,20 @@ function SEO({ description, lang, meta, title }) {
         },
       ].concat(meta)}
     />
-  )
+  );
 }
 
 SEO.defaultProps = {
   lang: `zh`,
   meta: [],
   description: ``,
-}
+};
 
 SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
-}
+};
 
-export default SEO
+export default SEO;

docs/src/examples/index.js

@@ -4,4 +4,4 @@ import UseColor from './Color/Use';
 export default {
   BasicColor,
   UseColor,
-}
+};

docs/src/pages/404.js

@@ -1,14 +1,14 @@
-import React from "react"
+import React from 'react';
 
-import Layout from "../Layout"
-import SEO from "../components/seo"
+import Layout from '../Layout';
+import SEO from '../components/seo';
 
 const NotFoundPage = () => (
   <Layout>
     <SEO title="404: Not found" />
     <h1>NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
   </Layout>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;

docs/src/pages/index.js

@@ -1,13 +1,13 @@
-import React from "react"
-import Layout from "../Layout"
-import SEO from "../components/seo";
+import React from 'react';
+import Layout from '../Layout';
+import SEO from '../components/seo';
 import Home from '../components/Home';
 
 const IndexPage = props => (
   <Layout {...props}>
     <SEO title="Home" />
-    <Home/>
+    <Home />
   </Layout>
-)
+);
 
-export default IndexPage
+export default IndexPage;

docs/src/templates/components-post.js

@@ -1,14 +1,14 @@
-import React from "react"
-import { Link, graphql } from "gatsby"
+import React from 'react';
+import { Link, graphql } from 'gatsby';
 import { MDXProvider } from '@mdx-js/react';
-import Layout from "../Layout";
+import Layout from '../Layout';
 import { Row, Col } from 'react-bootstrap';
-import LinkedHeading from '../components/LinkedHeading'
-import Playground from '../components/Playground'
-import SideNav from '../components/SideNav'
-import Header from '../components/Header'
-import Toc from '../components/Toc'
-import MDXRenderer from "gatsby-mdx/mdx-renderer"
+import LinkedHeading from '../components/LinkedHeading';
+import Playground from '../components/Playground';
+import SideNav from '../components/SideNav';
+import Header from '../components/Header';
+import Toc from '../components/Toc';
+import MDXRenderer from 'gatsby-mdx/mdx-renderer';
 
 const components = {
   h2: props => <LinkedHeading h="2" {...props} />,
@@ -21,7 +21,10 @@ const components = {
 class BlogPostTemplate extends React.Component {
   render() {
     const post = this.props.data.mdx;
-    const { headings = [], fields: { slug } } = post || {};
+    const {
+      headings = [],
+      fields: { slug },
+    } = post || {};
     const { previous, next } = this.props.pageContext;
 
     return (
@@ -32,14 +35,18 @@ class BlogPostTemplate extends React.Component {
           </Col>
           <Col xs={24} md={17} xl={17}>
             <div className="Main__Body">
-              <Header post={post}/>
+              <Header post={post} />
               <MDXProvider components={components}>
                 <MDXRenderer>{post.code.body}</MDXRenderer>
               </MDXProvider>
             </div>
             <div className="prev-next-nav">
               {previous && (
-                <Link className="prev-page" to={previous.fields.slug} rel="prev">
+                <Link
+                  className="prev-page"
+                  to={previous.fields.slug}
+                  rel="prev"
+                >
                   ← {previous.frontmatter.title}
                 </Link>
               )}
@@ -51,15 +58,15 @@ class BlogPostTemplate extends React.Component {
             </div>
           </Col>
           <Col md={3} xl={3}>
-            <Toc headings={headings} location={this.props.location}/>
+            <Toc headings={headings} location={this.props.location} />
           </Col>
         </Row>
       </Layout>
-    )
+    );
   }
 }
 
-export default BlogPostTemplate
+export default BlogPostTemplate;
 
 export const pageQuery = graphql`
   query PostBySlug($slug: String!) {
@@ -79,7 +86,8 @@ export const pageQuery = graphql`
       frontmatter {
         title
         date(formatString: "YYYY-MM-DD")
+        author
       }
     }
   }
-`
+`;

docs/src/templates/default.js

@@ -2,8 +2,8 @@ import React from 'react';
 import Layout from '../Layout';
 import Playground from '../components/Playground';
 import { MDXProvider } from '@mdx-js/react';
-import { graphql } from "gatsby"
-import Header from '../components/Header'
+import { graphql } from 'gatsby';
+import Header from '../components/Header';
 import MDXRenderer from 'gatsby-mdx/mdx-renderer';
 
 const showComponents = {
@@ -20,8 +20,8 @@ export default props => {
         <MDXRenderer>{post.code.body}</MDXRenderer>
       </MDXProvider>
     </Layout>
-  )
-}
+  );
+};
 
 export const pageQuery = graphql`
   query StartBySlug($slug: String!) {
@@ -40,4 +40,4 @@ export const pageQuery = graphql`
       }
     }
   }
-`;
+`;

docs/src/utils/get-colors.js

@@ -20,7 +20,12 @@ export default () => {
   const colorArr = colorString
     .split('\n')
     .filter(item => item.includes('$'))
-    .map(item => item.replace(';', '').split(':').map(k => k.trim()));
+    .map(item =>
+      item
+        .replace(';', '')
+        .split(':')
+        .map(k => k.trim())
+    );
   const basicColorKeys = lodash.keys(basicColorMap);
   const useColorKey = lodash.keys(useColorMap);
   colorArr.forEach(([text, color]) => {
@@ -33,9 +38,7 @@ export default () => {
     useColorKey.forEach(key => {
       const matchText = text.match(key);
       if (matchText && matchText.index === 1) {
-        const varToColor = colorArr.filter(item =>
-          color.includes(item[0])
-        );
+        const varToColor = colorArr.filter(item => color.includes(item[0]));
         if (varToColor.length) {
           useColorMap[key][`${text}(${varToColor[0][0]})`] = varToColor[0][1];
         } else {
@@ -48,4 +51,4 @@ export default () => {
     basicColorMap,
     useColorMap,
   };
-}
+};

docs/src/utils/invert-color.js

@@ -1,8 +1,8 @@
 // link: https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color
-function padZero (str, len) {
+function padZero(str, len) {
   len = len || 2;
-  const zeros = new Array (len).join ('0');
-  return (zeros + str).slice (-len);
+  const zeros = new Array(len).join('0');
+  return (zeros + str).slice(-len);
 }
 export default function invertColor(hex) {
   if (hex.indexOf('#') === 0) {
@@ -17,11 +17,12 @@ export default function invertColor(hex) {
     throw new Error('Invalid HEX color.');
   }
 
-  const invert = (hex, b, e) => (255 - parseInt(hex.slice(b, e), 16)).toString(16);
+  const invert = (hex, b, e) =>
+    (255 - parseInt(hex.slice(b, e), 16)).toString(16);
 
   const r = invert(hex, 0, 2);
-  const g = invert (hex, 2, 4);
+  const g = invert(hex, 2, 4);
   const b = invert(hex, 4, 6);
 
   return '#' + padZero(r) + padZero(g) + padZero(b);
-}
+}