From 7f96adb8de7382883a4beca21825a4236839e25e Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Wed, 9 Oct 2024 21:12:13 -0400 Subject: [PATCH 1/9] add docs for file imports --- .../content/docs/guides/creating-content.mdx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx index a2b50e5df..7307ba2a3 100644 --- a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx +++ b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx @@ -144,3 +144,25 @@ src/templates │ # Overrides "index.js" from "shared-template" └── index.js ``` + +## Importing files + +You can import files from your code template, `_files` and `_solution` folder using the `file` or `solution` shortcode. This shortcode inserts the content of the specified file directly into your lesson content. + +- `file` shortcode is used to reference files from the lesson `_files` or code template folder. +- `solution` shortcode is used to reference files from the lesson `_solution` folder. + +For example, the following code will insert the content of the `box.css` file from the `_files` folder: + +````md "file" +```file:/box.css +``` +```` + +```css +.box { + width: 100px; + height: 100px; + background-color: red; +} +``` From d071b2a4372ea6020e11a99da5ea574f5e7d5e98 Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Fri, 11 Oct 2024 21:56:35 -0400 Subject: [PATCH 2/9] add section for callouts, mdx, md, code blocks and import files --- .../content/docs/guides/creating-content.mdx | 47 ++++++++++++++++++- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx index 7307ba2a3..0491a33c3 100644 --- a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx +++ b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx @@ -145,9 +145,52 @@ src/templates └── index.js ``` -## Importing files +## Markdown and MDX Support -You can import files from your code template, `_files` and `_solution` folder using the `file` or `solution` shortcode. This shortcode inserts the content of the specified file directly into your lesson content. +TutorialKit comes with built-in support for both Markdown and MDX, powered by Astro. This means you can leverage all Markdown and MDX features when creating lesson content. To explore the full capabilities, check out Astro's [Markdown support](https://docs.astro.build/en/guides/markdown-content/) and [MDX support](https://docs.astro.build/en/guides/integrations-guide/mdx/) documentation for more details. + +### Callouts + +Callouts are visual elements designed to highlight specific information or provide additional context within a document or user interface. They are ideal for drawing attention to important tips, warnings, and other key messages. + +``` +:::tip +Remember to save your work frequently to avoid losing any changes. +::: +``` + +:::tip +Remember to save your work frequently to avoid losing any changes. +::: + + +### Code blocks + +TutorialKit offers a comprehensive set of code block features powered by Expressive Code. It includes all core features, along with optional plugins like collapsible sections and line numbers. For a full overview, check out the [Expressive Code documentation](https://expressive-code.com/). + +````txt +```js title="code.js" ins={4} del={5} {6} "greeting" +const greeting = 'Hello, World!'; + +// This is a comment +const added = 'This line was added'; +const removed = 'This line was removed'; +const highlighted = 'This line is highlighted'; +``` +```` + +```js title="code.js" ins={4} del={5} {6} "greeting" +const greeting = 'Hello, World!'; + +// This is a comment +const added = 'This line was added'; +const removed = 'This line was removed'; +const highlighted = 'This line is highlighted'; +``` + +#### Importing files + +In addition to Expressive Code features, you can import files from your code template `_files` and `_solution` folders using the file or solution shortcodes. These shortcodes insert the content of the specified file directly into your lesson content. - `file` shortcode is used to reference files from the lesson `_files` or code template folder. - `solution` shortcode is used to reference files from the lesson `_solution` folder. From ffd19e03355dfbed90b10a1ced4fbd62f2045eb3 Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Fri, 11 Oct 2024 22:09:13 -0400 Subject: [PATCH 3/9] edit theming callout section to be centered stying and move syntax info to content page --- .../src/content/docs/guides/creating-content.mdx | 2 ++ .../src/content/docs/reference/theming.mdx | 16 +--------------- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx index 0491a33c3..94db413de 100644 --- a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx +++ b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx @@ -153,6 +153,8 @@ TutorialKit comes with built-in support for both Markdown and MDX, powered by As Callouts are visual elements designed to highlight specific information or provide additional context within a document or user interface. They are ideal for drawing attention to important tips, warnings, and other key messages. +You can create callouts using the following types: tip, info, warn, danger and success. + ``` :::tip Remember to save your work frequently to avoid losing any changes. diff --git a/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx b/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx index 33d3e51df..7e4c32d69 100644 --- a/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx +++ b/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx @@ -77,21 +77,7 @@ The content refers to the main part of the lesson that contains the text and ima ### Callouts -Callouts are visual elements used to draw attention to specific information or provide additional context within a document or user interface. They are typically used to highlight important tips, warnings, or other types of messages. - -For instanceof, here's an example of an info callout. - -![Content](./images/theming-callout.png) - -Callouts are created like this: - -``` -:::tip -This is a tip -::: -``` - -Valid callout names are `tip`, `info`, `warn` and `danger`. +Customize the appearance of each callout type by adjusting its specific style tokens. Each callout includes tokens for elements such as text color, title color, icon color, background, code snippet color, and border color. #### Tip From 58572148f4377ff2f8fdfe71c8d34657aa0ec752 Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Fri, 11 Oct 2024 22:17:50 -0400 Subject: [PATCH 4/9] add a link from callout docs to theming reference --- .../src/content/docs/guides/creating-content.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx index 94db413de..584387434 100644 --- a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx +++ b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx @@ -165,6 +165,8 @@ Remember to save your work frequently to avoid losing any changes. Remember to save your work frequently to avoid losing any changes. ::: +To customize the styles of a callout, check out the [theming reference](/reference/theming/#callouts). + ### Code blocks From e2f18ad5938447ab9d473dcaf12f7dc6a0dba102 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Mon, 14 Oct 2024 10:52:53 +0300 Subject: [PATCH 5/9] docs: review --- docs/tutorialkit.dev/src/content/docs/reference/theming.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx b/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx index 7e4c32d69..9ef529b6d 100644 --- a/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx +++ b/docs/tutorialkit.dev/src/content/docs/reference/theming.mdx @@ -79,6 +79,8 @@ The content refers to the main part of the lesson that contains the text and ima Customize the appearance of each callout type by adjusting its specific style tokens. Each callout includes tokens for elements such as text color, title color, icon color, background, code snippet color, and border color. +![Content](./images/theming-callout.png) + #### Tip | Token | Description | From f8d4207a94aa68787cd92c770b4cd6a781c9ed0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Mon, 14 Oct 2024 10:53:00 +0300 Subject: [PATCH 6/9] docs: review --- .../src/content/docs/guides/creating-content.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx index 584387434..d09ef3227 100644 --- a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx +++ b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx @@ -161,9 +161,7 @@ Remember to save your work frequently to avoid losing any changes. ::: ``` -:::tip -Remember to save your work frequently to avoid losing any changes. -::: +![Content](../reference/images/theming-callout.png) To customize the styles of a callout, check out the [theming reference](/reference/theming/#callouts). From cf7099e30c5e9fb31b41afc03bc530202bc7fc58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Mon, 14 Oct 2024 10:53:06 +0300 Subject: [PATCH 7/9] docs: review --- .../src/content/docs/guides/creating-content.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx index d09ef3227..0297553b9 100644 --- a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx +++ b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx @@ -153,7 +153,7 @@ TutorialKit comes with built-in support for both Markdown and MDX, powered by As Callouts are visual elements designed to highlight specific information or provide additional context within a document or user interface. They are ideal for drawing attention to important tips, warnings, and other key messages. -You can create callouts using the following types: tip, info, warn, danger and success. +You can create callouts using the following types: `tip`, `info`, `warn`, `danger` and `success`. ``` :::tip From 887e470625e8dbeaef957e71c69284b5e7f8e0b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Mon, 14 Oct 2024 10:53:12 +0300 Subject: [PATCH 8/9] docs: review --- .../src/content/docs/guides/creating-content.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx index 0297553b9..37a34fdf6 100644 --- a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx +++ b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx @@ -156,8 +156,10 @@ Callouts are visual elements designed to highlight specific information or provi You can create callouts using the following types: `tip`, `info`, `warn`, `danger` and `success`. ``` -:::tip -Remember to save your work frequently to avoid losing any changes. +:::info +Some info with some markdown `syntax` and a [`link`](https://tutorialkit.dev/). + +Here's a normal [link](https://tutorialkit.dev/). ::: ``` From c1c0cfdbd8795ec3448fd07a097c9cd3bebd66b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Mon, 14 Oct 2024 11:02:38 +0300 Subject: [PATCH 9/9] docs: review --- .../src/content/docs/guides/creating-content.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx index 37a34fdf6..e059d4ac8 100644 --- a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx +++ b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx @@ -172,7 +172,7 @@ To customize the styles of a callout, check out the [theming reference](/referen TutorialKit offers a comprehensive set of code block features powered by Expressive Code. It includes all core features, along with optional plugins like collapsible sections and line numbers. For a full overview, check out the [Expressive Code documentation](https://expressive-code.com/). -````txt +````md title="content.md" ```js title="code.js" ins={4} del={5} {6} "greeting" const greeting = 'Hello, World!';