This is an automated email from the ASF dual-hosted git repository.
jeffreyh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new ec0d6e881b7 [Feat]:add forum entry to toc (#2320)
ec0d6e881b7 is described below
commit ec0d6e881b764ff673d0cef77514031360b43d08
Author: yangon <[email protected]>
AuthorDate: Thu Apr 24 10:14:12 2025 +0800
[Feat]:add forum entry to toc (#2320)
---
src/components/Icons/forum-icon.tsx | 21 ++++++++++
src/components/Icons/github-icon.tsx | 21 ++++++++++
src/components/Icons/home-icon.tsx | 24 ++++++++++++
src/components/Icons/pdf-icon.tsx | 16 ++++++++
src/components/Icons/slack-icon.tsx | 21 ++++++++++
src/scss/components/toc.scss | 2 +
src/theme/TOC/index.tsx | 76 +++++++++++++-----------------------
7 files changed, 132 insertions(+), 49 deletions(-)
diff --git a/src/components/Icons/forum-icon.tsx
b/src/components/Icons/forum-icon.tsx
new file mode 100644
index 00000000000..2e265941723
--- /dev/null
+++ b/src/components/Icons/forum-icon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export function ForumIcon(props) {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg"; width="20" height="20"
fill="none" viewBox="0 0 20 20" {...props}>
+ <g clip-path="url(#a)">
+ <path
+ fill="currentColor"
+ fill-rule="evenodd"
+ d="M3.75 3a.75.75 0 0 0-.75.75v9.519c0
.414.336.75.75.75h1.884v2.3a.4.4 0 0 0 .595.349l4.577-2.554a.75.75 0 0 1
.366-.095h5.078a.75.75 0 0 0 .75-.75V3.75a.75.75 0 0 0-.75-.75zM7.5 8.5a1 1 0 1
1-2 0 1 1 0 0 1 2 0m3.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m2.5 1a1 1 0 1 0 0-2 1 1 0
0 0 0 2"
+ clip-rule="evenodd"
+ ></path>
+ </g>
+ <defs>
+ <clipPath id="a">
+ <path fill="#fff" d="M0 0h20v20H0z"></path>
+ </clipPath>
+ </defs>
+ </svg>
+ );
+}
diff --git a/src/components/Icons/github-icon.tsx
b/src/components/Icons/github-icon.tsx
new file mode 100644
index 00000000000..79abd8cfa63
--- /dev/null
+++ b/src/components/Icons/github-icon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+export function GithubIcon(props) {
+ return (
+ <svg {...props} xmlns="http://www.w3.org/2000/svg"; width="21"
height="20" fill="currentColor" viewBox="0 0 21 20">
+ <g clip-path="url(#a)">
+ <g clip-path="url(#b)">
+ <path d="M10.506 2.698a7.494 7.494 0 0 1 7.5 7.495c0
3.274-2.099 6.058-5.023 7.08-.394.099-.334-.181-.334-.372v-1.299c2.274.266
2.367-1.238 2.519-1.49.308-.526
1.037-.66.82-.911-.518-.267-1.046.067-1.658.97-.442.655-1.305.545-1.743.436a2.1
2.1 0 0 0-.581-1.02c2.356-.421 3.338-1.86 3.338-3.569
0-.83-.273-1.592-.81-2.207.342-1.014-.031-1.882-.082-2.01-.973-.088-1.985.696-2.064.759a7.3
7.3 0 0 0-1.892-.228c-.71
0-1.344.082-1.902.233-.19-.145-1.128-.818-2.033-.736-.048.12 [...]
+ </g>
+ </g>
+ <defs>
+ <clipPath id="a">
+ <path fill="#fff" d="M0 0h21v20H0z"></path>
+ </clipPath>
+ <clipPath id="b">
+ <path fill="#fff" d="M18.5 2h-16v16h16z"></path>
+ </clipPath>
+ </defs>
+ </svg>
+ );
+}
diff --git a/src/components/Icons/home-icon.tsx
b/src/components/Icons/home-icon.tsx
new file mode 100644
index 00000000000..5ad6cd4a8e9
--- /dev/null
+++ b/src/components/Icons/home-icon.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface HomeIconProps extends React.SVGProps<SVGSVGElement> {}
+
+const HomeIcon: React.FC<HomeIconProps> = props => {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width="21"
+ height="20"
+ fill="currentColor"
+ viewBox="0 0 21 20"
+ {...props}
+ >
+ <path
+ fill-rule="evenodd"
+ d="M3.835 6.44a1 1 0 0 0-.445.832v8.939c0
.436.354.79.79.79H16.81a.79.79 0 0 0 .79-.79V7.272a1 1 0 0 0-.446-.832L11.05
2.37a1 1 0 0 0-1.11 0zm7.26 4.16a.6.6 0 1 0-1.2 0v3.3a.6.6 0 0 0 1.2 0z"
+ clip-rule="evenodd"
+ ></path>
+ </svg>
+ );
+};
+
+export { HomeIcon };
diff --git a/src/components/Icons/pdf-icon.tsx
b/src/components/Icons/pdf-icon.tsx
new file mode 100644
index 00000000000..11bc9ab9ee7
--- /dev/null
+++ b/src/components/Icons/pdf-icon.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export function PdfIcon(props: any) {
+ return (
+ <svg
+ {...props}
+ xmlns="http://www.w3.org/2000/svg";
+ width="21"
+ height="20"
+ fill="currentColor"
+ viewBox="0 0 21 20"
+ >
+ <path d="M15.944 3H5.056C4.2 3 3.5 3.7 3.5 4.556v10.888C3.5 16.3
4.2 17 5.056 17h10.888c.856 0 1.556-.7 1.556-1.556V4.557C17.5 3.7 16.8 3 15.944
3m-5.791 5.998c-.179.575-.384 1.466-.686
2.197-.156.396-.149.327-.266.577l.101-.033c1.04-.29 1.767-.363
2.444-.487-.136-.107-.254-.19-.348-.276-.464-.515-.627-.611-1.245-1.978m5.1
3.297c-.133.147-.366.233-.708.233-.591
0-1.129-.163-1.906-.56-1.338.148-2.761.304-3.562.561q-.06.02-.14.055c-.965
1.648-1.68 2.347-2.31 2.32-.2-.01-.49-.12 [...]
+ </svg>
+ );
+}
diff --git a/src/components/Icons/slack-icon.tsx
b/src/components/Icons/slack-icon.tsx
new file mode 100644
index 00000000000..9d3d3923f77
--- /dev/null
+++ b/src/components/Icons/slack-icon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export function SlackIcon(props) {
+ return (
+ <svg
+ {...props}
+ fill="currentColor"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg";
+ p-id="4316"
+ width="16"
+ height="16"
+ >
+ <path
+ d="M85.333333 625.92a85.333333 85.333333 0 1 0 170.666667
0v-85.333333H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333333z
m539.306667-142.506667a85.333333 85.333333 0 0 0
85.333333-85.333333V170.666667a85.333333 85.333333 0 1 0-170.666666
0v227.413333a85.333333 85.333333 0 0 0 86.186666 85.333333z
m312.32-85.333333a85.333333 85.333333 0 1 0-170.666667
0v85.333333h85.333334a85.333333 85.333333 0 0 0 87.04-85.333333zM398.506667
540.586667a85.333333 85.333333 0 0 0-85 [...]
+ p-id="4317"
+ ></path>
+ </svg>
+ );
+}
diff --git a/src/scss/components/toc.scss b/src/scss/components/toc.scss
index 54f3b720685..363f2efaa02 100644
--- a/src/scss/components/toc.scss
+++ b/src/scss/components/toc.scss
@@ -5,6 +5,7 @@
margin-bottom: 0.5rem;
align-items: center;
cursor: pointer;
+ color: #7F7F83;
}
.toc-icon-content > span {
@@ -13,6 +14,7 @@
font-style: normal;
font-weight: 400;
line-height: 22px;
+ color: rgb(31, 31, 38);
}
.title-text {
diff --git a/src/theme/TOC/index.tsx b/src/theme/TOC/index.tsx
index e70ac5ad5db..6e30e8930a9 100644
--- a/src/theme/TOC/index.tsx
+++ b/src/theme/TOC/index.tsx
@@ -3,13 +3,12 @@ import clsx from 'clsx';
import TOCItems from '@theme/TOCItems';
import type { Props } from '@theme/TOC';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import HomeIcon from '@site/static/images/toc-icon/home.svg';
-import PdfIcon from '@site/static/images/toc-icon/pdf.svg';
-import GithubIcon from '@site/static/images/toc-icon/github.svg';
-import SlackIconUrl from '@site/static/images/toc-icon/slack.png';
-import SlackColorIconUrl from '@site/static/images/toc-icon/slack-color.png';
+import { HomeIcon } from '../../components/Icons/home-icon';
+import { PdfIcon } from '../../components/Icons/pdf-icon';
+import { ForumIcon } from '../../components/Icons/forum-icon';
+import { GithubIcon } from '../../components/Icons/github-icon';
+import { SlackIcon } from '../../components/Icons/slack-icon';
import useIsBrowser from '@docusaurus/useIsBrowser';
-import ConcatIcon from '@site/static/images/toc-icon/concat.svg';
import { DOWNLOAD_PDFS } from '@site/src/constant/download.data';
import { VERSIONS } from '@site/src/constant/common';
import Link from '@docusaurus/Link';
@@ -41,18 +40,6 @@ export default function TOC({ className, ...props }: Props):
JSX.Element {
const isCN = siteConfig.baseUrl.indexOf('zh-CN') > -1;
const DEFAULT_VERSION = '2.1';
const [currentVersion, setCurrentVersion] = useState(DEFAULT_VERSION);
- const [isHoverSlack, setIsHoverSlack] = useState(false);
- const handleMouseEnter = (id: string) => {
- const dom = document.getElementById(id);
- dom!.style.color = '#444FD9';
- dom!.firstChild!.style.fill = '#444FD9';
- };
-
- const handleMouseLeave = (id: string) => {
- const dom = document.getElementById(id);
- dom!.style.color = '#1F1F26';
- dom!.firstChild!.style.fill = '#7F7F83';
- };
useEffect(() => {
if (typeof window !== 'undefined') {
@@ -75,59 +62,50 @@ export default function TOC({ className, ...props }:
Props): JSX.Element {
<div style={isBrowser && location.pathname.startsWith('/blog') ? {
display: 'none' } : {}}>
<Link to={'/'}>
<div
- className="toc-icon-content"
- id="toc-icon-home"
- onMouseEnter={() => handleMouseEnter('toc-icon-home')}
- onMouseLeave={() => handleMouseLeave('toc-icon-home')}
+ className="toc-icon-content group"
>
- <HomeIcon />
- <span>{isCN ? 'Doris 首页' : 'Doris Homepage'}</span>
+ <HomeIcon className="group-hover:text-[#444FD9]" />
+ <span className="group-hover:text-[#444FD9]">{isCN ?
'Doris 首页' : 'Doris Homepage'}</span>
</div>
</Link>
{isCN && ['3.0', '2.0', '2.1'].includes(currentVersion) ? (
<div
- className="toc-icon-content"
- id="toc-icon-pdf"
+ className="toc-icon-content group"
onClick={() => {
const pdfInfo = DOWNLOAD_PDFS.find(item =>
item.version === currentVersion);
downloadFile(pdfInfo.link, pdfInfo.filename);
}}
- onMouseEnter={() => handleMouseEnter('toc-icon-pdf')}
- onMouseLeave={() => handleMouseLeave('toc-icon-pdf')}
>
- <PdfIcon />
- <span>{isCN ? '下载 PDF' : 'Download PDF'}</span>
+ <PdfIcon className="group-hover:text-[#444FD9]" />
+ <span className="group-hover:text-[#444FD9]">{isCN ?
'下载 PDF' : 'Download PDF'}</span>
</div>
) : null}
-
+ {isCN ? (
+ <Link to={'https://doris-forum.org.cn'}>
+ <div className="toc-icon-content group">
+ <ForumIcon className="group-hover:text-[#444FD9]"
/>{' '}
+ <span
className="group-hover:text-[#444FD9]">技术论坛</span>
+ </div>
+ </Link>
+ ) : null}
{!isCN ? (
- <Link
- className="toc-icon-content"
- to={'https://github.com/apache/doris/discussions'}
- id="toc-icon-github"
- onMouseEnter={() =>
handleMouseEnter('toc-icon-github')}
- onMouseLeave={() =>
handleMouseLeave('toc-icon-github')}
- >
- <GithubIcon />
- <span>Ask Questions on Discussion</span>
+ <Link className="toc-icon-content group"
to={'https://github.com/apache/doris/discussions'}>
+ <GithubIcon className="group-hover:text-[#444FD9]" />
+ <span className="group-hover:text-[#444FD9]">Ask
Questions on Discussion</span>
</Link>
) : null}
{!isCN ? (
<Link
- className="toc-icon-content"
+ className="toc-icon-content group"
to={
'https://join.slack.com/t/apachedoriscommunity/shared_invite/zt-2unfw3a3q-MtjGX4pAd8bCGC1UV0sKcw'
}
- onMouseEnter={() => setIsHoverSlack(true)}
- onMouseLeave={() => setIsHoverSlack(false)}
>
- {isHoverSlack ? (
- <img style={{ margin: '2px' }}
src={SlackColorIconUrl} width={16} alt="slack icon" />
- ) : (
- <img style={{ margin: '2px' }} src={SlackIconUrl}
width={16} alt="slack icon" />
- )}
- <span>Chat on Slack</span>
+ <div style={{ padding: '2px' }}>
+ <SlackIcon className="group-hover:text-[#444FD9]"
/>
+ </div>
+ <span className="group-hover:text-[#444FD9]">Chat on
Slack</span>
</Link>
) : null}
</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
