fix: missing preview i18n

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"
 
-```
+```

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',

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}
           />
         </Panel>,
       );
@@ -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<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -169,7 +171,7 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }:
       >
         <div className="panel-title">
           <div className="panel-icon i-ph-globe-duotone"></div>
-          <span className="text-sm truncate">{previewTitle(preview, previewCount)}</span>
+          <span className="text-sm truncate">{previewTitle(preview, previewCount, i18n)}</span>
         </div>
         {last && (
           <button
@@ -178,7 +180,7 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }:
             onClick={() => toggleTerminal?.()}
           >
             <div className="panel-button-icon i-ph-terminal-window-duotone"></div>
-            <span className="text-sm">Toggle Terminal</span>
+            <span className="text-sm">{i18n.toggleTerminalButtonText}</span>
           </button>
         )}
       </div>
@@ -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}`;

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.
    *