This is an automated email from the ASF dual-hosted git repository.
midnight2104 pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-shenyu-website.git
The following commit(s) were added to refs/heads/main by this push:
new b8f5b9e modify: the download version card. (#305)
b8f5b9e is described below
commit b8f5b9e521bf3298ab56a3f767ac43d1ca81e2bd
Author: YuI <[email protected]>
AuthorDate: Thu Oct 7 12:48:46 2021 +0800
modify: the download version card. (#305)
Co-authored-by: 艺铭 <[email protected]>
---
docusaurus.config.js | 8 ++-
package.json | 1 +
src/pages/download/DownloadCard.tsx | 83 +++++++++++++++++++++++-------
src/pages/download/VersionCard.tsx | 63 -----------------------
src/pages/download/downloadCard.module.css | 64 ++++++++++++++++++-----
src/pages/download/index.tsx | 4 +-
src/pages/download/versionCard.module.css | 20 -------
7 files changed, 124 insertions(+), 119 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index a230779..a79fb1f 100755
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -32,23 +32,27 @@ module.exports = {
name: "Apache ShenYu (incubating)",
description: "High-performance, multi-protocol, extensible, responsive
API Gateway",
githubRepo: "apache/incubator-shenyu",
- version: "2.4.0",
- releaseDate: "Aug 8, 2021",
content: [
{
name: "Source Codes",
+ version: "2.4.0",
+ releaseDate: "Aug 8, 2021",
zip:
"https://www.apache.org/dyn/closer.lua/incubator/shenyu/2.4.0/apache-shenyu-incubating-2.4.0-src.zip";,
asc:
"https://downloads.apache.org/incubator/shenyu/2.4.0/apache-shenyu-incubating-2.4.0-src.zip.asc";,
sha512:
"https://downloads.apache.org/incubator/shenyu/2.4.0/apache-shenyu-incubating-2.4.0-src.zip.sha512";
},
{
name: "ShenYu-Admin Binary Distribution",
+ version: "2.4.0",
+ releaseDate: "Aug 8, 2021",
tar:
"https://www.apache.org/dyn/closer.lua/incubator/shenyu/2.4.0/apache-shenyu-incubating-2.4.0-admin-bin.tar.gz";,
asc:
"https://downloads.apache.org/incubator/shenyu/2.4.0/apache-shenyu-incubating-2.4.0-admin-bin.tar.gz.asc";,
sha512:
"https://downloads.apache.org/incubator/shenyu/2.4.0/apache-shenyu-incubating-2.4.0-admin-bin.tar.gz.sha512";
},
{
name: "ShenYu-Bootstrap Binary Distribution",
+ version: "2.4.0",
+ releaseDate: "Aug 8, 2021",
tar:
"https://www.apache.org/dyn/closer.lua/incubator/shenyu/2.4.0/apache-shenyu-incubating-2.4.0-bootstrap-bin.tar.gz";,
asc:
"https://downloads.apache.org/incubator/shenyu/2.4.0/apache-shenyu-incubating-2.4.0-bootstrap-bin.tar.gz.asc";,
sha512:
"https://downloads.apache.org/incubator/shenyu/2.4.0/apache-shenyu-incubating-2.4.0-bootstrap-bin.tar.gz.sha512";
diff --git a/package.json b/package.json
index 0493762..d06f06e 100755
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"@docusaurus/core": "2.0.0-beta.4",
"@docusaurus/preset-classic": "2.0.0-beta.4",
"@docusaurus/theme-search-algolia": "^2.0.0-beta.4",
+ "@headlessui/react": "^1.4.1",
"@mdx-js/react": "^1.6.21",
"@svgr/webpack": "^5.5.0",
"clsx": "^1.1.1",
diff --git a/src/pages/download/DownloadCard.tsx
b/src/pages/download/DownloadCard.tsx
index 2ddb7c5..2f08bd6 100644
--- a/src/pages/download/DownloadCard.tsx
+++ b/src/pages/download/DownloadCard.tsx
@@ -1,19 +1,37 @@
import React, { useEffect, useState } from 'react';
+import { Popover } from '@headlessui/react';
import { GoStar, GoIssueOpened, GoRepoForked } from 'react-icons/go';
import { RiDownload2Fill } from 'react-icons/ri';
import Translate, { translate } from '@docusaurus/Translate';
import styles from './downloadCard.module.css';
+// interface DownloadCardProps {
+// name?: string,
+// description?: string,
+// githubRepo?: string,
+// version?: string,
+// releaseDate?: string,
+// url?: string
+// }
+
interface DownloadCardProps {
- name?: string,
- description?: string,
- githubRepo?: string,
- version?: string,
- releaseDate?: string,
- url?: string
+ name?: string;
+ description?: string;
+ githubRepo?: string;
+ content?: Array<IContentAttribute>;
+}
+
+interface IContentAttribute {
+ name: string;
+ version?: string;
+ releaseDate?: string;
+ zip?: string;
+ tar?: string;
+ asc: string;
+ sha512: string;
}
-interface RepoAttribute {
+interface IRepoAttribute {
stars: number;
issues: number;
forks: number;
@@ -21,13 +39,14 @@ interface RepoAttribute {
const DownloadCard: React.FC<DownloadCardProps> = ({ ...props }) => {
- const [repo, setRepo] = useState<RepoAttribute>({
+ const [repo, setRepo] = useState<IRepoAttribute>({
stars: 0,
issues: 0,
forks: 0
});
useEffect(() => {
+ console.log(props);
getGitHubRepoStats(props.githubRepo).then((repo) => {
setRepo({
stars: repo.stargazers_count,
@@ -61,20 +80,44 @@ const DownloadCard: React.FC<DownloadCardProps> = ({
...props }) => {
<GoRepoForked/>
<span style={{ marginLeft: '4px' }}>{repo.forks}</span>
</div>
+
+ <Popover className={styles.downloadPopover}>
+ <Popover.Button
className={styles.downloadBtn}>Download</Popover.Button>
+ <Popover.Panel className={styles.downloadPanel}>
+ {
+ props.content instanceof Array &&
props.content.map((value, index) =>
+ <div key={index}>
+ <div
className={styles.downloadPanelTitle}>
+ <span>v{value.version} for
{value.name}</span>
+ <span
className={styles.downloadPanelTitleDate}>
+
| {value.releaseDate}
+ </span>
+ </div>
+ <div
className={styles.downloadPanelUrl}>
+ {
+ value.zip &&
+ <div>[<a
href={value.zip}>zip</a>]</div>
+ }
+ {
+ value.tar &&
+ <div>[<a
href={value.tar}>tar</a>]</div>
+ }
+ {
+ value.asc &&
+ <div>[<a
href={value.asc}>asc</a>]</div>
+ }
+ {
+ value.sha512 &&
+ <div>[<a
href={value.sha512}>sha512</a>]</div>
+ }
+ </div>
+ </div>
+ )
+ }
+ </Popover.Panel>
+ </Popover>
</div>
</div>
- <div className={styles.downloadMessage}>
- <div style={{ textAlign: 'right' }}>
- <span>Version: {props.version}</span>
- </div>
- <div style={{ textAlign: 'right' }}>
- <span>Release Date: {props.releaseDate}</span>
- </div>
- <a className={styles.downloadBtn} target="_blank"
href={props.url}>
- <RiDownload2Fill/>
- <span style={{ marginLeft: '6px' }}>Download</span>
- </a>
- </div>
</div>
);
};
diff --git a/src/pages/download/VersionCard.tsx
b/src/pages/download/VersionCard.tsx
deleted file mode 100644
index 0323f8e..0000000
--- a/src/pages/download/VersionCard.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import styles from './versionCard.module.css';
-
-interface VersionCardProps {
- name?: string;
- description?: string;
- githubRepo?: string;
- version?: string;
- releaseDate?: string;
- content?: Array<ContentAttribute>;
-}
-
-interface ContentAttribute {
- name: string;
- zip?: string;
- tar?: string;
- asc: string;
- sha512: string;
-}
-
-const VersionCard: React.FC<VersionCardProps> = ({ ...props }) => {
-
- return (
- <div className={styles.main}>
- <div>
- <span
- className={styles.name}>{props.name} - Version:
{props.version} ( Release Date: {props.releaseDate} )
- </span>
- </div>
- <ul className={styles.downloadDetail}>
- {
- props.content instanceof Array &&
props.content.map((value) => {
- return (
- <li key={value.name}>
- <span>
- {value.name} :
- </span>
- {value.zip &&
- <a href={value.zip}>
- ZIP
- </a>
- }
- {value.tar &&
- <a href={value.tar}>
- TAR
- </a>
- }
- <a href={value.asc}>
- ASC
- </a>
- <a href={value.sha512}>
- SHA512
- </a>
- </li>
- );
- })
- }
- </ul>
- </div>
- );
-};
-
-export default VersionCard;
diff --git a/src/pages/download/downloadCard.module.css
b/src/pages/download/downloadCard.module.css
index 50a2e42..1ae24ad 100644
--- a/src/pages/download/downloadCard.module.css
+++ b/src/pages/download/downloadCard.module.css
@@ -4,7 +4,6 @@
border: #cecece solid 1px;
border-radius: 1rem;
display: flex;
- overflow: hidden;
}
.main a:hover {
@@ -12,7 +11,7 @@
}
.githubDetail {
- width: 70%;
+ width: 100%;
height: 100%;
padding: 30px 0 0 20px;
}
@@ -43,6 +42,7 @@
padding: 0;
font-size: 20px;
display: flex;
+ position: relative;
}
.githubRepoDetail {
@@ -50,27 +50,67 @@
align-items: center;
}
-.downloadMessage {
- width: 30%;
- height: 100%;
- padding: 80px 40px 0 0;
-}
-
.downloadBtn {
- width: 80%;
+ width: 200px;
height: 50px;
margin-top: 20px;
border-radius: 1rem;
+ border: 0;
background: var(--ifm-color-primary);
display: flex;
font-size: 24px;
color: white;
justify-content: center;
align-items: center;
- float: right;
position: relative;
}
-.downloadBtn:hover {
- color: white;
+.downloadPopover {
+ position: absolute;
+ right: 40px;
+ bottom: 0;
+}
+
+.downloadPanel {
+ width: 500px;
+ max-height: 20vh;
+ margin: 10px 0 10px -60px;
+ background-color: white;
+ box-shadow: 2px 2px 1px #cecece;
+ padding: 2px 10px;
+ border: #cecece solid 1px;
+ border-radius: 6px;
+ position: absolute;
+ z-index: 10;
+ display: grid;
+ overflow-y: scroll;
+}
+
+.downloadPanel > div {
+ margin: 5px 0;
+}
+
+.downloadPanelTitle {
+ font-size: 16px;
+ height: 16px;
+ white-space:nowrap;
+}
+
+.downloadPanelTitleDate {
+ font-size: 10px;
+ color: gray;
+}
+
+.downloadPanelUrl {
+ margin-top: 4px;
+ font-size: 14px;
+ display: flex;
+}
+
+.downloadPanelUrl > div {
+ margin-right: 4px;
+}
+
+.downloadPanelUrl > div > a {
+ color: var(--ifm-color-primary);
}
diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx
index 26a7501..3a96abd 100644
--- a/src/pages/download/index.tsx
+++ b/src/pages/download/index.tsx
@@ -4,7 +4,7 @@ import CodeBlock from '@theme/CodeBlock';
import Translate, { translate } from '@docusaurus/Translate';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
-import VersionCard from './VersionCard';
+import DownloadCard from './DownloadCard';
const Download: React.FC = () => {
@@ -15,7 +15,7 @@ const Download: React.FC = () => {
}
const projects = siteConfig.customFields.downloads.map((project) => {
- return <VersionCard key={project.name} {...project} />;
+ return <DownloadCard key={project.name} {...project} />;
});
return (
diff --git a/src/pages/download/versionCard.module.css
b/src/pages/download/versionCard.module.css
deleted file mode 100644
index e768c75..0000000
--- a/src/pages/download/versionCard.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.main {
- width: 100%;
-}
-
-.name {
- font-size: 20px;
-}
-
-.downloadDetail {
- margin-top: 8px;
- font-size: 16px;
-}
-
-.downloadDetail li {
- margin-bottom: 4px;
-}
-
-.downloadDetail li a {
- margin-left: 8px;
-}
