feat: Read news from My JSON Server (#240)

* feat: read news from My JSON Server * feat: match language * fix eslint warnings * fix eslint * tweak code
antvis · Nov 4, 2020 · 100b548 · 100b548
1 parent 1314ca0
commit 100b548
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 78 deletions.
diff --git a/@antv/gatsby-theme-antv/package.json b/@antv/gatsby-theme-antv/package.json
@@ -90,6 +90,7 @@
     "monaco-editor": "^0.21.0",
     "monaco-editor-webpack-plugin": "^2.0.0",
     "normalize.css": "^8.0.1",
+    "omit.js": "^2.0.2",
     "parse-github-url": "^1.0.2",
     "prism-themes": "^1.2.0",
     "prismjs": "^1.17.1",

diff --git a/@antv/gatsby-theme-antv/site/components/APIDoc.tsx b/@antv/gatsby-theme-antv/site/components/APIDoc.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Collapse, Skeleton } from 'antd';
 import Mark from 'mark.js';
 import Tabs, { CollapseDataProp } from './Tabs';

diff --git a/@antv/gatsby-theme-antv/site/components/Banner.tsx b/@antv/gatsby-theme-antv/site/components/Banner.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useStaticQuery, graphql, Link } from 'gatsby';
 import { CaretRightOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
@@ -51,7 +51,9 @@ const Banner: React.FC<BannerProps> = ({
   onCloseVideo,
   onPlayVideo,
 }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language.includes('zh') ? 'zh' : 'en';
+  const notificationsUrl = `https://my-json-server.typicode.com/antvis/antvis-sites-data/notifications?lang=${lang}`;
 
   const query = graphql`
     query SiteBannerQuery {
@@ -65,22 +67,17 @@ const Banner: React.FC<BannerProps> = ({
   const { site } = useStaticQuery(query);
   const { githubUrl } = site.siteMetadata;
 
-  const insNotifications: NotificationProps[] = [
-    {
-      type: t('推荐'),
-      title: t('欢迎进入 2020 可视化智能研发时代'),
-      date: '2020.01.08',
-      link: 'https://www.yuque.com/antv/blog/ygdubv',
-    },
-    {
-      type: t('推荐'),
-      title: t('AntV 11-22 品牌日：知源·致远'),
-      date: '2019.11.22',
-      link: 'https://www.yuque.com/antv/blog/2019-release',
-    },
-  ];
-
-  const notificationsNode = (notifications || insNotifications)
+  const [remoteNews, setRemoteNews] = useState<NotificationProps[]>([]);
+
+  useEffect(() => {
+    fetch(notificationsUrl)
+      .then((res) => res.json())
+      .then((data) => {
+        setRemoteNews(data);
+      });
+  }, [notificationsUrl]);
+
+  const notificationsNode = (notifications || remoteNews)
     .slice(0, 2)
     .map((notification, i) => (
       <Notification index={i} key={i} {...notification} />

diff --git a/@antv/gatsby-theme-antv/site/components/CodeLoading.tsx b/@antv/gatsby-theme-antv/site/components/CodeLoading.tsx
@@ -1,62 +1,50 @@
 import React from 'react';
 
-export default function CodeLoading() {
-  return (
-    <div
-      style={{
-        position: 'relative',
-        height: '100%',
-      }}
-    >
-      <div className="code-loading">
-        <div>
-          <div className="loader">
-            <svg viewBox="0 0 80 80">
-              <defs>
-                <linearGradient
-                  id="gradient"
-                  x1=".004%"
-                  x2="100.131%"
-                  y1="49.993%"
-                  y2="49.993%"
-                >
-                  <stop offset="0%" stopColor="#6500FF" />
-                  <stop offset="16%" stopColor="#6A09FF" />
-                  <stop offset="43%" stopColor="#7623FF" />
-                  <stop offset="77%" stopColor="#8A4CFF" />
-                  <stop offset="99%" stopColor="#996BFF" />
-                </linearGradient>
-              </defs>
-              <circle
-                id="test"
-                cx="40"
-                cy="40"
-                r="32"
-                stroke="url(#gradient)"
-              />
-            </svg>
-          </div>
-          <div className="loader triangle">
-            <svg viewBox="0 0 86 80">
-              <polygon points="43 8 79 72 7 72" stroke="url(#gradient)" />
-            </svg>
-          </div>
-          <div className="loader">
-            <svg viewBox="0 0 80 80">
-              <rect
-                x="8"
-                y="8"
-                width="64"
-                height="64"
-                stroke="url(#gradient)"
-              />
-            </svg>
-          </div>
-          <div className="loading-text">
-            <p>Loading...</p>
-          </div>
+const CodeLoading: React.FC = () => (
+  <div
+    style={{
+      position: 'relative',
+      height: '100%',
+    }}
+  >
+    <div className="code-loading">
+      <div>
+        <div className="loader">
+          <svg viewBox="0 0 80 80">
+            <defs>
+              <linearGradient
+                id="gradient"
+                x1=".004%"
+                x2="100.131%"
+                y1="49.993%"
+                y2="49.993%"
+              >
+                <stop offset="0%" stopColor="#6500FF" />
+                <stop offset="16%" stopColor="#6A09FF" />
+                <stop offset="43%" stopColor="#7623FF" />
+                <stop offset="77%" stopColor="#8A4CFF" />
+                <stop offset="99%" stopColor="#996BFF" />
+              </linearGradient>
+            </defs>
+            <circle id="test" cx="40" cy="40" r="32" stroke="url(#gradient)" />
+          </svg>
+        </div>
+        <div className="loader triangle">
+          <svg viewBox="0 0 86 80">
+            <polygon points="43 8 79 72 7 72" stroke="url(#gradient)" />
+          </svg>
+        </div>
+        <div className="loader">
+          <svg viewBox="0 0 80 80">
+            <rect x="8" y="8" width="64" height="64" stroke="url(#gradient)" />
+          </svg>
+        </div>
+        <div className="loading-text">
+          <p>Loading...</p>
         </div>
       </div>
     </div>
-  );
-}
+  </div>
+);
+
+export default CodeLoading;
diff --git a/@antv/gatsby-theme-antv/site/components/Footer.tsx b/@antv/gatsby-theme-antv/site/components/Footer.tsx
@@ -8,6 +8,7 @@ import {
   ZhihuOutlined,
 } from '@ant-design/icons';
 import classnames from 'classnames';
+import omit from 'omit.js';
 import { getProducts } from './getProducts';
 import { useChinaMirrorHost } from '../hooks';
 import styles from './Footer.module.less';
@@ -29,7 +30,7 @@ const Footer: React.FC<FooterProps> = ({
   language,
   rootDomain = '',
   location,
-  ...resetProps
+  ...restProps
 }) => {
   const { t, i18n } = useTranslation();
   const lang = language || i18n.language;
@@ -193,7 +194,7 @@ const Footer: React.FC<FooterProps> = ({
           </div>
         )
       }
-      {...resetProps}
+      {...omit(restProps, ['githubUrl'])}
     />
   );
 };