Merge branch 'main' into doc-meta

AriPerkkio · web-flow · commit ebd26f6d8c2f · 2024-10-18T15:48:09.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,21 @@
+# [1.1.0](https://github.com/stackblitz/tutorialkit/compare/1.0.0...1.1.0) (2024-10-18)
+
+
+### Bug Fixes
+
+* **astro:** correct error message when chapter not found ([#361](https://github.com/stackblitz/tutorialkit/issues/361)) ([0510474](https://github.com/stackblitz/tutorialkit/commit/05104741a73180dbaeb583317cd77df104d2d2c7))
+* **astro:** types of override components to optional ([#376](https://github.com/stackblitz/tutorialkit/issues/376)) ([0af3848](https://github.com/stackblitz/tutorialkit/commit/0af384889f5a3e7e46ea4803b1b1a631c15d331f))
+* **cli:** list `eject` command in `--help` ([#373](https://github.com/stackblitz/tutorialkit/issues/373)) ([bc61229](https://github.com/stackblitz/tutorialkit/commit/bc61229f156db3043b57dd3f85f09b72702a70b0))
+
+
+### Features
+
+* add file extension based icons ([#369](https://github.com/stackblitz/tutorialkit/issues/369)) ([ff39cdc](https://github.com/stackblitz/tutorialkit/commit/ff39cdc258764c8d4d1bebe2dce2795fe10e1870))
+* **astro:** add `custom` configuration option for passing custom fields ([#378](https://github.com/stackblitz/tutorialkit/issues/378)) ([7c6ede9](https://github.com/stackblitz/tutorialkit/commit/7c6ede95730150b68be763d4c87f1da1bc42503c))
+* **astro:** override components to support `HeadTags` ([#375](https://github.com/stackblitz/tutorialkit/issues/375)) ([e93d11a](https://github.com/stackblitz/tutorialkit/commit/e93d11a11b8a01dc6de859842b0dc675b01008de))
+
+
+
 # [1.0.0](https://github.com/stackblitz/tutorialkit/compare/0.2.3...1.0.0) (2024-10-01)
 
 
diff --git a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
@@ -404,6 +404,58 @@ type TemplateType = "html" | "node" | "angular-cli" | "create-react-app" | "java
 
 ```
 
+##### `meta`
+
+Configures `<meta>` tags for Open Graph protocole and Twitter.
+TutorialKit will use your logo as the default image.
+<PropertyTable inherited type="MetaTagsSchema" />
+
+The `MetaTagsSchema` type has the following shape:
+
+```ts
+type MetaTagsSchema = {
+  image?: string;
+  description?: string;
+  title?: string;
+}
+
+```
+
+Example value:
+```yaml
+meta:
+  image: /cover.png
+  title: Title shown on social media and search engines
+  description: Description shown on social media and search engines
+```
+
+:::tip
+If your logo uses the SVG format, it may not display on most social platforms.
+Use a raster format instead, such as WEBP or PNG.
+:::
+
+##### `custom`
+
+Assign custom fields to a chapter/part/lesson.
+<PropertyTable inherited type="Record<string,any>" />
+
+This is useful when you want to consume items for the default `tutorial` collection
+in order to implement custom features.
+
+```yaml
+custom:
+  publishedAt: 2024-16-10
+  tags: tutorialkit,astro,vite
+```
+
+```ts
+import { getCollection } from 'astro:content';
+const collection = await getCollection('tutorial');
+for (const entry of collection) {
+  console.log("This part was published at:", entry.data?.custom?.publishedAt)
+}
+```
+
 ## Configure the Tutorialkit Astro integration
 
 `@tutorialkit/astro` is an integration for Astro. You can configure the integration in your `astro.config.ts` file.
diff --git a/e2e/src/components/CustomMetadata.astro b/e2e/src/components/CustomMetadata.astro
@@ -0,0 +1,11 @@
+---
+import { getCollection } from 'astro:content';
+const collection = await getCollection('tutorial');
+
+const lesson = collection.find((c) => c.data.type === 'lesson' && c.slug.startsWith(Astro.params.slug!))!;
+const { custom } = lesson.data;
+---
+
+<h2>Custom metadata</h2>
+
+<pre>{JSON.stringify(custom, null,2)}</pre>
diff --git a/e2e/src/content/tutorial/tests/metadata/custom/content.mdx b/e2e/src/content/tutorial/tests/metadata/custom/content.mdx
@@ -0,0 +1,15 @@
+---
+type: lesson
+title: Custom
+terminal:
+  panels: terminal
+custom:
+  custom-message: 'Hello world'
+  numeric-field: 5173
+---
+
+import CustomMetaData from "@components/CustomMetadata.astro"
+
+# Metadata test - Custom
+
+<CustomMetaData />
diff --git a/e2e/src/content/tutorial/tests/metadata/meta.md b/e2e/src/content/tutorial/tests/metadata/meta.md
@@ -0,0 +1,4 @@
+---
+type: chapter
+title: Metadata
+---
diff --git a/e2e/test/metadata.test.ts b/e2e/test/metadata.test.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+const BASE_URL = '/tests/metadata';
+
+test('developer can pass custom metadata to lesson', async ({ page }) => {
+  await page.goto(`${BASE_URL}/custom`);
+  await expect(page.getByRole('heading', { level: 1, name: 'Metadata test - Custom' })).toBeVisible();
+
+  await expect(page.getByRole('heading', { level: 2, name: 'Custom metadata' })).toBeVisible();
+
+  await expect(page.getByText('"custom-message": "Hello world"')).toBeVisible();
+  await expect(page.getByText('"numeric-field": 5173')).toBeVisible();
+});
diff --git a/packages/astro/CHANGELOG.md b/packages/astro/CHANGELOG.md
@@ -1,3 +1,18 @@
+# [1.1.0](https://github.com/stackblitz/tutorialkit/compare/1.0.0...1.1.0) "@tutorialkit/astro" (2024-10-18)
+
+
+### Bug Fixes
+
+* **astro:** correct error message when chapter not found ([#361](https://github.com/stackblitz/tutorialkit/issues/361)) ([0510474](https://github.com/stackblitz/tutorialkit/commit/05104741a73180dbaeb583317cd77df104d2d2c7))
+* **astro:** types of override components to optional ([#376](https://github.com/stackblitz/tutorialkit/issues/376)) ([0af3848](https://github.com/stackblitz/tutorialkit/commit/0af384889f5a3e7e46ea4803b1b1a631c15d331f))
+
+
+### Features
+
+* **astro:** override components to support `HeadTags` ([#375](https://github.com/stackblitz/tutorialkit/issues/375)) ([e93d11a](https://github.com/stackblitz/tutorialkit/commit/e93d11a11b8a01dc6de859842b0dc675b01008de))
+
+
+
 # [1.0.0](https://github.com/stackblitz/tutorialkit/compare/0.2.3...1.0.0) "@tutorialkit/astro" (2024-10-01)
 
 
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit/astro",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "TutorialKit integration for Astro (https://astro.build)",
   "author": "StackBlitz Inc.",
   "type": "module",
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
@@ -1,3 +1,18 @@
+# [1.1.0](https://github.com/stackblitz/tutorialkit/compare/1.0.0...1.1.0) "@tutorialkit/cli" (2024-10-18)
+
+
+### Bug Fixes
+
+* **cli:** list `eject` command in `--help` ([#373](https://github.com/stackblitz/tutorialkit/issues/373)) ([bc61229](https://github.com/stackblitz/tutorialkit/commit/bc61229f156db3043b57dd3f85f09b72702a70b0))
+
+
+### Features
+
+* add file extension based icons ([#369](https://github.com/stackblitz/tutorialkit/issues/369)) ([ff39cdc](https://github.com/stackblitz/tutorialkit/commit/ff39cdc258764c8d4d1bebe2dce2795fe10e1870))
+* **astro:** override components to support `HeadTags` ([#375](https://github.com/stackblitz/tutorialkit/issues/375)) ([e93d11a](https://github.com/stackblitz/tutorialkit/commit/e93d11a11b8a01dc6de859842b0dc675b01008de))
+
+
+
 # [1.0.0](https://github.com/stackblitz/tutorialkit/compare/0.2.3...1.0.0) "@tutorialkit/cli" (2024-10-01)
 
 
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit/cli",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Interactive tutorials powered by WebContainer API",
   "author": "StackBlitz Inc.",
   "type": "module",
diff --git a/packages/create-tutorial/CHANGELOG.md b/packages/create-tutorial/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [0.0.3](https://github.com/stackblitz/tutorialkit/compare/1.0.0...0.0.3) "create-tutorial" (2024-10-18)
+
+
+
 ## [0.0.3](https://github.com/stackblitz/tutorialkit/compare/0.2.3...0.0.3) "create-tutorial" (2024-10-01)
 
 
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,3 +1,12 @@
+# [1.1.0](https://github.com/stackblitz/tutorialkit/compare/1.0.0...1.1.0) "@tutorialkit/react" (2024-10-18)
+
+
+### Features
+
+* add file extension based icons ([#369](https://github.com/stackblitz/tutorialkit/issues/369)) ([ff39cdc](https://github.com/stackblitz/tutorialkit/commit/ff39cdc258764c8d4d1bebe2dce2795fe10e1870))
+
+
+
 # [1.0.0](https://github.com/stackblitz/tutorialkit/compare/0.2.3...1.0.0) "@tutorialkit/react" (2024-10-01)
 
 
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "TutorialKit's React components and utilities",
   "author": "StackBlitz Inc.",
   "type": "module",
diff --git a/packages/runtime/CHANGELOG.md b/packages/runtime/CHANGELOG.md
@@ -1,3 +1,7 @@
+# [1.1.0](https://github.com/stackblitz/tutorialkit/compare/1.0.0...1.1.0) "@tutorialkit/runtime" (2024-10-18)
+
+
+
 # [1.0.0](https://github.com/stackblitz/tutorialkit/compare/0.2.3...1.0.0) "@tutorialkit/runtime" (2024-10-01)
 
 
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit/runtime",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "TutorialKit runtime",
   "author": "StackBlitz Inc.",
   "type": "module",
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md b/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md
@@ -12,8 +12,11 @@ prepareCommands:
 terminal:
   panels: ['terminal', 'output']
 meta: 
-    description: "This is lesson 1"
-    image: "/logo.svg"
+  description: "This is lesson 1"
+  image: "/logo.svg"
+custom:
+  publishedAt: "2024-10-16"
+  
 ---
 
 # Kitchen Sink [Heading 1]
diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md
@@ -1,3 +1,7 @@
+# [1.1.0](https://github.com/stackblitz/tutorialkit/compare/1.0.0...1.1.0) "@tutorialkit/theme" (2024-10-18)
+
+
+
 # [1.0.0](https://github.com/stackblitz/tutorialkit/compare/0.2.3...1.0.0) "@tutorialkit/theme" (2024-10-01)
 
 
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit/theme",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "TutorialKit theme configuration",
   "author": "StackBlitz Inc.",
   "type": "module",
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
@@ -1,3 +1,12 @@
+# [1.1.0](https://github.com/stackblitz/tutorialkit/compare/1.0.0...1.1.0) "@tutorialkit/types" (2024-10-18)
+
+
+### Features
+
+* **astro:** add `custom` configuration option for passing custom fields ([#378](https://github.com/stackblitz/tutorialkit/issues/378)) ([7c6ede9](https://github.com/stackblitz/tutorialkit/commit/7c6ede95730150b68be763d4c87f1da1bc42503c))
+
+
+
 # [1.0.0](https://github.com/stackblitz/tutorialkit/compare/0.2.3...1.0.0) "@tutorialkit/types" (2024-10-01)
 
 
diff --git a/packages/types/package.json b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit/types",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Types for TutorialKit",
   "author": "StackBlitz Inc.",
   "type": "module",
diff --git a/packages/types/src/entities/index.ts b/packages/types/src/entities/index.ts
@@ -1,5 +1,5 @@
 import type { I18nSchema } from '../schemas/i18n.js';
-import type { ChapterSchema, LessonSchema, PartSchema } from '../schemas/index.js';
+import type { ChapterSchema, CustomSchema, LessonSchema, PartSchema } from '../schemas/index.js';
 import type { MetaTagsSchema } from '../schemas/metatags.js';
 
 export type * from './nav.js';
@@ -60,6 +60,8 @@ export type I18n = Required<NonNullable<I18nSchema>>;
 
 export type MetaTagsConfig = MetaTagsSchema;
 
+export type CustomConfig = CustomSchema;
+
 export interface Tutorial {
   logoLink?: string;
   firstPartId?: string;
diff --git a/packages/types/src/schemas/common.ts b/packages/types/src/schemas/common.ts
@@ -203,12 +203,17 @@ export const editorSchema = z.union([
   }),
 ]);
 
+const customSchema = z.record(z.string(), z.any());
+
 export type TerminalPanelType = z.infer<typeof panelTypeSchema>;
 export type TerminalSchema = z.infer<typeof terminalSchema>;
 export type EditorSchema = z.infer<typeof editorSchema>;
+export type CustomSchema = z.infer<typeof customSchema>;
 
 export const webcontainerSchema = commandsSchema.extend({
-  meta: metaTagsSchema.optional(),
+  meta: metaTagsSchema.optional().describe('Configures `<meta>` tags for Open Graph protocole and Twitter.'),
+
+  custom: customSchema.optional().describe('Assign custom fields to a chapter/part/lesson in the Astro collection'),
 
   previews: previewSchema
     .optional()

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +---
 +type: chapter
 +title: Metadata
 +---
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@tutorialkit/astro",`
`3`		`- "version": "1.0.0",`
	`3`	`+ "version": "1.1.0",`
`4`	`4`	`"description": "TutorialKit integration for Astro (https://astro.build)",`
`5`	`5`	`"author": "StackBlitz Inc.",`
`6`	`6`	`"type": "module",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@tutorialkit/cli",`
`3`		`- "version": "1.0.0",`
	`3`	`+ "version": "1.1.0",`
`4`	`4`	`"description": "Interactive tutorials powered by WebContainer API",`
`5`	`5`	`"author": "StackBlitz Inc.",`
`6`	`6`	`"type": "module",`