Merge branch 'main' into delm/feat/list-eject-command

Author: AriPerkkio

docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx

@@ -144,3 +144,72 @@ src/templates
     │   # Overrides "index.js" from "shared-template"
     └── index.js
 ```
+
+## Markdown and MDX Support
+
+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.
+
+You can create callouts using the following types: `tip`, `info`, `warn`, `danger` and `success`.
+
+```
+:::info
+Some info with some markdown `syntax` and a [`link`](https://tutorialkit.dev/).
+
+Here's a normal [link](https://tutorialkit.dev/).
+:::
+```
+
+![Content](../reference/images/theming-callout.png)
+
+To customize the styles of a callout, check out the [theming reference](/reference/theming/#callouts).
+
+
+### 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/).
+
+````md title="content.md"
+```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.
+
+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;
+}
+```

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

@@ -77,22 +77,10 @@ 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.
+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)
 
-Callouts are created like this:
-
-```
-:::tip
-This is a tip
-:::
-```
-
-Valid callout names are `tip`, `info`, `warn` and `danger`.
-
 #### Tip
 
 | Token                                            | Description                                                 |

packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap

@@ -44,6 +44,22 @@ exports[`create a project 1`] = `
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/bar/styles.css",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/index.html",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-2.cjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-3.mjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-4.css",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-5.md",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-6.png",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-7.jpg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-8.gif",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-9.xyz",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/unicorn.js",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/windows_xp.png",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_solution",
@@ -106,6 +122,22 @@ exports[`create and build a project > built project file references 1`] = `
   "1-basics-1-introduction-2-foo-files.json": [
     "/bar/styles.css",
     "/src/index.html",
+    "/src/test-1.js",
+    "/src/test-10.ts",
+    "/src/test-11.jsx",
+    "/src/test-12.tsx",
+    "/src/test-13.cts",
+    "/src/test-14.mts",
+    "/src/test-15.svg",
+    "/src/test-16.vue",
+    "/src/test-2.cjs",
+    "/src/test-3.mjs",
+    "/src/test-4.css",
+    "/src/test-5.md",
+    "/src/test-6.png",
+    "/src/test-7.jpg",
+    "/src/test-8.gif",
+    "/src/test-9.xyz",
     "/src/unicorn.js",
     "/src/windows_xp.png",
   ],
@@ -241,6 +273,22 @@ exports[`create and eject a project 1`] = `
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/bar/styles.css",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/index.html",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-2.cjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-3.mjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-4.css",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-5.md",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-6.png",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-7.jpg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-8.gif",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-9.xyz",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/unicorn.js",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/windows_xp.png",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_solution",

packages/react/src/core/FileTree.tsx

@@ -183,6 +183,9 @@ interface FileProps {
 }
 
 function File({ file: { depth, name }, onClick, selected }: FileProps) {
+  const extension = getFileExtension(name);
+  const fileIcon = extensionsToIcons.get(extension) || 'i-ph-file-duotone';
+
   return (
     <NodeButton
       className={classNames('group transition-theme', {
@@ -192,7 +195,7 @@ function File({ file: { depth, name }, onClick, selected }: FileProps) {
           selected,
       })}
       depth={depth}
-      iconClasses={classNames('i-ph-file-duotone', {
+      iconClasses={classNames(fileIcon, {
         'text-tk-elements-fileTree-file-iconColor group-hover:text-tk-elements-fileTree-file-iconColorHover': !selected,
         'text-tk-elements-fileTree-file-iconColorSelected': selected,
       })}
@@ -358,3 +361,42 @@ function compareString(a: string, b: string) {
 
   return 0;
 }
+
+function getFileExtension(filename: string) {
+  const parts = filename.split('.');
+
+  parts.shift();
+
+  const extension = parts.at(-1) || '';
+
+  return extension;
+}
+
+const extensionsToIcons = new Map([
+  ['ts', 'i-ph-file-ts-duotone'],
+  ['cts', 'i-ph-file-ts-duotone'],
+  ['mts', 'i-ph-file-ts-duotone'],
+
+  ['tsx', 'i-ph-file-tsx-duotone'],
+
+  ['js', 'i-ph-file-js-duotone'],
+  ['cjs', 'i-ph-file-js-duotone'],
+  ['mjs', 'i-ph-file-js-duotone'],
+
+  ['jsx', 'i-ph-file-jsx-duotone'],
+
+  ['html', 'i-ph-file-html-duotone'],
+
+  ['css', 'i-ph-file-css-duotone'],
+
+  ['md', 'i-ph-file-md-duotone'],
+
+  ['vue', 'i-ph-file-vue-duotone'],
+
+  ['gif', 'i-ph-file-image-duotone'],
+  ['jpg', 'i-ph-file-image-duotone'],
+  ['jpeg', 'i-ph-file-image-duotone'],
+  ['png', 'i-ph-file-image-duotone'],
+
+  ['svg', 'i-ph-file-svg-duotone'],
+]);