feat: finalize basic i18n support (#133)

Author: Nemikolh

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

@@ -12,6 +12,7 @@ import { getCollection } from 'astro:content';
 import glob from 'fast-glob';
 import path from 'node:path';
 import { IGNORED_FILES } from './constants';
+import { DEFAULT_LOCALIZATION } from './content/default-localization';
 import { squash } from './content/squash.js';
 import { logger } from './logger';
 import { joinPaths } from './url';
@@ -39,15 +40,7 @@ export async function getTutorial(): Promise<Tutorial> {
 
       // default template if not specified
       tutorialMetaData.template ??= 'default';
-      tutorialMetaData.i18n = Object.assign(
-        {
-          partTemplate: 'Part ${index}: ${title}',
-          noPreviewNorStepsText: 'No preview to run nor steps to show',
-          startWebContainerText: 'Run this tutorial',
-          editPageText: 'Edit this page',
-        } satisfies Lesson['data']['i18n'],
-        tutorialMetaData.i18n,
-      );
+      tutorialMetaData.i18n = Object.assign({ ...DEFAULT_LOCALIZATION }, tutorialMetaData.i18n);
 
       _tutorial.logoLink = data.logoLink;
     } else if (type === 'part') {

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

@@ -0,0 +1,13 @@
+import type { Lesson } from '@tutorialkit/types';
+
+export const DEFAULT_LOCALIZATION = {
+  partTemplate: 'Part ${index}: ${title}',
+  noPreviewNorStepsText: 'No preview to run nor steps to show',
+  startWebContainerText: 'Run this tutorial',
+  editPageText: 'Edit this page',
+  filesTitleText: 'Files',
+  prepareEnvironmentTitleText: 'Preparing Environment',
+  toggleTerminalButtonText: 'Toggle Terminal',
+  solveButtonText: 'Solve',
+  resetButtonText: 'Reset',
+} satisfies Lesson['data']['i18n'];

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

@@ -91,7 +91,7 @@ describe('squash', () => {
       data: {
         template: 'default',
         i18n: {
-          nextLessonPrefix: 'Next lesson: ',
+          startWebContainerText: 'Run this tutorial',
           partTemplate: 'Part ${index}: ${title}',
         },
       } satisfies Metadata,
@@ -107,7 +107,7 @@ describe('squash', () => {
 
     expect(squash<Metadata>([lesson1.data, tutorial.data], ['i18n'])).toEqual({
       i18n: {
-        nextLessonPrefix: 'Next lesson: ',
+        startWebContainerText: 'Run this tutorial',
         partTemplate: 'Foobar: ${title}',
       },
     });

packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap

@@ -244,6 +244,7 @@ exports[`create and eject a project 1`] = `
   "src/utils/constants.ts",
   "src/utils/content",
   "src/utils/content.ts",
+  "src/utils/content/default-localization.ts",
   "src/utils/content/squash.ts",
   "src/utils/logger.ts",
   "src/utils/nav.ts",

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';
@@ -51,6 +52,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

@@ -29,6 +29,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>;