feat: template inheritance

.gitignore

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

docs/tutorialkit.dev/astro.config.ts

@@ -38,7 +38,7 @@ export default defineConfig({
               link: '/guides/installation/',
             },
             {
-              label: 'Creating a Lesson',
+              label: 'Content creation',
               link: '/guides/creating-content/',
             },
             {

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
+```

packages/astro/src/default/utils/constants.ts

@@ -1,3 +1,4 @@
 export const RESIZABLE_PANELS = {
   Main: 'main',
 } as const;
+export const IGNORED_FILES = ['**/.DS_Store', '**/*.swp'];

packages/astro/src/default/utils/content.ts

@@ -11,6 +11,7 @@ import { folderPathToFilesRef } from '@tutorialkit/types';
 import { getCollection } from 'astro:content';
 import glob from 'fast-glob';
 import path from 'node:path';
+import { IGNORED_FILES } from './constants';
 import { logger } from './logger';
 import { joinPaths } from './url';
 
@@ -332,6 +333,8 @@ async function getFilesRefList(pathToFolder: string): Promise<FilesRefList> {
   const filePaths = (
     await glob(`${glob.convertPathToPattern(root)}/**/*`, {
       onlyFiles: true,
+      ignore: IGNORED_FILES,
+      dot: true,
     })
   ).map((filePath) => `/${path.relative(root, filePath)}`);
 

packages/astro/src/index.ts

@@ -2,7 +2,7 @@ import type { AstroConfig, AstroIntegration } from 'astro';
 import { fileURLToPath } from 'node:url';
 import { extraIntegrations } from './integrations.js';
 import { updateMarkdownConfig } from './remark/index.js';
-import { WebContainerFiles } from './webcontainer-files.js';
+import { WebContainerFiles } from './webcontainer-files/index.js';
 import { userlandCSS, watchUserlandCSS } from './vite-plugins/css.js';
 import { tutorialkitStore } from './vite-plugins/store.js';
 import { tutorialkitCore } from './vite-plugins/core.js';
@@ -116,15 +116,15 @@ export default function createPlugin({ defaultRoutes = true, isolation, enterpri
       'astro:config:done'({ config }) {
         _config = config;
       },
-      'astro:server:setup'(options) {
+      async 'astro:server:setup'(options) {
         if (!_config) {
           return;
         }
 
         const { server, logger } = options;
         const projectRoot = fileURLToPath(_config.root);
 
-        webcontainerFiles.serverSetup(projectRoot, options);
+        await webcontainerFiles.serverSetup(projectRoot, options);
 
         watchUserlandCSS(server, logger);
       },