Translate all OpenAPI blocks

Author: gregberge

.changeset/light-moons-press.md

@@ -0,0 +1,6 @@
+---
+"@gitbook/react-openapi": patch
+"gitbook": patch
+---
+
+Translate OpenAPI blocks

packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx

@@ -51,7 +51,7 @@ async function OpenAPIOperationBody(props: BlockProps<AnyOpenAPIOperationsBlock>
     return (
         <BaseOpenAPIOperation
             data={data}
-            context={getOpenAPIContext({ props, specUrl })}
+            context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
             className="openapi-block"
         />
     );

packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPISchemas.tsx

@@ -51,7 +51,7 @@ async function OpenAPISchemasBody(props: BlockProps<OpenAPISchemasBlock>) {
         <BaseOpenAPISchemas
             schemas={data.schemas}
             grouped={block.data.grouped}
-            context={getOpenAPIContext({ props, specUrl })}
+            context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
             className="openapi-block"
         />
     );

packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx

@@ -1,6 +1,6 @@
 import type { JSONDocument } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
-import type { OpenAPIContext } from '@gitbook/react-openapi';
+import { type OpenAPIContextInput, checkIsValidLocale } from '@gitbook/react-openapi';
 
 import { tcls } from '@/lib/tailwind';
 
@@ -11,17 +11,27 @@ import { Heading } from '../Heading';
 
 import './scalar.css';
 import './style.css';
+import { DEFAULT_LOCALE, getCustomizationLocale } from '@/intl/server';
 import type { AnyOpenAPIOperationsBlock, OpenAPISchemasBlock } from '@/lib/openapi/types';
+import type { GitBookAnyContext } from '@v2/lib/context';
 
 /**
  * Get the OpenAPI context to render a block.
  */
 export function getOpenAPIContext(args: {
     props: BlockProps<AnyOpenAPIOperationsBlock | OpenAPISchemasBlock>;
     specUrl: string;
-}): OpenAPIContext {
-    const { props, specUrl } = args;
+    context: GitBookAnyContext | undefined;
+}): OpenAPIContextInput {
+    const { props, specUrl, context } = args;
     const { block } = props;
+
+    const customization = context && 'customization' in context ? context.customization : null;
+    const customizationLocale = customization
+        ? getCustomizationLocale(customization)
+        : DEFAULT_LOCALE;
+    const locale = checkIsValidLocale(customizationLocale) ? customizationLocale : DEFAULT_LOCALE;
+
     return {
         specUrl,
         icons: {
@@ -69,5 +79,6 @@ export function getOpenAPIContext(args: {
         defaultInteractiveOpened: props.context.mode === 'print',
         id: block.meta?.id,
         blockKey: block.key,
+        locale,
     };
 }

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -228,19 +228,19 @@
 }
 
 .openapi-schema-required {
-    @apply text-warning-subtle text-[0.813rem];
+    @apply text-warning-subtle text-[0.813rem] lowercase;
 }
 
 .openapi-schema-optional {
-    @apply text-info-subtle text-[0.813rem];
+    @apply text-info-subtle text-[0.813rem] lowercase;
 }
 
 .openapi-schema-readonly {
-    @apply text-primary-subtle/9 text-[0.813rem];
+    @apply text-primary-subtle/9 text-[0.813rem] lowercase;
 }
 
 .openapi-schema-writeonly {
-    @apply text-success dark:text-success-subtle/9 text-[0.813rem];
+    @apply text-success dark:text-success-subtle/9 text-[0.813rem] lowercase;
 }
 
 .openapi-schema-type {

packages/gitbook/src/intl/server.ts

@@ -4,17 +4,26 @@ import { type TranslationLanguage, languages } from './translations';
 
 export * from './translate';
 
+export const DEFAULT_LOCALE = 'en';
+
+/**
+ * Get the locale of the customization.
+ */
+export function getCustomizationLocale(customization: SiteCustomizationSettings): string {
+    return customization.internationalization.locale;
+}
+
 /**
  * Create the translation context for a space to use in the server components.
  */
 export function getSpaceLanguage(customization: SiteCustomizationSettings): TranslationLanguage {
-    const fallback = languages.en;
+    const fallback = languages[DEFAULT_LOCALE];
 
-    const { locale } = customization.internationalization;
+    const locale = getCustomizationLocale(customization);
 
     let language = fallback;
     // @ts-ignore
-    if (locale !== 'en' && languages[locale]) {
+    if (locale !== DEFAULT_LOCALE && languages[locale]) {
         // @ts-ignore
         language = languages[locale];
     }

packages/gitbook/src/intl/translations/translations.test.ts

@@ -102,6 +102,7 @@ export function InteractiveSection(props: {
                         ) : null}
                         {header}
                     </SectionHeaderContent>
+                    {/* biome-ignore lint/a11y/useKeyWithClickEvents: we prevent default here */}
                     <div
                         className={clsx(
                             'openapi-section-header-controls',

packages/react-openapi/src/InteractiveSection.tsx

@@ -6,9 +6,10 @@ import {
 import { OpenAPICodeSampleBody } from './OpenAPICodeSampleSelector';
 import { ScalarApiButton } from './ScalarApiButton';
 import { type CodeSampleGenerator, codeSampleGenerators } from './code-samples';
+import { type OpenAPIContext, getOpenAPIClientContext } from './context';
 import { generateMediaTypeExamples, generateSchemaExample } from './generateSchemaExample';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
-import type { OpenAPIContext, OpenAPIOperationData } from './types';
+import type { OpenAPIOperationData } from './types';
 import { getDefaultServerURL } from './util/server';
 import { checkIsReference } from './utils';
 
@@ -22,7 +23,7 @@ export function OpenAPICodeSample(props: {
     data: OpenAPIOperationData;
     context: OpenAPIContext;
 }) {
-    const { data } = props;
+    const { data, context } = props;
 
     // If code samples are disabled at operation level, we don't display the code samples.
     if (data.operation['x-codeSamples'] === false) {
@@ -43,7 +44,13 @@ export function OpenAPICodeSample(props: {
         return null;
     }
 
-    return <OpenAPICodeSampleBody data={data} items={samples} />;
+    return (
+        <OpenAPICodeSampleBody
+            context={getOpenAPIClientContext(context)}
+            data={data}
+            items={samples}
+        />
+    );
 }
 
 /**
@@ -211,7 +218,14 @@ function OpenAPICodeSampleFooter(props: {
             ) : (
                 <span />
             )}
-            {!hideTryItPanel && <ScalarApiButton method={method} path={path} specUrl={specUrl} />}
+            {!hideTryItPanel && (
+                <ScalarApiButton
+                    context={getOpenAPIClientContext(context)}
+                    method={method}
+                    path={path}
+                    specUrl={specUrl}
+                />
+            )}
         </div>
     );
 }

packages/react-openapi/src/OpenAPICodeSample.tsx

@@ -6,6 +6,7 @@ import { useStore } from 'zustand';
 import { OpenAPIPath } from './OpenAPIPath';
 import { OpenAPISelect, OpenAPISelectItem } from './OpenAPISelect';
 import { StaticSection } from './StaticSection';
+import type { OpenAPIClientContext } from './context';
 import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
 import type { OpenAPIOperationData } from './types';
 
@@ -26,12 +27,13 @@ function OpenAPICodeSampleHeader(props: {
     items: CodeSampleItem[];
     data: OpenAPIOperationData;
     selectIcon?: React.ReactNode;
+    context: OpenAPIClientContext;
 }) {
-    const { data, items, selectIcon } = props;
+    const { data, items, selectIcon, context } = props;
 
     return (
         <>
-            <OpenAPIPath canCopy={false} withServer={false} data={data} />
+            <OpenAPIPath context={context} canCopy={false} withServer={false} data={data} />
             {items.length > 1 ? (
                 <OpenAPISelect
                     icon={selectIcon}
@@ -56,8 +58,9 @@ export function OpenAPICodeSampleBody(props: {
     items: CodeSampleItem[];
     data: OpenAPIOperationData;
     selectIcon?: React.ReactNode;
+    context: OpenAPIClientContext;
 }) {
-    const { items, data, selectIcon } = props;
+    const { items, data, selectIcon, context } = props;
     if (!items[0]) {
         throw new Error('No items provided');
     }
@@ -72,7 +75,14 @@ export function OpenAPICodeSampleBody(props: {
 
     return (
         <StaticSection
-            header={<OpenAPICodeSampleHeader selectIcon={selectIcon} data={data} items={items} />}
+            header={
+                <OpenAPICodeSampleHeader
+                    context={context}
+                    selectIcon={selectIcon}
+                    data={data}
+                    items={items}
+                />
+            }
             className="openapi-codesample"
         >
             <div id={selected.key as string} className="openapi-codesample-panel">