feat: add translation button at bottom of doc page

casdoor/casdoor-website#564
casbin · Sep 10, 2023 · c6c9929 · c6c9929
1 parent d2a9629
commit c6c9929
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 20 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -192,7 +192,7 @@ var _hmt = _hmt || [];
     announcementBar: {
       id: "announcement", // ID of the announcement bar
       content:
-        `<a target="_blank" rel="noreferrer" href="https://casbin.org/">💖 Looking for an open-source and cross-platform authorization solution that supports ACL, RBAC, ABAC? Learn more about: Casbin</a>`,
+        "<a target=\"_blank\" rel=\"noreferrer\" href=\"https://casbin.org/\">💖 Looking for an open-source and cross-platform authorization solution that supports ACL, RBAC, ABAC? Learn more about: Casbin</a>",
       isCloseable: true,
     },
     docs: {
@@ -214,26 +214,14 @@ var _hmt = _hmt || [];
         docs: {
           sidebarPath: require.resolve("./sidebars.js"),
           sidebarCollapsed: false,
-          editUrl: ({locale, docPath}) => {
-            if (locale === "en") {
-              return `https://github.com/casbin/caswaf-website/edit/master/docs/${docPath}`;
-            }
-            if (locale === "zh") {
-              return "https://crowdin.com/project/caswaf-website/zh-CN";
-            }
-            return `https://crowdin.com/project/caswaf-website/${locale}`;
+          editUrl: ({docPath}) => {
+            return `https://github.com/casbin/caswaf-website/edit/master/docs/${docPath}`;
           },
         },
         blog: {
           showReadingTime: true,
-          editUrl: ({locale, blogDirPath, blogPath}) => {
-            if (locale === "en") {
-              return `https://github.com/casbin/caswaf-website/edit/master/${blogDirPath}/${blogPath}`;
-            }
-            if (locale === "zh") {
-              return "https://crowdin.com/project/caswaf-website/zh-CN";
-            }
-            return `https://crowdin.com/project/caswaf-website/${locale}`;
+          editUrl: ({blogDirPath, blogPath}) => {
+            return `https://github.com/casbin/caswaf-website/edit/master/${blogDirPath}/${blogPath}`;
           },
         },
         theme: {

diff --git a/src/theme/DocItem/Footer/index.js b/src/theme/DocItem/Footer/index.js
@@ -2,6 +2,7 @@ import React from "react";
 import clsx from "clsx";
 import {ThemeClassNames} from "@docusaurus/theme-common";
 import {useDoc} from "@docusaurus/theme-common/internal";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import EditThisPage from "@theme/EditThisPage";
 import TagsListInline from "@theme/TagsListInline";
 import styles from "./styles.module.css";
@@ -74,11 +75,47 @@ function TagsRow(props) {
   );
 }
 
-function EditMetaRow({editUrl, authors}) {
+function IconTrans(props) {
   return (
-    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, "row")}>
-      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
+    <svg
+      fill="currentColor"
+      height="20"
+      width="20"
+      viewBox="0 0 25 25"
+      aria-hidden
+      {...props}
+    >
+      <path
+        d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
+      />
+    </svg>
+  );
+}
+
+function TransThisPage({transUrl}) {
+  return (
+    <>
+      <a
+        href={transUrl}
+        target="_blank"
+        rel="noreferrer noopener"
+        className={ThemeClassNames.common.editThisPage}
+      >
+        <IconTrans style={{marginRight: "0.3em", verticalAlign: "sub"}} />
+        <Translate>
+          Translate this page
+        </Translate>
+      </a>
+    </>
+  );
+}
 
+function EditMetaRow({editUrl, transUrl, authors}) {
+  return (
+    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, "row")}>
+      <div className="col">
+        {editUrl && <EditThisPage editUrl={editUrl} />} {transUrl && <TransThisPage transUrl={transUrl} />}
+      </div>
       <div className={clsx("col", styles.lastUpdated)}>
         <ContributedBy authors={authors} />
       </div>
@@ -96,13 +133,27 @@ export default function DocItemFooter() {
   if (!canDisplayFooter) {
     return null;
   }
+
+  // get current locale
+  const {i18n} = useDocusaurusContext();
+  const locale = i18n.currentLocale;
+  // null if locale is en, don't show translate button
+  let transUrl = null;
+  // let transUrl = "https://crowdin.com/project/casdoor-website";
+  if (locale === "zh") {
+    transUrl = "https://crowdin.com/project/casdoor-website/zh-CN";
+  } else if (locale !== "en") {
+    transUrl = `https://crowdin.com/project/casdoor-website/${locale}`;
+  }
+
   return (
     <footer
       className={clsx(ThemeClassNames.docs.docFooter, "docusaurus-mt-lg")}>
       {canDisplayTagsRow && <TagsRow tags={tags} />}
       {canDisplayEditMetaRow && (
         <EditMetaRow
           editUrl={editUrl}
+          transUrl={transUrl}
           authors={authors}
         />
       )}