feat(theme): add initial i18n support

Author: sserrata

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx

@@ -9,6 +9,7 @@
 import React, { useState } from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
+import { translate } from "@docusaurus/Translate";
 import Accept from "@theme/ApiExplorer/Accept";
 import Authorization from "@theme/ApiExplorer/Authorization";
 import Body from "@theme/ApiExplorer/Body";
@@ -24,6 +25,7 @@ import {
 } from "@theme/ApiExplorer/Response/slice";
 import Server from "@theme/ApiExplorer/Server";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import { OPENAPI_REQUEST } from "@theme/translationIds";
 import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 import * as sdk from "postman-collection";
@@ -261,10 +263,14 @@ function Request({ item }: { item: ApiItem }) {
                   setExpandBody(!expandBody);
                 }}
               >
-                Body
+                {translate({ id: OPENAPI_REQUEST.BODY_TITLE, message: "Body" })}
                 {requestBodyRequired && (
                   <span className="openapi-schema__required">
-                    &nbsp;required
+                    &nbsp;
+                    {translate({
+                      id: OPENAPI_REQUEST.REQUIRED_LABEL,
+                      message: "required",
+                    })}
                   </span>
                 )}
               </summary>
@@ -290,14 +296,20 @@ function Request({ item }: { item: ApiItem }) {
                   setExpandAccept(!expandAccept);
                 }}
               >
-                Accept
+                {translate({
+                  id: OPENAPI_REQUEST.ACCEPT_TITLE,
+                  message: "Accept",
+                })}
               </summary>
               <Accept />
             </details>
           )}
           {showRequestButton && item.method !== "event" && (
             <button className="openapi-explorer__request-btn" type="submit">
-              Send API Request
+              {translate({
+                id: OPENAPI_REQUEST.SEND_BUTTON,
+                message: "Send API Request",
+              })}
             </button>
           )}
         </div>

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/index.tsx

@@ -9,10 +9,12 @@ import React from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
 import { usePrismTheme } from "@docusaurus/theme-common";
+import { translate } from "@docusaurus/Translate";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
+import { OPENAPI_RESPONSE } from "@theme/translationIds";
 import clsx from "clsx";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 
@@ -74,7 +76,9 @@ function Response({ item }: { item: ApiItem }) {
   return (
     <div className="openapi-explorer__response-container">
       <div className="openapi-explorer__response-title-container">
-        <span className="openapi-explorer__response-title">Response</span>
+        <span className="openapi-explorer__response-title">
+          {translate({ id: OPENAPI_RESPONSE.TITLE, message: "Response" })}
+        </span>
         <span
           className="openapi-explorer__response-clear-btn"
           onClick={() => {
@@ -83,7 +87,7 @@ function Response({ item }: { item: ApiItem }) {
             dispatch(clearHeaders());
           }}
         >
-          Clear
+          {translate({ id: OPENAPI_RESPONSE.CLEAR, message: "Clear" })}
         </span>
       </div>
       <div
@@ -117,14 +121,23 @@ function Response({ item }: { item: ApiItem }) {
               >
                 {prettyResponse || (
                   <p className="openapi-explorer__response-placeholder-message">
-                    Click the <code>Send API Request</code> button above and see
-                    the response here!
+                    {translate({
+                      id: OPENAPI_RESPONSE.PLACEHOLDER,
+                      message:
+                        "Click the <code>Send API Request</code> button above and see the response here!",
+                    })}
                   </p>
                 )}
               </ApiCodeBlock>
             </TabItem>
             {/* @ts-ignore */}
-            <TabItem label="Headers" value="headers">
+            <TabItem
+              label={translate({
+                id: OPENAPI_RESPONSE.HEADERS_TAB,
+                message: "Headers",
+              })}
+              value="headers"
+            >
               {/* @ts-ignore */}
               <ApiCodeBlock
                 className="openapi-explorer__code-block openapi-response__status-headers"
@@ -145,8 +158,11 @@ function Response({ item }: { item: ApiItem }) {
           </div>
         ) : (
           <p className="openapi-explorer__response-placeholder-message">
-            Click the <code>Send API Request</code> button above and see the
-            response here!
+            {translate({
+              id: OPENAPI_RESPONSE.PLACEHOLDER,
+              message:
+                "Click the <code>Send API Request</code> button above and see the response here!",
+            })}
           </p>
         )}
       </div>

packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx

@@ -20,8 +20,10 @@ import {
   useTabs,
 } from "@docusaurus/theme-common/internal";
 import { TabItemProps } from "@docusaurus/theme-common/lib/utils/tabsUtils";
+import { translate } from "@docusaurus/Translate";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import Heading from "@theme/Heading";
+import { OPENAPI_TABS } from "@theme/translationIds";
 import clsx from "clsx";
 
 export interface TabListProps extends TabProps {
@@ -35,7 +37,10 @@ function TabList({
   selectedValue,
   selectValue,
   tabValues,
-  label = "Responses",
+  label = translate({
+    id: OPENAPI_TABS.RESPONSES_LABEL,
+    message: "Responses",
+  }),
   id = "responses",
 }: TabListProps & ReturnType<typeof useTabs>) {
   const tabRefs: (HTMLLIElement | null)[] = [];

packages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts

@@ -0,0 +1,24 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+export const OPENAPI_RESPONSE = {
+  TITLE: "theme.openapi.response.title",
+  CLEAR: "theme.openapi.response.clear",
+  PLACEHOLDER: "theme.openapi.response.placeholder",
+  HEADERS_TAB: "theme.openapi.response.headersTab",
+};
+
+export const OPENAPI_TABS = {
+  RESPONSES_LABEL: "theme.openapi.tabs.responses.label",
+};
+
+export const OPENAPI_REQUEST = {
+  BODY_TITLE: "theme.openapi.request.body.title",
+  ACCEPT_TITLE: "theme.openapi.request.accept.title",
+  SEND_BUTTON: "theme.openapi.request.sendButton",
+  REQUIRED_LABEL: "theme.openapi.request.requiredLabel",
+};