Skip to content
This repository has been archived by the owner on Aug 31, 2023. It is now read-only.

feat: Read news from My JSON Server #240

Merged
merged 5 commits into from Nov 4, 2020
Merged

feat: Read news from My JSON Server #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
388e4b1
feat: read news from My JSON Server
afc163 Nov 2, 2020
64b40ba
feat: match language
afc163 Nov 2, 2020
dcf2005
fix eslint warnings
afc163 Nov 2, 2020
2bf4e51
fix eslint
afc163 Nov 2, 2020
b0d3c04
tweak code
afc163 Nov 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions @antv/gatsby-theme-antv/package.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion @antv/gatsby-theme-antv/site/components/APIDoc.tsx
View file
Open in desktop
@@ -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';
Expand Down
33 changes: 15 additions & 18 deletions @antv/gatsby-theme-antv/site/components/Banner.tsx
View file
Open in desktop
@@ -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';
Expand Down Expand Up @@ -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}`;

afc163 marked this conversation as resolved.
Show resolved Hide resolved
const query = graphql`
query SiteBannerQuery {
Expand All @@ -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} />
Expand Down
102 changes: 45 additions & 57 deletions @antv/gatsby-theme-antv/site/components/CodeLoading.tsx
View file
Open in desktop
@@ -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;
5 changes: 3 additions & 2 deletions @antv/gatsby-theme-antv/site/components/Footer.tsx
View file
Open in desktop
Expand Up @@ -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';
Expand All @@ -29,7 +30,7 @@ const Footer: React.FC<FooterProps> = ({
language,
rootDomain = '',
location,
...resetProps
...restProps
}) => {
const { t, i18n } = useTranslation();
const lang = language || i18n.language;
Expand Down Expand Up @@ -193,7 +194,7 @@ const Footer: React.FC<FooterProps> = ({
</div>
)
}
{...resetProps}
{...omit(restProps, ['githubUrl'])}
/>
);
};
Expand Down