diff --git a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx index 5e6efbdab..a084ea0c1 100644 --- 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-editpagelink.png b/docs/tutorialkit.dev/src/content/docs/reference/images/theming-editpagelink.png deleted file mode 100644 index c3d28d409..000000000 Binary files a/docs/tutorialkit.dev/src/content/docs/reference/images/theming-editpagelink.png and /dev/null differ diff --git a/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx b/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx index 014c35e42..f8ea1fe63 100644 --- a/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx +++ b/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx @@ -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: +### 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. diff --git a/packages/astro/src/default/components/TutorialContent.astro b/packages/astro/src/default/components/TutorialContent.astro index 49c85b098..7a49c1a8b 100644 --- a/packages/astro/src/default/components/TutorialContent.astro +++ b/packages/astro/src/default/components/TutorialContent.astro @@ -18,12 +18,12 @@ const { Markdown, editPageLink, prev, next } = lesson; { editPageLink && ( -
+
- + {lesson.data.i18n!.editPageText}
@@ -38,4 +38,11 @@ const { Markdown, editPageLink, prev, next } = lesson; {next && }
+ + + {lesson.data.i18n!.webcontainerLinkText} + diff --git a/packages/astro/src/default/styles/markdown.css b/packages/astro/src/default/styles/markdown.css index 330f36a68..9fa993e58 100644 --- a/packages/astro/src/default/styles/markdown.css +++ b/packages/astro/src/default/styles/markdown.css @@ -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 */ diff --git a/packages/astro/src/default/styles/variables.css b/packages/astro/src/default/styles/variables.css index 051b97788..f748dc0ac 100644 --- a/packages/astro/src/default/styles/variables.css +++ b/packages/astro/src/default/styles/variables.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); diff --git a/packages/astro/src/default/utils/content/default-localization.ts b/packages/astro/src/default/utils/content/default-localization.ts index decd68756..09534bdbc 100644 --- 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/template/src/content/tutorial/1-basics/1-introduction/2-foo/content.mdx b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/content.mdx index 3597a0930..b60458a21 100644 --- a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/content.mdx +++ b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/content.mdx @@ -9,6 +9,7 @@ previews: - [2, 'Bar'] terminal: panels: 'terminal' +editPageLink: 'https://tutorialkit.dev' --- # Foo diff --git a/packages/theme/src/theme.ts b/packages/theme/src/theme.ts index 2edcc04c8..b7bf219d6 100644 --- a/packages/theme/src/theme.ts +++ b/packages/theme/src/theme.ts @@ -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)', diff --git a/packages/types/src/schemas/i18n.ts b/packages/types/src/schemas/i18n.ts index cdd49e50c..2176013aa 100644 --- 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. *