Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: doc padding #8

Merged
merged 2 commits into from
Dec 2, 2024
Merged

feat: doc padding #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6a9cf8
feat: doc padding
liukaiming-alipay Nov 25, 2024
731f186
feat: add TuGraph_Learn check
liukaiming-alipay Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/docusaurus/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
}

#__docusaurus {
padding: 16px 120px 0;
padding: 0 120px;
background-color: transparent;
cursor: pointer !important;
}
Expand Down
167 changes: 97 additions & 70 deletions docs/docusaurus/src/theme/DocSidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof DocSidebarType>;



export default function DocSidebarWrapper(props: Props): JSX.Element {
const location = useLocation();
const history = useHistory();
Expand Down Expand Up @@ -52,54 +54,54 @@ 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';
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, "-")}`;
}

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, '-')}`;
});
);
};

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}`;

// 移除现有版本号部分
// 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!);
Expand All @@ -117,22 +119,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) => {
Expand All @@ -150,87 +153,107 @@ 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) => {

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);

sendPostMsg();

return () => {
window.removeEventListener('click', sendPostMsg);
window.removeEventListener('hashchange', sendPostHashMsg);
}

window.removeEventListener("click", sendPostMsg);
window.removeEventListener("hashchange", sendPostHashMsg);
};
}, []);

const getCascaderTitle = () => {
const type = getCurrentType();

return type === "TuGraph_Learn" ? "TuGraph Learn" : "TuGraph DB";
};

return (
<div
className="docsearch-wrapper"
style={{
display: "flex",
justifyContent: "center",
flexDirection: "column"
flexDirection: "column",
}}
>

<div style={{ display: "flex", justifyContent: 'space-between', marginBottom: '8px' }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginBottom: "8px",
}}
>
<Cascader
allowClear={false}
value={['TuGraph_DB', getCurrentVersion()?.label]}
value={[getCurrentType(), getCurrentVersion()?.label]}
options={getOptions(getCurrentLanguage())}
onChange={onVersionChange}
>
<div className="itemWrapper">
<div className="titleBlock">
<span className="titleText">TuGraph DB</span>
<div
className="downIcon"
/>
<span className="titleText">{getCascaderTitle()}</span>
<div className="downIcon" />
</div>
<div className="contentArea">
<span id="engineDescription">{getDescByLanguage(getCurrentLanguage())}</span>
<span className="versionLabel">V{getCurrentVersion()?.label}</span>
<span id="engineDescription">
{getDescByLanguage(getCurrentLanguage())}
</span>
<span className="versionLabel">
V{getCurrentVersion()?.label}
</span>
</div>
</div>
</Cascader>
Expand All @@ -243,26 +266,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()),
}} />
}}
/>
</div>
</Tooltip>

</div>
<DocSidebar {...props} />
</div>
Expand Down
Loading