feat: add link to webcontainers.io (#202)

Author: AriPerkkio

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.
    *

docs/tutorialkit.dev/src/content/docs/reference/images/theming-editpagelink.png

@@ -48,12 +48,22 @@ These tokens can be used to style the colors of the tutorial on a high level. Fo
 | `--tk-elements-app-textColor`           | The text color of the TutorialKit app.       |
 | `--tk-elements-app-backgroundColor`     | The background color of the TutorialKit app. |
 | `--tk-elements-app-borderColor`         | The border color of the TutorialKit app.     |
-| `--tk-elements-app-linkColor`           | The link color of the TutorialKit app.       |
 
 If you want to start with a `theme.css` file that includes all the available CSS variables you can use the following snippet:
 
 <Code code={themeCSS} lang="css" title="theme.css" class="limit-code-height" />
 
+### Links
+
+Tokens used by links.
+
+| Token                                    | Description                                          |
+| ---------------------------------------- | ---------------------------------------------------- |
+| `--tk-elements-link-primaryColor`        | The text color of the primary links.                 |
+| `--tk-elements-link-primaryColorHover`   | The text color of the primary links when hovering.   |
+| `--tk-elements-link-secondaryColor`      | The text color of the secondary links.               |
+| `--tk-elements-link-secondaryColorHover` | The text color of the secondary links when hovering. |
+
 ### Content
 
 The content refers to the main part of the lesson that contains the text and images.
@@ -316,20 +326,6 @@ 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.       |
 
-### Edit Page Link
-
-The edit page link is shown above the navigation cards when configured by [`editPageLink` option](/reference/configuration/#editpagelink).
-
-![Edit Page Link](./images/theming-editpagelink.png)
-
-| Token                                       | Description                                         |
-| ------------------------------------------- | --------------------------------------------------- |
-| `--tk-elements-editPageLink-textColor`      | The text color of the edit page link                |
-| `--tk-elements-editPageLink-textColorHover` | The text color of the edit page link when hovering. |
-| `--tk-elements-editPageLink-iconColor`      | The icon color of the edit page link                |
-| `--tk-elements-editPageLink-iconColorHover` | The icon color of the edit page link when hovering  |
-| `--tk-elements-editPageLink-borderColor`    | The border color of the edit page link              |
-
 ### Breadcrumbs
 
 The breadcrumbs are the navigation elements that show the path of the current lesson. The breadcrumbs are divided into multiple parts.

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

@@ -18,12 +18,12 @@ const { Markdown, editPageLink, prev, next } = lesson;
 
   {
     editPageLink && (
-      <div class="pb-4 mt-8 border-b border-tk-elements-editPageLink-borderColor">
+      <div class="pb-4 mt-8 border-b border-tk-border-secondary">
         <a
           href={editPageLink}
-          class="inline-flex flex-items-center text-tk-elements-editPageLink-textColor hover:text-tk-elements-editPageLink-textColorHover hover:underline"
+          class="inline-flex flex-items-center text-tk-elements-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover hover:underline"
         >
-          <span class="icon i-ph-note-pencil pointer-events-none h-5 w-5 mr-2 text-tk-elements-editPageLink-iconColor group-hover:text-tk-elements-editPageLink-iconColorHover" />
+          <span class="icon i-ph-note-pencil pointer-events-none h-5 w-5 mr-2" />
           <span>{lesson.data.i18n!.editPageText}</span>
         </a>
       </div>
@@ -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-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover"
+    href="https://webcontainers.io/"
+  >
+    {lesson.data.i18n!.webcontainerLinkText}
+  </a>
 </div>

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

@@ -9,7 +9,8 @@
   --code-border-radius: 4px;
   --code-border-width: 1px;
   --code-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
-  --link-color: var(--tk-text-accent);
+  --link-color: var(--tk-elements-link-primaryColor);
+  --link-color-hover: var(--tk-elements-link-primaryColorHover);
   --blockquote-border-color: theme('colors.gray.500');
   --blockquote-background: var(--code-background-color);
   --content-font-size: 16px;
@@ -295,7 +296,7 @@
 .markdown-content a code,
 .markdown-content code a,
 .markdown-content a:hover {
-  color: unset;
+  color: var(--link-color-hover);
 }
 
 /* Blockquotes */

packages/astro/src/default/styles/markdown.css

@@ -135,7 +135,12 @@
   --tk-elements-app-backgroundColor: var(--tk-background-primary);
   --tk-elements-app-borderColor: var(--tk-border-primary);
   --tk-elements-app-textColor: var(--tk-text-primary);
-  --tk-elements-app-linkColor: var(--tk-text-accent);
+
+  /* Links */
+  --tk-elements-link-primaryColor: var(--tk-text-accent);
+  --tk-elements-link-primaryColorHover: unset;
+  --tk-elements-link-secondaryColor: var(--tk-text-secondary);
+  --tk-elements-link-secondaryColorHover: var(--tk-text-primary);
 
   /* Content */
   --tk-elements-content-textColor: var(--tk-text-body);
@@ -245,13 +250,6 @@
   --tk-elements-navCard-iconColor: var(--tk-elements-app-textColor);
   --tk-elements-navCard-iconColorHover: var(--tk-text-accent);
 
-  /* Edit Page Link */
-  --tk-elements-editPageLink-textColor: var(--tk-elements-app-textColor);
-  --tk-elements-editPageLink-textColorHover: var(--tk-text-active);
-  --tk-elements-editPageLink-iconColor: var(--tk-elements-app-textColor);
-  --tk-elements-editPageLink-iconColorHover: var(--tk-text-accent);
-  --tk-elements-editPageLink-borderColor: var(--tk-border-secondary);
-
   /* Breadcrumb > Nav Button */
   --tk-elements-breadcrumbs-navButton-iconColor: var(--tk-text-secondary);
   --tk-elements-breadcrumbs-navButton-iconColorHover: var(--tk-text-active);
@@ -331,7 +329,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);

packages/astro/src/default/styles/variables.css

@@ -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',

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

@@ -9,6 +9,7 @@ previews:
   - [2, 'Bar']
 terminal:
   panels: 'terminal'
+editPageLink: 'https://tutorialkit.dev'
 ---
 
 # Foo

packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/content.mdx

@@ -144,6 +144,12 @@ export const theme = {
           textColor: 'var(--tk-elements-app-textColor)',
           linkColor: 'var(--tk-elements-app-linkColor)',
         },
+        link: {
+          primaryColor: 'var(--tk-elements-link-primaryColor)',
+          primaryColorHover: 'var(--tk-elements-link-primaryColorHover)',
+          secondaryColor: 'var(--tk-elements-link-secondaryColor)',
+          secondaryColorHover: 'var(--tk-elements-link-secondaryColorHover)',
+        },
         content: {
           textColor: 'var(--tk-elements-content-textColor)',
           headingTextColor: 'var(--tk-elements-content-headingTextColor)',
@@ -252,13 +258,6 @@ export const theme = {
           iconColor: 'var(--tk-elements-navCard-iconColor)',
           iconColorHover: 'var(--tk-elements-navCard-iconColorHover)',
         },
-        editPageLink: {
-          textColor: 'var(--tk-elements-editPageLink-textColor)',
-          textColorHover: 'var(--tk-elements-editPageLink-textColorHover)',
-          iconColor: 'var(--tk-elements-editPageLink-iconColor)',
-          iconColorHover: 'var(--tk-elements-editPageLink-iconColorHover)',
-          borderColor: 'var(--tk-elements-editPageLink-borderColor)',
-        },
         breadcrumbs: {
           navButton: {
             iconColor: 'var(--tk-elements-breadcrumbs-navButton-iconColor)',

packages/theme/src/theme.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.
    *