stackblitz · Nemikolh · Aug 6, 2024 · Aug 1, 2024 · Aug 1, 2024 · Aug 5, 2024
diff --git a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
@@ -55,6 +55,13 @@ type I18nText = {
    */
   editPageText?: string
 
+  /**
+   * Text of the webcontainer link.
+   *
+   * @default 'Powered by Webcontainer'
+   */
+  webcontainerLinkText?: string,
+
   /**
    * Text shown when there are no previews or steps to show in the prepare environment section.
    *

diff --git a/docs/tutorialkit.dev/src/content/docs/reference/images/theming-webcontainers.png b/docs/tutorialkit.dev/src/content/docs/reference/images/theming-webcontainers.png
diff --git a/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx b/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx
@@ -316,6 +316,17 @@ The navigation cards are the cards at the bottom of a lesson to navigate to the
 | `--tk-elements-navCard-iconColor`            | The icon color of the navigation card.                     |
 | `--tk-elements-navCard-iconColorHover`       | The icon color of the navigation card when hovering.       |
 
+### Webcontainers link
+
+Link to [webcontainers.io](https://webcontainers.io/) that's shown below navigation cards.
+
+![Webcontainers Link](./images/theming-webcontainers.png)
+
+| Token                                            | Description                                         |
+| ------------------------------------------------ | --------------------------------------------------- |
+| `--tk-elements-webcontainersLink-textColor`      | The text color of the link                          |
+| `--tk-elements-webcontainersLink-textColorHover` | The text color of the link when hovering.           |
+
 ### Edit Page Link
 
 The edit page link is shown above the navigation cards when configured by [`editPageLink` option](/reference/configuration/#editpagelink).

diff --git a/packages/astro/src/default/components/TutorialContent.astro b/packages/astro/src/default/components/TutorialContent.astro
@@ -38,4 +38,11 @@ const { Markdown, editPageLink, prev, next } = lesson;
       {next && <NavCard lesson={next} type="next" />}
     </div>
   </div>
+
+  <a
+    class="inline-block mt-6 font-size-3.5 underline text-tk-elements-webcontainersLink-textColor hover:text-tk-elements-webcontainersLink-textColorHover"
+    href="https://webcontainers.io/"
+  >
+    {lesson.data.i18n!.webcontainerLinkText}
+  </a>
 </div>
diff --git a/packages/astro/src/default/styles/variables.css b/packages/astro/src/default/styles/variables.css
@@ -245,6 +245,10 @@
   --tk-elements-navCard-iconColor: var(--tk-elements-app-textColor);
   --tk-elements-navCard-iconColorHover: var(--tk-text-accent);
 
+  /* Webcontainers link */
+  --tk-elements-webcontainersLink-textColor: var(--tk-text-secondary);
+  --tk-elements-webcontainersLink-textColorHover: var(--tk-text-active);
+
   /* Edit Page Link */
   --tk-elements-editPageLink-textColor: var(--tk-elements-app-textColor);
   --tk-elements-editPageLink-textColorHover: var(--tk-text-active);
@@ -331,7 +335,6 @@
   --tk-elements-bootScreen-primaryButton-iconColor: var(--tk-text-primary-inverted);
   --tk-elements-bootScreen-primaryButton-iconColorHover: var(--tk-text-primary-inverted);
 
-
   /* BootScreen > Status > Positive */
   --tk-elements-status-positive-textColor: var(--tk-text-positive);
   --tk-elements-status-positive-iconColor: var(--tk-elements-status-positive-textColor);

diff --git a/packages/astro/src/default/utils/content/default-localization.ts b/packages/astro/src/default/utils/content/default-localization.ts
@@ -5,6 +5,7 @@ export const DEFAULT_LOCALIZATION = {
   noPreviewNorStepsText: 'No preview to run nor steps to show',
   startWebContainerText: 'Run this tutorial',
   editPageText: 'Edit this page',
+  webcontainerLinkText: 'Powered by Webcontainer',
   filesTitleText: 'Files',
   prepareEnvironmentTitleText: 'Preparing Environment',
   toggleTerminalButtonText: 'Toggle Terminal',

diff --git a/packages/theme/src/theme.ts b/packages/theme/src/theme.ts
@@ -252,6 +252,10 @@ export const theme = {
           iconColor: 'var(--tk-elements-navCard-iconColor)',
           iconColorHover: 'var(--tk-elements-navCard-iconColorHover)',
         },
+        webcontainersLink: {
+          textColor: 'var(--tk-elements-webcontainersLink-textColor)',
+          textColorHover: 'var(--tk-elements-webcontainersLink-textColorHover)',
+        },
         editPageLink: {
           textColor: 'var(--tk-elements-editPageLink-textColor)',
           textColorHover: 'var(--tk-elements-editPageLink-textColorHover)',

diff --git a/packages/types/src/schemas/i18n.ts b/packages/types/src/schemas/i18n.ts
@@ -15,6 +15,13 @@ export const i18nSchema = z.object({
    */
   editPageText: z.string().optional().describe('Text of the edit page link.'),
 
+  /**
+   * Text of the webcontainer link.
+   *
+   * @default 'Powered by Webcontainer'
+   */
+  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.
    *