fix: mobile fixes and basic i18n support #127

Nemikolh · 2024-07-10T10:56:07Z

This PR:

Makes a few changes to the rendering of the navigation dropdown on mobile (arrows on both sides are removed).

Fixes a couple of issues on the mobile version (like buttons not visible).
Adds transitions between dark / light themes.
Shows a page loading indicator when navigation between two page is greater than 500ms.

loading-indicator.webm

Adds a button to start the tutorial on platform where memory is more restricted.
Introduces i18n in the metadata that you typically want to configure on the tutorial level to change the text of the UI:

---
type: tutorial
i18n:
  partTemplate: Partie ${index}]: ${title}
  noPreviewNorStepsText: Pas d'aperçu ou d'étapes à montrer
  startWebContainerText: Lancer le tutoriel
---

Implements deep inheritance for the metadata for properties like terminal and i18n so that not every property must be specified again if only one changed. Note that this only works for objects. For arrays, string and numbers the value is always overriden (which is typically what you'd want from TutorialKit's metadata).

This commit also introduces an i18n property to the lesson object which is used to customize the rendering of any string that would inject a fixed string like "Next lesson: ". Support for string interpolation is also possible.

bolt-new-by-stackblitz · 2024-07-10T10:56:10Z

Run & review this pull request in StackBlitz Codeflow.

cloudflare-workers-and-pages · 2024-07-10T10:57:01Z

Deploying tutorialkit-demo-page with Cloudflare Pages

Latest commit:	`f9dd9b4`
Status:	✅ Deploy successful!
Preview URL:	https://14810557.tutorialkit-demo-page.pages.dev
Branch Preview URL:	https://joan-mobile-fixes.tutorialkit-demo-page.pages.dev

View logs

cloudflare-workers-and-pages · 2024-07-11T08:59:50Z

Deploying tutorialkit-docs-page with Cloudflare Pages

Latest commit:	`ff7225e`
Status:	✅ Deploy successful!
Preview URL:	https://cedefcc6.tutorialkit-docs-page.pages.dev
Branch Preview URL:	https://joan-mobile-fixes.tutorialkit-docs-page.pages.dev

View logs

Nemikolh · 2024-07-11T10:52:53Z

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

@@ -272,21 +282,6 @@ export async function getTutorial(): Promise<Tutorial> {
  return _tutorial;
 }

-function pick<T extends Record<any, any>>(objects: (T | undefined)[], properties: (keyof T)[]) {


This is replaced by squash and inheritProperties which perform a deeper inheritance. This was something we wanted for the terminal property but never got to implement. It was needed for the i18n property as otherwise you couldn't really override a single property for a chapter or lesson.

Nemikolh · 2024-07-11T10:53:43Z

packages/astro/src/default/pages/[...slug].astro

@@ -18,7 +18,7 @@ const { lesson, logoLink, navList, title } = Astro.props as Props;

 <Layout title={title}>
  <div id="previews-container"></div>
-  <main class="max-w-full flex flex-col h-screen overflow-hidden" data-swap-root>
+  <main class="max-w-full flex flex-col h-full overflow-hidden" data-swap-root>


This fixed the issue of not seeing the buttons on the bottom of the page on mobile.

Nemikolh · 2024-07-11T10:55:05Z

packages/astro/src/default/layouts/Layout.astro

@@ -24,16 +24,35 @@ const baseURL = import.meta.env.BASE_URL;
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
    <ViewTransitions />
+    <script is:inline>
+      setTutorialKitTheme();


Calling this function as an inline script guarantee that we always add the theme attribute before any dom as been rendered which makes sure no transition animations are rendered.

Without this change, on dark mode a transition animation was visible on every page reload.

Seems to work nice! 👍

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

packages/astro/src/default/components/TutorialContent.astro

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

Co-authored-by: Ari Perkkiö <[email protected]>

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

Co-authored-by: Ari Perkkiö <[email protected]>

AriPerkkio

Some optional improvement ideas but looks good to me! 🎉

packages/runtime/src/webcontainer/on-demand-boot.ts

packages/astro/src/default/components/PageLoadingIndicator.astro

AriPerkkio · 2024-07-11T16:57:44Z

packages/astro/src/default/components/PageLoadingIndicator.astro

+    progressEl.style.opacity = '1';
+
+    intervalId = setInterval(() => {
+      const elapsedTime = Date.now() - startTime;


Nice, that's the correct way to see elapsed time (instead of relying that setInterval(fn, 100) actually calls every 100ms.) 💪

Co-authored-by: Ari Perkkiö <[email protected]>

AriPerkkio · 2024-07-12T09:52:26Z

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

+      data: {
+        template: 'default',
+        i18n: {
+          nextLessonPrefix: 'Next lesson: ',


@Nemikolh now that nextLessonPrefix was removed from source files, this test file is causing typescript errors.

Oh good find! Dang, we should typecheck those files in CI. I'll fix them in #133

Fixed in b8c18c8

Nemikolh added 4 commits July 10, 2024 09:03

fix: height on mobile

61612c1

fix(nav): remove arrows and adjust padding

0d31cd9

fix: remove unused classes

c14b390

Nemikolh changed the title ~~fix: mobile fixes~~ fix: mobile fixes and basic i18n support Jul 10, 2024

Nemikolh added 5 commits July 10, 2024 13:49

feat: add transition between dark/light modes

3709489

fix: update snapshot

03e58d5

feat: add start webcontainer button when boot is prevented

d4955dd

fix: weird transition when theme is changed

40b1495

Merge remote-tracking branch 'origin/main' into joan/mobile-fixes

d34be9d

Nemikolh added 5 commits July 11, 2024 10:01

fix: issues with inheritance and more work on i18n

af39ca0

fix: update theme.css to latest

6d2e9e3

fix: snapshot

0065c56

fix: use the variables.css as theme.css to avoid copies

43e8a27

chore: document the new properties

591fbab

Nemikolh commented Jul 11, 2024

View reviewed changes

Nemikolh marked this pull request as ready for review July 11, 2024 10:58

Nemikolh requested review from AriPerkkio and d3lm July 11, 2024 10:58

AriPerkkio reviewed Jul 11, 2024

View reviewed changes

Nemikolh and others added 2 commits July 11, 2024 13:28

Apply suggestions from code review

5436a09

Co-authored-by: Ari Perkkiö <[email protected]>

fix: code review

2b4b645

Nemikolh requested a review from AriPerkkio July 11, 2024 12:33

fix: revert change on buttons for bottom navigation

3ede641

AriPerkkio reviewed Jul 11, 2024

View reviewed changes

docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Outdated Show resolved Hide resolved

Nemikolh and others added 4 commits July 11, 2024 14:10

fix: feedback for the run this tutorial button

ada7404

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

ff7225e

Co-authored-by: Ari Perkkiö <[email protected]>

feat: add a page loading indicator

aa1d32b

fix: update snapshot

516e775

AriPerkkio approved these changes Jul 11, 2024

View reviewed changes

Nemikolh and others added 3 commits July 11, 2024 18:28

fix: do not make the progress visible under 500ms

1589fb2

Apply suggestions from code review

e57af6c

Co-authored-by: Ari Perkkiö <[email protected]>

fix: patch issues

f9dd9b4

Nemikolh force-pushed the joan/mobile-fixes branch from c6b40f4 to f9dd9b4 Compare July 11, 2024 18:56

Nemikolh merged commit f85e8eb into main Jul 11, 2024
10 checks passed

Nemikolh deleted the joan/mobile-fixes branch July 11, 2024 19:19

Nemikolh mentioned this pull request Jul 12, 2024

feat: finalize basic i18n support #133

Merged

AriPerkkio reviewed Jul 12, 2024

View reviewed changes

fix: mobile fixes and basic i18n support #127

fix: mobile fixes and basic i18n support #127

Uh oh!

Conversation

Nemikolh commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bolt-new-by-stackblitz bot commented Jul 10, 2024

Uh oh!

cloudflare-workers-and-pages bot commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying tutorialkit-demo-page with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages bot commented Jul 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying tutorialkit-docs-page with Cloudflare Pages

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AriPerkkio left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Nemikolh commented Jul 10, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented Jul 10, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented Jul 11, 2024 •

edited

Loading