Skip to content

Commit 718fb4f

Browse files
Chasen-ZhangChasen-Zhang
authored
feat: add wechat qrcode (#1085)
1 parent 20d12e4 commit 718fb4f

File tree

12 files changed

+156
-56
lines changed

12 files changed

+156
-56
lines changed

‎src/components/Icons/bili.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Icons/gitHub.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Icons/os-china.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Icons/slack.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Icons/x.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Icons/youtube.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/Icons/zhihu.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/JoinCommunity/index.tsx

Lines changed: 135 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,153 @@
11
// Copyright 2023 DatabendLabs.
2-
import React, { FC, ReactElement } from 'react';
3-
import Link from '@docusaurus/Link';
4-
import * as icons from "../Icons"
5-
import useGetReleases from '@site/src/hooks/useGetReleases';
6-
import clsx from 'clsx';
7-
import styles from './styles.module.scss';
8-
import $t from '@site/src/utils/tools';
2+
import React, { FC, ReactElement } from "react";
3+
import Link from "@docusaurus/Link";
4+
import useGetReleases from "@site/src/hooks/useGetReleases";
5+
import clsx from "clsx";
6+
import styles from "./styles.module.scss";
7+
import $t from "@site/src/utils/tools";
8+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
9+
import GitHub from "../Icons/gitHub.svg";
10+
import Zhihu from "../Icons/zhihu.svg";
11+
import OSChina from "../Icons/os-china.svg";
12+
import X from "../Icons/x.svg";
13+
import Slack from "../Icons/slack.svg";
14+
import YouTube from "../Icons/youtube.svg";
15+
import Bili from "../Icons/bili.svg";
16+
import GongzhonghaoImg from "@site/static/img/databend-gongzhonghao.jpeg";
17+
import LittleDImg from "@site/static/img/little-d.jpeg";
18+
import { Tooltip } from "antd";
919
interface TProps {
10-
titleAlign?: 'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent';
20+
titleAlign?:
21+
| "start"
22+
| "end"
23+
| "left"
24+
| "right"
25+
| "center"
26+
| "justify"
27+
| "match-parent";
1128
maxWidth?: number;
12-
justifyContent?: 'center' | 'flex-start' | 'flex-end';
29+
justifyContent?: "center" | "flex-start" | "flex-end";
1330
}
1431

15-
const JoinCommunity: FC<TProps> = ({ titleAlign, maxWidth, justifyContent }): ReactElement => {
16-
const { formatStargazersCount } = useGetReleases();
17-
const community = [
18-
{
19-
'icon': 'GitHub',
20-
'star': formatStargazersCount,
21-
'title': 'GitHub',
22-
'link': 'https://github.com/datafuselabs/databend'
23-
},
24-
{
25-
'icon': 'Slack',
26-
'title': 'Slack',
27-
'link': 'https://link.databend.com/join-slack'
32+
const JoinCommunity: FC<TProps> = ({
33+
titleAlign = "center",
34+
maxWidth = 720,
35+
justifyContent = "center",
36+
}): ReactElement => {
37+
const {
38+
siteConfig: {
39+
customFields: { isChina },
2840
},
41+
} = useDocusaurusContext() as any;
42+
const { formatStargazersCount } = useGetReleases();
43+
const community = isChina
44+
? [
45+
{
46+
icon: <GitHub />,
47+
star: formatStargazersCount,
48+
title: "GitHub",
49+
link: "https://github.com/datafuselabs/databend",
50+
},
51+
{
52+
icon: <Zhihu />,
53+
title: "知乎",
54+
link: "https://www.zhihu.com/org/datafuse",
55+
},
56+
{
57+
icon: <Bili />,
58+
title: "bilibili",
59+
link: "https://space.bilibili.com/275673537",
60+
},
61+
{
62+
icon: <OSChina />,
63+
title: "开源中国",
64+
link: "https://my.oschina.net/u/5489811",
65+
},
66+
]
67+
: [
68+
{
69+
icon: <GitHub />,
70+
star: formatStargazersCount,
71+
title: "GitHub",
72+
link: "https://github.com/datafuselabs/databend",
73+
},
74+
{
75+
icon: <Slack />,
76+
title: "Slack",
77+
link: "https://link.databend.com/join-slack",
78+
},
79+
{
80+
icon: <X />,
81+
title: "Twitter",
82+
link: "https://twitter.com/DatabendLabs",
83+
},
84+
{
85+
icon: <YouTube />,
86+
title: "YouTube",
87+
link: "https://www.youtube.com/@DatabendLabs",
88+
},
89+
];
90+
const QRCode = [
2991
{
30-
'icon': 'Twitter',
31-
'title': 'Twitter',
32-
'link': 'https://twitter.com/DatabendLabs'
92+
title: "Databend 公众号",
93+
icon: <img style={{ borderRadius: "6px" }} src={GongzhonghaoImg}></img>,
3394
},
3495
{
35-
'icon': 'YouTube',
36-
'title': 'YouTube',
37-
'link': 'https://www.youtube.com/@DatabendLabs'
96+
title: "客服小 D",
97+
icon: <img style={{ borderRadius: "6px" }} src={LittleDImg}></img>,
3898
},
39-
]
99+
];
40100
return (
41-
<div className={clsx('community', styles.Community)}>
42-
<h6 style={{ textAlign: titleAlign }}>{$t('Join our growing community')}</h6>
43-
<div className={clsx('community-group', styles.CommunityGroup)} style={{ maxWidth: maxWidth + 'px', justifyContent }}>
101+
<div className={clsx("community", styles.Community)}>
102+
<h6 style={{ textAlign: titleAlign }}>
103+
{$t("Join our growing community")}
104+
</h6>
105+
<div
106+
className={clsx("community-group", styles.CommunityGroup)}
107+
style={{ maxWidth: maxWidth + "px", justifyContent }}
108+
>
44109
{community.map((item, index) => {
45-
const Icon = (icons as any)[item.icon]
46-
return <Link to={item.link} key={index}>
47-
<div className={clsx('community-item', styles.communityItem)}><div className={clsx('icon', styles.Icon)}><Icon size={24} /></div><h6>{item.title}</h6>{item.star ? <span className={clsx('tag', styles.tag)}>🌟 {item.star} Stars</span> : ''}</div>
48-
</Link>
110+
return (
111+
<Link to={item.link} key={index}>
112+
<div className={clsx("community-item", styles.communityItem)}>
113+
<div className={clsx("icon", styles.Icon)}>{item.icon}</div>
114+
<h6>{item.title}</h6>
115+
{item.star ? (
116+
<span className={clsx("tag", styles.tag)}>
117+
🌟 {item.star} Stars
118+
</span>
119+
) : (
120+
""
121+
)}
122+
</div>
123+
</Link>
124+
);
49125
})}
126+
{isChina && (
127+
<div>
128+
<div style={{ marginBottom: "8px", fontSize: "13px" }}>微信</div>
129+
<div className={clsx("community-group", styles.CommunityGroup)}>
130+
{QRCode?.map((code, index) => {
131+
return (
132+
<Tooltip key={index} title={code.title}>
133+
<div
134+
style={{
135+
width: "157px",
136+
border: "1px solid var(--color-border)",
137+
cursor: "zoom-in",
138+
borderRadius: "6px",
139+
}}
140+
>
141+
{code.icon}
142+
</div>
143+
</Tooltip>
144+
);
145+
})}
146+
</div>
147+
</div>
148+
)}
50149
</div>
51150
</div>
52151
);
53152
};
54-
JoinCommunity.defaultProps = {
55-
titleAlign: 'center',
56-
maxWidth: 720,
57-
justifyContent: 'center'
58-
}
59153
export default JoinCommunity;

‎src/theme/DocPaginator/styles.module.scss

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
display: flex;
1010
align-items: center;
1111
justify-content: center;
12-
span{
12+
span {
1313
text-align: left;
1414
white-space: nowrap;
1515
}
@@ -26,11 +26,11 @@
2626
font-size: 16px;
2727
font-weight: 700;
2828
line-height: 24px;
29-
svg{
29+
svg {
3030
margin-right: 12px;
31-
stroke: var(--color-text-1)!important;
31+
stroke: var(--color-text-1) !important;
3232
}
33-
&:hover{
33+
&:hover {
3434
background-color: var(--color-fill-0);
3535
border: 1px solid hsl(var(--border));
3636
}
@@ -50,15 +50,14 @@
5050
border-top: 1px solid var(--color-border);
5151
margin-top: 40px;
5252
padding-top: 8px;
53-
padding-bottom: 200px;
54-
// display: flex;
55-
// justify-content: center;
53+
padding-bottom: 100px;
5654
}
5755
.page {
5856
color: inherit;
5957
font-weight: 500;
60-
box-shadow: var(--tw-ring-offset-shadow,0 0 #3d3d3d00),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
61-
font-size: .875rem;
58+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #3d3d3d00),
59+
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
60+
font-size: 0.875rem;
6261
line-height: 1.25rem;
6362
font-weight: 500;
6463
padding: 0.5rem 1rem;
@@ -69,7 +68,7 @@
6968
min-height: 2.25rem;
7069
display: inline-flex;
7170
width: auto;
72-
gap: .5rem;
71+
gap: 0.5rem;
7372
cursor: pointer;
7473
span {
7574
flex: 1;

‎src/theme/Footer/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,8 @@ import { useThemeConfig } from "@docusaurus/theme-common";
1313
import CookiesConsent from "../../components/CookiesConsent";
1414
import styles from "./index.module.scss";
1515
import * as icons from "../../components/Icons";
16-
import RedirectComponent from "@site/src/components/RedirectComponent";
1716
// import ProgressBar from "react-scroll-progress-bar";
1817

19-
const GLOBAL_SEARCH_ID = "GLOBAL-ID-SEARCH-229";
2018
function Footer() {
2119
const year = new Date().getFullYear();
2220
const { footer } = useThemeConfig();
@@ -50,9 +48,9 @@ function Footer() {
5048
</div>
5149
<div className={styles.footerCopyright}>
5250
<p>
53-
Copyright © {year} The Databend Community. Built with Docusaurus.
54-
Apache, Apache OpenDAL and OpenDAL are either registered trademarks or
55-
trademarks of the Apache Software Foundation.
51+
Copyright © {year} The Databend Community. Apache, Apache OpenDAL and
52+
OpenDAL are either registered trademarks or trademarks of the Apache
53+
Software Foundation.
5654
</p>
5755
</div>
5856
<CookiesConsent />

‎static/img/databend-gongzhonghao.jpeg

30 KB
Loading

‎static/img/little-d.jpeg

30.1 KB
Loading

0 commit comments

Comments
 (0)