Skip to content

Commit

Permalink
feat: doc padding
Browse files Browse the repository at this point in the history
  • Loading branch information
@liukaiming-alipay
liukaiming-alipay committed Nov 25, 2024
1 parent ed80b97 commit f6a9cf8
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 63 deletions.
2 changes: 1 addition & 1 deletion docs/docusaurus/src/css/custom.css
View file
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
136 changes: 74 additions & 62 deletions docs/docusaurus/src/theme/DocSidebar/index.tsx
View file
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,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}`;

Expand Down Expand Up @@ -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) => {
Expand All @@ -151,86 +156,89 @@ 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);

sendPostMsg();

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

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


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={["TuGraph_DB", getCurrentVersion()?.label]}
options={getOptions(getCurrentLanguage())}
onChange={onVersionChange}
>
<div className="itemWrapper">
<div className="titleBlock">
<span className="titleText">TuGraph DB</span>
<div
className="downIcon"
/>
<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 +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()),
}} />
}}
/>
</div>
</Tooltip>

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

0 comments on commit f6a9cf8

Please sign in to comment.