feat: finalize basic i18n support

Author: Nemikolh

packages/astro/src/default/utils/content.ts

@@ -44,6 +44,11 @@ export async function getTutorial(): Promise<Tutorial> {
           partTemplate: 'Part ${index}: ${title}',
           noPreviewNorStepsText: 'No preview to run nor steps to show',
           startWebContainerText: 'Run this tutorial',
+          filesTitleText: 'Files',
+          prepareEnvironmentTitleText: 'Preparing Environment',
+          toggleTerminalButtonText: 'Toggle Terminal',
+          solveButtonText: 'Solve',
+          resetButtonText: 'Reset',
         } satisfies Lesson['data']['i18n'],
         tutorialMetaData.i18n,
       );

packages/components/react/src/Panels/EditorPanel.tsx

@@ -1,3 +1,4 @@
+import type { I18n } from '@tutorialkit/types';
 import { useEffect, useRef } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle, type ImperativePanelHandle } from 'react-resizable-panels';
 import {
@@ -7,8 +8,8 @@ import {
   type OnScrollCallback as OnEditorScroll,
 } from '../core/CodeMirrorEditor/index.js';
 import { FileTree } from '../core/FileTree.js';
-import resizePanelStyles from '../styles/resize-panel.module.css';
 import type { Theme } from '../core/types.js';
+import resizePanelStyles from '../styles/resize-panel.module.css';
 import { isMobile } from '../utils/mobile.js';
 
 const DEFAULT_FILE_TREE_SIZE = 25;
@@ -17,6 +18,7 @@ interface Props {
   theme: Theme;
   id: unknown;
   files: string[];
+  i18n: I18n;
   hideRoot?: boolean;
   fileTreeScope?: string;
   showFileTree?: boolean;
@@ -33,6 +35,7 @@ export function EditorPanel({
   theme,
   id,
   files,
+  i18n,
   hideRoot,
   fileTreeScope,
   showFileTree = true,
@@ -68,7 +71,7 @@ export function EditorPanel({
         <div className="panel-header border-r border-b border-tk-elements-app-borderColor">
           <div className="panel-title">
             <div className="panel-icon i-ph-tree-structure-duotone shrink-0"></div>
-            <span className="text-sm">Files</span>
+            <span className="text-sm">{i18n.filesTitleText}</span>
           </div>
         </div>
         <FileTree
@@ -86,7 +89,7 @@ export function EditorPanel({
         hitAreaMargins={{ fine: 8, coarse: 8 }}
       />
       <Panel className="flex flex-col" defaultSize={100} minSize={10}>
-        <FileTab editorDocument={editorDocument} onHelpClick={onHelpClick} helpAction={helpAction} />
+        <FileTab i18n={i18n} editorDocument={editorDocument} onHelpClick={onHelpClick} helpAction={helpAction} />
         <div className="h-full flex-1 overflow-hidden">
           <CodeMirrorEditor
             className="h-full"
@@ -104,12 +107,13 @@ export function EditorPanel({
 }
 
 interface FileTabProps {
+  i18n: I18n;
   editorDocument: EditorDocument | undefined;
   helpAction?: 'reset' | 'solve';
   onHelpClick?: () => void;
 }
 
-function FileTab({ editorDocument, helpAction, onHelpClick }: FileTabProps) {
+function FileTab({ i18n, editorDocument, helpAction, onHelpClick }: FileTabProps) {
   const filePath = editorDocument?.filePath;
   const fileName = filePath?.split('/').at(-1) ?? '';
   const icon = fileName ? getFileIcon(fileName) : '';
@@ -123,9 +127,9 @@ function FileTab({ editorDocument, helpAction, onHelpClick }: FileTabProps) {
       {!!helpAction && (
         <button onClick={onHelpClick} className="panel-button px-2 py-0.5 -mr-1 -my-1">
           {helpAction === 'solve' && <div className="i-ph-lightbulb-duotone text-lg" />}
-          {helpAction === 'solve' && 'Solve'}
+          {helpAction === 'solve' && i18n.solveButtonText}
           {helpAction === 'reset' && <div className="i-ph-clock-counter-clockwise-duotone" />}
-          {helpAction === 'reset' && 'Reset'}
+          {helpAction === 'reset' && i18n.resetButtonText}
         </button>
       )}
     </div>

packages/components/react/src/Panels/PreviewPanel.tsx

@@ -1,5 +1,6 @@
 import { useStore } from '@nanostores/react';
 import type { PreviewInfo, TutorialStore } from '@tutorialkit/runtime';
+import type { I18n } from '@tutorialkit/types';
 import { createElement, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { BootScreen } from '../BootScreen.js';
@@ -10,6 +11,7 @@ interface Props {
   showToggleTerminal?: boolean;
   toggleTerminal?: () => void;
   tutorialStore: TutorialStore;
+  i18n: I18n;
 }
 
 const previewsContainer = globalThis.document ? document.getElementById('previews-container')! : ({} as HTMLElement);
@@ -21,7 +23,7 @@ export type ImperativePreviewHandle = {
 };
 
 export const PreviewPanel = memo(
-  forwardRef<ImperativePreviewHandle, Props>(({ showToggleTerminal, toggleTerminal, tutorialStore }, ref) => {
+  forwardRef<ImperativePreviewHandle, Props>(({ showToggleTerminal, toggleTerminal, i18n, tutorialStore }, ref) => {
     const expectedPreviews = useStore(tutorialStore.previews);
     const iframeRefs = useRef<IFrameRef[]>([]);
 
@@ -86,7 +88,7 @@ export const PreviewPanel = memo(
           <div className="panel-header border-b border-tk-elements-app-borderColor justify-between">
             <div className="panel-title">
               <div className="panel-icon i-ph-lightning-duotone"></div>
-              <span className="text-sm">Preparing Environment</span>
+              <span className="text-sm">{i18n.prepareEnvironmentTitleText}</span>
             </div>
             {showToggleTerminal && (
               <button
@@ -95,7 +97,7 @@ export const PreviewPanel = memo(
                 onClick={() => toggleTerminal?.()}
               >
                 <span className="panel-button-icon i-ph-terminal-window-duotone"></span>
-                <span className="text-sm">Toggle Terminal</span>
+                <span className="text-sm">{i18n.toggleTerminalButtonText}</span>
               </button>
             )}
           </div>

packages/components/react/src/Panels/WorkspacePanel.tsx

@@ -1,17 +1,18 @@
+import { useStore } from '@nanostores/react';
 import { TutorialStore } from '@tutorialkit/runtime';
+import type { I18n } from '@tutorialkit/types';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useStore } from '@nanostores/react';
 import { Panel, PanelGroup, PanelResizeHandle, type ImperativePanelHandle } from 'react-resizable-panels';
 import type {
   OnChangeCallback as OnEditorChange,
   OnScrollCallback as OnEditorScroll,
 } from '../core/CodeMirrorEditor/index.js';
-import resizePanelStyles from '../styles/resize-panel.module.css';
 import type { Theme } from '../core/types.js';
+import resizePanelStyles from '../styles/resize-panel.module.css';
+import { classNames } from '../utils/classnames.js';
 import { EditorPanel } from './EditorPanel.js';
 import { PreviewPanel, type ImperativePreviewHandle } from './PreviewPanel.js';
 import { TerminalPanel } from './TerminalPanel.js';
-import { classNames } from '../utils/classnames.js';
 
 const DEFAULT_TERMINAL_SIZE = 25;
 
@@ -154,6 +155,7 @@ export function WorkspacePanel({ tutorialStore, theme }: Props) {
           showFileTree={fileTree}
           editorDocument={currentDocument}
           files={lesson.files[1]}
+          i18n={lesson.data.i18n as I18n}
           hideRoot={lesson.data.hideRoot}
           helpAction={helpAction}
           onHelpClick={onHelpClick}
@@ -181,6 +183,7 @@ export function WorkspacePanel({ tutorialStore, theme }: Props) {
       >
         <PreviewPanel
           tutorialStore={tutorialStore}
+          i18n={lesson.data.i18n as I18n}
           ref={previewRef}
           showToggleTerminal={!hideTerminalPanel}
           toggleTerminal={toggleTerminal}

packages/types/src/entities/index.ts

@@ -1,3 +1,4 @@
+import type { I18nSchema } from '../schemas/i18n.js';
 import type { ChapterSchema, LessonSchema, PartSchema } from '../schemas/index.js';
 
 export type * from './nav.js';
@@ -49,6 +50,8 @@ export interface Lesson<T = unknown> {
   Markdown: T;
 }
 
+export type I18n = Required<NonNullable<I18nSchema>>;
+
 export interface Tutorial {
   logoLink?: string;
   firstPartId?: string;

packages/types/src/schemas/i18n.ts

@@ -22,6 +22,41 @@ export const i18nSchema = z.object({
    * @default 'No preview to run nor steps to show'
    */
   noPreviewNorStepsText: z.string().optional(),
+
+  /**
+   * Text shown on top of the file tree.
+   *
+   * @default 'Files'
+   */
+  filesTitleText: z.string().optional(),
+
+  /**
+   * Text shown on top of the steps section.
+   *
+   * @default 'Preparing Environment'
+   */
+  prepareEnvironmentTitleText: z.string().optional(),
+
+  /**
+   * Text shown for the toggle terminal button.
+   *
+   * @default 'Toggle Terminal'
+   */
+  toggleTerminalButtonText: z.string().optional(),
+
+  /**
+   * Text shown for the solve button.
+   *
+   * @default 'Solve'
+   */
+  solveButtonText: z.string().optional(),
+
+  /**
+   * Text shown for the reset button.
+   *
+   * @default 'Reset'
+   */
+  resetButtonText: z.string().optional(),
 });
 
 export type I18nSchema = z.infer<typeof i18nSchema>;