feat: add edit page adn question sidecat (#273)

Author: yuluo-yx

i18n/en/code.json

@@ -1048,5 +1048,9 @@
   "team.termStart": {
     "message": "Term Start",
     "description": "Term start label"
+  },
+  "theme.common.reportAnIssue": {
+    "message": "Report an issue",
+    "description": "The link label to report an issue for the current page"
   }
 }

i18n/zh-Hans/code.json

@@ -1164,5 +1164,9 @@
   "contributing.codeOfConductTitle": {
     "message": "行为准则",
     "description": "Code of conduct title"
+  },
+  "theme.common.reportAnIssue": {
+    "message": "问题反馈",
+    "description": "The link label to report an issue for the current page"
   }
 }

project.config.ts

@@ -11,12 +11,18 @@ export interface ProjectConfig {
     website?: string
   }
 
-  // GitHub repository information
+  // GitHub repository information (project code repo)
   github: {
     username: string
     repoName: string
   }
 
+  // Docs/website repository information
+  docsGithub: {
+    username: string
+    repoName: string
+  }
+
   // Website deployment information
   deployment: {
     url: string
@@ -56,12 +62,18 @@ const projectConfig: ProjectConfig = {
     website: 'https://java2ai.com', // optional
   },
 
-  // GitHub repository information
+  // GitHub repository information (project code repo)
   github: {
     username: 'alibaba',
     repoName: 'spring-ai-alibaba',
   },
 
+  // Docs/website repository information
+  docsGithub: {
+    username: 'spring-ai-alibaba',
+    repoName: 'website',
+  },
+
   // Website deployment configuration
   deployment: {
     url: 'https://spring-ai-alibaba.github.io',
@@ -96,14 +108,18 @@ export const getGitHubUrls = (config: ProjectConfig) => {
   const { username, repoName } = config.github
   const baseUrl = `https://github.com/${username}/${repoName}`
 
+  const { username: docsUsername, repoName: docsRepoName } = config.docsGithub
+  const docsBaseUrl = `https://github.com/${docsUsername}/${docsRepoName}`
+
   return {
     repo: baseUrl,
     discussions: `${baseUrl}/discussions`,
     issues: `${baseUrl}/issues`,
     license: `${baseUrl}/blob/main/LICENSE`,
     contributing: `${baseUrl}/blob/main/CONTRIBUTING.md`,
-    editDocs: `${baseUrl}/tree/main/docs/`,
-    editBlog: `${baseUrl}/tree/main/blog/`,
+    editDocs: `${docsBaseUrl}/tree/main/`,
+    editBlog: `${docsBaseUrl}/tree/main/blog/`,
+    docsRepo: docsBaseUrl,
   }
 }
 

src/theme/TOC/index.tsx

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from 'react'
+import TOCOriginal from '@theme-original/TOC'
+import type TOCType from '@theme/TOC'
+import type { WrapperProps } from '@docusaurus/types'
+
+type Props = WrapperProps<typeof TOCType>
+
+export default function TOCWrapper(props: Props): ReactNode {
+  return <TOCOriginal {...props} />
+}

src/theme/TOCItems/index.tsx

@@ -0,0 +1,86 @@
+import React, { type ReactNode } from 'react'
+import TOCItemsOriginal from '@theme-original/TOCItems'
+import type TOCItemsType from '@theme/TOCItems'
+import type { WrapperProps } from '@docusaurus/types'
+import { useDoc } from '@docusaurus/plugin-content-docs/client'
+import Translate from '@docusaurus/Translate'
+import styles from './styles.module.css'
+
+type Props = WrapperProps<typeof TOCItemsType>
+
+function DocPageLinks(): ReactNode {
+  const { metadata } = useDoc()
+  const { editUrl } = metadata
+  const issuesUrl = 'https://github.com/alibaba/spring-ai-alibaba/issues/new'
+
+  return (
+    <div className={styles.docPageLinks}>
+      {editUrl && (
+        <a
+          href={editUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.link}
+        >
+          <svg className={styles.icon} viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+          </svg>
+          <Translate
+            id="theme.common.editThisPage"
+            description="The link label to edit the current page"
+          >
+            编辑此页
+          </Translate>
+        </a>
+      )}
+      <a
+        href={issuesUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.link}
+      >
+        <svg className={styles.icon} viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+        </svg>
+        <Translate
+          id="theme.common.reportAnIssue"
+          description="The link label to report an issue for the current page"
+        >
+          问题反馈
+        </Translate>
+      </a>
+    </div>
+  )
+}
+
+class DocPageLinksErrorBoundary extends React.Component<
+  { children: ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { children: ReactNode }) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null
+    }
+    return this.props.children
+  }
+}
+
+export default function TOCItemsWrapper(props: Props): ReactNode {
+  return (
+    <>
+      <TOCItemsOriginal {...props} />
+      <DocPageLinksErrorBoundary>
+        <DocPageLinks />
+      </DocPageLinksErrorBoundary>
+    </>
+  )
+}

src/theme/TOCItems/styles.module.css

@@ -0,0 +1,31 @@
+.docPageLinks {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  font-size: 0.8rem;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ifm-color-emphasis-700);
+  text-decoration: none;
+  transition: color var(--ifm-transition-fast);
+  line-height: 1.4;
+}
+
+.link:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  fill: currentColor;
+}