Translate OpenAPI blocks

.changeset/light-moons-press.md

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

packages/gitbook/e2e/customers.spec.ts

@@ -10,18 +10,18 @@ const testCases: TestsCase[] = [
             { name: 'OpenAPI', url: '/snyk-api/reference/apps', run: waitForCookiesDialog },
         ],
     },
-    {
-        name: 'Nexthink',
-        contentBaseURL: 'https://docs.nexthink.com',
-        tests: [
-            {
-                name: 'Home',
-                url: '/',
-                screenshot: { waitForTOCScrolling: false },
-                run: waitForCookiesDialog,
-            },
-        ],
-    },
+    // {
+    //     name: 'Nexthink',
+    //     contentBaseURL: 'https://docs.nexthink.com',
+    //     tests: [
+    //         {
+    //             name: 'Home',
+    //             url: '/',
+    //             screenshot: { waitForTOCScrolling: false },
+    //             run: waitForCookiesDialog,
+    //         },
+    //     ],
+    // },
     {
         name: 'asiksupport-stg.dto.kemkes.go.id',
         contentBaseURL: 'https://asiksupport-stg.dto.kemkes.go.id',
@@ -157,11 +157,11 @@ const testCases: TestsCase[] = [
         contentBaseURL: 'https://wiki.redmodding.org',
         tests: [{ name: 'Home', url: '/' }],
     },
-    {
-        name: 'docs.cherry-ai.com',
-        contentBaseURL: 'https://docs.cherry-ai.com',
-        tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }],
-    },
+    // {
+    //     name: 'docs.cherry-ai.com',
+    //     contentBaseURL: 'https://docs.cherry-ai.com',
+    //     tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }],
+    // },
     {
         name: 'docs.snyk.io',
         contentBaseURL: 'https://docs.snyk.io',

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/OpenAPIWebhook.tsx

@@ -51,7 +51,7 @@ async function OpenAPIWebhookBody(props: BlockProps<OpenAPIWebhookBlock>) {
     return (
         <BaseOpenAPIWebhook
             data={data}
-            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,21 +11,31 @@ import { Heading } from '../Heading';
 
 import './scalar.css';
 import './style.css';
+import { DEFAULT_LOCALE, getCustomizationLocale } from '@/intl/server';
 import type {
     AnyOpenAPIOperationsBlock,
     OpenAPISchemasBlock,
     OpenAPIWebhookBlock,
 } 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 | OpenAPIWebhookBlock>;
     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: {
@@ -73,5 +83,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

@@ -229,19 +229,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/react-openapi/src/InteractiveSection.tsx

@@ -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/OpenAPICodeSample.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';
 
@@ -44,7 +45,12 @@ export function OpenAPICodeSample(props: {
     }
 
     return (
-        <OpenAPICodeSampleBody data={data} items={samples} selectIcon={context.icons.chevronDown} />
+        <OpenAPICodeSampleBody
+            context={getOpenAPIClientContext(context)}
+            data={data}
+            items={samples}
+            selectIcon={context.icons.chevronDown}
+        />
     );
 }
 
@@ -215,7 +221,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/OpenAPICodeSampleSelector.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">

packages/react-openapi/src/OpenAPICopyButton.tsx

@@ -2,11 +2,14 @@
 
 import { useState } from 'react';
 import { Button, type ButtonProps, Tooltip, TooltipTrigger } from 'react-aria-components';
+import type { OpenAPIClientContext } from './context';
+import { t } from './translate';
 
 export function OpenAPICopyButton(
     props: ButtonProps & {
         value: string;
         children: React.ReactNode;
+        context: OpenAPIClientContext;
         label?: string;
         /**
          * Whether to show a tooltip.
@@ -15,7 +18,7 @@ export function OpenAPICopyButton(
         withTooltip?: boolean;
     }
 ) {
-    const { value, label, children, onPress, className, withTooltip = true } = props;
+    const { value, label, children, onPress, className, context, withTooltip = true } = props;
     const [copied, setCopied] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
 
@@ -60,7 +63,9 @@ export function OpenAPICopyButton(
                 offset={4}
                 className="openapi-tooltip"
             >
-                {copied ? 'Copied' : label || 'Copy to clipboard'}
+                {copied
+                    ? t(context.translation, 'copied')
+                    : label || t(context.translation, 'copy_to_clipboard')}
             </Tooltip>
         </TooltipTrigger>
     );

packages/react-openapi/src/OpenAPIExample.tsx

@@ -1,7 +1,8 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
+import type { OpenAPIContext, OpenAPIUniversalContext } from './context';
 import { json2xml } from './json2xml';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
-import type { OpenAPIContext } from './types';
+import { t } from './translate';
 
 /**
  * Display an example.
@@ -15,7 +16,7 @@ export function OpenAPIExample(props: {
     const code = stringifyExample({ example, xml: syntax === 'xml' });
 
     if (code === null) {
-        return <OpenAPIEmptyExample />;
+        return <OpenAPIEmptyExample context={context} />;
     }
 
     return context.renderCodeBlock({ code, syntax });
@@ -42,10 +43,13 @@ function stringifyExample(args: { example: OpenAPIV3.ExampleObject; xml: boolean
 /**
  * Empty response example.
  */
-export function OpenAPIEmptyExample() {
+export function OpenAPIEmptyExample(props: {
+    context: OpenAPIUniversalContext;
+}) {
+    const { context } = props;
     return (
         <pre className="openapi-example-empty">
-            <p>No Content</p>
+            <p>{t(context.translation, 'no_content')}</p>
         </pre>
     );
 }