You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2021/11/22 03:40:00 UTC
[apisix-website] branch master updated: feat: added the Contribute page (#758)
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 b5341e6 feat: added the Contribute page (#758)
b5341e6 is described below
commit b5341e6d8c94151985006b9b5a53f1b6b535cd0e
Author: Serendipity96 <ru...@outlook.com>
AuthorDate: Mon Nov 22 11:39:55 2021 +0800
feat: added the Contribute page (#758)
---
website/config/navbar.js | 5 ++
website/src/assets/icons/comment.svg | 1 +
website/src/pages/contribute/ContributeCard.js | 120 +++++++++++++++++++++++++
website/src/pages/contribute/index.js | 46 ++++++++++
4 files changed, 172 insertions(+)
diff --git a/website/config/navbar.js b/website/config/navbar.js
index 429c2aa..40d4d0c 100644
--- a/website/config/navbar.js
+++ b/website/config/navbar.js
@@ -107,6 +107,11 @@ module.exports = [
position: "right",
},
{
+ to: "/contribute",
+ label: "Contribute",
+ position: "right",
+ },
+ {
type: "localeDropdown",
position: "right",
},
diff --git a/website/src/assets/icons/comment.svg b/website/src/assets/icons/comment.svg
new file mode 100644
index 0000000..e54206d
--- /dev/null
+++ b/website/src/assets/icons/comment.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="16px" height="16.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M896.4 195.6c-19.1-19.2-44.5-29.8-71.5-29.8l-587.9-0.9h-0.2c-55.7 0-101.1 45.3-101.2 101.1l-1.1 608.6c-0.1 10 5.5 18.8 14.4 23.2 3.6 1.7 7.5 2.6 11.3 2.6 5.6 0 11.2-1.9 15.8-5.5l127-99.2c2.7-2.1 6.1-3.3 9.5-3.3l5 [...]
diff --git a/website/src/pages/contribute/ContributeCard.js b/website/src/pages/contribute/ContributeCard.js
new file mode 100644
index 0000000..de9b33c
--- /dev/null
+++ b/website/src/pages/contribute/ContributeCard.js
@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import IconComment from "../../assets/icons/comment.svg";
+
+const Card = styled.div`
+ @media (max-width: 700px) {
+ width: 100%;
+ }
+ width: 80%;
+ border: 1px solid rgb(232, 67, 62);
+ border-radius: 5px;
+ margin-bottom: 1rem;
+ padding: 0.75rem 1.25rem;
+
+ &:hover {
+ background-color: rgb(255,241,240,0.2);
+ cursor: pointer;
+ p{
+ color: rgb(232, 67, 62);
+ }
+ }
+ background-color: ${(props) => (props.isShow ? "rgb(255,241,240,0.2)" : "")};
+`;
+
+const ProjectTitle = styled.div`
+ display:flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-left: 1.25 rem;
+ margin-right: 1.25 rem;
+`;
+const Title = styled.p`
+ margin: 0;
+ font-size: 1.5rem;
+ color: ${(props) => (props.isShow ? "rgb(232, 67, 62)" : "")};
+`;
+
+const Issue = styled.div`
+ @media (max-width: 700px) {
+ min-width: 5rem;
+ }
+ border: 1px solid rgb(232, 67, 62);
+ border-radius: 0.5rem;
+ padding: 0.25rem 0.5rem;
+ font-size: .875rem;
+`;
+
+const ProjectDesc = styled.div`
+ display: flex;
+ color: ${(props) => (props.isShow ? "rgb(232, 67, 62)" : "")};
+`;
+const List = styled.div`
+ display: ${(props) => (props.isShow ? "block" : "none")};
+`;
+const ListItem = styled.li`
+ list-style: none;
+ display: flex;
+`;
+
+
+const ContributeCard = (props) => {
+ const { repoName } = props;
+ const [isShow, setisShow] = useState(false);
+ const [repoInfo, setRepoInfo] = useState({ description: '', Star: '', Watch: '', Fork: '' });
+ const [issues, setIssues] = useState([]);
+
+ useEffect(() => {
+ getGitHubIssuesInfo(repoName).then((result) => {
+ setIssues(result);
+ });
+ getGitHubRepoInfo(repoName).then((result) => {
+ setRepoInfo({ description: result.description, Star: result.stargazers_count, Watch: result.subscribers_count, Fork: result.forks_count })
+ })
+ }, []);
+ return (
+ <Card onClick={() => setisShow(!isShow)} isShow={isShow}>
+ <ProjectTitle>
+ <Title isShow={isShow}>{repoName}</Title>
+ <Issue isShow={isShow}>{issues.length} issues</Issue>
+ </ProjectTitle>
+ <div>{repoInfo.description}</div>
+ <ProjectDesc isShow={isShow}>
+ <div style={{ marginRight: '1rem' }}>Star: {repoInfo.Star}</div>
+ <div style={{ marginRight: '1rem' }}>Watch: {repoInfo.Watch}</div>
+ <div style={{ marginRight: '1rem' }}>Fork: {repoInfo.Fork}</div>
+ </ProjectDesc>
+ <List isShow={isShow}>
+ <ul style={{ paddingLeft: 0 }}>
+ {issues.map(item => (
+ <ListItem key={item.number}>
+ <div style={{ minWidth: '4rem' }}>#{item.number}</div>
+ <a target="_blank" href={item.html_url} style={{ flex: '1 1 auto', textDecoration: 'none', overflow: 'hidden' }}>{item.title} </a>
+ {item.comments > 0 ? <div style={{ display: "flex", justifyContent: 'center', alignItems: 'center' }}><IconComment></IconComment><div style={{ marginLeft: '0.25rem', fontSize: '0.5rem', color: '#333' }}>{item.comments}</div></div> : ''}
+ </ListItem>
+ ))}
+ </ul></List>
+ </Card>
+ );
+};
+
+const getGitHubIssuesInfo = (repo) => {
+ return fetch(`https://api.github.com/repos/${repo}/issues?state=open&labels=good%20first%20issue`, {
+ headers: {
+ "content-type": "application/json",
+ Accept: "application / vnd.github.v3 + json",
+ },
+ }).then((response) => response.json()
+ );
+};
+
+const getGitHubRepoInfo = (repo) => {
+ return fetch(`https://api.github.com/repos/${repo}`, {
+ headers: {
+ "content-type": "application/json",
+ Accept: "application / vnd.github.v3 + json",
+ },
+ }).then((response) => response.json());
+};
+
+export default ContributeCard;
diff --git a/website/src/pages/contribute/index.js b/website/src/pages/contribute/index.js
new file mode 100644
index 0000000..970d11a
--- /dev/null
+++ b/website/src/pages/contribute/index.js
@@ -0,0 +1,46 @@
+import React from "react";
+import styled from "styled-components";
+import Layout from "@theme/Layout";
+import ContributeCard from "./ContributeCard";
+
+const Page = styled.div`
+ max-width: var(--ifm-container-width);
+ margin: 0 auto;
+ padding: 2rem var(--ifm-spacing-horizontal);
+ width: 100%;
+`;
+
+const PageTitle = styled.h1`
+ margin-top: 2rem;
+ font-size: 3rem;
+ font-weight: 800;
+`;
+
+const PageTitleSpecial = styled.span`
+ color:rgb(232, 67, 62);
+`;
+
+const PageDesc = styled.div`
+ margin: 1.25rem auto;
+`;
+
+const Contribute = () => {
+ const repoList = require("../../../config/docs").map(item => ({ repoName: item.githubRepo }));
+
+ const repos = repoList.map((repo) => {
+ return <ContributeCard key={repo.repoName} {...repo} />;
+ });
+
+ return (
+ <Layout>
+ <Page>
+ <PageTitle>Good <PageTitleSpecial>first</PageTitleSpecial> issue</PageTitle>
+ <PageDesc>Help new partners to Apache APISIX Community and make first contribution.</PageDesc>
+ {repos}
+ </Page>
+ </Layout>
+
+ );
+};
+
+export default Contribute;