This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new f9ad7fc92a1 refactor: download card (#1054)
f9ad7fc92a1 is described below
commit f9ad7fc92a1a022e46608e85540fa644f3743e33
Author: Young <isk...@outlook.com>
AuthorDate: Mon Apr 25 13:49:21 2022 +0800
refactor: download card (#1054)
---
scripts/generate-repos-info.js | 69 +++++++--------
website/src/pages/contribute/ContributeCard.tsx | 3 +-
website/src/pages/downloads/ProjectCard.tsx | 26 ++----
website/src/pages/downloads/index.tsx | 112 ++++++++++++------------
4 files changed, 98 insertions(+), 112 deletions(-)
diff --git a/scripts/generate-repos-info.js b/scripts/generate-repos-info.js
index f0f82262931..54121b29d62 100644
--- a/scripts/generate-repos-info.js
+++ b/scripts/generate-repos-info.js
@@ -20,43 +20,38 @@ const tasks = new Listr([
title: `Fetch repos' info and good first issues`,
task: () => new Listr(
repoList.map((repo) => ({
- title: `Fetch ${repo}`,
- task: () => new Listr([
- {
- title: `${repo}'s info`,
- task: () => axios
- .get(`https://api.github.com/repos/${repo}`, axiosConfig)
- .then((v) => v.data)
- .then((v) => {
- res[repo] = Object.assign(res[repo] || {}, {
- info: {
- description: v.description,
- star: v.stargazers_count,
- watch: v.subscribers_count,
- fork: v.forks_count,
- },
- });
- }),
- },
- {
- title: `${repo}'s good first issues`,
- task: () => axios
- .get(
-
`https://api.github.com/repos/${repo}/issues?state=open&labels=good%20first%20issue`,
- axiosConfig,
- )
- .then((v) => v.data)
- .then((v) => {
- res[repo] = Object.assign(res[repo] || {}, {
- issues: v.map((issue) => ({
- comments: issue.comments,
- number: issue.number,
- title: issue.title,
- htmlUrl: issue.html_url,
- })),
- });
- }),
- },
+ title: `Fetch data of ${repo}`,
+ task: () => Promise.all([
+ axios
+ .get(`https://api.github.com/repos/${repo}`, axiosConfig)
+ .then((v) => v.data)
+ .then((v) => {
+ res[repo] = Object.assign(res[repo] || {}, {
+ info: {
+ description: v.description,
+ star: v.stargazers_count,
+ watch: v.subscribers_count,
+ fork: v.forks_count,
+ issue: v.open_issues_count,
+ },
+ });
+ }),
+ axios
+ .get(
+
`https://api.github.com/repos/${repo}/issues?state=open&labels=good%20first%20issue`,
+ axiosConfig,
+ )
+ .then((v) => v.data)
+ .then((v) => {
+ res[repo] = Object.assign(res[repo] || {}, {
+ issues: v.map((issue) => ({
+ comments: issue.comments,
+ number: issue.number,
+ title: issue.title,
+ htmlUrl: issue.html_url,
+ })),
+ });
+ }),
]),
})),
{ concurrent: repoList.length },
diff --git a/website/src/pages/contribute/ContributeCard.tsx
b/website/src/pages/contribute/ContributeCard.tsx
index 399086e3add..b148033a440 100644
--- a/website/src/pages/contribute/ContributeCard.tsx
+++ b/website/src/pages/contribute/ContributeCard.tsx
@@ -79,9 +79,10 @@ interface RepoInfo {
star: number;
watch: number;
fork: number;
+ issue:number;
}
-interface ContributeCardProps {
+export interface ContributeCardProps {
repoName: string;
issues: IssueInfo[];
info: RepoInfo;
diff --git a/website/src/pages/downloads/ProjectCard.tsx
b/website/src/pages/downloads/ProjectCard.tsx
index ad34ee4d471..b4125c034c4 100644
--- a/website/src/pages/downloads/ProjectCard.tsx
+++ b/website/src/pages/downloads/ProjectCard.tsx
@@ -1,5 +1,5 @@
import type { Dispatch, FC, SetStateAction } from 'react';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
import styled from 'styled-components';
import useOutsideClick from '../../hooks/useOutsideClick';
import '../../css/customTheme.css';
@@ -13,6 +13,8 @@ import IconHexagon from '../../assets/icons/hexagon.svg';
import IconStarSolid from '../../assets/icons/star-solid.svg';
import IconOctagon from '../../assets/icons/octagon.svg';
import IconShield from '../../assets/icons/shield.svg';
+import repoInfoList from '../../../config/repos-info.json';
+import type { ContributeCardProps } from '../contribute/ContributeCard';
const Card = styled.div`
border-radius: 0.75rem;
@@ -254,13 +256,6 @@ const shapeComponentMap = {
octagon: <IconOctagon />,
};
-const getGitHubRepoStats = (repo:string) =>
fetch(`https://api.github.com/repos/${repo}`, {
- headers: {
- 'content-type': 'application/json',
- Accept: 'application / vnd.github.v3 + json',
- },
-}).then((response) => response.json());
-
interface LTSButtonProps extends LTSDropdownProps {
name: string;
color: string;
@@ -306,7 +301,6 @@ interface ProjectCardProps extends Omit<DownloadInfo,
'firstDocPath'> {
const ProjectCard: FC<ProjectCardProps> = (props) => {
const [isLTSDropdownOpen, setIsLTSDropdownOpen] = useState(false);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
- const [repoStats, setRepoStats] = useState({ stars: 0, issues: 0 });
const {
name,
description,
@@ -323,15 +317,7 @@ const ProjectCard: FC<ProjectCardProps> = (props) => {
} = props;
const Download = name === 'APISIX®' ? `${version} Current` : 'Download';
-
- useEffect(() => {
- getGitHubRepoStats(githubRepo).then((stats) => {
- setRepoStats({
- stars: stats.stargazers_count,
- issues: stats.open_issues_count,
- });
- });
- }, []);
+ const repoInfo = repoInfoList[githubRepo] as Omit<ContributeCardProps,
'repoName'>;
return (
<Card>
@@ -350,7 +336,7 @@ const ProjectCard: FC<ProjectCardProps> = (props) => {
>
<IconStar />
{' '}
- {repoStats.stars}
+ {repoInfo?.info.star}
</LeftSideLink>
<LeftSideLink
className="downloads-leftsidelink"
@@ -360,7 +346,7 @@ const ProjectCard: FC<ProjectCardProps> = (props) => {
>
<IconInfo />
{' '}
- {repoStats.issues}
+ {repoInfo?.info.issue}
</LeftSideLink>
<LeftSideLink
className="downloads-leftsidelink"
diff --git a/website/src/pages/downloads/index.tsx
b/website/src/pages/downloads/index.tsx
index 67a412ee26e..dbcebb6396a 100644
--- a/website/src/pages/downloads/index.tsx
+++ b/website/src/pages/downloads/index.tsx
@@ -37,7 +37,7 @@ const StyledCodeBlock = styled(CodeBlock)`
margin-top: 1rem;
`;
-const Downloads: FC = () => {
+const DownloadCards: FC = () => {
const { siteConfig } = useDocusaurusContext();
const downloads = siteConfig.customFields.downloads as DownloadInfo[] | null;
@@ -45,72 +45,76 @@ const Downloads: FC = () => {
return null;
}
- const projects = downloads.map((project) => <ProjectCard key={project.name}
{...project} />);
-
return (
- <Layout>
- <DownloadsPage>
- <PageTitle>Downloads</PageTitle>
- <PageSubtitle>We love open source.</PageSubtitle>
- {projects}
- <Description>
- <h2>History Versions</h2>
- <div className="markdown">
- Find all APISIX releases in the
- <a href="https://archive.apache.org/dist/apisix/"; target="_blank"
rel="noreferrer">
- Archive repository
- </a>
- .
- <br />
- <a
- href="https://archive.apache.org/dist/incubator/apisix/";
- target="_blank"
- rel="noreferrer"
- >
- Incubating Archive repository
- </a>
+ <>
+ {downloads.map((project) => <ProjectCard key={project.name} {...project}
/>)}
+ </>
+ );
+};
+
+const Downloads: FC = () => (
+ <Layout>
+ <DownloadsPage>
+ <PageTitle>Downloads</PageTitle>
+ <PageSubtitle>We love open source.</PageSubtitle>
+ <DownloadCards />
+ <Description>
+ <h2>History Versions</h2>
+ <div className="markdown">
+ Find all APISIX releases in the
+ <a href="https://archive.apache.org/dist/apisix/"; target="_blank"
rel="noreferrer">
+ Archive repository
+ </a>
+ .
+ <br />
+ <a
+ href="https://archive.apache.org/dist/incubator/apisix/";
+ target="_blank"
+ rel="noreferrer"
+ >
+ Incubating Archive repository
+ </a>
hosts older releases when APISIX was an incubator project.
- </div>
- <h2>Verify the releases</h2>
- <div className="markdown">
- <a href="https://downloads.apache.org/apisix/KEYS"; target="_blank"
rel="noreferrer">
- Get PGP signatures KEYS
- </a>
- <br />
- It is essential that you verify the integrity of the downloaded
- files using the PGP or SHA signatures. The PGP signatures can be
- verified using GPG or PGP. Please download the KEYS as well as the
- asc signature files for relevant distribution. It is recommended to
- get these files from the main distribution directory and not from
- the mirrors.
- <br />
- <StyledCodeBlock>
- {`gpg -i KEYS
+ </div>
+ <h2>Verify the releases</h2>
+ <div className="markdown">
+ <a href="https://downloads.apache.org/apisix/KEYS"; target="_blank"
rel="noreferrer">
+ Get PGP signatures KEYS
+ </a>
+ <br />
+ It is essential that you verify the integrity of the downloaded
+ files using the PGP or SHA signatures. The PGP signatures can be
+ verified using GPG or PGP. Please download the KEYS as well as the
+ asc signature files for relevant distribution. It is recommended to
+ get these files from the main distribution directory and not from
+ the mirrors.
+ <br />
+ <StyledCodeBlock>
+ {`gpg -i KEYS
# or
pgpk -a KEYS
# or
pgp -ka KEYS`}
- </StyledCodeBlock>
- <br />
- To verify the binaries/sources you can download the relevant asc
- files for it from main distribution directory and follow the below
- guide.
- <StyledCodeBlock>
- {`gpg --verify apache-apisix-********.asc apache-apisix-********
+ </StyledCodeBlock>
+ <br />
+ To verify the binaries/sources you can download the relevant asc
+ files for it from main distribution directory and follow the below
+ guide.
+ <StyledCodeBlock>
+ {`gpg --verify apache-apisix-********.asc apache-apisix-********
# or
pgpv apache-apisix-********.asc
# or
pgp apache-apisix-********.asc`}
- </StyledCodeBlock>
- </div>
- </Description>
- </DownloadsPage>
- </Layout>
- );
-};
+ </StyledCodeBlock>
+ </div>
+ </Description>
+ </DownloadsPage>
+ </Layout>
+);
export default Downloads;
