feat: add translation button at bottom of doc page (#208)

* feat: add translation button at bottom of doc page * refactor: add button spacing
casbin · Sep 10, 2023 · 797d71e · 797d71e
1 parent 6d8af7c
commit 797d71e
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 19 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -267,7 +267,7 @@ var _hmt = _hmt || [];
     announcementBar: {
       id: "announcement", // ID of the announcement bar
       content:
-        `<a href="https://casdoor.org/">💖 Looking for an open-source identity and access management solution like Okta, Auth0, Keycloak ? Learn more about: Casdoor</a>`,
+        "<a href=\"https://casdoor.org/\">💖 Looking for an open-source identity and access management solution like Okta, Auth0, Keycloak ? Learn more about: Casdoor</a>",
       isCloseable: true,
     },
     docs: {
@@ -305,26 +305,14 @@ var _hmt = _hmt || [];
         docs: {
           sidebarPath: require.resolve("./sidebars.js"),
           sidebarCollapsed: false,
-          editUrl: ({locale, docPath}) => {
-            if (locale === "en") {
-              return `https://github.com/casbin/casbin-website-v2/edit/master/docs/${docPath}`;
-            }
-            if (locale === "zh") {
-              return "https://crowdin.com/project/casbin-website/zh-CN";
-            }
-            return `https://crowdin.com/project/casbin-website/${locale}`;
+          editUrl: ({docPath}) => {
+            return `https://github.com/casbin/casbin-website-v2/edit/master/docs/${docPath}`;
           },
         },
         blog: {
           showReadingTime: true,
-          editUrl: ({locale, blogDirPath, blogPath}) => {
-            if (locale === "en") {
-              return `https://github.com/casbin/casbin-website-v2/edit/master/${blogDirPath}/${blogPath}`;
-            }
-            if (locale === "zh") {
-              return "https://crowdin.com/project/casbin-website/zh-CN";
-            }
-            return `https://crowdin.com/project/casbin-website/${locale}`;
+          editUrl: ({blogDirPath, blogPath}) => {
+            return `https://github.com/casbin/casbin-website-v2/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";
@@ -73,11 +74,48 @@ function TagsRow(props) {
     </div>
   );
 }
+function IconTrans(props) {
+  return (
+    <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(props) {
+  return (
+    <>
+      <a
+        href={props.transUrl}
+        target="_blank"
+        rel="noreferrer noopener"
+        className={ThemeClassNames.common.editThisPage}
+        {...props}
+      >
+        <IconTrans style={{marginRight: "0.3em", verticalAlign: "sub"}} />
+        <Translate>
+          Translate this page
+        </Translate>
+      </a>
+    </>
+  );
+}
 
-function EditMetaRow({editUrl, authors}) {
+function EditMetaRow({editUrl, transUrl, authors}) {
   return (
     <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, "row")}>
-      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
+      <div className="col">
+        {editUrl && <EditThisPage editUrl={editUrl} />} {transUrl && <TransThisPage transUrl={transUrl} style={{marginLeft: "2rem"}} />}
+      </div>
 
       <div className={clsx("col", styles.lastUpdated)}>
         <ContributedBy authors={authors} />
@@ -96,13 +134,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}
         />
       )}