feat: opt doc select version render

docusaurus/package.json

@@ -21,12 +21,12 @@
     "@docusaurus/core": "3.5.2",
     "@docusaurus/preset-classic": "3.5.2",
     "@mdx-js/react": "^3.0.0",
-    "antd": "^5.21.5",
     "clsx": "^2.0.0",
     "fs-extra": "^11.2.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-select": "^5.8.2"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.5.2",
@@ -48,5 +48,6 @@
   },
   "engines": {
     "node": ">=18.0"
-  }
+  },
+  "repository": "[email protected]:zhongyunWan/tugraph-db.git"
 }

docusaurus/src/theme/DocSidebar/index.tsx

@@ -3,7 +3,7 @@ import DocSidebar from "@theme-original/DocSidebar";
 import type DocSidebarType from "@theme/DocSidebar";
 import type { WrapperProps } from "@docusaurus/types";
 import { useLocation, useHistory } from "react-router-dom";
-import Select from "antd/lib/select/index";
+import Select from 'react-select';
 import { DocSearch } from "@docsearch/react";
 import Link from "@docusaurus/Link";
 import { EN_TRANSLATIONS, ZH_TRANSLATIONS } from "@site/src/constants";
@@ -43,9 +43,9 @@ export default function DocSidebarWrapper(props: Props): JSX.Element {
       segments.length > versionIndex &&
       versions.includes(segments[versionIndex])
     ) {
-      return segments[versionIndex];
+      return { label: segments[versionIndex], value: segments[versionIndex] };
     }
-    return "4.5.0";
+    return {label: "4.5.0", value: "4.5.0"};
   };
 
   const formatDocSearchVersion = (tag: string) => {
@@ -68,6 +68,7 @@ export default function DocSidebarWrapper(props: Props): JSX.Element {
   };
 
   const onVersionChange = (version) => {
+    const { value } = version;
     const lang = getCurrentLanguage();
     const prefix = "/tugraph-db";
     const basePath = `${prefix}/${lang}`;
@@ -81,7 +82,7 @@ export default function DocSidebarWrapper(props: Props): JSX.Element {
       .join("/");
 
     // 构造新路径
-    const newPath = `${basePath}/${version}/${remainingPath}`;
+    const newPath = `${basePath}/${value}/${remainingPath}`;
     history.push(newPath);
   };
 
@@ -96,16 +97,16 @@ export default function DocSidebarWrapper(props: Props): JSX.Element {
   };
 
   const replaceVersionInLink = (baseLink: string): string => {
-    const currentVersion = getCurrentVersion();
-    const updatedLink = baseLink.replace(/\/\d+\.\d+\.\d+\//, `/${currentVersion}/`);
+    const { value } = getCurrentVersion();
+    const updatedLink = baseLink.replace(/\/\d+\.\d+\.\d+\//, `/${value}/`);
     return updatedLink;
   };
 
   const getDocSearchKey = useMemo(() => {
 
-    const currentVersion = getCurrentVersion();
+    const { value } = getCurrentVersion();
 
-    if (['4.1.0', '4.0.1', '4.0.0', '3.6.0', '3.5.1', '3.5.0'].includes(currentVersion)) {
+    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",
@@ -120,18 +121,6 @@ export default function DocSidebarWrapper(props: Props): JSX.Element {
     }
   }, [location.pathname]);
 
-  useEffect(() => {
-    window.addEventListener("click", () => {
-      const currentPath = window.location.pathname;
-      window.parent.postMessage({ path: currentPath }, "*");
-    });
-    window.addEventListener("hashchange", () => {
-      const currentPath = window.location.pathname;
-      const hash = window.location.hash;
-      window.parent.postMessage({ path: currentPath + hash }, "*");
-    });
-  }, []);
-
   const getTranslationsByLanguage = (lang: string) => {
     if (lang === "zh") {
       return ZH_TRANSLATIONS;
@@ -146,29 +135,57 @@ export default function DocSidebarWrapper(props: Props): JSX.Element {
     return "Search docs";
   };
 
+  const versionOptions = versions.map((item) => ({ value: item, label: item }));
+
+  const customStyles = {
+    control: (provided: React.CSSProperties) => ({
+      ...provided,
+      width: '120px',
+      minHeight: '36px',
+      height: '36px',
+      margin: "10px 4px 0 8px"
+    }),
+    valueContainer: (provided: React.CSSProperties) => ({
+      ...provided,
+      padding: '0 8px'
+    }),
+  };
+
+  useEffect(() => {
+    window.addEventListener("click", () => {
+      const currentPath = window.location.pathname;
+      window.parent.postMessage({ path: currentPath }, "*");
+    });
+    window.addEventListener("hashchange", () => {
+      const currentPath = window.location.pathname;
+      const hash = window.location.hash;
+      window.parent.postMessage({ path: currentPath + hash }, "*");
+    });
+  }, []);
+
   return (
     <div
       style={{
         display: "flex",
         justifyContent: "center",
-        flexDirection: "column",
+        flexDirection: "column"
       }}
     >
-      <div style={{ display: "flex", alignItems: "center" }}>
+      <div style={{ display: "flex", alignItems: "center", marginBottom: '8px' }}>
         <Select
           defaultValue={getCurrentVersion()}
-          style={{ width: 120, margin: "10px 4px 8px 8px" }}
-          options={versions.map((item) => ({ value: item, label: item }))}
+          styles={customStyles}
+          options={versionOptions}
           onChange={onVersionChange}
         />
-        <div style={{ margin: "10px 4px 8px 8px" }}>
+        <div style={{ margin: "10px 4px 0 8px" }}>
           <DocSearch
             {...{
               ...getDocSearchKey,
               searchParameters: {
                 facetFilters: [
                   formatDocSearchVersion(
-                    `docusaurus_tag:docs-${getCurrentVersion()}_${getCurrentLanguage()}-current`
+                    `docusaurus_tag:docs-${getCurrentVersion()?.value}_${getCurrentLanguage()}-current`
                   ),
                 ],
               },

docusaurus/src/theme/NotFound/Content/index.tsx

@@ -3,7 +3,6 @@ import clsx from "clsx";
 import { useLocation } from "react-router-dom";
 import type { Props } from "@theme/NotFound/Content";
 import Heading from "@theme/Heading";
-import { Button } from "antd";
 import { EN_NOT_FOUND_CONFIG, ZH_NOT_FOUND_CONFIG } from "@site/src/constants";
 
 export default function NotFoundContent({ className }: Props): JSX.Element {
@@ -45,9 +44,9 @@ export default function NotFoundContent({ className }: Props): JSX.Element {
           {contentConfig.descriptions?.map((desc) => (
             <p>{desc}</p>
           ))}
-          <Button type="primary" href={getHomeHref()}>
+          <a href={getHomeHref()}>
             {contentConfig.homeBtnText}
-          </Button>
+          </a>
         </div>
       </div>
     </main>

docusaurus/versions/version-4.5.0/en-US/source/10.permission/5.log.md

@@ -71,4 +71,4 @@ Please use Python's built-in print to output debug information. The debug inform
 
 Audit logs record each request and response, as well as the user who sent the request and when the request received. Audit logging can only be turned on or off. The results can be queried using the TuGraph visualization tool and the REST API.
 
-To enable the Audit Log, you need to set the `enable_audit_log` parameter to `true` in the configuration file. For the configuration file and parameter descriptions, see:[Tugraph Running/Service configuration](../../5.installation&running/7.tugraph-running.md)
+To enable the Audit Log, you need to set the `enable_audit_log` parameter to `true` in the configuration file. For the configuration file and parameter descriptions, see:[Tugraph Running/Service configuration](../5.installation&running/7.tugraph-running.md)

docusaurus/versions/version-4.5.0/en-US/source/7.client-tools/5.bolt-client.md

@@ -5,7 +5,7 @@ TuGraph implements Neo4j's bolt protocol, you can use Neo4j's client to access T
 
 ## Enable bolt port
 
-The Bolt port is enabled by default on port 7687. If you need to change the port, you can do so in the configuration file. For services deployed using the Docker method, the configuration file is located within the container at `/usr/local/etc/lgraph.json`; for services deployed using the RPM package, the configuration file is on the server at `/usr/local/etc/lgraph.json`. To apply the port change, you will need to restart the service. Specific instructions for restarting the service can be found in [Tugraph Running](../../5.installation&running/7.tugraph-running.md). Additionally, for a detailed explanation of the configuration options available in the configuration file, see the "Configuration parameters" section in [Tugraph Running](../../5.installation&running/7.tugraph-running.md).
+The Bolt port is enabled by default on port 7687. If you need to change the port, you can do so in the configuration file. For services deployed using the Docker method, the configuration file is located within the container at `/usr/local/etc/lgraph.json`; for services deployed using the RPM package, the configuration file is on the server at `/usr/local/etc/lgraph.json`. To apply the port change, you will need to restart the service. Specific instructions for restarting the service can be found in [Tugraph Running](../5.installation&running/7.tugraph-running.md). Additionally, for a detailed explanation of the configuration options available in the configuration file, see the "Configuration parameters" section in [Tugraph Running](../5.installation&running/7.tugraph-running.md).
 
 ## Use case example
 
@@ -63,7 +63,7 @@ Common statements:
         session.run("CALL db.deleteLabel('vertex', 'person')");
 ```
 
-Details on the use of Cypher and stored procedures can be found in [Cypher](../../8.query/1.cypher.md)
+Details on the use of Cypher and stored procedures can be found in [Cypher](../8.query/1.cypher.md)
 
 ## Limitations on use
 

docusaurus/versions/version-4.5.0/zh-CN/source/10.permission/5.log.md

@@ -71,4 +71,4 @@ extern "C" bool Process(GraphDB& db, const std::string& request, std::string& re
 
 审核日志记录每个请求和响应，以及发送请求的用户以及收到请求的时间。审核日志只能是打开或关闭状态。可以使用 TuGraph 可视化工具和 REST API 查询结果。
 
-开启审计日志需要在配置文件中将`enable_audit_log`参数设置为`true`。配置文件和配置参数说明详见：[数据库运行/服务配置](../../5.installation&running/7.tugraph-running.md)。
+开启审计日志需要在配置文件中将`enable_audit_log`参数设置为`true`。配置文件和配置参数说明详见：[数据库运行/服务配置](../5.installation&running/7.tugraph-running.md)。

docusaurus/versions/version-4.5.0/zh-CN/source/5.installation&running/3.docker-deployment.md

@@ -14,7 +14,7 @@
 
 镜像托管在[DockerHub]( https://hub.docker.com/u/tugraph )，可直接下载使用。
 
-最新版本的Docker地址参见 [文档地图](../../1.guide.md)的"TuGraph最新版本"章节。
+最新版本的Docker地址参见 [文档地图](../1.guide.md)的"TuGraph最新版本"章节。
 
 ### 2.2.命名规范
 

docusaurus/versions/version-4.5.0/zh-CN/source/5.installation&running/4.local-package-deployment.md

@@ -10,7 +10,7 @@ TuGraph本地包部署需要对应的环境，快速验证可以使用精简安
 
 ## 2. 安装包下载
 
-最新版本的安装包地址参见 [文档地图](../../1.guide.md)的"TuGraph最新版本"章节。
+最新版本的安装包地址参见 [文档地图](../1.guide.md)的"TuGraph最新版本"章节。
 
 也可以访问Github进行下载：[TuGraph Release](https://github.com/TuGraph-family/tugraph-db/releases)
 

docusaurus/versions/version-4.5.0/zh-CN/source/7.client-tools/5.bolt-client.md

@@ -4,7 +4,7 @@ TuGraph目前兼容了Neo4j的Bolt协议，可以直接使用Neo4j的客户端
 
 ## 开启Bolt端口
 
-Bolt端口是默认开启的，默认端口是7687。如果需要修改端口，请在配置文件中自行修改。基于docker方式部署的服务，配置文件在容器内 `/usr/local/etc/lgraph.json`文件中；如果是用rpm包部署的服务，配置文件在服务器的`/usr/local/etc/lgraph.json`。 修改端口后为了使端口生效，需要重启服务，重启服务的具体操作可见[数据库运行](../../5.installation&running/7.tugraph-running.md)。另外，配置文件中的详细配置项，可见[数据库运行](../../5.installation&running/7.tugraph-running.md)中的服务配置章节。
+Bolt端口是默认开启的，默认端口是7687。如果需要修改端口，请在配置文件中自行修改。基于docker方式部署的服务，配置文件在容器内 `/usr/local/etc/lgraph.json`文件中；如果是用rpm包部署的服务，配置文件在服务器的`/usr/local/etc/lgraph.json`。 修改端口后为了使端口生效，需要重启服务，重启服务的具体操作可见[数据库运行](../5.installation&running/7.tugraph-running.md)。另外，配置文件中的详细配置项，可见[数据库运行](../5.installation&running/7.tugraph-running.md)中的服务配置章节。
 
 ## 使用示例
 
@@ -61,7 +61,7 @@ Client按照如下格式进行实例化:
         session.run("CALL db.deleteLabel('vertex', 'person')");
 ```
 
-详细Cypher和存储过程的使用可见[Cypher](../../8.query/1.cypher.md)
+详细Cypher和存储过程的使用可见[Cypher](../8.query/1.cypher.md)
 
 ## Neo4j客户端使用限制