From 890e247c97eb1da3dfb49a68581fa90e99d9aceb Mon Sep 17 00:00:00 2001 From: Steven Serrata <9343811+sserrata@users.noreply.github.com> Date: Thu, 17 Jul 2025 11:29:04 -0500 Subject: [PATCH 1/3] feat(theme): add initial i18n support --- .../src/theme/ApiExplorer/Request/index.tsx | 20 ++++++++++--- .../src/theme/ApiExplorer/Response/index.tsx | 30 ++++++++++++++----- .../src/theme/ApiTabs/index.tsx | 7 ++++- .../src/theme/translationIds.ts | 24 +++++++++++++++ 4 files changed, 69 insertions(+), 12 deletions(-) create mode 100644 packages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx index 30f7bcc69..7036385eb 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx +++ b/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 && ( -  required +   + {translate({ + id: OPENAPI_REQUEST.REQUIRED_LABEL, + message: "required", + })} )} @@ -290,14 +296,20 @@ function Request({ item }: { item: ApiItem }) { setExpandAccept(!expandAccept); }} > - Accept + {translate({ + id: OPENAPI_REQUEST.ACCEPT_TITLE, + message: "Accept", + })} )} {showRequestButton && item.method !== "event" && ( )} diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/index.tsx index 30b54dbc1..f5afd532e 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/index.tsx +++ b/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 (
- Response + + {translate({ id: OPENAPI_RESPONSE.TITLE, message: "Response" })} + { @@ -83,7 +87,7 @@ function Response({ item }: { item: ApiItem }) { dispatch(clearHeaders()); }} > - Clear + {translate({ id: OPENAPI_RESPONSE.CLEAR, message: "Clear" })}
{prettyResponse || (

- Click the Send API Request button above and see - the response here! + {translate({ + id: OPENAPI_RESPONSE.PLACEHOLDER, + message: + "Click the Send API Request button above and see the response here!", + })}

)} {/* @ts-ignore */} - + {/* @ts-ignore */} ) : (

- Click the Send API Request button above and see the - response here! + {translate({ + id: OPENAPI_RESPONSE.PLACEHOLDER, + message: + "Click the Send API Request button above and see the response here!", + })}

)}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx index bcd309d77..7545069ae 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx +++ b/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) { const tabRefs: (HTMLLIElement | null)[] = []; diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts b/packages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts new file mode 100644 index 000000000..15ba46fcc --- /dev/null +++ b/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", +}; From 8b85f978d2034ba970667a2bcdb63def0aab9505 Mon Sep 17 00:00:00 2001 From: Steven Serrata <9343811+sserrata@users.noreply.github.com> Date: Thu, 17 Jul 2025 12:07:14 -0500 Subject: [PATCH 2/3] Add i18n wrappers across more theme components --- .../theme/ApiExplorer/Authorization/index.tsx | 52 ++++++++++++++++--- .../ApiExplorer/FormFileUpload/index.tsx | 7 ++- .../theme/ApiExplorer/FormTextInput/index.tsx | 9 +++- .../theme/ApiExplorer/LiveEditor/index.tsx | 10 +++- .../ParamFormItems/ParamArrayFormItem.tsx | 11 +++- .../ParamFormItems/ParamBooleanFormItem.tsx | 11 +++- .../ParamMultiSelectFormItem.tsx | 11 +++- .../ParamFormItems/ParamSelectFormItem.tsx | 11 +++- .../theme/ApiExplorer/ParamOptions/index.tsx | 12 ++++- .../src/theme/ApiExplorer/Request/index.tsx | 47 ++++++++++++++--- .../src/theme/ApiExplorer/Server/index.tsx | 12 ++++- .../src/theme/ResponseExamples/index.tsx | 26 ++++++++-- .../src/theme/translationIds.ts | 37 +++++++++++++ 13 files changed, 226 insertions(+), 30 deletions(-) diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx index eccd7571c..e0cf89a82 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx @@ -7,10 +7,12 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; import FormItem from "@theme/ApiExplorer/FormItem"; import FormSelect from "@theme/ApiExplorer/FormSelect"; import FormTextInput from "@theme/ApiExplorer/FormTextInput"; import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks"; +import { OPENAPI_AUTH } from "@theme/translationIds"; import { setAuthData, setSelectedAuth } from "./slice"; @@ -45,9 +47,18 @@ function Authorization() { {selectedAuth.map((a: any) => { if (a.type === "http" && a.scheme === "bearer") { return ( - + ) => { @@ -67,9 +78,18 @@ function Authorization() { if (a.type === "oauth2") { return ( - + ) => { @@ -90,9 +110,17 @@ function Authorization() { if (a.type === "http" && a.scheme === "basic") { return ( - + ) => { const value = e.target.value; @@ -106,9 +134,17 @@ function Authorization() { }} /> - + ) => { diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx index a221d10f2..386f2d7cf 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx @@ -7,7 +7,9 @@ import React, { useState } from "react"; +import { translate } from "@docusaurus/Translate"; import FloatingButton from "@theme/ApiExplorer/FloatingButton"; +import { OPENAPI_FORM_FILE_UPLOAD } from "@theme/translationIds"; import MagicDropzone from "react-magic-dropzone"; type PreviewFile = { preview: string } & File; @@ -102,7 +104,10 @@ function FormFileUpload({ placeholder, onChange }: Props) { setAndNotifyFile(undefined); }} > - Clear + {translate({ + id: OPENAPI_FORM_FILE_UPLOAD.CLEAR_BUTTON, + message: "Clear", + })} diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx index a429bb6db..31545a6fc 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx @@ -8,7 +8,9 @@ // @ts-nocheck import React from "react"; +import { translate } from "@docusaurus/Translate"; import { ErrorMessage } from "@hookform/error-message"; +import { OPENAPI_FORM } from "@theme/translationIds"; import clsx from "clsx"; import { useFormContext } from "react-hook-form"; @@ -41,7 +43,12 @@ function FormTextInput({ {paramName ? ( ( diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx index b119cb4b4..dc1e8b9b5 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx @@ -7,12 +7,14 @@ import React, { useEffect, useState } from "react"; +import { translate } from "@docusaurus/Translate"; import { ErrorMessage } from "@hookform/error-message"; import { nanoid } from "@reduxjs/toolkit"; import FormSelect from "@theme/ApiExplorer/FormSelect"; import FormTextInput from "@theme/ApiExplorer/FormTextInput"; import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice"; import { useTypedDispatch } from "@theme/ApiItem/hooks"; +import { OPENAPI_FORM } from "@theme/translationIds"; import { Controller, useFormContext } from "react-hook-form"; export interface ParamProps { @@ -121,7 +123,14 @@ export default function ParamArrayFormItem({ param }: ParamProps) { <> ( <> diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx index 5774679f1..908a64635 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx @@ -7,10 +7,12 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; import { ErrorMessage } from "@hookform/error-message"; import FormSelect from "@theme/ApiExplorer/FormSelect"; import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice"; import { useTypedDispatch } from "@theme/ApiItem/hooks"; +import { OPENAPI_FORM } from "@theme/translationIds"; import { Controller, useFormContext } from "react-hook-form"; export interface ParamProps { @@ -31,7 +33,14 @@ export default function ParamBooleanFormItem({ param }: ParamProps) { <> ( ( ( {showOptional - ? "Hide optional parameters" - : "Show optional parameters"} + ? translate({ + id: OPENAPI_PARAM_OPTIONS.HIDE_OPTIONAL, + message: "Hide optional parameters", + }) + : translate({ + id: OPENAPI_PARAM_OPTIONS.SHOW_OPTIONAL, + message: "Show optional parameters", + })}
{ - dispatch(setResponse("Fetching...")); + dispatch( + setResponse( + translate({ + id: OPENAPI_REQUEST.FETCHING_MESSAGE, + message: "Fetching...", + }) + ) + ); try { await delay(1200); const res = await makeRequest(postmanRequest, proxy, body); @@ -130,7 +137,14 @@ function Request({ item }: { item: ApiItem }) { } } catch (e) { console.log(e); - dispatch(setResponse("Connection failed")); + dispatch( + setResponse( + translate({ + id: OPENAPI_REQUEST.CONNECTION_FAILED, + message: "Connection failed", + }) + ) + ); dispatch(clearCode()); dispatch(clearHeaders()); } @@ -180,20 +194,31 @@ function Request({ item }: { item: ApiItem }) { onSubmit={methods.handleSubmit(onSubmit)} >
- Request + + {translate({ + id: OPENAPI_REQUEST.REQUEST_TITLE, + message: "Request", + })} + {allDetailsExpanded ? ( - Collapse all + {translate({ + id: OPENAPI_REQUEST.COLLAPSE_ALL, + message: "Collapse all", + })} ) : ( - Expand all + {translate({ + id: OPENAPI_REQUEST.EXPAND_ALL, + message: "Expand all", + })} )}
@@ -210,7 +235,10 @@ function Request({ item }: { item: ApiItem }) { setExpandServer(!expandServer); }} > - Base URL + {translate({ + id: OPENAPI_REQUEST.BASE_URL_TITLE, + message: "Base URL", + })} @@ -227,7 +255,7 @@ function Request({ item }: { item: ApiItem }) { setExpandAuth(!expandAuth); }} > - Auth + {translate({ id: OPENAPI_REQUEST.AUTH_TITLE, message: "Auth" })} @@ -246,7 +274,10 @@ function Request({ item }: { item: ApiItem }) { setExpandParams(!expandParams); }} > - Parameters + {translate({ + id: OPENAPI_REQUEST.PARAMETERS_TITLE, + message: "Parameters", + })} diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx index c627d463a..0777a6adb 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx @@ -7,11 +7,13 @@ import React, { useState } from "react"; +import { translate } from "@docusaurus/Translate"; import FloatingButton from "@theme/ApiExplorer/FloatingButton"; import FormItem from "@theme/ApiExplorer/FormItem"; import FormSelect from "@theme/ApiExplorer/FormSelect"; import FormTextInput from "@theme/ApiExplorer/FormTextInput"; import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks"; +import { OPENAPI_SERVER } from "@theme/translationIds"; import { setServer, setServerVariable } from "./slice"; @@ -57,7 +59,10 @@ function Server() { } } return ( - setIsEditing(true)} label="Edit"> + setIsEditing(true)} + label={translate({ id: OPENAPI_SERVER.EDIT_BUTTON, message: "Edit" })} + > {url} @@ -68,7 +73,10 @@ function Server() { } return (
- setIsEditing(false)} label="Hide"> + setIsEditing(false)} + label={translate({ id: OPENAPI_SERVER.HIDE_BUTTON, message: "Hide" })} + > s.url)} diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx index c0df5864e..6013f2136 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx @@ -7,9 +7,11 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; import CodeSamples from "@theme/CodeSamples"; import Markdown from "@theme/Markdown"; import TabItem from "@theme/TabItem"; +import { OPENAPI_RESPONSE_EXAMPLES } from "@theme/translationIds"; import { sampleResponseFromSchema } from "docusaurus-plugin-openapi-docs/lib/openapi/createResponseExample"; import format from "xml-formatter"; @@ -111,7 +113,13 @@ export const ResponseExample: React.FC = ({ return ( // @ts-ignore - + {responseExample.summary && ( {responseExample.summary} @@ -163,7 +171,13 @@ export const ExampleFromSchema: React.FC = ({ } return ( // @ts-ignore - + ); @@ -176,7 +190,13 @@ export const ExampleFromSchema: React.FC = ({ ) { return ( // @ts-ignore - + Date: Thu, 17 Jul 2025 12:52:29 -0500 Subject: [PATCH 3/3] localize remaining theme components --- .../src/theme/ApiExplorer/Body/index.tsx | 18 ++- .../src/theme/ApiExplorer/FormItem/index.tsx | 9 +- .../ApiExplorer/SecuritySchemes/index.tsx | 136 +++++++++++++++--- .../src/theme/ParamsDetails/index.tsx | 11 +- .../src/theme/ParamsItem/index.tsx | 53 +++++-- .../src/theme/RequestSchema/index.tsx | 13 +- .../src/theme/ResponseSchema/index.tsx | 8 +- .../src/theme/SchemaItem/index.tsx | 58 ++++++-- .../src/theme/StatusCodes/index.tsx | 15 +- .../src/theme/translationIds.ts | 32 +++++ 10 files changed, 307 insertions(+), 46 deletions(-) diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/index.tsx index 36ba7151e..f21092452 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/index.tsx @@ -7,6 +7,8 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; + import json2xml from "@theme/ApiExplorer/Body/json2xml"; import FormFileUpload from "@theme/ApiExplorer/FormFileUpload"; import FormItem from "@theme/ApiExplorer/FormItem"; @@ -17,6 +19,7 @@ import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks"; import Markdown from "@theme/Markdown"; import SchemaTabs from "@theme/SchemaTabs"; import TabItem from "@theme/TabItem"; +import { OPENAPI_BODY, OPENAPI_REQUEST } from "@theme/translationIds"; import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types"; import format from "xml-formatter"; @@ -98,7 +101,10 @@ function Body({ return ( { if (file === undefined) { dispatch(clearRawBody()); @@ -302,7 +308,10 @@ function Body({ {/* @ts-ignore */} @@ -334,7 +343,10 @@ function Body({ {/* @ts-ignore */} diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormItem/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormItem/index.tsx index 46c6e59c4..baa69ae6b 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormItem/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormItem/index.tsx @@ -7,6 +7,9 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; +import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds"; + import clsx from "clsx"; export interface Props { @@ -24,7 +27,11 @@ function FormItem({ label, type, required, children, className }: Props) { )} {type && — {type}} - {required && required} + {required && ( + + {translate({ id: OPENAPI_SCHEMA_ITEM.REQUIRED, message: "required" })} + + )}
{children}
); diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/SecuritySchemes/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/SecuritySchemes/index.tsx index 8a0dda94c..3a121ec98 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/SecuritySchemes/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/SecuritySchemes/index.tsx @@ -7,6 +7,9 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; +import { OPENAPI_SECURITY_SCHEMES } from "@theme/translationIds"; + import Link from "@docusaurus/Link"; import { useTypedSelector } from "@theme/ApiItem/hooks"; @@ -48,16 +51,31 @@ function SecuritySchemes(props: any) { }} > - name:{" "} + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.NAME, + message: "name:", + })} + {" "} {name ?? key} - type: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.TYPE, + message: "type:", + })} + {" "} {type} {scopes && scopes.length > 0 && ( - scopes: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.SCOPES, + message: "scopes:", + })} + {" "} {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"} @@ -89,16 +107,31 @@ function SecuritySchemes(props: any) { }} > - name:{" "} + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.NAME, + message: "name:", + })} + {" "} {name ?? key} - type: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.TYPE, + message: "type:", + })} + {" "} {type} {scopes && scopes.length > 0 && ( - scopes: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.SCOPES, + message: "scopes:", + })} + {" "} {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"} @@ -128,15 +161,30 @@ function SecuritySchemes(props: any) { }} > - name:{" "} + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.NAME, + message: "name:", + })} + {" "} {auth.name ?? auth.key} - type: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.TYPE, + message: "type:", + })} + {" "} {auth.type} - in: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.IN, + message: "in:", + })} + {" "} {auth.in} @@ -156,16 +204,31 @@ function SecuritySchemes(props: any) { }} > - name:{" "} + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.NAME, + message: "name:", + })} + {" "} {name ?? key} - type: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.TYPE, + message: "type:", + })} + {" "} {type} {scopes && scopes.length > 0 && ( - scopes: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.SCOPES, + message: "scopes:", + })} + {" "} {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"} @@ -198,16 +261,31 @@ function SecuritySchemes(props: any) { }} > - name:{" "} + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.NAME, + message: "name:", + })} + {" "} {name ?? key} - type: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.TYPE, + message: "type:", + })} + {" "} {type} {scopes && scopes.length > 0 && ( - scopes: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.SCOPES, + message: "scopes:", + })} + {" "} {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"} @@ -226,7 +304,12 @@ function SecuritySchemes(props: any) { {flows && ( - flows: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.FLOWS, + message: "flows:", + })} + {" "} {JSON.stringify(flows, null, 2)} @@ -248,16 +331,31 @@ function SecuritySchemes(props: any) { }} > - name:{" "} + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.NAME, + message: "name:", + })} + {" "} {name ?? key} - type: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.TYPE, + message: "type:", + })} + {" "} {type} {scopes && scopes.length > 0 && ( - scopes: + + {translate({ + id: OPENAPI_SECURITY_SCHEMES.SCOPES, + message: "scopes:", + })} + {" "} {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"} diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx index ad74e709f..e0beb13cb 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx @@ -7,6 +7,9 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; +import { OPENAPI_PARAMS_DETAILS } from "@theme/translationIds"; + import BrowserOnly from "@docusaurus/BrowserOnly"; import Details from "@theme/Details"; import ParamsItem from "@theme/ParamsItem"; @@ -31,7 +34,13 @@ const ParamsDetailsComponent: React.FC = ({ parameters }) => { const summaryElement = (

- {`${type.charAt(0).toUpperCase() + type.slice(1)} Parameters`} + {translate( + { + id: OPENAPI_PARAMS_DETAILS.PARAMETERS_TITLE, + message: "{type} Parameters", + }, + { type: type.charAt(0).toUpperCase() + type.slice(1) } + )}

); diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/index.tsx index 863508e3e..94c64f10a 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/index.tsx @@ -7,11 +7,14 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; + import Markdown from "@theme/Markdown"; import SchemaTabs from "@theme/SchemaTabs"; import TabItem from "@theme/TabItem"; /* eslint-disable import/no-extraneous-dependencies*/ import clsx from "clsx"; +import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds"; import { getQualifierMessage, getSchemaName } from "../../markdown/schema"; import { guard, toString } from "../../markdown/utils"; @@ -87,11 +90,15 @@ function ParamsItem({ param, ...rest }: Props) { )); const renderSchemaRequired = guard(required, () => ( - required + + {translate({ id: OPENAPI_SCHEMA_ITEM.REQUIRED, message: "required" })} + )); const renderDeprecated = guard(deprecated, () => ( - deprecated + + {translate({ id: OPENAPI_SCHEMA_ITEM.DEPRECATED, message: "deprecated" })} + )); const renderQualifier = guard(getQualifierMessage(schema), (qualifier) => ( @@ -118,7 +125,12 @@ function ParamsItem({ param, ...rest }: Props) { if (typeof defaultValue === "string") { return (
- Default value: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.DEFAULT_VALUE, + message: "Default value:", + })}{" "} + {defaultValue} @@ -127,7 +139,12 @@ function ParamsItem({ param, ...rest }: Props) { } return (
- Default value: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.DEFAULT_VALUE, + message: "Default value:", + })}{" "} + {JSON.stringify(defaultValue)} @@ -139,7 +156,12 @@ function ParamsItem({ param, ...rest }: Props) { const renderExample = guard(toString(example), (example) => (
- Example: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.EXAMPLE, + message: "Example:", + })}{" "} + {example}
)); @@ -148,7 +170,12 @@ function ParamsItem({ param, ...rest }: Props) { const exampleEntries = Object.entries(examples); return ( <> - Examples: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.EXAMPLES, + message: "Examples:", + })} + {exampleEntries.map(([exampleName, exampleProperties]) => ( // @ts-ignore @@ -156,12 +183,22 @@ function ParamsItem({ param, ...rest }: Props) { {exampleProperties.summary &&

{exampleProperties.summary}

} {exampleProperties.description && (

- Description: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.DESCRIPTION, + message: "Description:", + })}{" "} + {exampleProperties.description}

)}

- Example: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.EXAMPLE, + message: "Example:", + })}{" "} + {exampleProperties.value}

diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx index 9eeceb4bd..276f73a5f 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx @@ -7,6 +7,9 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; +import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds"; + import BrowserOnly from "@docusaurus/BrowserOnly"; import Details from "@theme/Details"; import Markdown from "@theme/Markdown"; @@ -67,7 +70,10 @@ const RequestSchemaComponent: React.FC = ({ title, body, style }) => { {title} {body.required === true && ( - required + {translate({ + id: OPENAPI_SCHEMA_ITEM.REQUIRED, + message: "required", + })} )} @@ -120,7 +126,10 @@ const RequestSchemaComponent: React.FC = ({ title, body, style }) => { )} {body.required && ( - required + {translate({ + id: OPENAPI_SCHEMA_ITEM.REQUIRED, + message: "required", + })} )} diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx index ac4a64954..95a920169 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx @@ -7,6 +7,9 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; +import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds"; + import BrowserOnly from "@docusaurus/BrowserOnly"; import Details from "@theme/Details"; import Markdown from "@theme/Markdown"; @@ -86,7 +89,10 @@ const ResponseSchemaComponent: React.FC = ({ {title} {body.required === true && ( - required + {translate({ + id: OPENAPI_SCHEMA_ITEM.REQUIRED, + message: "required", + })} )} diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.tsx index a77d1f3ee..caf758222 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.tsx @@ -9,6 +9,8 @@ import React, { ReactNode } from "react"; import Markdown from "@theme/Markdown"; import clsx from "clsx"; +import { translate } from "@docusaurus/Translate"; +import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds"; import { guard } from "../../markdown/utils"; @@ -81,15 +83,23 @@ export default function SchemaItem(props: Props) { const renderRequired = guard( Array.isArray(required) ? required.includes(name) : required, - () => required + () => ( + + {translate({ id: OPENAPI_SCHEMA_ITEM.REQUIRED, message: "required" })} + + ) ); const renderDeprecated = guard(deprecated, () => ( - deprecated + + {translate({ id: OPENAPI_SCHEMA_ITEM.DEPRECATED, message: "deprecated" })} + )); const renderNullable = guard(nullable, () => ( - nullable + + {translate({ id: OPENAPI_SCHEMA_ITEM.NULLABLE, message: "nullable" })} + )); const renderEnumDescriptions = guard( @@ -120,7 +130,12 @@ export default function SchemaItem(props: Props) { if (typeof defaultValue === "string") { return (
- Default value: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.DEFAULT_VALUE, + message: "Default value:", + })}{" "} + {defaultValue} @@ -129,7 +144,12 @@ export default function SchemaItem(props: Props) { } return (
- Default value: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.DEFAULT_VALUE, + message: "Default value:", + })}{" "} + {JSON.stringify(defaultValue)} @@ -144,7 +164,12 @@ export default function SchemaItem(props: Props) { if (typeof example === "string") { return (
- Example: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.EXAMPLE, + message: "Example:", + })}{" "} + {example} @@ -153,7 +178,12 @@ export default function SchemaItem(props: Props) { } return (
- Example: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.EXAMPLE, + message: "Example:", + })}{" "} + {JSON.stringify(example)} @@ -168,7 +198,12 @@ export default function SchemaItem(props: Props) { if (typeof constValue === "string") { return (
- Constant value: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.CONSTANT_VALUE, + message: "Constant value:", + })}{" "} + {constValue} @@ -177,7 +212,12 @@ export default function SchemaItem(props: Props) { } return (
- Constant value: + + {translate({ + id: OPENAPI_SCHEMA_ITEM.CONSTANT_VALUE, + message: "Constant value:", + })}{" "} + {JSON.stringify(constValue)} diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/StatusCodes/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/StatusCodes/index.tsx index e838e9897..da7ebf29f 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/StatusCodes/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/StatusCodes/index.tsx @@ -7,12 +7,15 @@ import React from "react"; +import { translate } from "@docusaurus/Translate"; + import ApiTabs from "@theme/ApiTabs"; import Details from "@theme/Details"; import Markdown from "@theme/Markdown"; import ResponseHeaders from "@theme/ResponseHeaders"; import ResponseSchema from "@theme/ResponseSchema"; import TabItem from "@theme/TabItem"; +import { OPENAPI_STATUS_CODES } from "@theme/translationIds"; import { ApiItem } from "docusaurus-plugin-openapi-docs/lib/types"; interface Props { @@ -51,7 +54,12 @@ const StatusCodes: React.FC = ({ label, id, responses }: any) => { style={{ textAlign: "left", marginBottom: "1rem" }} summary={ - Response Headers + + {translate({ + id: OPENAPI_STATUS_CODES.RESPONSE_HEADERS, + message: "Response Headers", + })} + } > @@ -59,7 +67,10 @@ const StatusCodes: React.FC = ({ label, id, responses }: any) => { )} diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts b/packages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts index 30248ead9..36d61d691 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts +++ b/packages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts @@ -59,3 +59,35 @@ export const OPENAPI_RESPONSE_EXAMPLES = { EXAMPLE: "theme.openapi.responseExamples.example", AUTO_EXAMPLE: "theme.openapi.responseExamples.autoExample", }; + +export const OPENAPI_BODY = { + EXAMPLE_FROM_SCHEMA: "theme.openapi.body.exampleFromSchema", +}; + +export const OPENAPI_STATUS_CODES = { + RESPONSE_HEADERS: "theme.openapi.statusCodes.responseHeaders", + SCHEMA_TITLE: "theme.openapi.statusCodes.schemaTitle", +}; + +export const OPENAPI_SCHEMA_ITEM = { + REQUIRED: "theme.openapi.schemaItem.required", + DEPRECATED: "theme.openapi.schemaItem.deprecated", + NULLABLE: "theme.openapi.schemaItem.nullable", + DEFAULT_VALUE: "theme.openapi.schemaItem.defaultValue", + EXAMPLE: "theme.openapi.schemaItem.example", + EXAMPLES: "theme.openapi.schemaItem.examples", + DESCRIPTION: "theme.openapi.schemaItem.description", + CONSTANT_VALUE: "theme.openapi.schemaItem.constantValue", +}; + +export const OPENAPI_PARAMS_DETAILS = { + PARAMETERS_TITLE: "theme.openapi.paramsDetails.parametersTitle", +}; + +export const OPENAPI_SECURITY_SCHEMES = { + NAME: "theme.openapi.securitySchemes.name", + TYPE: "theme.openapi.securitySchemes.type", + SCOPES: "theme.openapi.securitySchemes.scopes", + IN: "theme.openapi.securitySchemes.in", + FLOWS: "theme.openapi.securitySchemes.flows", +};