diff --git a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx index b72598aa..2a37d85c 100644 --- a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx +++ b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx @@ -42,7 +42,7 @@ The `I18nText` type has the following shape: ```ts type I18nText = { /** - * Template for formatting a part. Variables: ${index} and ${title}. + * Template on how to format a part. Variables: ${index} and ${title}. * * @default 'Part ${index}: ${title}' */ @@ -53,7 +53,7 @@ type I18nText = { * * @default 'Edit this page' */ - editPageText?: string + editPageText?: string, /** * Text of the WebContainer link. @@ -63,19 +63,61 @@ type I18nText = { webcontainerLinkText?: string, /** - * Text shown when there are no previews or steps to show in the prepare environment section. + * Text shown on the call to action button to start webcontainer when boot was blocked + * due to memory restrictions. * * @default 'Start WebContainer' */ startWebContainerText?: string, /** - * Text shown on the call to action button to start webcontainer when boot was blocked - * due to memory restrictions. + * Text shown in the preview section when there are no steps to run and no preview to show. * * @default 'No preview to run nor steps to show' */ noPreviewNorStepsText?: string, + + /** + * Text shown on top of the file tree. + * + * @default 'Files' + */ + filesTitleText?: string, + + /** + * Text shown on top of the steps section. + * + * @default 'Preparing Environment' + */ + prepareEnvironmentTitleText?: string, + + /** + * Text shown on top of the preview section when `previews[_].title` is not configured. + * + * @default 'Preview' + */ + defaultPreviewTitleText?: string, + + /** + * Text for the toggle terminal button. + * + * @default 'Toggle Terminal' + */ + toggleTerminalButtonText?: string, + + /** + * Text for the solve button. + * + * @default 'Solve' + */ + solveButtonText?: string, + + /** + * Text for the reset button. + * + * @default 'Reset' + */ + resetButtonText?: string, } ``` @@ -242,4 +284,4 @@ type OpenInStackBlitz = type TemplateType = "html" | "node" | "angular-cli" | "create-react-app" | "javascript" | "polymer" | "typescript" | "vue" -``` \ No newline at end of file +``` diff --git a/packages/astro/src/default/utils/content/default-localization.ts b/packages/astro/src/default/utils/content/default-localization.ts index ae840d3b..6f817182 100644 --- a/packages/astro/src/default/utils/content/default-localization.ts +++ b/packages/astro/src/default/utils/content/default-localization.ts @@ -8,6 +8,7 @@ export const DEFAULT_LOCALIZATION = { webcontainerLinkText: 'Powered by WebContainers', filesTitleText: 'Files', prepareEnvironmentTitleText: 'Preparing Environment', + defaultPreviewTitleText: 'Preview', toggleTerminalButtonText: 'Toggle Terminal', solveButtonText: 'Solve', resetButtonText: 'Reset', diff --git a/packages/components/react/src/Panels/PreviewPanel.tsx b/packages/components/react/src/Panels/PreviewPanel.tsx index 1e8313e5..2502816a 100644 --- a/packages/components/react/src/Panels/PreviewPanel.tsx +++ b/packages/components/react/src/Panels/PreviewPanel.tsx @@ -122,6 +122,7 @@ export const PreviewPanel = memo( first={index === 0} last={index === previews.length - 1} toggleTerminal={toggleTerminal} + i18n={i18n} /> , ); @@ -143,9 +144,10 @@ interface PreviewProps { first?: boolean; last?: boolean; toggleTerminal?: () => void; + i18n: I18n; } -function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }: PreviewProps) { +function Preview({ preview, iframe, previewCount, first, last, toggleTerminal, i18n }: PreviewProps) { const previewContainerRef = useRef(null); useEffect(() => { @@ -169,7 +171,7 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }: >
- {previewTitle(preview, previewCount)} + {previewTitle(preview, previewCount, i18n)}
{last && ( )} @@ -207,13 +209,13 @@ function requestAnimationFrameLoop(loop: () => void): () => void { }; } -function previewTitle(preview: PreviewInfo, previewCount: number) { +function previewTitle(preview: PreviewInfo, previewCount: number, i18n: I18n) { if (preview.title) { return preview.title; } if (previewCount === 1) { - return 'Preview'; + return i18n.defaultPreviewTitleText; } return `Preview on port ${preview.port}`; diff --git a/packages/types/src/schemas/i18n.ts b/packages/types/src/schemas/i18n.ts index 215c1280..e1c386a1 100644 --- a/packages/types/src/schemas/i18n.ts +++ b/packages/types/src/schemas/i18n.ts @@ -23,14 +23,17 @@ export const i18nSchema = z.object({ webcontainerLinkText: z.string().optional().describe('Text of the WebContainer link.'), /** - * Text shown when there are no previews or steps to show in the prepare environment section. + * Text shown on the call to action button to start webcontainer when boot was blocked + * due to memory restrictions. * * @default 'Start WebContainer' */ startWebContainerText: z .string() .optional() - .describe('Text shown when there are no previews or steps to show in the prepare environment section.'), + .describe( + 'Text shown on the call to action button to start webcontainer when boot was blocked due to memory restrictions.', + ), /** * Text shown in the preview section when there are no steps to run and no preview to show. @@ -56,6 +59,13 @@ export const i18nSchema = z.object({ */ prepareEnvironmentTitleText: z.string().optional().describe('Text shown on top of the steps section.'), + /** + * Text shown on top of the preview section when `previews[_].title` is not configured. + * + * @default 'Preview' + */ + defaultPreviewTitleText: z.string().optional().describe('Text shown on top of the preview section.'), + /** * Text for the toggle terminal button. *