This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository
https://gitbox.apache.org/repos/asf/incubator-streampark-website.git
The following commit(s) were added to refs/heads/dev by this push:
new 2802f80 Optimize home page style (#371)
2802f80 is described below
commit 2802f8023e543f6c55e3da8c582ea92469fdec3f
Author: Kortin Zhou <[email protected]>
AuthorDate: Tue May 7 23:13:57 2024 +0800
Optimize home page style (#371)
* feat: optimize home page styles
* feat: add achievement banner animation
* chore: resolve ghost dependencies
* fix: fixes typo SteamPark
---
docs/user-guide/11-platformInstall.md | 2 +-
docs/user-guide/8-YarnQueueManagement.md | 2 +-
.../current/user-guide/11-platformInstall.md | 2 +-
.../current/user-guide/8-YarnQueueManagement.md | 2 +-
package.json | 8 +-
src/css/bootstrap.min.css | 1 -
src/css/custom/default.less | 4 +-
src/css/custom/index.less | 4 +-
src/pages/home/feature.jsx | 4 +-
src/pages/home/hero.jsx | 206 +++++++++++++++++----
src/pages/home/index.jsx | 1 +
src/pages/home/index.less | 194 +++++++++++++------
src/pages/home/users.tsx | 51 +++++
src/theme/Admonition/index.less | 75 ++++++++
src/theme/Admonition/index.tsx | 190 +++++++++++++++++++
src/theme/BlogPostItem/Container/style.less | 3 +
yarn.lock | 12 +-
17 files changed, 658 insertions(+), 103 deletions(-)
diff --git a/docs/user-guide/11-platformInstall.md
b/docs/user-guide/11-platformInstall.md
index d4f559b..e6d830e 100644
--- a/docs/user-guide/11-platformInstall.md
+++ b/docs/user-guide/11-platformInstall.md
@@ -92,7 +92,7 @@ tar -zxvf apache-streampark_2.12-2.0.0-incubating-bin.tar.gz
## Initialize System Data
> **Purpose: Create databases (tables) dependent on StreamPark component
> deployment, and pre-initialize the data required for its operation (e.g.,
> web page menus, user information), to facilitate subsequent operations.**
-### View Execution of SteamPark Metadata SQL File
+### View Execution of StreamPark Metadata SQL File
> Explanation:
> - StreamPark supports MySQL, PostgreSQL, H2
> - This document uses MySQL as an example; the PostgreSQL process is
> basically the same
diff --git a/docs/user-guide/8-YarnQueueManagement.md
b/docs/user-guide/8-YarnQueueManagement.md
index 5dcf6bd..2b36122 100644
--- a/docs/user-guide/8-YarnQueueManagement.md
+++ b/docs/user-guide/8-YarnQueueManagement.md
@@ -71,7 +71,7 @@ You must keep a admin user account. In the case, The admin
user `admin` was used
## Items about the feature
- Will this feature affect the `yarn-application` mode flink applications or
`yarn-session` mode flink-clusters whose yarn queue(`yarn.application.queue`) &
labels(`yarn.application.node-label`) specified by the old dynamic properties ?
-> The feature will not affect it at all. SteamPark still retains the highest
priority of dynamic properties and does
+> The feature will not affect it at all. StreamPark still retains the highest
priority of dynamic properties and does
not enforce verification on the specified queues and labels in the dynamic
properties, providing users with space for advanced configuration.
- The isolation of Yarn queue isn't stricter.
diff --git
a/i18n/zh-CN/docusaurus-plugin-content-docs/current/user-guide/11-platformInstall.md
b/i18n/zh-CN/docusaurus-plugin-content-docs/current/user-guide/11-platformInstall.md
index e5c88f9..a0eb63e 100644
---
a/i18n/zh-CN/docusaurus-plugin-content-docs/current/user-guide/11-platformInstall.md
+++
b/i18n/zh-CN/docusaurus-plugin-content-docs/current/user-guide/11-platformInstall.md
@@ -92,7 +92,7 @@ tar -zxvf apache-streampark_2.12-2.0.0-incubating-bin.tar.gz
## 初始化系统数据
> **目的：创建StreamPark组件部署依赖的数据库(表)，同时将其运行需要的数据提前初始化(比如：web页面的菜单、用户等信息)，便于后续操作。**
-### 查看执行SteamPark元数据SQL文件
+### 查看执行StreamPark元数据SQL文件
> 说明：
> - StreamPark支持MySQL、PostgreSQL、H2
> - 本次以MySQL为例，PostgreSQL流程基本一致
diff --git
a/i18n/zh-CN/docusaurus-plugin-content-docs/current/user-guide/8-YarnQueueManagement.md
b/i18n/zh-CN/docusaurus-plugin-content-docs/current/user-guide/8-YarnQueueManagement.md
index 7079f83..f069a9a 100644
---
a/i18n/zh-CN/docusaurus-plugin-content-docs/current/user-guide/8-YarnQueueManagement.md
+++
b/i18n/zh-CN/docusaurus-plugin-content-docs/current/user-guide/8-YarnQueueManagement.md
@@ -70,7 +70,7 @@ sidebar_position: 8
## 该功能的相关条目
-
这个特性会影响使用旧动态属性指定了`yarn-application`模式下的flink应用程序和`yarn-session`模式下的flink集群的yarn队列(`yarn.application.queue`)和标签(`yarn.application.node-label`)的应用程序。
-> 该功能不会对其产生任何影响。SteamPark仍然保留动态属性的最高优先级，并不强制验证动态属性中指定的队列和标签，为用户提供高级配置的空间。
+> 该功能不会对其产生任何影响。StreamPark仍然保留动态属性的最高优先级，并不强制验证动态属性中指定的队列和标签，为用户提供高级配置的空间。
- Yarn队列的隔离并不严格。
> 在当前的设计中，由于队列与`yarn-session`模式下的Flink集群之间的关系，队列的权限并没有被严格隔离。
diff --git a/package.json b/package.json
index 4145754..f15af66 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"@docusaurus/preset-classic": "2.4.3",
"@docusaurus/theme-common": "2.4.3",
"@docusaurus/theme-mermaid": "2.4.3",
+ "@docusaurus/utils-common": "^2.4.3",
"@easyops-cn/docusaurus-search-local": "^0.36.0",
"@mdx-js/react": "^1.6.22",
"@svgr/webpack": "^6.2.1",
@@ -29,6 +30,7 @@
"file-loader": "^6.2.0",
"framer-motion": "^10.13.1",
"prism-react-renderer": "^1.3.1",
+ "prismjs": "^1.28.0",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
@@ -56,5 +58,9 @@
"last 1 safari version"
]
},
- "packageManager": "[email protected]"
+ "packageManager": "[email protected]",
+ "volta": {
+ "node": "16.20.2",
+ "yarn": "1.22.22"
+ }
}
diff --git a/src/css/bootstrap.min.css b/src/css/bootstrap.min.css
index 289b907..8170c9a 100755
--- a/src/css/bootstrap.min.css
+++ b/src/css/bootstrap.min.css
@@ -145,7 +145,6 @@ a:not([href]):not([class]):hover {
code, kbd, pre, samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
- font-size: 1em
}
pre {
diff --git a/src/css/custom/default.less b/src/css/custom/default.less
index f2593ea..2e7f844 100644
--- a/src/css/custom/default.less
+++ b/src/css/custom/default.less
@@ -1,7 +1,7 @@
/* You can override the default Infima variables here. */
:root {
--default-font: 14px;
- --default-line-height: 21px;
+ --default-line-height: 1.75em;
/* colors for right side table of contents */
--ifm-toc-link-color: var(--click-color-text-muted);
@@ -13,7 +13,7 @@
--ifm-font-color-base: var(--click-color-text);
--ifm-menu-color-background-active: var(--click-color-sidebar-item-active);
- // --ifm-font-family-base: Inter, sans-serif;
+ --ifm-font-family-base: Inter, sans-serif;
--ifm-h3-font-size: 1rem !important;
--ifm-h2-font-size: 1.25rem !important;
--ifm-h1-font-size: 1.75rem !important;
diff --git a/src/css/custom/index.less b/src/css/custom/index.less
index ecdda6e..fe9bfe0 100644
--- a/src/css/custom/index.less
+++ b/src/css/custom/index.less
@@ -160,7 +160,9 @@ article[itemprop="blogPost"] {
}
code {
- font-weight: bold;
+ font-weight: 600;
+ padding: 1px 2px;
+ font-size: 12px;
background-color: var(--ifm-code-background) !important;
span {
diff --git a/src/pages/home/feature.jsx b/src/pages/home/feature.jsx
index 35887f9..e52a72f 100644
--- a/src/pages/home/feature.jsx
+++ b/src/pages/home/feature.jsx
@@ -22,11 +22,11 @@ export default function () {
{
dataSource.feature.map((feature, i) => (
<div className="characteristic-card col-md-4 col-6 px-4 px-md-3
cursor-pointer" key={i} data-aos="fade-up" data-aos-delay={(i % 3) * 100}>
- <div className="feature-children p-4 mb-5 shadow-sm
hover-box-up">
+ <div className="feature-children p-4 pt-5 mb-5 shadow-md
hover-box-up">
<div className="text-primary text-center mb-3">
<div className="features-icon"><i
className={feature.icon}></i></div>
</div>
- <h3 className="h5 text-center">{feature.title}</h3>
+ <h3 className="h5 text-left
feature-title">{feature.title}</h3>
<p>{feature.details}</p>
</div>
</div>
diff --git a/src/pages/home/hero.jsx b/src/pages/home/hero.jsx
index 95cea0b..7a616a9 100644
--- a/src/pages/home/hero.jsx
+++ b/src/pages/home/hero.jsx
@@ -7,6 +7,7 @@ import Dashboard from "../../../static/home/dashboard.svg";
import Top1 from "../../../static/home/top1.svg";
import Top2 from "../../../static/home/top2.svg";
import Screenshot from "./screenshot";
+import clsx from "clsx";
export default function () {
const isBrowser = useIsBrowser();
@@ -33,7 +34,7 @@ export default function () {
<div className="fw-bold mb-3">
<div
className="d-flex flex-column align-items-start"
- style={{ maxWidth: "700px" }}
+ style={{ width: "max-content" }}
>
<div className="text-right" style={{ width: "100%" }}>
<span className="badge incubating fs-6 tag">
@@ -47,49 +48,59 @@ export default function () {
{dataSource.slogan.description}
</p>
</div>
- <a
- className="btn streampark-btn btn ztop"
- href="https://github.com/apache/incubator-streampark";
- target="_blank"
- >
- <i className="lni-github-original"></i> GitHub
- </a>
- <a
- className="btn streampark-btn btn-green ml-3 ztop"
- href="/docs/user-guide/quick-start"
- style={{ marginLeft: "10px" }}
- >
- <i className="lni-play"></i> Get started
- </a>
- <div style={{ marginTop: "20px" }} className="shields ztop">
- <img
-
src="https://img.shields.io/github/stars/apache/incubator-streampark.svg?sanitize=true";
- className="wow fadeInUp"
- ></img>
- <img
-
src="https://img.shields.io/github/forks/apache/incubator-streampark.svg?sanitize=true";
- className="wow fadeInUp"
- ></img>
- <img
-
src="https://img.shields.io/github/downloads/apache/streampark/total.svg";
- className="wow fadeInUp"
- ></img>
+ <div>
+ <Button
+ theme="github"
+ icon="lni-github-original"
+ href="https://github.com/apache/incubator-streampark";
+ target="_blank"
+ >
+ Github
+ </Button>
+ <Button
+ theme="primary"
+ icon="lni-play"
+ href="/docs/user-guide/quick-start"
+ style={{ marginLeft: "10px" }}
+ >
+ Get started
+ </Button>
</div>
</div>
</div>
{/* hero image */}
- {heroImage()}
+ {HeroImage()}
</div>
+ <AchievementBanner />
+
</div>
- <div className="pt-6 cover-top">
+ {/* <section className="achievement-banner-wrapper">
+ <div className="achievement-banner">
+ <div className="achievement-banner-item">
+ <div className="achievement-banner-item__highlight">3.7k+</div>
+ <div>Github stars</div>
+ </div>
+ <div className="achievement-banner-item">
+ <div className="achievement-banner-item__highlight">964</div>
+ <div>Github forks</div>
+ </div>
+ <div className="achievement-banner-item">
+ <div className="achievement-banner-item__highlight">9.9k+</div>
+ <div>Total downloads</div>
+ </div>
+ </div>
+ </section> */}
+
+ {/* <div className="pt-6 cover-top">
<Top2 className="top2" />
- </div>
+ </div> */}
+ {/* <StreamWave /> */}
</div>
</>
);
}
-function heroImage() {
+function HeroImage() {
const windowSize = useWindowSize()
if (windowSize === 'mobile') {
return null
@@ -97,7 +108,7 @@ function heroImage() {
return (
<div className="col-6 align-self-center">
<div
- className="mt-5 mt-2 text-right"
+ className="text-right"
data-aos="fade-up"
data-aos-delay="100"
>
@@ -109,3 +120,132 @@ function heroImage() {
</div>
);
}
+
+
+function Button({ href, theme = "primary", icon, children, className, ...props
}) {
+ return (
+ <a
+ className={clsx("btn streampark-btn ztop", `btn-${theme}`, className)}
+ href={href}
+ {...props}
+ >
+ {typeof icon === 'string' ? <i className={clsx(icon, 'mr-2')} /> : icon}
+ {children}
+ </a>
+ )
+}
+
+function AchievementBanner() {
+ const formatNumber = (num) => {
+ if (num < 1000) {
+ return num
+ } else if (num < 1000_000) {
+ return (num / 1000).toFixed(1) + 'k+'
+ } else {
+ return (num / 1000_000).toFixed(1) + 'm+'
+ }
+ }
+
+ const numberIncrementAnimation = (end = 0, { start = 0, duration = 1000,
rate = 50, callback } = {}) => {
+ const step = (end - start) / duration * rate
+ let current = start
+ const timer = setInterval(() => {
+ current += parseInt(step.toFixed(0));
+ if (current >= end) {
+ clearInterval(timer)
+ current = end
+ }
+ callback(current)
+ }, rate)
+ if (typeof callback === 'function') {
+ callback(current)
+ }
+ return current
+ }
+
+ const [counter, setCounter] = React.useState({
+ stars: 3710,
+ forks: 963,
+ downloads: 9900
+ })
+
+ React.useEffect(() => {
+ numberIncrementAnimation(3710, {
+ callback: (current) => {
+ setCounter(state => ({
+ ...state,
+ stars: current
+ }))
+ }
+ })
+ numberIncrementAnimation(963, {
+ callback: (current) => {
+ setCounter(state => ({
+ ...state,
+ forks: current
+ }))
+ }
+ })
+ numberIncrementAnimation(9900, {
+ callback: (current) => {
+ setCounter(state => ({
+ ...state,
+ downloads: current
+ })
+ )
+ }
+ })
+ }, [])
+
+ // FIXME: 需要解决 github api 请求速率限制的问题
+ /* React.useEffect(() => {
+ fetch('https://api.github.com/repos/apache/incubator-streampark')
+ .then(res => res.json())
+ .then(data => {
+ setCounter(state => ({
+ ...state,
+ stars: data.stargazers_count,
+ forks: data.forks_count,
+ }))
+ })
+ fetch('https://api.github.com/repos/apache/incubator-streampark/releases')
+ .then(res => res.json())
+ .then(data => {
+ console.log(data);
+ let totalDownloads = 0;
+ for (let i = 0; i < data.length; ++i) {
+ for (let j = 0; j < data[i].assets.length; ++j) {
+ totalDownloads += data[i].assets[j].download_count;
+ }
+ }
+
+ setCounter(state => ({
+ ...state,
+ downloads: totalDownloads
+ }))
+ })
+ }, []) */
+
+ return (
+ <section className="achievement-banner">
+ <div className="achievement-banner-item">
+ <div className="achievement-banner-item__highlight">
+ {formatNumber(counter.stars)}
+ </div>
+ <div>Github stars</div>
+ </div>
+ <div className="achievement-banner-item">
+ <div className="achievement-banner-item__highlight">
+ {formatNumber(counter.forks)}
+ </div>
+ <div>Github forks</div>
+ </div>
+ <div className="achievement-banner-item">
+ <div className="achievement-banner-item__highlight">
+ {formatNumber(counter.downloads)}
+ </div>
+ <div>Total downloads</div>
+ </div>
+ </section>
+ );
+}
\ No newline at end of file
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 590e867..66cb682 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -6,6 +6,7 @@ import './theme.less';
import Hero from "./hero";
import Feature from "./feature";
import Performance from "./performance";
+// import Users from '../user'
import AOS from 'aos';
import 'aos/dist/aos.css';
export default function () {
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index 67cb6f6..3e4ec7a 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -3,6 +3,13 @@
@import url('/src/css/lineicons.min.css');
.home-wrap {
+ --primary-color: #2872ff;
+ --primay-color-lighten: #588af2;
+ --primay-color-deepen: #0d6efd;
+
+ --bg-color: #fff;
+ --secondary-bg-color: #f7f9fe;
+
font-family: "Poppins", sans-serif !important;
/* wrap */
@@ -30,7 +37,7 @@
.cover-top {
display: flex;
flex-direction: column;
- border-bottom: 2px solid #2e7fed;
+ border-bottom: 2px solid var(--primary-color);
vertical-align: bottom;
height: 180px;
transform: scaleX(3) rotate(-3deg);
@@ -40,10 +47,10 @@
.project_title {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
font-size: 4rem;
- font-weight: 200;
+ font-weight: 500;
line-height: 1;
padding-bottom: 8px;
- color: #2e7fed;
+ color: var(--primary-color);
position: relative;
white-space: nowrap;
}
@@ -56,7 +63,7 @@
}
.cover-container {
- max-width: 2100px;
+ max-width: 1400px;
}
.tag {
@@ -72,31 +79,76 @@
background-image: linear-gradient(90deg, #007CF0, #00DFD8);
}
+ .achievement-banner-wrapper {
+ // background-image: url("/home/bg-blue-with-side-dots.png");
+ height: 200px;
+ background-size: 100% 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 100px;
+
+ .achievement-banner {
+ width: 70%;
+ }
+
+ .achievement-banner-item {
+ height: 200px;
+ color: #ddd;
+ }
+
+ .achievement-banner-item__highlight {
+ color: #fff;
+ }
+ }
+
+ .achievement-banner {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1rem;
+ margin: 0 auto;
+ margin-top: 100px;
+
+ // width: 70%;
+ }
+
+ .achievement-banner-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #4c576c;
+ line-height: 1.6;
+ font-size: 1.25rem;
+ }
+
+ .achievement-banner-item__highlight {
+ font-size: 2.5rem;
+ font-weight: 600;
+ color: var(--primary-color);
+ }
+
.streampark-btn {
color: #ffffff;
position: relative;
z-index: 1;
display: inline-block;
- font-size: 0.875rem;
+ font-size: 1em;
font-weight: 600;
- padding: 1rem 1.5rem;
+ // padding: 1rem 1.5rem;
border-radius: 6px;
- line-height: 1;
+ height: 36px;
+ line-height: 36px;
text-transform: uppercase;
- margin-top: 2rem;
+ display: inline-flex;
+ align-items: center;
+ user-select: none;
}
.streampark-btn.btn {
- background-color: #2872ff;
+ background-color: var(--primary-color);
color: #fff;
border: 0;
max-width: 220px;
- height: 28px;
- position: relative;
- padding: .25rem .5rem;
- font-size: .875rem;
- line-height: 1.5;
- border-radius: .2rem;
}
@@ -124,7 +176,7 @@
}
.streampark-btn.btn::before {
- background: #0d6efd;
+ background: var(--primay-color-deepen);
}
.streampark-btn.btn-green {
@@ -137,7 +189,7 @@
.streampark-btn.btn:hover,
.streampark-btn.btn:focus {
- background-color: #588af2;
+ background-color: var(--primay-color-lighten);
border: 0;
color: #fff;
}
@@ -153,6 +205,21 @@
color: #fff;
}
+ .streampark-btn.btn-github {
+ background-color: #363535;
+ }
+
+ .streampark-btn.btn-github::before {
+ background: #202020;
+ }
+
+ .streampark-btn.btn-github:hover,
+ .streampark-btn.btn-github:focus {
+ background-color: #2c2b2b;
+ border: 0;
+ color: #fff;
+ }
+
.streampark-btn.btn-purple::before {
background: #5e2ced;
}
@@ -187,47 +254,69 @@
}
.feature {
+ background-color: var(--secondary-bg-color);
+ padding-bottom: 50px;
+
.characteristic-card {
+ margin-top: 50px;
min-width: 387px;
+ position: relative;
}
.feature-children {
- min-height: 300px;
+ height: 240px;
background-color: #fff;
- border-radius: 4px;
+ border-radius: 8px;
+ box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.01);
p {
- font-weight: 500;
- margin: 0 0 var(--ifm-paragraph-margin-bottom);
+ font-weight: normal;
color: var(--ifm-color-secondary-contrast-foreground);
- font-weight: 500;
- line-height: 26px;
+ margin: 0 0 var(--ifm-paragraph-margin-bottom);
+ line-height: 1.75em;
}
}
+ .feature-title {
+ font-size: 1.25rem;
+ font-weight: 450;
+ line-height: 1.6;
+ margin-bottom: .75rem;
+ }
+
.features-icon {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 80px;
- flex: 0 0 80px;
- max-width: 80px;
- width: 80px;
- height: 80px;
+ // -webkit-box-flex: 0;
+ // -ms-flex: 0 0 64px;
+ // flex: 0 0 64px;
+ width: 64px;
+ height: 64px;
+ line-height: 64px;
font-size: 2.25rem;
- background-color: #0d6efd;
+ background-color: var(--primary-color);
color: #ffffff;
text-align: center;
border-radius: 50%;
margin: 2px auto;
+ position: absolute;
+ top: 0;
+ transform: translateY(-50%);
i {
- line-height: 80px;
+ line-height: inherit;
font-weight: bold;
-
}
}
}
+ [data-theme="dark"] .feature {
+ background-color: #141618;
+
+ .features-icon {
+ background-color: var(--primary-color);
+ }
+ }
+
.code {
content: url("/home/code1.png");
max-height: 350px;
@@ -554,6 +643,12 @@
}
[data-theme="dark"] .home-wrap {
+ --primary-color: #5e44ee;
+ --primay-color-lighten: #563ced;
+ --primay-color-deepen: #4c32db;
+ --bg-color: #141618;
+ --secondary-bg-color: #1a1b1c;
+
.incubating {
background-color: hsla(0, 0%, 100%, .15);
@@ -565,16 +660,16 @@
}
.system_info .project_title {
- color: #5e44ee;
+ color: var(--primary-color);
}
.feature-children {
- background-color: #141618;
+ background-color: var(--bg-color);
border: 1px solid #333;
}
.cover-top {
- border-bottom-color: #4f46e4;
+ border-bottom-color: var(--primary-color);
}
.code {
@@ -587,7 +682,6 @@
}
@media (min-width: 300px) {
-
.system_info {
.project_title {
font-size: 2rem !important;
@@ -595,26 +689,24 @@
.desc {
font-size: 1rem !important;
- line-height: 32px;
+ line-height: 1.5 !important;
+ color: #63646d;
}
}
}
@media (min-width: 576px) {
-
.system_info {
.project_title {
- font-size: 3rem !important;
+ font-size: 2.5rem !important;
}
}
}
@media (min-width: 768px) {
-
-
.system_info {
.project_title {
- font-size: 3.5rem !important;
+ font-size: 3rem !important;
}
.desc {
@@ -622,35 +714,23 @@
line-height: 40px;
}
}
-
- .home-wrap {
- .hero-main {
- .streampark-btn.btn {
- padding: 1rem 1.5rem;
- font-size: .875rem;
- line-height: 1;
- border-radius: .2rem;
- height: 45px;
- }
- }
- }
}
@media (min-width: 992px) {
.system_info .project_title {
- font-size: 3.5rem !important;
+ font-size: 3rem !important;
}
}
@media (min-width: 1200px) {
.system_info .project_title {
- font-size: 4rem !important;
+ font-size: 3rem !important;
}
}
@media (min-width: 1400px) {
.system_info .project_title {
- font-size: 4.5rem !important;
+ font-size: 3.5rem !important;
}
}
diff --git a/src/pages/home/users.tsx b/src/pages/home/users.tsx
new file mode 100644
index 0000000..ee3b9d2
--- /dev/null
+++ b/src/pages/home/users.tsx
@@ -0,0 +1,51 @@
+import React, { useRef } from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import config from '../user/languages.json';
+import img from '../user/images.json';
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+
+export default function () {
+ const isBrowser = useIsBrowser();
+ const language = isBrowser && location.pathname.indexOf('/zh-CN/') === 0 ?
'zh-CN' : 'en';
+ const dataSource = config?.[language];
+
+ return <BrowserOnly>
+ {() => {
+ // AOS JS
+ AOS.init({
+ offset: 80,
+ duration: 500,
+ easing: "ease-out-quad",
+ once: !0
+ });
+ window.addEventListener('load', AOS.refresh);
+ return <div className='block user_page container'>
+ <div className="user-main" style={{ padding: "10px 0 30px" }}>
+ <h3 className="fs-2 mb-4 fw-bold
text-center">{dataSource.common.ourUsers}</h3>
+ <hr className="divider my-4 mx-auto" style={{ maxWidth: "10rem"
}}></hr>
+ <div className="desc" dangerouslySetInnerHTML={{ __html:
dataSource.common.tip }}>
+ </div>
+ <div className="user_case home_block">
+ {
+ img.map((item, i) => (
+ <div key={i} index={i} data-aos="fade-up" data-aos-delay={i *
50}>
+ <a
href={'https://github.com/apache/incubator-streampark/issues/163#issuecomment-'.concat(item.linkid)}
target="_blank">
+ <div className="case_item case_hover" >
+ <img src={useBaseUrl('/user/' + item.imgUrl)} alt="name"
/>
+ </div>
+ </a>
+ </div>
+ ))
+ }
+ </div>
+ </div>
+ </div>
+ }}
+ </BrowserOnly>
+
+
+
+}
diff --git a/src/theme/Admonition/index.less b/src/theme/Admonition/index.less
new file mode 100644
index 0000000..1a05800
--- /dev/null
+++ b/src/theme/Admonition/index.less
@@ -0,0 +1,75 @@
+.admonition {
+ margin-bottom: 1em;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-items: center;
+ border: none;
+ padding: 0;
+ border-radius: 4px;
+}
+
+.admonition-heading {
+ font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) /
+ var(--ifm-heading-line-height) var(--ifm-heading-font-family);
+ margin-bottom: 4px;
+}
+
+.admonition-heading code {
+ text-transform: none;
+}
+
+.admonition-icon {
+ display: grid;
+ place-items: center;
+ width: 2.5rem;
+ height: 100%;
+ background: var(--click-color-note-text);
+ border-radius: 4px 0 0 4px;
+}
+
+.admonition-icon svg {
+ display: inline-block;
+ height: 1.6em;
+ width: 1.6em;
+ fill: white;
+}
+.admonition-content {
+ padding: 1rem;
+ background: var(--click-color-note-background);
+}
+
+.admonition-content > :last-child {
+ margin-bottom: 0;
+}
+
+.admonition.alert--warning .admonition-icon {
+ background: var(--click-color-warning-text);
+}
+
+.admonition.alert--warning .admonition-content {
+ background: var(--click-color-warning-background);
+}
+
+.admonition.alert--danger .admonition-icon {
+ background: var(--click-color-danger-text);
+}
+
+.admonition.alert--danger .admonition-content {
+ background: var(--click-color-danger-background);
+}
+
+.admonition.alert--info .admonition-icon {
+ background: var(--click-color-info-text);
+}
+
+.admonition.alert--info .admonition-content {
+ background: var(--click-color-info-background);
+}
+
+.admonition.alert--success .admonition-icon {
+ background: var(--click-color-success-text);
+}
+
+.admonition.alert--success .admonition-content {
+ background: var(--click-color-success-background);
+}
\ No newline at end of file
diff --git a/src/theme/Admonition/index.tsx b/src/theme/Admonition/index.tsx
new file mode 100644
index 0000000..22596ac
--- /dev/null
+++ b/src/theme/Admonition/index.tsx
@@ -0,0 +1,190 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import Translate from '@docusaurus/Translate';
+import './index.less';
+
+function NoteIcon() {
+ return (
+ <svg viewBox="0 0 14 16">
+ <path
+ fillRule="evenodd"
+ d="M6.3 5.69a.942.942 0 0
1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0
.52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28
0-.52-.11-.7-.3zM8
7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27
0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7
5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7
.98c3.86 0 7 3.14 7 7s-3.1 [...]
+ />
+ </svg>
+ );
+}
+
+function TipIcon() {
+ return (
+ <svg viewBox="0 0 12 16">
+ <path
+ fillRule="evenodd"
+ d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2
4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64
7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45
3.23-.02.05-.02.11-.02.17H5c0-.06
0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2
5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0
.66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+ />
+ </svg>
+ );
+}
+
+function DangerIcon() {
+ return (
+ <svg viewBox="0 0 12 16">
+ <path
+ fillRule="evenodd"
+ d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45
2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86
1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42
4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02
1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45
5.05.32L5.03.3l.02.01z"
+ />
+ </svg>
+ );
+}
+
+function InfoIcon() {
+ return (
+ <svg viewBox="0 0 14 16">
+ <path
+ fillRule="evenodd"
+ d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1
1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14
7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+ />
+ </svg>
+ );
+}
+
+function CautionIcon() {
+ return (
+ <svg viewBox="0 0 16 16">
+ <path
+ fillRule="evenodd"
+ d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138
13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0
.704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133
11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
+ />
+ </svg>
+ );
+}
+
+// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+const AdmonitionConfigs = {
+ note: {
+ infimaClassName: 'secondary',
+ iconComponent: NoteIcon,
+ label: (
+ <Translate
+ id="theme.admonition.note"
+ description="The default label used for the Note admonition (:::note)">
+ note
+ </Translate>
+ ),
+ },
+ tip: {
+ infimaClassName: 'success',
+ iconComponent: TipIcon,
+ label: (
+ <Translate
+ id="theme.admonition.tip"
+ description="The default label used for the Tip admonition (:::tip)">
+ tip
+ </Translate>
+ ),
+ },
+ danger: {
+ infimaClassName: 'danger',
+ iconComponent: DangerIcon,
+ label: (
+ <Translate
+ id="theme.admonition.danger"
+ description="The default label used for the Danger admonition
(:::danger)">
+ danger
+ </Translate>
+ ),
+ },
+ info: {
+ infimaClassName: 'info',
+ iconComponent: InfoIcon,
+ label: (
+ <Translate
+ id="theme.admonition.info"
+ description="The default label used for the Info admonition (:::info)">
+ info
+ </Translate>
+ ),
+ },
+ caution: {
+ infimaClassName: 'warning',
+ iconComponent: CautionIcon,
+ label: (
+ <Translate
+ id="theme.admonition.caution"
+ description="The default label used for the Caution admonition
(:::caution)">
+ caution
+ </Translate>
+ ),
+ },
+};
+
+// Legacy aliases, undocumented but kept for retro-compatibility
+const aliases = {
+ secondary: 'note',
+ important: 'info',
+ success: 'tip',
+ warning: 'danger',
+};
+
+function getAdmonitionConfig(unsafeType) {
+ const type = aliases[unsafeType] ?? unsafeType;
+ const config = AdmonitionConfigs[type];
+ if (config) {
+ return config;
+ }
+ console.warn(
+ `No admonition config found for admonition type "${type}". Using Info as
fallback.`,
+ );
+ return AdmonitionConfigs.info;
+}
+
+// Workaround because it's difficult in MDX v1 to provide a MDX title as props
+// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
+function extractMDXAdmonitionTitle(children) {
+ const items = React.Children.toArray(children);
+ const mdxAdmonitionTitle = items.find(
+ (item) =>
+ React.isValidElement(item) &&
+ item.props?.mdxType === 'mdxAdmonitionTitle',
+ );
+ const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
+ return {
+ mdxAdmonitionTitle,
+ rest,
+ };
+}
+
+function processAdmonitionProps(props) {
+ const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
+ return {
+ ...props,
+ title: props.title ?? mdxAdmonitionTitle,
+ children: rest,
+ };
+}
+
+export default function Admonition(props) {
+ const {children, type, title, icon: iconProp} =
processAdmonitionProps(props);
+ const typeConfig = getAdmonitionConfig(type);
+ const titleLabel = title ?? typeConfig.label;
+ const {iconComponent: IconComponent} = typeConfig;
+ const icon = iconProp ?? <IconComponent />;
+ return (
+ <div
+ className={clsx(
+ ThemeClassNames.common.admonition,
+ ThemeClassNames.common.admonitionType(props.type),
+ 'alert',
+ `alert--${typeConfig.infimaClassName}`,
+ 'admonition',
+ )}>
+ <div className={clsx('alert-icon', 'admonition-icon')}>{icon}</div>
+ <div className={clsx('alert-content','admonition-content')}>
+ <div className={'admonition-heading'}>
+ {titleLabel}
+ </div>
+ {children}
+ </div>
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/src/theme/BlogPostItem/Container/style.less
b/src/theme/BlogPostItem/Container/style.less
index 8c27315..1f1c3f7 100644
--- a/src/theme/BlogPostItem/Container/style.less
+++ b/src/theme/BlogPostItem/Container/style.less
@@ -68,6 +68,9 @@
.markdown ul {
font-family: var(--content-font-family);
}
+ .markdown p {
+ line-height: 21px;
+ }
}
@media (max-width: 997px) {
diff --git a/yarn.lock b/yarn.lock
index 840fecb..5556ada 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1535,7 +1535,7 @@
"@docusaurus/theme-search-algolia" "2.4.3"
"@docusaurus/types" "2.4.3"
-"@docusaurus/[email protected]",
"react-loadable@npm:@docusaurus/[email protected]":
+"@docusaurus/[email protected]":
version "5.5.2"
resolved
"https://registry.npmmirror.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce";
integrity
sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -1654,7 +1654,7 @@
webpack "^5.73.0"
webpack-merge "^5.8.0"
-"@docusaurus/[email protected]", "@docusaurus/utils-common@^2.0.0-rc.1":
+"@docusaurus/[email protected]", "@docusaurus/utils-common@^2.0.0-rc.1",
"@docusaurus/utils-common@^2.4.3":
version "2.4.3"
resolved
"https://registry.npmmirror.com/@docusaurus/utils-common/-/utils-common-2.4.3.tgz#30656c39ef1ce7e002af7ba39ea08330f58efcfb";
integrity
sha512-/jascp4GbLQCPVmcGkPzEQjNaAk3ADVfMtudk49Ggb+131B1WDD6HqlSmDf8MxGdy7Dja2gc+StHf01kiWoTDQ==
@@ -6945,6 +6945,14 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
dependencies:
"@babel/runtime" "^7.10.3"
+"react-loadable@npm:@docusaurus/[email protected]":
+ version "5.5.2"
+ resolved
"https://registry.npmmirror.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce";
+ integrity
sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
+ dependencies:
+ "@types/react" "*"
+ prop-types "^15.6.2"
+
react-router-config@^5.1.1:
version "5.1.1"
resolved
"https://registry.npmmirror.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988";
![https://img.shields.io/github/stars/apache/incubator-streampark.svg?sanitize=true"](https://img.shields.io/github/stars/apache/incubator-streampark.svg?sanitize=true"){kind=link}
![https://img.shields.io/github/forks/apache/incubator-streampark.svg?sanitize=true"](https://img.shields.io/github/forks/apache/incubator-streampark.svg?sanitize=true"){kind=link}
![https://img.shields.io/github/downloads/apache/streampark/total.svg"](https://img.shields.io/github/downloads/apache/streampark/total.svg"){kind=link}