From f6a9cf8f696222e2aa644175181315d7c34b16d0 Mon Sep 17 00:00:00 2001 From: liukaiming-alipay Date: Mon, 25 Nov 2024 13:50:39 +0800 Subject: [PATCH 1/2] feat: doc padding --- docs/docusaurus/src/css/custom.css | 2 +- .../docusaurus/src/theme/DocSidebar/index.tsx | 136 ++++++++++-------- 2 files changed, 75 insertions(+), 63 deletions(-) diff --git a/docs/docusaurus/src/css/custom.css b/docs/docusaurus/src/css/custom.css index 1ac132d488..5010797fe2 100644 --- a/docs/docusaurus/src/css/custom.css +++ b/docs/docusaurus/src/css/custom.css @@ -39,7 +39,7 @@ } #__docusaurus { - padding: 16px 120px 0; + padding: 0 120px; background-color: transparent; cursor: pointer !important; } diff --git a/docs/docusaurus/src/theme/DocSidebar/index.tsx b/docs/docusaurus/src/theme/DocSidebar/index.tsx index f5f3a85649..2930d7a862 100644 --- a/docs/docusaurus/src/theme/DocSidebar/index.tsx +++ b/docs/docusaurus/src/theme/DocSidebar/index.tsx @@ -5,14 +5,16 @@ import type { WrapperProps } from "@docusaurus/types"; import { useLocation, useHistory } from "react-router-dom"; import { DocSearch } from "@docsearch/react"; import Link from "@docusaurus/Link"; -import { EN_DOC_OPTIONS, EN_TRANSLATIONS, ZH_DOC_OPTIONS, ZH_TRANSLATIONS } from "@site/src/constants"; +import { + EN_DOC_OPTIONS, + EN_TRANSLATIONS, + ZH_DOC_OPTIONS, + ZH_TRANSLATIONS, +} from "@site/src/constants"; import { Cascader, Tooltip } from "antd"; - type Props = WrapperProps; - - export default function DocSidebarWrapper(props: Props): JSX.Element { const location = useLocation(); const history = useHistory(); @@ -52,38 +54,40 @@ export default function DocSidebarWrapper(props: Props): JSX.Element { }; const formatDocSearchVersion = (tag: string) => { - return tag.replace(/docs-(\d+\.\d+\.\d+)|docs-latest_zh/g, (match, version) => { - - if (['3.5.1', '3.5.0'].includes(version)) { - return 'docs-3-6-0'; - } - - if (['4.0.1', '4.0.0'].includes(version)) { - return 'docs-4-1-0'; - } - - if (['4.3.2', '4.3.1', '4.3.0', '4.2.0'].includes(version)) { - return 'docs-4-5-0'; + return tag.replace( + /docs-(\d+\.\d+\.\d+)|docs-latest_zh/g, + (match, version) => { + if (["3.5.1", "3.5.0"].includes(version)) { + return "docs-3-6-0"; + } + + if (["4.0.1", "4.0.0"].includes(version)) { + return "docs-4-1-0"; + } + + if (["4.3.2", "4.3.1", "4.3.0", "4.2.0"].includes(version)) { + return "docs-4-5-0"; + } + + return `docs-${version.replace(/\./g, "-")}`; } - - return `docs-${version.replace(/\./g, '-')}`; - }); + ); }; const onVersionChange = (values) => { - const [type, version] = values - if (type === 'TuGraph_Analytics') { - window.location.href = `https://liukaiming-alipay.github.io/tugraph-analytics/${getCurrentLanguage()}/introduction/`; + const [type, version] = values; + const lang = getCurrentLanguage(); + if (type === "TuGraph_Analytics") { + window.location.href = `https://liukaiming-alipay.github.io/tugraph-analytics/${lang}/introduction`; return; } - if (type === 'TuGraph_Learn') { - const learnPath = `/tugraph-db/zh/${version}/olap&procedure/learn/tutorial`; + if (type === "TuGraph_Learn") { + const learnPath = `/tugraph-db/${lang}/${version}/olap&procedure/learn/tutorial`; history.push(learnPath); return; } - const lang = getCurrentLanguage(); const prefix = "/tugraph-db"; const basePath = `${prefix}/${lang}`; @@ -117,22 +121,23 @@ export default function DocSidebarWrapper(props: Props): JSX.Element { }; const getDocSearchKey = useMemo(() => { - const { value } = getCurrentVersion(); - if (['4.1.0', '4.0.1', '4.0.0', '3.6.0', '3.5.1', '3.5.0'].includes(value)) { + if ( + ["4.1.0", "4.0.1", "4.0.0", "3.6.0", "3.5.1", "3.5.0"].includes(value) + ) { return { apiKey: "7d995257839cea75cceb969a6d96e40a", indexName: "zhongyunwanio", appId: "FHM90YCZ2Z", - } + }; } return { apiKey: "829a7e48ddbd6916e159c003391543a0", indexName: "zhongyunwanio", appId: "DGYVABHR0M", - } + }; }, [location.pathname]); const getTranslationsByLanguage = (lang: string) => { @@ -151,45 +156,43 @@ export default function DocSidebarWrapper(props: Props): JSX.Element { const getDescByLanguage = (lang: string) => { if (lang === "zh") { - return '社区版'; + return "社区版"; } - return 'Community'; + return "Community"; }; - const getOptions = (lang: string) => { - if (lang === "zh") { return ZH_DOC_OPTIONS; } return EN_DOC_OPTIONS; }; - - const customStyles = { control: (provided: React.CSSProperties) => ({ ...provided, - width: '120px', - minHeight: '36px', - height: '36px', - margin: "10px 4px 0 8px" + width: "120px", + minHeight: "36px", + height: "36px", + margin: "10px 4px 0 8px", }), valueContainer: (provided: React.CSSProperties) => ({ ...provided, - padding: '0 8px' + padding: "0 8px", }), }; useEffect(() => { - const sendPostMsg = () => { window.parent.postMessage({ path: window.location.pathname }, "*"); }; const sendPostHashMsg = () => { - window.parent.postMessage({ path: window.location.pathname + window.location.hash }, "*"); - } + window.parent.postMessage( + { path: window.location.pathname + window.location.hash }, + "*" + ); + }; window.addEventListener("click", sendPostMsg); window.addEventListener("hashchange", sendPostHashMsg); @@ -197,40 +200,45 @@ export default function DocSidebarWrapper(props: Props): JSX.Element { sendPostMsg(); return () => { - window.removeEventListener('click', sendPostMsg); - window.removeEventListener('hashchange', sendPostHashMsg); - } - + window.removeEventListener("click", sendPostMsg); + window.removeEventListener("hashchange", sendPostHashMsg); + }; }, []); - return (
- -
+
TuGraph DB -
+
- {getDescByLanguage(getCurrentLanguage())} - V{getCurrentVersion()?.label} + + {getDescByLanguage(getCurrentLanguage())} + + + V{getCurrentVersion()?.label} +
@@ -243,26 +251,30 @@ export default function DocSidebarWrapper(props: Props): JSX.Element { searchParameters: { facetFilters: [ formatDocSearchVersion( - `docusaurus_tag:docs-${getCurrentVersion()?.value}_${getCurrentLanguage()}-current` + `docusaurus_tag:docs-${ + getCurrentVersion()?.value + }_${getCurrentLanguage()}-current` ), ], }, hitComponent: Hit, transformItems: (items) => { - return items.map(item => { + return items.map((item) => { return { ...item, - url: replaceVersionInLink('/tugraph-db' + item?.url?.split('/tugraph-db')[1] ?? '') + url: replaceVersionInLink( + "/tugraph-db" + item?.url?.split("/tugraph-db")[1] ?? "" + ), }; }); }, navigator: navigator, translations: getTranslationsByLanguage(getCurrentLanguage()), placeholder: getPlaceholderByLanguage(getCurrentLanguage()), - }} /> + }} + />
-
From 731f1864c358023127c7460dfc57c7bc4ee3bc3a Mon Sep 17 00:00:00 2001 From: liukaiming-alipay Date: Mon, 2 Dec 2024 14:28:14 +0800 Subject: [PATCH 2/2] feat: add TuGraph_Learn check --- .../docusaurus/src/theme/DocSidebar/index.tsx | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/docs/docusaurus/src/theme/DocSidebar/index.tsx b/docs/docusaurus/src/theme/DocSidebar/index.tsx index 2930d7a862..3d729d3c7c 100644 --- a/docs/docusaurus/src/theme/DocSidebar/index.tsx +++ b/docs/docusaurus/src/theme/DocSidebar/index.tsx @@ -91,19 +91,17 @@ export default function DocSidebarWrapper(props: Props): JSX.Element { const prefix = "/tugraph-db"; const basePath = `${prefix}/${lang}`; - // 移除现有版本号部分 - // const segments = pathname.split("/"); - // const langIndex = segments.indexOf(lang); - // const versionIndex = langIndex + 1; - // const remainingPath = segments - // .slice(versionIndex + (versions.includes(segments[versionIndex]) ? 1 : 0)) - // .join("/"); - // 构造新路径 const newPath = `${basePath}/${version}/guide`; history.push(newPath); }; + const getCurrentType = () => { + return pathname.includes("/olap&procedure/learn") + ? "TuGraph_Learn" + : "TuGraph_DB"; + }; + const navigator = useRef({ navigate({ itemUrl }: { itemUrl?: string }) { history.push(itemUrl!); @@ -155,10 +153,21 @@ export default function DocSidebarWrapper(props: Props): JSX.Element { }; const getDescByLanguage = (lang: string) => { + const type = getCurrentType(); + const desc = + type === "TuGraph_Learn" + ? { + zh: "图学习引擎", + en: "Graph Learning Engine", + } + : { + zh: "社区版", + en: "Community", + }; if (lang === "zh") { - return "社区版"; + return desc.zh; } - return "Community"; + return desc.en; }; const getOptions = (lang: string) => { @@ -205,6 +214,12 @@ export default function DocSidebarWrapper(props: Props): JSX.Element { }; }, []); + const getCascaderTitle = () => { + const type = getCurrentType(); + + return type === "TuGraph_Learn" ? "TuGraph Learn" : "TuGraph DB"; + }; + return (
- TuGraph DB + {getCascaderTitle()}