refactor(Article): polish up

issue #77

gatsby-config.js

@@ -8,6 +8,7 @@ module.exports = {
     facebook: 'sabertazimi',
     weibo: 'sabertazimi',
     email: '[email protected]',
+    disqusUrl: 'https://sabertaz-blog.disqus.com',
     booklist: [
       {
         title: 'awesome-notes',

src/components/Article/Article.jsx

@@ -18,9 +18,9 @@ const Article = ({ post }) => {
         <ArticleNavigation toc={toc} />
         <ArticleContent content={html} />
         <ArticleDivider>{post.subtitle || 'Blog'}</ArticleDivider>
-        <ArticleFooter post={post} />
+        <ArticleFooter post={postMetadata} />
         <ArticleDivider>
-          <Icons.Comment style={{ color: Colors.primary }} />
+          <Icons.Comment style={{ fontSize: '1.35em', color: Colors.primary }} />
         </ArticleDivider>
         <ArticleComments />
         <SocialGroup />

src/components/Article/ArticleComments.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { useDisqus } from 'hooks';
+import { useDisqus, useSiteMetadata } from '@/hooks';
 import * as styles from './ArticleComments.module.css';
 
 const ArticleComments = () => {
-  useDisqus('https://http-blog-hust-cf.disqus.com');
+  const { disqusUrl } = useSiteMetadata();
+  useDisqus(disqusUrl);
 
   return <div id="disqus_thread" className={styles.disqus} />;
 };

src/components/Article/ArticleContent.jsx

@@ -12,8 +12,8 @@ const ArticleContent = ({ content }) => {
   return (
     <animated.div
       style={props}
-      dangerouslySetInnerHTML={{ __html: content }}
       className={styles.markdownBody}
+      dangerouslySetInnerHTML={{ __html: content }}
     />
   );
 };

src/components/Article/ArticleFooter.jsx

@@ -6,8 +6,8 @@ import {
   ArrowRightOutlined,
   HomeOutlined,
 } from '@ant-design/icons';
-import { useResponsive } from 'hooks';
-import { BreakPoints, Colors } from 'config';
+import { useResponsive } from '@/hooks';
+import { BreakPoints, Colors } from '@/config';
 import * as styles from './ArticleFooter.module.css';
 
 const ArticleFooter = ({ post }) => {

src/components/Article/ArticleHeader.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import { useSpring, animated } from 'react-spring';
 import { Tag } from 'antd';
-import { Colors } from 'config';
+import { useSpring, animated } from 'react-spring';
+import { Colors } from '@/config';
 
 const ArticleHeader = ({ post }) => {
   const props = useSpring({

src/components/Article/ArticleNavigation.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { Button, Drawer } from 'antd';
 import { CloseOutlined, MenuFoldOutlined } from '@ant-design/icons';
-import { useResponsive } from 'hooks';
-import { BreakPoints, Colors } from 'config';
+import { useResponsive } from '@/hooks';
+import { BreakPoints, Colors } from '@/config';
 import * as styles from './ArticleNavigation.module.css';
 
 const ArticleNavigation = ({ toc }) => {

src/hooks/useSiteMetadata.js

@@ -14,6 +14,7 @@ const useSiteMetadata = () => {
             twitter
             facebook
             email
+            disqusUrl
             booklist {
               title
               author