You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by le...@apache.org on 2022/11/24 07:53:12 UTC
[inlong-website] branch master updated: [INLONG-614] Better optimized display download page (#616)
This is an automated email from the ASF dual-hosted git repository.
leezng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong-website.git
The following commit(s) were added to refs/heads/master by this push:
new c1ae75a39c [INLONG-614] Better optimized display download page (#616)
c1ae75a39c is described below
commit c1ae75a39cae0e8650575798cf379c631963e6c2
Author: Lizhen <88...@users.noreply.github.com>
AuthorDate: Thu Nov 24 15:53:08 2022 +0800
[INLONG-614] Better optimized display download page (#616)
---
docusaurus.config.js | 2 +-
i18n/zh-CN/code.json | 33 ++++++
src/pages/downloads/download.module.less | 183 +++++++++++++++++++++++++++++++
src/pages/downloads/index.js | 131 ++++++++++++++++++++++
4 files changed, 348 insertions(+), 1 deletion(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index c215e0887f..0da505d458 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -94,7 +94,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
],
},
{
- to: '/download',
+ to: '/downloads',
position: 'right',
label: 'Download',
},
diff --git a/i18n/zh-CN/code.json b/i18n/zh-CN/code.json
index 1e2a038c84..5ed832cb01 100644
--- a/i18n/zh-CN/code.json
+++ b/i18n/zh-CN/code.json
@@ -178,5 +178,38 @@
"theme.tags.tagsPageTitle": {
"message": "Tags",
"description": "The title of the tag list page"
+ },
+ "page.download.title": {
+ "message": "立即下载"
+ },
+ "page.download.describe": {
+ "message": "你可以在这里下载到最新的版本。"
+ },
+ "page.download.release": {
+ "message": "发布完整性"
+ },
+ "page.download.version": {
+ "message": "历史版本。"
+ },
+ "page.download.version.step1": {
+ "message": "如果你想要预览 Apache InLong 已发布的所有版本，请查看"
+ },
+ "page.download.version.step2": {
+ "message": "存储着 Apache InLong 旧版孵化器项目的备份归档，你也可以随时查阅它们。"
+ },
+ "page.download.release.step1": {
+ "message": "您必须"
+ },
+ "page.download.release.step2": {
+ "message": "下载文件的完整性。"
+ },
+ "page.download.release.step3": {
+ "message": "我们为每个发布文件提供 OpenPGP 签名。此签名应与包含 InLong 发布经理的 OpenPGP 密钥的"
+ },
+ "page.download.release.step4": {
+ "message": "文件匹配。"
+ },
+ "page.download.release.step5": {
+ "message": "我们还为每个发布文件提供 SHA-512 校验和。下载文件后，您应该计算下载的校验和，并确保它与我们提供的相同。"
}
}
\ No newline at end of file
diff --git a/src/pages/downloads/download.module.less b/src/pages/downloads/download.module.less
new file mode 100644
index 0000000000..f35c3ea2e0
--- /dev/null
+++ b/src/pages/downloads/download.module.less
@@ -0,0 +1,183 @@
+.divOne {
+ width: 50%;
+ margin: 20px auto 50px auto;
+}
+.cardDiv {
+ float: left;
+ column-count: 3;
+ height: auto;
+ margin-top: 15px;
+}
+.card{
+ border-radius: 0.75rem;
+ flex-direction: column;
+ border: 1px solid #eee;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+ padding: 2rem;
+ margin-bottom: 3rem;
+ height: 360px;
+}
+
+.leftSide{
+ width: auto;
+ height: 50%;
+ min-height:80px;
+}
+
+.title {
+ font-size: 1.4rem;
+ line-height: 2.4rem;
+ margin-bottom: 1rem;
+ font-weight: bold;
+ display: block;
+ cursor: pointer;
+ color: black;
+ @media (max-width: 600px) {
+ margin-top: 0px;
+ font-size: 1.6rem;
+ }
+ svg {
+ transition: all 0.6s;
+ }
+ &:hover {
+ color: inherit;
+ text-decoration: none;
+ svg {
+ transform: rotate(360deg);
+ }
+ }
+}
+
+.description {
+ font-size: 1.2rem;
+ margin-top: 0px;
+ @media (max-width: 600px) {
+ margin-top: 6px;
+ }
+}
+
+.leftSideLinksDiv {
+ display: inline-flex;
+ font-size: 1rem;
+ margin-top: 24px;
+ & svg {
+ height: 1rem;
+ margin-right: 4px;
+ }
+}
+
+.leftSideLinksA {
+ display: flex;
+ align-items: center;
+ margin-right: 18px;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: all 0.3s;
+ color: inherit;
+ &:hover {
+ text-decoration: none;
+ }
+}
+
+.rightSide {
+ text-align:center;
+ margin-top: 20px;
+}
+
+.buttonCard {
+ margin-right: 0.3em;
+ position: relative;
+}
+
+.buttonRow {
+ text-align: left;
+ font-size: 0.9rem;
+ margin-top: 30px;
+ span {
+ font-weight: 500;
+ }
+ @media (max-width: 600px) {
+ margin-bottom: 1rem;
+ text-align: left;
+ }
+}
+
+.buttonDown {
+ width: auto;
+ padding: 12px 18px;
+ font-size: 18px;
+ font-weight: 600;
+ border-radius: 0.5rem;
+ transition: all 0.3s;
+ background: var(--ifm-color-primary);
+ color: white;
+ border: none;
+ box-sizing: border-box;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ &:hover {
+ filter: brightness(105%);
+ }
+ svg {
+ height: 22px;
+ margin-right: 4px;
+ padding-bottom: 2px;
+ }
+}
+
+.styledDropdown {
+ top: 45px;
+ left: 0;
+ position: absolute;
+ margin-top: 0.25rem;
+ border-radius: 0.5rem;
+ border: 1px solid #eee;
+ z-index: 100;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ visibility: hidden;
+ transition-delay: 0.6s;
+}
+
+.dropdownItem {
+ margin: 0.2rem;
+ padding: 0.2rem 1rem 0.2rem 0.5rem;
+ border-radius: 5px;
+ cursor: pointer;
+ font-weight: 500;
+ display: block;
+ color: inherit;
+ &:hover {
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+.versionInfo {
+ text-align: left;
+ font-size: 0.9rem;
+ span {
+ font-weight: 500;
+ margin-left: 6px;
+ }
+ @media (max-width: 600px) {
+ margin-bottom: 1rem;
+ text-align: left;
+ }
+}
+
+.release {
+ line-height: 10px;
+}
+
+.buttonDown:hover + .styledDropdown{
+ visibility: inherit;
+}
+
+.styledDropdown:hover {
+ visibility: inherit;
+}
+
+
diff --git a/src/pages/downloads/index.js b/src/pages/downloads/index.js
new file mode 100644
index 0000000000..9a7a395036
--- /dev/null
+++ b/src/pages/downloads/index.js
@@ -0,0 +1,131 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import styles from './download.module.less';
+import Translate, { translate } from '@docusaurus/Translate';
+
+export default function() {
+
+ const version = "1.4.0";
+ const date = "Nov. 16, 2022";
+
+ return (
+ <Layout title={translate({ message: 'Downloads' })}>
+ <div className={styles.divOne}>
+ <h1>
+ <Translate id="page.download.title">DOWNLOADS</Translate>
+ </h1>
+ <p>
+ <Translate id="page.download.describe">You can download the latest version here.</Translate>
+ </p>
+ <div className={styles.cardDiv}>
+ <div className={styles.card}>
+ <div className={styles.leftSide}>
+ <a className={styles.title}>InLong Source Code</a>
+ <div className={styles.description}>Here you can download files to InLong source code</div>
+ </div>
+ <div className={styles.rightSide}>
+ <div className={styles.versionInfo}>
+ Latest Version ·
+ <span>{version}</span><br/>
+ Release Date ·
+ <span>{date}</span>
+ </div>
+ <div className={styles.buttonRow}>
+ <div className={styles.buttonCard}>
+ <button className={styles.buttonDown}>
+ Download
+ </button>
+ <div className={styles.styledDropdown}>
+ <a className={styles.dropdownItem} href={`https://downloads.apache.org/inlong/${version}/apache-inlong-${version}-src.tar.gz`}>SRC</a>
+ <a target="_blank" className={styles.dropdownItem} href={`https://downloads.apache.org/inlong/${version}/apache-inlong-${version}-src.tar.gz.asc`}>ASC</a>
+ <a target="_blank" className={styles.dropdownItem} href={`https://downloads.apache.org/inlong/${version}/apache-inlong-${version}-src.tar.gz.sha512`}>SHA512</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div className={styles.card}>
+ <div className={styles.leftSide}>
+ <a className={styles.title}>InLong Binary file</a>
+ <div className={styles.description}>The InLong binary can be downloaded here</div>
+ </div>
+ <div className={styles.rightSide}>
+ <div className={styles.versionInfo}>
+ Latest Version ·
+ <span>{version}</span><br/>
+ Release Date ·
+ <span>{date}</span>
+ </div>
+ <div className={styles.buttonRow}>
+ <div className={styles.buttonCard}>
+ <button className={styles.buttonDown}>
+ Download
+ </button>
+ <div className={styles.styledDropdown}>
+ <a className={styles.dropdownItem} href={`https://downloads.apache.org/inlong/${version}/apache-inlong-${version}-bin.tar.gz`}>BIN</a>
+ <a target="_blank" className={styles.dropdownItem} href={`https://downloads.apache.org/inlong/${version}/apache-inlong-${version}-bin.tar.gz.asc`}>ASC</a>
+ <a target="_blank" className={styles.dropdownItem} href={`https://downloads.apache.org/inlong/${version}/apache-inlong-${version}-bin.tar.gz.sha512`}>SHA512</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className={styles.card}>
+ <div className={styles.leftSide}>
+ <a className={styles.title}>Connector Binary file</a>
+ <div className={styles.description}>Here you can download files to InLong connector binaries</div>
+ </div>
+ <div className={styles.rightSide}>
+ <div className={styles.versionInfo}>
+ Latest Version ·
+ <span>{version}</span><br/>
+ Release Date ·
+ <span>{date}</span>
+ </div>
+ <div className={styles.buttonRow}>
+ <div className={styles.buttonCard}>
+ <button className={styles.buttonDown}>Download</button>
+ <div className={styles.styledDropdown}>
+ <a className={styles.dropdownItem} href={`https://downloads.apache.org/inlong/${version}/apache-inlong-${version}-sort-connectors.tar.gz`}>BIN</a>
+ <a target="_blank" className={styles.dropdownItem} href={`https://downloads.apache.org/inlong/${version}/apache-inlong-${version}-sort-connectors.tar.gz.asc`}>ASC</a>
+ <a target="_blank" className={styles.dropdownItem} href={`https://downloads.apache.org/inlong/${version}/apache-inlong-${version}-sort-connectors.tar.gz.sha512`}>SHA512</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <h2>
+ <Translate id="page.download.version">Older releases</Translate>
+ </h2>
+ <div className={styles.release}>
+ <p>
+ <Translate id="page.download.version.step1">Find all Apache InLong releases in the </Translate>
+ <a href="https://archive.apache.org/dist/inlong/" target="_blank"> Archive repository</a> 。
+ </p>
+ <p>
+ <a href="https://archive.apache.org/dist/incubator/inlong/">Incubating Archive repository </a>
+ <Translate id="page.download.version.step2">hosts older releases when Apache InLong was an incubator project.</Translate>
+ </p>
+ </div>
+ <br/>
+ <h2>
+ <Translate id="page.download.release">Release Integrity</Translate>
+ </h2>
+ <div >
+ <Translate id="page.download.release.step1">You must</Translate>
+ <a href="https://www.apache.org/info/verification.html" target="_blank"> verify </a>
+ <Translate id="page.download.release.step2">the integrity of the downloaded files.</Translate>
+ <Translate id="page.download.release.step3">We provide OpenPGP signatures for every release file. This signature should be matched against the </Translate>
+ <a href="https://downloads.apache.org/incubator/inlong/KEYS"> KEYS </a>
+ <Translate id="page.download.release.step4">file which contains the OpenPGP keys of InLong's Release Managers.</Translate>
+ <Translate id="page.download.release.step5">
+ We also provide SHA-512 checksums for every release file. After you download the file,
+ you should calculate a checksum for your download, and make sure it is the same as ours.
+ </Translate>
+ </div>
+ </div>
+ </Layout>
+ );
+}