Merge branch 'main' into joan/default-route

Author: Nemikolh

.github/workflows/ci.yaml

@@ -19,15 +19,13 @@ jobs:
           - os: windows-latest
             node_version: 20.13.1 # 20.14.0 keeps causing a native `node::SetCppgcReference+18123` error in Vitest
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Setup
         uses: pnpm/action-setup@v4
-        with:
-          version: 8.15.6
-      - name: Checkout
-        uses: actions/checkout@v4
       - name: Install dependencies
         run: pnpm install
       - name: Lint
@@ -41,12 +39,10 @@ jobs:
     name: Docs
     runs-on: ubuntu-latest
     steps:
-      - name: Setup
-        uses: pnpm/action-setup@v4
-        with:
-          version: 8.15.6
       - name: Checkout
         uses: actions/checkout@v4
+      - name: Setup
+        uses: pnpm/action-setup@v4
       - name: Install dependencies
         run: pnpm install
       - name: Build

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 tsconfig.tsbuildinfo
 tsconfig.build.tsbuildinfo
 .tmp
+.tmp-*

docs/tutorialkit.dev/astro.config.ts

@@ -34,13 +34,9 @@ export default defineConfig({
               link: '/guides/installation/',
             },
             {
-              label: 'Creating a Lesson',
+              label: 'Content creation',
               link: '/guides/creating-content/',
             },
-            {
-              label: 'Configuration',
-              link: '/guides/configuration/',
-            },
             {
               label: 'Deployment',
               link: '/guides/deployment/',
@@ -51,6 +47,19 @@ export default defineConfig({
             },
           ],
         },
+        {
+          label: 'Reference',
+          items: [
+            {
+              label: 'Configuration',
+              link: '/reference/configuration/',
+            },
+            {
+              label: 'Theming',
+              link: '/reference/theming/',
+            },
+          ],
+        },
       ],
       tableOfContents: {
         maxHeadingLevel: 5,

docs/tutorialkit.dev/src/content/docs/guides/about.mdx

@@ -21,4 +21,4 @@ This documentation will guide you through the steps to build your first interact
 
 As the first step, see the [Installation](/guides/installation/) page to learn how to generate the project, and once you do, learn the basics of creating the content and corresponding code in [Creating a Lesson](/guides/creating-content/).
 
-This will give you the basics needed to start compiling your training materials into an interactive onboarding experience. However, you'll likely want to customize that experience to fit your specific needs. For that, TutorialKit offers a range of configuration and theming options, which we have covered in the [Configuration](/guides/configuration) page.
+This will give you the basics needed to start compiling your training materials into an interactive onboarding experience. However, you'll likely want to customize that experience to fit your specific needs. For that, TutorialKit offers a range of configuration and theming options, which we have covered in the [Configuration](/reference/configuration) page.

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

@@ -1,6 +1,6 @@
 ---
-title: Creating a Lesson
-description: 'Creating lessons in TutorialKit.'
+title: Content creation
+description: 'Creating content in TutorialKit.'
 ---
 import { FileTree } from '@astrojs/starlight/components';
 
@@ -109,3 +109,38 @@ template: my-advanced-template
 ```
 
 This declaration will make TutorialKit use the `src/templates/my-advanced-template` directory as the base for the lesson.
+
+If you start having a lot of templates and they all share some files, you can create a shared template that they all extend. This way, you can keep the shared files in one place and avoid duplication. To do that, you need to specify the `extends` property in the template's `.tk-config.json` file:
+
+```json
+{
+  "extends": "../shared-template"
+}
+```
+
+This will make the template inherit all files from the `shared-template` directory. You can then override any file in the template by placing a file with the same name in the template's directory.
+Here's an example of how you can structure your templates:
+
+```
+src/templates
+├── shared-template
+│   ├── index.js
+│   ├── index.html
+│   └── package.json
+│
+└── first-template
+│   │   # Contains { "extends": "../shared-template" }
+│   │   # Inherits all files from "shared-template"
+│   ├── .tk-config.json
+│   │
+│   │   # Only available in first-template
+│   └── main.js
+│
+└── second-template
+    │   # Contains { "extends": "../shared-template" }
+    │   # Inherits all files from "shared-template"
+    ├── .tk-config.json
+    │
+    │   # Overrides "index.js" from "shared-template"
+    └── index.js
+```

docs/tutorialkit.dev/src/content/docs/guides/ui.mdx

@@ -40,7 +40,7 @@ The preview displays the application which is a result of applying lesson files
 
 <Image src={uiPreviewImage} alt="TutorialKit's Preview" />
 
-Before your application template's dev server opens a port with something to be displayed, the preview shows the preparation steps such as "Installing dependencies", "Starting HTTP server" to indicate progress to the user. Note that you can customize these steps for each lesson, chapter or part of the tutorial (see: [prepareCommands](/guides/configuration/#preparecommands) reference).
+Before your application template's dev server opens a port with something to be displayed, the preview shows the preparation steps such as "Installing dependencies", "Starting HTTP server" to indicate progress to the user. Note that you can customize these steps for each lesson, chapter or part of the tutorial (see: [prepareCommands](/reference/configuration/#preparecommands) reference).
 
 The preview updates in real-time as the user makes changes to the code, chooses to see the solution or navigates between lessons.