Add language dropdown menu but only for versions 3.13 and later (#725)

josh-wong · web-flow · commit b2727463ae07 · 2024-11-22T02:11:49.000+09:00
* Enable language dropdown menu

* Make specific versions show language dropdown menu

Add a conditional statement where only certain versions specified in `docusaurus.config.js` should show language dropdown menu.

* Add custom field (`allowedLanguageDropdownVersions`)

The custom field `allowedLanguageDropdownVersions` specifies which versions of docs should show the language dropdown menu. This custom field is based on the conditional statements in `src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js`.

* Redirect visitors on versions without Japanese docs

If a version doesn't have Japanese docs, redirect visitors to the English page and URL. Without this fix, visitors would see English content with Japanese UI elements on a link with `ja-jp` in the URL.

* Show Google Translate widget only on 3.4 to 3.12

Since ScalarDB 3.13 and later will have Japanese versions of docs, the Google Translate widget should still appear at the top of the page for earlier versions.

* Fix Google Translate widget not reappearing on versions

This commit fixes an issue with the Google Translate widget not reappearing when navigating from a version that has Japanese docs (like 3.13), to a version that doesn't have Japanese docs (like 3.12), then moving back to a version that has Japanese docs, (like 3.13), and then back to a version that doesn't have Japanese docs (like 3.11).

* Update README.mdx

* Create README.mdx

* Remove redirect

Redirects don't seem to work for docs in the non-primary language.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -29,26 +29,26 @@ const config = {
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".
-  // i18n: {
-  //   defaultLocale: 'en-us',
-  //   locales: ['en-us', 'ja-jp'],
-  //   localeConfigs: {
-  //     'en-us': {
-  //       label: 'English',
-  //       direction: 'ltr',
-  //       htmlLang: 'en-US',
-  //       calendar: 'gregory',
-  //       path: 'versioned_docs/en-us',
-  //     },
-  //     'ja-jp': {
-  //       label: '日本語',
-  //       direction: 'ltr',
-  //       htmlLang: 'ja-JP',
-  //       calendar: 'gregory',
-  //       path: 'versioned_docs/ja-jp',
-  //     },
-  //   },
-  // },
+  i18n: {
+    defaultLocale: 'en-us',
+    locales: ['en-us', 'ja-jp'],
+    localeConfigs: {
+      'en-us': {
+        label: 'English',
+        direction: 'ltr',
+        htmlLang: 'en-US',
+        calendar: 'gregory',
+        path: 'versioned_docs/en-us',
+      },
+      'ja-jp': {
+        label: '日本語',
+        direction: 'ltr',
+        htmlLang: 'ja-JP',
+        calendar: 'gregory',
+        path: 'versioned_docs/ja-jp',
+      },
+    },
+  },
 
   presets: [
     [
@@ -148,6 +148,11 @@ const config = {
     ],
   ],
 
+  // The following versions have Japanese docs, so the language dropdown should be displayed only when visitors are reading these versions of docs.
+  customFields: {
+    allowedLanguageDropdownVersions: ["current", "latest", "3.13"],
+  },
+
   plugins: [
     [
       '@docusaurus/plugin-client-redirects',
@@ -344,19 +349,16 @@ const config = {
             position: 'right',
             label: 'Scalar Docs Home',
           },
+          {
+            type: 'localeDropdown',
+            position: 'right',
+          },
           {
             href: 'https://github.com/scalar-labs/scalardb',
             position: 'right',
             className: 'header-github-link',
             'aria-label': 'GitHub repository',
           },
-          /*
-          The "localeDropdown" configuration should be uncommented (enabled) after we create Japanese versions of docs.
-          */
-          // {
-          //   type: 'localeDropdown',
-          //   position: 'right',
-          // },
         ],
       },
       algolia: {
diff --git a/i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/current/scalar-licensing/README.mdx b/i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/current/scalar-licensing/README.mdx
@@ -9,6 +9,8 @@ tags:
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import TranslationBanner from '/src/components/_translation-ja-jp.mdx';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 <TranslationBanner />
 
diff --git a/i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/version-3.13/scalar-licensing/README.mdx b/i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/version-3.13/scalar-licensing/README.mdx
@@ -0,0 +1,109 @@
+---
+tags:
+  - Enterprise Standard
+  - Enterprise Premium
+---
+
+# 製品ライセンスキーの設定方法
+
+import TranslationBanner from '/src/components/_translation-ja-jp.mdx';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<TranslationBanner />
+
+Scalar 製品を実行するには、`.properties` ファイルを作成し、製品のライセンスキーと証明書をそのファイルに追加する必要があります。 `.properties` ファイルで、使用している製品に基づいて次の構成のいずれかをコピーし、その内容を `.properties` ファイルに貼り付けて、`<YOUR_LICENSE_KEY>` をライセンスキーに置き換えます。
+
+:::note
+
+ライセンスキーをお持ちでない場合は、[お問い合わせ](https://www.scalar-labs.com/contact)までご連絡ください。
+
+:::
+
+:::warning
+
+トライアルライセンスを使用している場合は、使用している Scalar 製品をインターネットに接続する必要があります。トライアルライセンスが有効で期限が切れていないかどうかを確認するには、インターネット接続が必要です。
+
+:::
+
+## ScalarDB
+
+使用している製品を選択して、製品のライセンスキーと証明書の構成を確認します。
+
+### ScalarDB Enterprise Edition
+
+<Tabs groupId="scalardb-enterprise" queryString>
+  <TabItem value="scalardb-enterprise-edition-standard" label="ScalarDB Enterprise Edition (Standard)" default>
+    ```properties
+    scalar.db.cluster.node.licensing.license_key=<YOUR_LICENSE_KEY>
+    scalar.db.cluster.node.licensing.license_check_cert_pem=-----BEGIN CERTIFICATE-----\nMIICKzCCAdKgAwIBAgIIBXxj3s8NU+owCgYIKoZIzj0EAwIwbDELMAkGA1UEBhMC\nSlAxDjAMBgNVBAgTBVRva3lvMREwDwYDVQQHEwhTaGluanVrdTEVMBMGA1UEChMM\nU2NhbGFyLCBJbmMuMSMwIQYDVQQDExplbnRlcnByaXNlLnNjYWxhci1sYWJzLmNv\nbTAeFw0yMzExMTYwNzExNTdaFw0yNDAyMTUxMzE2NTdaMGwxCzAJBgNVBAYTAkpQ\nMQ4wDAYDVQQIEwVUb2t5bzERMA8GA1UEBxMIU2hpbmp1a3UxFTATBgNVBAoTDFNj\nYWxhciwgSW5jLjEjMCEGA1UEAxMaZW50ZXJwcmlzZS5zY2FsYXItbGFicy5jb20w\nWTATBgcqhkjOPQIBBggqhkjOPQMBBwNCAATJx5gvAr+GZAHcBpUvDFDsUlFo4GNw\npRfsntzwStIP8ac3dew7HT4KbGBWei0BvIthleaqpv0AEP7JT6eYAkNvo14wXDAO\nBgNVHQ8BAf8EBAMCBaAwHQYDVR0lBBYwFAYIKwYBBQUHAwEGCCsGAQUFBwMCMAwG\nA1UdEwEB/wQCMAAwHQYDVR0OBBYEFMIe+XuuZcnDX1c3TmUPlu3kNv/wMAoGCCqG\nSM49BAMCA0cAMEQCIGGlqKpgv+KW+Z1ZkjfMHjSGeUZKBLwfMtErVyc9aTdIAiAy\nvsZyZP6Or9o40x3l3pw/BT7wvy93Jm0T4vtVQH6Zuw==\n-----END CERTIFICATE-----
+    ```
+  </TabItem>
+  <TabItem value="scalardb-enterprise-edition-premium" label="ScalarDB Enterprise Edition (Premium)">
+    ```properties
+    scalar.db.cluster.node.licensing.license_key=<YOUR_LICENSE_KEY>
+    scalar.db.cluster.node.licensing.license_check_cert_pem=-----BEGIN CERTIFICATE-----\nMIICKzCCAdKgAwIBAgIIBXxj3s8NU+owCgYIKoZIzj0EAwIwbDELMAkGA1UEBhMC\nSlAxDjAMBgNVBAgTBVRva3lvMREwDwYDVQQHEwhTaGluanVrdTEVMBMGA1UEChMM\nU2NhbGFyLCBJbmMuMSMwIQYDVQQDExplbnRlcnByaXNlLnNjYWxhci1sYWJzLmNv\nbTAeFw0yMzExMTYwNzExNTdaFw0yNDAyMTUxMzE2NTdaMGwxCzAJBgNVBAYTAkpQ\nMQ4wDAYDVQQIEwVUb2t5bzERMA8GA1UEBxMIU2hpbmp1a3UxFTATBgNVBAoTDFNj\nYWxhciwgSW5jLjEjMCEGA1UEAxMaZW50ZXJwcmlzZS5zY2FsYXItbGFicy5jb20w\nWTATBgcqhkjOPQIBBggqhkjOPQMBBwNCAATJx5gvAr+GZAHcBpUvDFDsUlFo4GNw\npRfsntzwStIP8ac3dew7HT4KbGBWei0BvIthleaqpv0AEP7JT6eYAkNvo14wXDAO\nBgNVHQ8BAf8EBAMCBaAwHQYDVR0lBBYwFAYIKwYBBQUHAwEGCCsGAQUFBwMCMAwG\nA1UdEwEB/wQCMAAwHQYDVR0OBBYEFMIe+XuuZcnDX1c3TmUPlu3kNv/wMAoGCCqG\nSM49BAMCA0cAMEQCIGGlqKpgv+KW+Z1ZkjfMHjSGeUZKBLwfMtErVyc9aTdIAiAy\nvsZyZP6Or9o40x3l3pw/BT7wvy93Jm0T4vtVQH6Zuw==\n-----END CERTIFICATE-----
+    ```
+  </TabItem>
+  <TabItem value="scalardb-enterprise-edition-trial" label="ScalarDB Enterprise Edition (トライアルライセンス)">
+    ```properties
+    scalar.db.cluster.node.licensing.license_key=<YOUR_LICENSE_KEY>
+    scalar.db.cluster.node.licensing.license_check_cert_pem=-----BEGIN CERTIFICATE-----\nMIICIzCCAcigAwIBAgIIKT9LIGX1TJQwCgYIKoZIzj0EAwIwZzELMAkGA1UEBhMC\nSlAxDjAMBgNVBAgTBVRva3lvMREwDwYDVQQHEwhTaGluanVrdTEVMBMGA1UEChMM\nU2NhbGFyLCBJbmMuMR4wHAYDVQQDExV0cmlhbC5zY2FsYXItbGFicy5jb20wHhcN\nMjMxMTE2MDcxMDM5WhcNMjQwMjE1MTMxNTM5WjBnMQswCQYDVQQGEwJKUDEOMAwG\nA1UECBMFVG9reW8xETAPBgNVBAcTCFNoaW5qdWt1MRUwEwYDVQQKEwxTY2FsYXIs\nIEluYy4xHjAcBgNVBAMTFXRyaWFsLnNjYWxhci1sYWJzLmNvbTBZMBMGByqGSM49\nAgEGCCqGSM49AwEHA0IABBSkIYAk7r5FRDf5qRQ7dbD3ib5g3fb643h4hqCtK+lC\nwM4AUr+PPRoquAy+Ey2sWEvYrWtl2ZjiYyyiZw8slGCjXjBcMA4GA1UdDwEB/wQE\nAwIFoDAdBgNVHSUEFjAUBggrBgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIw\nADAdBgNVHQ4EFgQUbFyOWFrsjkkOvjw6vK3gGUADGOcwCgYIKoZIzj0EAwIDSQAw\nRgIhAKwigOb74z9BdX1+dUpeVG8WrzLTIqdIU0w+9jhAueXoAiEA6cniJ3qsP4j7\nsck62kHnFpH1fCUOc/b/B8ZtfeXI2Iw=\n-----END CERTIFICATE-----
+    ```
+  </TabItem>
+</Tabs>
+
+### ScalarDB Analytics with Spark
+
+<Tabs groupId="scalardb-analytics-with-spark" queryString>
+  <TabItem value="scalardb-analytics-with-spark" label="ScalarDB Analytics with Spark">
+    ```apacheconf
+    spark.sql.catalog.scalardb_catalog.license.key <YOUR_LICENSE_KEY>
+    spark.sql.catalog.scalardb_catalog.license.cert_pem -----BEGIN CERTIFICATE-----\nMIICKzCCAdKgAwIBAgIIBXxj3s8NU+owCgYIKoZIzj0EAwIwbDELMAkGA1UEBhMC\nSlAxDjAMBgNVBAgTBVRva3lvMREwDwYDVQQHEwhTaGluanVrdTEVMBMGA1UEChMM\nU2NhbGFyLCBJbmMuMSMwIQYDVQQDExplbnRlcnByaXNlLnNjYWxhci1sYWJzLmNv\nbTAeFw0yMzExMTYwNzExNTdaFw0yNDAyMTUxMzE2NTdaMGwxCzAJBgNVBAYTAkpQ\nMQ4wDAYDVQQIEwVUb2t5bzERMA8GA1UEBxMIU2hpbmp1a3UxFTATBgNVBAoTDFNj\nYWxhciwgSW5jLjEjMCEGA1UEAxMaZW50ZXJwcmlzZS5zY2FsYXItbGFicy5jb20w\nWTATBgcqhkjOPQIBBggqhkjOPQMBBwNCAATJx5gvAr+GZAHcBpUvDFDsUlFo4GNw\npRfsntzwStIP8ac3dew7HT4KbGBWei0BvIthleaqpv0AEP7JT6eYAkNvo14wXDAO\nBgNVHQ8BAf8EBAMCBaAwHQYDVR0lBBYwFAYIKwYBBQUHAwEGCCsGAQUFBwMCMAwG\nA1UdEwEB/wQCMAAwHQYDVR0OBBYEFMIe+XuuZcnDX1c3TmUPlu3kNv/wMAoGCCqG\nSM49BAMCA0cAMEQCIGGlqKpgv+KW+Z1ZkjfMHjSGeUZKBLwfMtErVyc9aTdIAiAy\nvsZyZP6Or9o40x3l3pw/BT7wvy93Jm0T4vtVQH6Zuw==\n-----END CERTIFICATE-----
+    ```
+  </TabItem>
+  <TabItem value="scalardb-analytics-with-spark-trial" label="ScalarDB Analytics with Spark (トライアルライセンス)">
+    ```apacheconf
+    spark.sql.catalog.scalardb_catalog.license.key <YOUR_LICENSE_KEY>
+    spark.sql.catalog.scalardb_catalog.license.cert_pem -----BEGIN CERTIFICATE-----\nMIICIzCCAcigAwIBAgIIKT9LIGX1TJQwCgYIKoZIzj0EAwIwZzELMAkGA1UEBhMC\nSlAxDjAMBgNVBAgTBVRva3lvMREwDwYDVQQHEwhTaGluanVrdTEVMBMGA1UEChMM\nU2NhbGFyLCBJbmMuMR4wHAYDVQQDExV0cmlhbC5zY2FsYXItbGFicy5jb20wHhcN\nMjMxMTE2MDcxMDM5WhcNMjQwMjE1MTMxNTM5WjBnMQswCQYDVQQGEwJKUDEOMAwG\nA1UECBMFVG9reW8xETAPBgNVBAcTCFNoaW5qdWt1MRUwEwYDVQQKEwxTY2FsYXIs\nIEluYy4xHjAcBgNVBAMTFXRyaWFsLnNjYWxhci1sYWJzLmNvbTBZMBMGByqGSM49\nAgEGCCqGSM49AwEHA0IABBSkIYAk7r5FRDf5qRQ7dbD3ib5g3fb643h4hqCtK+lC\nwM4AUr+PPRoquAy+Ey2sWEvYrWtl2ZjiYyyiZw8slGCjXjBcMA4GA1UdDwEB/wQE\nAwIFoDAdBgNVHSUEFjAUBggrBgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIw\nADAdBgNVHQ4EFgQUbFyOWFrsjkkOvjw6vK3gGUADGOcwCgYIKoZIzj0EAwIDSQAw\nRgIhAKwigOb74z9BdX1+dUpeVG8WrzLTIqdIU0w+9jhAueXoAiEA6cniJ3qsP4j7\nsck62kHnFpH1fCUOc/b/B8ZtfeXI2Iw=\n-----END CERTIFICATE-----
+    ```
+  </TabItem>
+</Tabs>
+
+## ScalarDL
+
+使用している製品を選択して、製品のライセンスキーと証明書の構成を確認します。
+
+### ScalarDL Ledger
+
+<Tabs groupId="scalardl-ledger" queryString>
+  <TabItem value="scalardl-ledger" label="ScalarDL Ledger">
+    ```properties
+    scalar.dl.licensing.license_key=<YOUR_LICENSE_KEY>
+    scalar.dl.licensing.license_check_cert_pem=-----BEGIN CERTIFICATE-----\nMIICKzCCAdKgAwIBAgIIBXxj3s8NU+owCgYIKoZIzj0EAwIwbDELMAkGA1UEBhMC\nSlAxDjAMBgNVBAgTBVRva3lvMREwDwYDVQQHEwhTaGluanVrdTEVMBMGA1UEChMM\nU2NhbGFyLCBJbmMuMSMwIQYDVQQDExplbnRlcnByaXNlLnNjYWxhci1sYWJzLmNv\nbTAeFw0yMzExMTYwNzExNTdaFw0yNDAyMTUxMzE2NTdaMGwxCzAJBgNVBAYTAkpQ\nMQ4wDAYDVQQIEwVUb2t5bzERMA8GA1UEBxMIU2hpbmp1a3UxFTATBgNVBAoTDFNj\nYWxhciwgSW5jLjEjMCEGA1UEAxMaZW50ZXJwcmlzZS5zY2FsYXItbGFicy5jb20w\nWTATBgcqhkjOPQIBBggqhkjOPQMBBwNCAATJx5gvAr+GZAHcBpUvDFDsUlFo4GNw\npRfsntzwStIP8ac3dew7HT4KbGBWei0BvIthleaqpv0AEP7JT6eYAkNvo14wXDAO\nBgNVHQ8BAf8EBAMCBaAwHQYDVR0lBBYwFAYIKwYBBQUHAwEGCCsGAQUFBwMCMAwG\nA1UdEwEB/wQCMAAwHQYDVR0OBBYEFMIe+XuuZcnDX1c3TmUPlu3kNv/wMAoGCCqG\nSM49BAMCA0cAMEQCIGGlqKpgv+KW+Z1ZkjfMHjSGeUZKBLwfMtErVyc9aTdIAiAy\nvsZyZP6Or9o40x3l3pw/BT7wvy93Jm0T4vtVQH6Zuw==\n-----END CERTIFICATE-----
+    ```
+  </TabItem>
+  <TabItem value="scalardl-ledger-trial" label="ScalarDL Ledger (トライアルライセンス)">
+    ```properties
+    scalar.dl.licensing.license_key=<YOUR_LICENSE_KEY>
+    scalar.dl.licensing.license_check_cert_pem=-----BEGIN CERTIFICATE-----\nMIICIzCCAcigAwIBAgIIKT9LIGX1TJQwCgYIKoZIzj0EAwIwZzELMAkGA1UEBhMC\nSlAxDjAMBgNVBAgTBVRva3lvMREwDwYDVQQHEwhTaGluanVrdTEVMBMGA1UEChMM\nU2NhbGFyLCBJbmMuMR4wHAYDVQQDExV0cmlhbC5zY2FsYXItbGFicy5jb20wHhcN\nMjMxMTE2MDcxMDM5WhcNMjQwMjE1MTMxNTM5WjBnMQswCQYDVQQGEwJKUDEOMAwG\nA1UECBMFVG9reW8xETAPBgNVBAcTCFNoaW5qdWt1MRUwEwYDVQQKEwxTY2FsYXIs\nIEluYy4xHjAcBgNVBAMTFXRyaWFsLnNjYWxhci1sYWJzLmNvbTBZMBMGByqGSM49\nAgEGCCqGSM49AwEHA0IABBSkIYAk7r5FRDf5qRQ7dbD3ib5g3fb643h4hqCtK+lC\nwM4AUr+PPRoquAy+Ey2sWEvYrWtl2ZjiYyyiZw8slGCjXjBcMA4GA1UdDwEB/wQE\nAwIFoDAdBgNVHSUEFjAUBggrBgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIw\nADAdBgNVHQ4EFgQUbFyOWFrsjkkOvjw6vK3gGUADGOcwCgYIKoZIzj0EAwIDSQAw\nRgIhAKwigOb74z9BdX1+dUpeVG8WrzLTIqdIU0w+9jhAueXoAiEA6cniJ3qsP4j7\nsck62kHnFpH1fCUOc/b/B8ZtfeXI2Iw=\n-----END CERTIFICATE-----
+    ```
+  </TabItem>
+</Tabs>
+
+### ScalarDL Auditor
+
+<Tabs groupId="scalardl-auditor" queryString>
+  <TabItem value="scalardl-auditor" label="ScalarDL Auditor">
+    ```properties
+    scalar.dl.licensing.license_key=<YOUR_LICENSE_KEY>
+    scalar.dl.licensing.license_check_cert_pem=-----BEGIN CERTIFICATE-----\nMIICKzCCAdKgAwIBAgIIBXxj3s8NU+owCgYIKoZIzj0EAwIwbDELMAkGA1UEBhMC\nSlAxDjAMBgNVBAgTBVRva3lvMREwDwYDVQQHEwhTaGluanVrdTEVMBMGA1UEChMM\nU2NhbGFyLCBJbmMuMSMwIQYDVQQDExplbnRlcnByaXNlLnNjYWxhci1sYWJzLmNv\nbTAeFw0yMzExMTYwNzExNTdaFw0yNDAyMTUxMzE2NTdaMGwxCzAJBgNVBAYTAkpQ\nMQ4wDAYDVQQIEwVUb2t5bzERMA8GA1UEBxMIU2hpbmp1a3UxFTATBgNVBAoTDFNj\nYWxhciwgSW5jLjEjMCEGA1UEAxMaZW50ZXJwcmlzZS5zY2FsYXItbGFicy5jb20w\nWTATBgcqhkjOPQIBBggqhkjOPQMBBwNCAATJx5gvAr+GZAHcBpUvDFDsUlFo4GNw\npRfsntzwStIP8ac3dew7HT4KbGBWei0BvIthleaqpv0AEP7JT6eYAkNvo14wXDAO\nBgNVHQ8BAf8EBAMCBaAwHQYDVR0lBBYwFAYIKwYBBQUHAwEGCCsGAQUFBwMCMAwG\nA1UdEwEB/wQCMAAwHQYDVR0OBBYEFMIe+XuuZcnDX1c3TmUPlu3kNv/wMAoGCCqG\nSM49BAMCA0cAMEQCIGGlqKpgv+KW+Z1ZkjfMHjSGeUZKBLwfMtErVyc9aTdIAiAy\nvsZyZP6Or9o40x3l3pw/BT7wvy93Jm0T4vtVQH6Zuw==\n-----END CERTIFICATE-----
+    ```
+  </TabItem>
+  <TabItem value="scalardl-auditor-trial" label="ScalarDL Auditor (トライアルライセンス)">
+    ```properties
+    scalar.dl.licensing.license_key=<YOUR_LICENSE_KEY>
+    scalar.dl.licensing.license_check_cert_pem=-----BEGIN CERTIFICATE-----\nMIICIzCCAcigAwIBAgIIKT9LIGX1TJQwCgYIKoZIzj0EAwIwZzELMAkGA1UEBhMC\nSlAxDjAMBgNVBAgTBVRva3lvMREwDwYDVQQHEwhTaGluanVrdTEVMBMGA1UEChMM\nU2NhbGFyLCBJbmMuMR4wHAYDVQQDExV0cmlhbC5zY2FsYXItbGFicy5jb20wHhcN\nMjMxMTE2MDcxMDM5WhcNMjQwMjE1MTMxNTM5WjBnMQswCQYDVQQGEwJKUDEOMAwG\nA1UECBMFVG9reW8xETAPBgNVBAcTCFNoaW5qdWt1MRUwEwYDVQQKEwxTY2FsYXIs\nIEluYy4xHjAcBgNVBAMTFXRyaWFsLnNjYWxhci1sYWJzLmNvbTBZMBMGByqGSM49\nAgEGCCqGSM49AwEHA0IABBSkIYAk7r5FRDf5qRQ7dbD3ib5g3fb643h4hqCtK+lC\nwM4AUr+PPRoquAy+Ey2sWEvYrWtl2ZjiYyyiZw8slGCjXjBcMA4GA1UdDwEB/wQE\nAwIFoDAdBgNVHSUEFjAUBggrBgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIw\nADAdBgNVHQ4EFgQUbFyOWFrsjkkOvjw6vK3gGUADGOcwCgYIKoZIzj0EAwIDSQAw\nRgIhAKwigOb74z9BdX1+dUpeVG8WrzLTIqdIU0w+9jhAueXoAiEA6cniJ3qsP4j7\nsck62kHnFpH1fCUOc/b/B8ZtfeXI2Iw=\n-----END CERTIFICATE-----
+    ```
+  </TabItem>
+</Tabs>
diff --git a/src/theme/NavbarItem/HtmlNavbarItem.tsx b/src/theme/NavbarItem/HtmlNavbarItem.tsx
@@ -5,64 +5,89 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import clsx from 'clsx';
+import { useLocation } from '@docusaurus/router';
+import type { Props } from '@theme/NavbarItem/HtmlNavbarItem';
 
-import type {Props} from '@theme/NavbarItem/HtmlNavbarItem';
+function loadGoogleTranslateScript(callback: () => void) {
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    const existingScript = document.getElementById('google-translate-script');
+    if (!existingScript) {
+      const addScript = document.createElement('script');
+      addScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+      addScript.async = true;
+      addScript.id = 'google-translate-script';
+      addScript.onload = callback; // Trigger callback once loaded.
+      document.body.appendChild(addScript);
+    } else {
+      callback(); // Script already exists, proceed to callback directly.
+    }
+  }
+}
 
-function loadGoogleTranslateScript() {
-  if (typeof window !== "undefined" && typeof document !== "undefined") {
-    const addScript = document.createElement('script');
-    addScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
-    addScript.async = true;
-    document.body.appendChild(addScript);
-    window.googleTranslateElementInit = async function () {
-      // Function to initialize the Google Translate widget
-      const initGoogleTranslate = () => {
-        new google.translate.TranslateElement(
+function initializeGoogleTranslate() {
+  if (typeof window !== 'undefined' && window.google && window.google.translate) {
+    const targetElement = document.getElementById('google_translate_element');
+    if (targetElement && !window.googleTranslateElement) {
+      try {
+        window.googleTranslateElement = new window.google.translate.TranslateElement(
           { pageLanguage: 'en', includedLanguages: 'ja' },
           'google_translate_element'
         );
-      };
-
-      // Function will wait for element id to be available
-      const waitForElement = () => {
-        return new Promise<void>((resolve) => {
-          const checkElement = () => {
-            const targetElement = document.getElementById('google_translate_element');
-            if (targetElement) {
-              // If the target element is available, resolve the Promise
-              resolve();
-            } else {
-              // If the target element is not available, wait and check again
-              setTimeout(checkElement, 100); // Adjust the time delay as needed
-            }
-          };
-          checkElement(); // Start checking for the element
-        });
-      };
-    
-      // Wait for the target element to be available before initializing the widget
-      await waitForElement();
-      initGoogleTranslate();
-    };
-    
+      } catch (error) {
+        console.error('Error initializing Google Translate:', error);
+      }
+    }
   }
 }
+
+function removeGoogleTranslateWidget() {
+  const existingElement = document.getElementById('google_translate_element');
+  if (existingElement) existingElement.innerHTML = ''; // Clear content.
+  const script = document.getElementById('google-translate-script');
+  if (script) script.remove(); // Remove the Google Translate script.
+  window.googleTranslateElement = null;
+}
+
 export default function HtmlNavbarItem({
   value,
   className,
   mobile = false,
   isDropdownItem = false,
 }: Props): JSX.Element {
   const Comp = isDropdownItem ? 'li' : 'div';
+  const { pathname } = useLocation();
+
+  const allowedVersions = ['3.4', '3.5', '3.6', '3.7', '3.8', '3.9', '3.10', '3.11', '3.12'];
+  const versionMatch = pathname.match(/\/docs\/(\d+\.\d+)\//);
+  const currentVersion = versionMatch ? versionMatch[1] : null;
+
   useEffect(() => {
-    if(process.env.NODE_ENV !== 'development') {
-    loadGoogleTranslateScript();
+    if (currentVersion && allowedVersions.includes(currentVersion)) {
+      // Ensure Google Translate script is loaded.
+      loadGoogleTranslateScript(() => {
+        if (!sessionStorage.getItem('googleTranslateInitialized')) {
+          window.googleTranslateElementInit = () => {
+            initializeGoogleTranslate();
+            sessionStorage.setItem('googleTranslateInitialized', 'true');
+          };
+        } else {
+          initializeGoogleTranslate(); // Re-initialize if already loaded.
+        }
+      });
     } else {
-      console.log('Google Translate Not loaded in Dev');
+      // Clear widget if on an unallowed version.
+      removeGoogleTranslateWidget();
+      sessionStorage.removeItem('googleTranslateInitialized');
     }
-  },[]);
+  }, [currentVersion]);
+
+  // Hide component if version is not in allowed versions.
+  if (currentVersion && !allowedVersions.includes(currentVersion)) {
+    return null;
+  }
+
   return (
     <Comp
       className={clsx(
@@ -72,7 +97,7 @@ export default function HtmlNavbarItem({
         },
         className,
       )}
-      dangerouslySetInnerHTML={{__html: value}}
+      dangerouslySetInnerHTML={{ __html: value }}
     />
   );
-}
+}
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js
