Skip to content

feat(theme): add initial i18n support #1210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(theme): add initial i18n support #1210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
890e247
feat(theme): add initial i18n support
sserrata Jul 17, 2025
8b85f97
Add i18n wrappers across more theme components
sserrata Jul 17, 2025
bff2fc7
localize remaining theme components
sserrata Jul 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 44 additions & 8 deletions packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -45,9 +47,18 @@ function Authorization() {
{selectedAuth.map((a: any) => {
if (a.type === "http" && a.scheme === "bearer") {
return (
<FormItem label="Bearer Token" key={a.key + "-bearer"}>
<FormItem
label={translate({
id: OPENAPI_AUTH.BEARER_TOKEN,
message: "Bearer Token",
})}
key={a.key + "-bearer"}
>
<FormTextInput
placeholder="Bearer Token"
placeholder={translate({
id: OPENAPI_AUTH.BEARER_TOKEN,
message: "Bearer Token",
})}
password
value={data[a.key].token ?? ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
Expand All @@ -67,9 +78,18 @@ function Authorization() {

if (a.type === "oauth2") {
return (
<FormItem label="Bearer Token" key={a.key + "-oauth2"}>
<FormItem
label={translate({
id: OPENAPI_AUTH.BEARER_TOKEN,
message: "Bearer Token",
})}
key={a.key + "-oauth2"}
>
<FormTextInput
placeholder="Bearer Token"
placeholder={translate({
id: OPENAPI_AUTH.BEARER_TOKEN,
message: "Bearer Token",
})}
password
value={data[a.key].token ?? ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
Expand All @@ -90,9 +110,17 @@ function Authorization() {
if (a.type === "http" && a.scheme === "basic") {
return (
<React.Fragment key={a.key + "-basic"}>
<FormItem label="Username">
<FormItem
label={translate({
id: OPENAPI_AUTH.USERNAME,
message: "Username",
})}
>
<FormTextInput
placeholder="Username"
placeholder={translate({
id: OPENAPI_AUTH.USERNAME,
message: "Username",
})}
value={data[a.key].username ?? ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
Expand All @@ -106,9 +134,17 @@ function Authorization() {
}}
/>
</FormItem>
<FormItem label="Password">
<FormItem
label={translate({
id: OPENAPI_AUTH.PASSWORD,
message: "Password",
})}
>
<FormTextInput
placeholder="Password"
placeholder={translate({
id: OPENAPI_AUTH.PASSWORD,
message: "Password",
})}
password
value={data[a.key].password ?? ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
Expand Down
18 changes: 15 additions & 3 deletions packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";

Expand Down Expand Up @@ -98,7 +101,10 @@ function Body({
return (
<FormItem>
<FormFileUpload
placeholder={schema.description || "Body"}
placeholder={
schema.description ||
translate({ id: OPENAPI_REQUEST.BODY_TITLE, message: "Body" })
}
onChange={(file: any) => {
if (file === undefined) {
dispatch(clearRawBody());
Expand Down Expand Up @@ -302,7 +308,10 @@ function Body({
<SchemaTabs className="openapi-tabs__schema" lazy>
{/* @ts-ignore */}
<TabItem
label="Example (from schema)"
label={translate({
id: OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
message: "Example (from schema)",
})}
value="Example (from schema)"
default
>
Expand Down Expand Up @@ -334,7 +343,10 @@ function Body({
<SchemaTabs className="openapi-tabs__schema" lazy>
{/* @ts-ignore */}
<TabItem
label="Example (from schema)"
label={translate({
id: OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
message: "Example (from schema)",
})}
value="Example (from schema)"
default
>
Expand Down
7 changes: 6 additions & 1 deletion packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -102,7 +104,10 @@ function FormFileUpload({ placeholder, onChange }: Props) {
setAndNotifyFile(undefined);
}}
>
Clear
{translate({
id: OPENAPI_FORM_FILE_UPLOAD.CLEAR_BUTTON,
message: "Clear",
})}
</button>
<RenderPreview file={file} />
</>
Expand Down
9 changes: 8 additions & 1 deletion packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -24,7 +27,11 @@ function FormItem({ label, type, required, children, className }: Props) {
<label className="openapi-explorer__form-item-label">{label}</label>
)}
{type && <span style={{ opacity: 0.6 }}> — {type}</span>}
{required && <span className="openapi-schema__required">required</span>}
{required && (
<span className="openapi-schema__required">
{translate({ id: OPENAPI_SCHEMA_ITEM.REQUIRED, message: "required" })}
</span>
)}
<div>{children}</div>
</div>
);
Expand Down
9 changes: 8 additions & 1 deletion packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -41,7 +43,12 @@ function FormTextInput({
{paramName ? (
<input
{...register(paramName, {
required: isRequired ? "This field is required" : false,
required: isRequired
? translate({
id: OPENAPI_FORM.FIELD_REQUIRED,
message: "This field is required",
})
: false,
})}
className={clsx("openapi-explorer__form-item-input", {
error: showErrorMessage,
Expand Down
10 changes: 9 additions & 1 deletion packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/LiveEditor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@
import React, { type JSX, useEffect, useState } from "react";

import { usePrismTheme } from "@docusaurus/theme-common";
import { translate } from "@docusaurus/Translate";
import useIsBrowser from "@docusaurus/useIsBrowser";
import { ErrorMessage } from "@hookform/error-message";
import { setStringRawBody } from "@theme/ApiExplorer/Body/slice";
import { OPENAPI_FORM } from "@theme/translationIds";
import clsx from "clsx";
import { Controller, useFormContext } from "react-hook-form";
import { LiveProvider, LiveEditor, withLive } from "react-live";
Expand Down Expand Up @@ -85,7 +87,13 @@ function App({
<Controller
control={control}
rules={{
required: isRequired && !code ? "This field is required" : false,
required:
isRequired && !code
? translate({
id: OPENAPI_FORM.FIELD_REQUIRED,
message: "This field is required",
})
: false,
}}
name="requestBody"
render={({ field: { onChange, name } }) => (
Expand Down
11 changes: 10 additions & 1 deletion ...eme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -121,7 +123,14 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
<>
<Controller
control={control}
rules={{ required: param.required ? "This field is required" : false }}
rules={{
required: param.required
? translate({
id: OPENAPI_FORM.FIELD_REQUIRED,
message: "This field is required",
})
: false,
}}
name="paramArray"
render={({ field: { onChange, name } }) => (
<>
Expand Down
11 changes: 10 additions & 1 deletion ...e-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -31,7 +33,14 @@ export default function ParamBooleanFormItem({ param }: ParamProps) {
<>
<Controller
control={control}
rules={{ required: param.required ? "This field is required" : false }}
rules={{
required: param.required
? translate({
id: OPENAPI_FORM.FIELD_REQUIRED,
message: "This field is required",
})
: false,
}}
name="paramBoolean"
render={({ field: { onChange, name } }) => (
<FormSelect
Expand Down
11 changes: 10 additions & 1 deletion ...enapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@

import React from "react";

import { translate } from "@docusaurus/Translate";
import { ErrorMessage } from "@hookform/error-message";
import FormMultiSelect from "@theme/ApiExplorer/FormMultiSelect";
import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
import { OPENAPI_FORM } from "@theme/translationIds";
import { Controller, useFormContext } from "react-hook-form";

export interface ParamProps {
Expand Down Expand Up @@ -61,7 +63,14 @@ export default function ParamMultiSelectFormItem({ param }: ParamProps) {
<>
<Controller
control={control}
rules={{ required: param.required ? "This field is required" : false }}
rules={{
required: param.required
? translate({
id: OPENAPI_FORM.FIELD_REQUIRED,
message: "This field is required",
})
: false,
}}
name="paramMultiSelect"
render={({ field: { onChange, name } }) => (
<FormMultiSelect
Expand Down
11 changes: 10 additions & 1 deletion ...me-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -33,7 +35,14 @@ export default function ParamSelectFormItem({ param }: ParamProps) {
<>
<Controller
control={control}
rules={{ required: param.required ? "This field is required" : false }}
rules={{
required: param.required
? translate({
id: OPENAPI_FORM.FIELD_REQUIRED,
message: "This field is required",
})
: false,
}}
name="paramSelect"
render={({ field: { onChange, name } }) => (
<FormSelect
Expand Down
12 changes: 10 additions & 2 deletions packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@

import React, { useState } from "react";

import { translate } from "@docusaurus/Translate";
import FormItem from "@theme/ApiExplorer/FormItem";
import ParamArrayFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem";
import ParamBooleanFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem";
import ParamMultiSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem";
import ParamSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem";
import ParamTextFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem";
import { useTypedSelector } from "@theme/ApiItem/hooks";
import { OPENAPI_PARAM_OPTIONS } from "@theme/translationIds";

import { Param } from "./slice";

Expand Down Expand Up @@ -119,8 +121,14 @@ function ParamOptions() {
</span>
</span>
{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",
})}
</button>

<div
Expand Down
Loading