Skip to content

Commit 095ed57

Browse files
authored
fix: missing preview i18n (#255)
1 parent 5419038 commit 095ed57

File tree

4 files changed

+68
-13
lines changed

4 files changed

+68
-13
lines changed

docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ The `I18nText` type has the following shape:
4242
```ts
4343
type I18nText = {
4444
/**
45-
* Template for formatting a part. Variables: ${index} and ${title}.
45+
* Template on how to format a part. Variables: ${index} and ${title}.
4646
*
4747
* @default 'Part ${index}: ${title}'
4848
*/
@@ -53,7 +53,7 @@ type I18nText = {
5353
*
5454
* @default 'Edit this page'
5555
*/
56-
editPageText?: string
56+
editPageText?: string,
5757

5858
/**
5959
* Text of the WebContainer link.
@@ -63,19 +63,61 @@ type I18nText = {
6363
webcontainerLinkText?: string,
6464

6565
/**
66-
* Text shown when there are no previews or steps to show in the prepare environment section.
66+
* Text shown on the call to action button to start webcontainer when boot was blocked
67+
* due to memory restrictions.
6768
*
6869
* @default 'Start WebContainer'
6970
*/
7071
startWebContainerText?: string,
7172

7273
/**
73-
* Text shown on the call to action button to start webcontainer when boot was blocked
74-
* due to memory restrictions.
74+
* Text shown in the preview section when there are no steps to run and no preview to show.
7575
*
7676
* @default 'No preview to run nor steps to show'
7777
*/
7878
noPreviewNorStepsText?: string,
79+
80+
/**
81+
* Text shown on top of the file tree.
82+
*
83+
* @default 'Files'
84+
*/
85+
filesTitleText?: string,
86+
87+
/**
88+
* Text shown on top of the steps section.
89+
*
90+
* @default 'Preparing Environment'
91+
*/
92+
prepareEnvironmentTitleText?: string,
93+
94+
/**
95+
* Text shown on top of the preview section when `previews[_].title` is not configured.
96+
*
97+
* @default 'Preview'
98+
*/
99+
defaultPreviewTitleText?: string,
100+
101+
/**
102+
* Text for the toggle terminal button.
103+
*
104+
* @default 'Toggle Terminal'
105+
*/
106+
toggleTerminalButtonText?: string,
107+
108+
/**
109+
* Text for the solve button.
110+
*
111+
* @default 'Solve'
112+
*/
113+
solveButtonText?: string,
114+
115+
/**
116+
* Text for the reset button.
117+
*
118+
* @default 'Reset'
119+
*/
120+
resetButtonText?: string,
79121
}
80122

81123
```
@@ -242,4 +284,4 @@ type OpenInStackBlitz =
242284
243285
type TemplateType = "html" | "node" | "angular-cli" | "create-react-app" | "javascript" | "polymer" | "typescript" | "vue"
244286
245-
```
287+
```

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const DEFAULT_LOCALIZATION = {
88
webcontainerLinkText: 'Powered by WebContainers',
99
filesTitleText: 'Files',
1010
prepareEnvironmentTitleText: 'Preparing Environment',
11+
defaultPreviewTitleText: 'Preview',
1112
toggleTerminalButtonText: 'Toggle Terminal',
1213
solveButtonText: 'Solve',
1314
resetButtonText: 'Reset',

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ export const PreviewPanel = memo(
122122
first={index === 0}
123123
last={index === previews.length - 1}
124124
toggleTerminal={toggleTerminal}
125+
i18n={i18n}
125126
/>
126127
</Panel>,
127128
);
@@ -143,9 +144,10 @@ interface PreviewProps {
143144
first?: boolean;
144145
last?: boolean;
145146
toggleTerminal?: () => void;
147+
i18n: I18n;
146148
}
147149

148-
function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }: PreviewProps) {
150+
function Preview({ preview, iframe, previewCount, first, last, toggleTerminal, i18n }: PreviewProps) {
149151
const previewContainerRef = useRef<HTMLDivElement>(null);
150152

151153
useEffect(() => {
@@ -169,7 +171,7 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }:
169171
>
170172
<div className="panel-title">
171173
<div className="panel-icon i-ph-globe-duotone"></div>
172-
<span className="text-sm truncate">{previewTitle(preview, previewCount)}</span>
174+
<span className="text-sm truncate">{previewTitle(preview, previewCount, i18n)}</span>
173175
</div>
174176
{last && (
175177
<button
@@ -178,7 +180,7 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }:
178180
onClick={() => toggleTerminal?.()}
179181
>
180182
<div className="panel-button-icon i-ph-terminal-window-duotone"></div>
181-
<span className="text-sm">Toggle Terminal</span>
183+
<span className="text-sm">{i18n.toggleTerminalButtonText}</span>
182184
</button>
183185
)}
184186
</div>
@@ -207,13 +209,13 @@ function requestAnimationFrameLoop(loop: () => void): () => void {
207209
};
208210
}
209211

210-
function previewTitle(preview: PreviewInfo, previewCount: number) {
212+
function previewTitle(preview: PreviewInfo, previewCount: number, i18n: I18n) {
211213
if (preview.title) {
212214
return preview.title;
213215
}
214216

215217
if (previewCount === 1) {
216-
return 'Preview';
218+
return i18n.defaultPreviewTitleText;
217219
}
218220

219221
return `Preview on port ${preview.port}`;

packages/types/src/schemas/i18n.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,17 @@ export const i18nSchema = z.object({
2323
webcontainerLinkText: z.string().optional().describe('Text of the WebContainer link.'),
2424

2525
/**
26-
* Text shown when there are no previews or steps to show in the prepare environment section.
26+
* Text shown on the call to action button to start webcontainer when boot was blocked
27+
* due to memory restrictions.
2728
*
2829
* @default 'Start WebContainer'
2930
*/
3031
startWebContainerText: z
3132
.string()
3233
.optional()
33-
.describe('Text shown when there are no previews or steps to show in the prepare environment section.'),
34+
.describe(
35+
'Text shown on the call to action button to start webcontainer when boot was blocked due to memory restrictions.',
36+
),
3437

3538
/**
3639
* 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({
5659
*/
5760
prepareEnvironmentTitleText: z.string().optional().describe('Text shown on top of the steps section.'),
5861

62+
/**
63+
* Text shown on top of the preview section when `previews[_].title` is not configured.
64+
*
65+
* @default 'Preview'
66+
*/
67+
defaultPreviewTitleText: z.string().optional().describe('Text shown on top of the preview section.'),
68+
5969
/**
6070
* Text for the toggle terminal button.
6171
*

0 commit comments

Comments
 (0)