Skip to content

Commit 70d20c7

Browse files
AriPerkkioAriPerkkio
authored
feat: add link to webcontainers.io (#202)
1 parent 359c0e0 commit 70d20c7

File tree

10 files changed

+52
-36
lines changed

10 files changed

+52
-36
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,13 @@ type I18nText = {
5555
*/
5656
editPageText?: string
5757

58+
/**
59+
* Text of the WebContainer link.
60+
*
61+
* @default 'Powered by WebContainer'
62+
*/
63+
webcontainerLinkText?: string,
64+
5865
/**
5966
* Text shown when there are no previews or steps to show in the prepare environment section.
6067
*

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

-12.6 KB
Binary file not shown.

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

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,22 @@ These tokens can be used to style the colors of the tutorial on a high level. Fo
4848
| `--tk-elements-app-textColor` | The text color of the TutorialKit app. |
4949
| `--tk-elements-app-backgroundColor` | The background color of the TutorialKit app. |
5050
| `--tk-elements-app-borderColor` | The border color of the TutorialKit app. |
51-
| `--tk-elements-app-linkColor` | The link color of the TutorialKit app. |
5251

5352
If you want to start with a `theme.css` file that includes all the available CSS variables you can use the following snippet:
5453

5554
<Code code={themeCSS} lang="css" title="theme.css" class="limit-code-height" />
5655

56+
### Links
57+
58+
Tokens used by links.
59+
60+
| Token | Description |
61+
| ---------------------------------------- | ---------------------------------------------------- |
62+
| `--tk-elements-link-primaryColor` | The text color of the primary links. |
63+
| `--tk-elements-link-primaryColorHover` | The text color of the primary links when hovering. |
64+
| `--tk-elements-link-secondaryColor` | The text color of the secondary links. |
65+
| `--tk-elements-link-secondaryColorHover` | The text color of the secondary links when hovering. |
66+
5767
### Content
5868

5969
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
316326
| `--tk-elements-navCard-iconColor` | The icon color of the navigation card. |
317327
| `--tk-elements-navCard-iconColorHover` | The icon color of the navigation card when hovering. |
318328

319-
### Edit Page Link
320-
321-
The edit page link is shown above the navigation cards when configured by [`editPageLink` option](/reference/configuration/#editpagelink).
322-
323-
![Edit Page Link](./images/theming-editpagelink.png)
324-
325-
| Token | Description |
326-
| ------------------------------------------- | --------------------------------------------------- |
327-
| `--tk-elements-editPageLink-textColor` | The text color of the edit page link |
328-
| `--tk-elements-editPageLink-textColorHover` | The text color of the edit page link when hovering. |
329-
| `--tk-elements-editPageLink-iconColor` | The icon color of the edit page link |
330-
| `--tk-elements-editPageLink-iconColorHover` | The icon color of the edit page link when hovering |
331-
| `--tk-elements-editPageLink-borderColor` | The border color of the edit page link |
332-
333329
### Breadcrumbs
334330

335331
The breadcrumbs are the navigation elements that show the path of the current lesson. The breadcrumbs are divided into multiple parts.

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ const { Markdown, editPageLink, prev, next } = lesson;
1818

1919
{
2020
editPageLink && (
21-
<div class="pb-4 mt-8 border-b border-tk-elements-editPageLink-borderColor">
21+
<div class="pb-4 mt-8 border-b border-tk-border-secondary">
2222
<a
2323
href={editPageLink}
24-
class="inline-flex flex-items-center text-tk-elements-editPageLink-textColor hover:text-tk-elements-editPageLink-textColorHover hover:underline"
24+
class="inline-flex flex-items-center text-tk-elements-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover hover:underline"
2525
>
26-
<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" />
26+
<span class="icon i-ph-note-pencil pointer-events-none h-5 w-5 mr-2" />
2727
<span>{lesson.data.i18n!.editPageText}</span>
2828
</a>
2929
</div>
@@ -38,4 +38,11 @@ const { Markdown, editPageLink, prev, next } = lesson;
3838
{next && <NavCard lesson={next} type="next" />}
3939
</div>
4040
</div>
41+
42+
<a
43+
class="inline-block mt-6 font-size-3.5 underline text-tk-elements-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover"
44+
href="https://webcontainers.io/"
45+
>
46+
{lesson.data.i18n!.webcontainerLinkText}
47+
</a>
4148
</div>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
--code-border-radius: 4px;
1010
--code-border-width: 1px;
1111
--code-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
12-
--link-color: var(--tk-text-accent);
12+
--link-color: var(--tk-elements-link-primaryColor);
13+
--link-color-hover: var(--tk-elements-link-primaryColorHover);
1314
--blockquote-border-color: theme('colors.gray.500');
1415
--blockquote-background: var(--code-background-color);
1516
--content-font-size: 16px;
@@ -295,7 +296,7 @@
295296
.markdown-content a code,
296297
.markdown-content code a,
297298
.markdown-content a:hover {
298-
color: unset;
299+
color: var(--link-color-hover);
299300
}
300301

301302
/* Blockquotes */

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,12 @@
135135
--tk-elements-app-backgroundColor: var(--tk-background-primary);
136136
--tk-elements-app-borderColor: var(--tk-border-primary);
137137
--tk-elements-app-textColor: var(--tk-text-primary);
138-
--tk-elements-app-linkColor: var(--tk-text-accent);
138+
139+
/* Links */
140+
--tk-elements-link-primaryColor: var(--tk-text-accent);
141+
--tk-elements-link-primaryColorHover: unset;
142+
--tk-elements-link-secondaryColor: var(--tk-text-secondary);
143+
--tk-elements-link-secondaryColorHover: var(--tk-text-primary);
139144

140145
/* Content */
141146
--tk-elements-content-textColor: var(--tk-text-body);
@@ -245,13 +250,6 @@
245250
--tk-elements-navCard-iconColor: var(--tk-elements-app-textColor);
246251
--tk-elements-navCard-iconColorHover: var(--tk-text-accent);
247252

248-
/* Edit Page Link */
249-
--tk-elements-editPageLink-textColor: var(--tk-elements-app-textColor);
250-
--tk-elements-editPageLink-textColorHover: var(--tk-text-active);
251-
--tk-elements-editPageLink-iconColor: var(--tk-elements-app-textColor);
252-
--tk-elements-editPageLink-iconColorHover: var(--tk-text-accent);
253-
--tk-elements-editPageLink-borderColor: var(--tk-border-secondary);
254-
255253
/* Breadcrumb > Nav Button */
256254
--tk-elements-breadcrumbs-navButton-iconColor: var(--tk-text-secondary);
257255
--tk-elements-breadcrumbs-navButton-iconColorHover: var(--tk-text-active);
@@ -331,7 +329,6 @@
331329
--tk-elements-bootScreen-primaryButton-iconColor: var(--tk-text-primary-inverted);
332330
--tk-elements-bootScreen-primaryButton-iconColorHover: var(--tk-text-primary-inverted);
333331

334-
335332
/* BootScreen > Status > Positive */
336333
--tk-elements-status-positive-textColor: var(--tk-text-positive);
337334
--tk-elements-status-positive-iconColor: var(--tk-elements-status-positive-textColor);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export const DEFAULT_LOCALIZATION = {
55
noPreviewNorStepsText: 'No preview to run nor steps to show',
66
startWebContainerText: 'Run this tutorial',
77
editPageText: 'Edit this page',
8+
webcontainerLinkText: 'Powered by WebContainer',
89
filesTitleText: 'Files',
910
prepareEnvironmentTitleText: 'Preparing Environment',
1011
toggleTerminalButtonText: 'Toggle Terminal',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ previews:
99
- [2, 'Bar']
1010
terminal:
1111
panels: 'terminal'
12+
editPageLink: 'https://tutorialkit.dev'
1213
---
1314

1415
# Foo

‎packages/theme/src/theme.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,12 @@ export const theme = {
144144
textColor: 'var(--tk-elements-app-textColor)',
145145
linkColor: 'var(--tk-elements-app-linkColor)',
146146
},
147+
link: {
148+
primaryColor: 'var(--tk-elements-link-primaryColor)',
149+
primaryColorHover: 'var(--tk-elements-link-primaryColorHover)',
150+
secondaryColor: 'var(--tk-elements-link-secondaryColor)',
151+
secondaryColorHover: 'var(--tk-elements-link-secondaryColorHover)',
152+
},
147153
content: {
148154
textColor: 'var(--tk-elements-content-textColor)',
149155
headingTextColor: 'var(--tk-elements-content-headingTextColor)',
@@ -252,13 +258,6 @@ export const theme = {
252258
iconColor: 'var(--tk-elements-navCard-iconColor)',
253259
iconColorHover: 'var(--tk-elements-navCard-iconColorHover)',
254260
},
255-
editPageLink: {
256-
textColor: 'var(--tk-elements-editPageLink-textColor)',
257-
textColorHover: 'var(--tk-elements-editPageLink-textColorHover)',
258-
iconColor: 'var(--tk-elements-editPageLink-iconColor)',
259-
iconColorHover: 'var(--tk-elements-editPageLink-iconColorHover)',
260-
borderColor: 'var(--tk-elements-editPageLink-borderColor)',
261-
},
262261
breadcrumbs: {
263262
navButton: {
264263
iconColor: 'var(--tk-elements-breadcrumbs-navButton-iconColor)',

‎packages/types/src/schemas/i18n.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@ export const i18nSchema = z.object({
1515
*/
1616
editPageText: z.string().optional().describe('Text of the edit page link.'),
1717

18+
/**
19+
* Text of the WebContainer link.
20+
*
21+
* @default 'Powered by WebContainer'
22+
*/
23+
webcontainerLinkText: z.string().optional().describe('Text of the WebContainer link.'),
24+
1825
/**
1926
* Text shown when there are no previews or steps to show in the prepare environment section.
2027
*

0 commit comments

Comments
 (0)