diff --git a/CHANGELOG.md b/CHANGELOG.md index 7551be1c7..508f2be1a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +# [1.6.0](https://github.com/stackblitz/tutorialkit/compare/1.5.2...1.6.0) (2025-09-01) + + +### Features + +* **astro:** add `expressiveCodeThemes` option ([#461](https://github.com/stackblitz/tutorialkit/issues/461)) ([1fd2b53](https://github.com/stackblitz/tutorialkit/commit/1fd2b53ab083d063f30c0cc4f86037644e085347)) + + + ## [1.5.2](https://github.com/stackblitz/tutorialkit/compare/1.5.0...1.5.2) (2025-06-17) diff --git a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx index c70ab5895..ad75c46ff 100644 --- a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx +++ b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx @@ -529,3 +529,19 @@ See [Overriding Components](/guides/overriding-components/) for details of all t Controls whether the tutorial routes are automatically added to your project. When set to `true`, it additionally adds a redirect from `/` to the first tutorial. Use `"tutorial-only"` to only add the tutorial routes without the redirect. + +### `expressiveCodeThemes` + +**type**: `[ThemeObjectOrShikiThemeName, ThemeObjectOrShikiThemeName]`
+**default**: `['light-plus', 'dark-plus']` + +Controls which themes are applied to [Expressive Code](https://expressive-code.com/). + +```ts +tutorialkit({ + expressiveCodeThemes: ['catppuccin-latte', 'catppuccin-mocha'], +}); +``` + +Make sure to provide a light and a dark theme if you want support for both light and dark modes. +See the [themes](https://expressive-code.com/guides/themes/) section of Expressive Code to learn more. diff --git a/integration/theme-resolving/inline-content.test.ts b/integration/theme-resolving/inline-content.test.ts index 1a49ada6f..7f0f0d83c 100644 --- a/integration/theme-resolving/inline-content.test.ts +++ b/integration/theme-resolving/inline-content.test.ts @@ -13,18 +13,22 @@ afterAll(async () => { await fs.rm(tmp, { force: true, recursive: true }); }); -test('getInlineContentForPackage finds files from @tutorialkit/astro', async () => { - await execa( - 'node', - [cli, 'create', 'theme-test', '--install', '--no-git', '--no-start', '--package-manager', 'pnpm', '--defaults'], - { cwd: tmp }, - ); +test( + 'getInlineContentForPackage finds files from @tutorialkit/astro', + { timeout: process.env.CI ? 60_000 : 10_000 }, + async () => { + await execa( + 'node', + [cli, 'create', 'theme-test', '--install', '--no-git', '--no-start', '--package-manager', 'pnpm', '--defaults'], + { cwd: tmp }, + ); - const content = getInlineContentForPackage({ - name: '@tutorialkit/astro', - pattern: '/dist/default/**/*.astro', - root: `${tmp}/theme-test`, - }); + const content = getInlineContentForPackage({ + name: '@tutorialkit/astro', + pattern: '/dist/default/**/*.astro', + root: `${tmp}/theme-test`, + }); - expect(content.length).toBeGreaterThan(0); -}); + expect(content.length).toBeGreaterThan(0); + }, +); diff --git a/packages/astro/CHANGELOG.md b/packages/astro/CHANGELOG.md index 6922fd829..14e442a99 100644 --- a/packages/astro/CHANGELOG.md +++ b/packages/astro/CHANGELOG.md @@ -1,3 +1,12 @@ +# [1.6.0](https://github.com/stackblitz/tutorialkit/compare/1.5.2...1.6.0) "@tutorialkit/astro" (2025-09-01) + + +### Features + +* **astro:** add `expressiveCodeThemes` option ([#461](https://github.com/stackblitz/tutorialkit/issues/461)) ([1fd2b53](https://github.com/stackblitz/tutorialkit/commit/1fd2b53ab083d063f30c0cc4f86037644e085347)) + + + ## [1.5.2](https://github.com/stackblitz/tutorialkit/compare/1.5.0...1.5.2) "@tutorialkit/astro" (2025-06-17) diff --git a/packages/astro/package.json b/packages/astro/package.json index b27fa50f0..326f56b9d 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -1,6 +1,6 @@ { "name": "@tutorialkit/astro", - "version": "1.5.2", + "version": "1.6.0", "description": "TutorialKit integration for Astro (https://astro.build)", "author": "StackBlitz Inc.", "type": "module", diff --git a/packages/astro/src/default/components/DownloadButton.tsx b/packages/astro/src/default/components/DownloadButton.tsx index a0b2f3904..562519906 100644 --- a/packages/astro/src/default/components/DownloadButton.tsx +++ b/packages/astro/src/default/components/DownloadButton.tsx @@ -34,7 +34,7 @@ async function onClick() { const link = document.createElement('a'); link.style.display = 'none'; link.download = filename; - link.href = URL.createObjectURL(new Blob([data], { type: 'application/zip' })); + link.href = URL.createObjectURL(new Blob([data] as any, { type: 'application/zip' })); document.body.appendChild(link); link.click(); diff --git a/packages/astro/src/default/components/MetaTags.astro b/packages/astro/src/default/components/MetaTags.astro index 539906992..b28359c2a 100644 --- a/packages/astro/src/default/components/MetaTags.astro +++ b/packages/astro/src/default/components/MetaTags.astro @@ -1,6 +1,5 @@ --- import type { MetaTagsConfig } from '@tutorialkit/types'; -import { readLogoFile } from '../utils/logo'; import { readPublicAsset } from '../utils/publicAsset'; interface Props { diff --git a/packages/astro/src/index.ts b/packages/astro/src/index.ts index 2ea81475f..86eb3a5db 100644 --- a/packages/astro/src/index.ts +++ b/packages/astro/src/index.ts @@ -1,6 +1,6 @@ import { fileURLToPath } from 'node:url'; import type { AstroConfig, AstroIntegration } from 'astro'; -import type { ExpressiveCodePlugin } from 'astro-expressive-code'; +import type { ExpressiveCodePlugin, ThemeObjectOrShikiThemeName } from 'astro-expressive-code'; import { extraIntegrations } from './integrations.js'; import { updateMarkdownConfig } from './remark/index.js'; import { tutorialkitCore } from './vite-plugins/core.js'; @@ -67,6 +67,15 @@ export interface Options { * @default [] */ expressiveCodePlugins?: ExpressiveCodePlugin[]; + + /** + * Themes for expressive code. + * Make sure to provide a light and a dark theme if you want support for both light and dark modes. + * Default values are ['light-plus', 'dark-plus'] + * + * @default ['light-plus', 'dark-plus'] + */ + expressiveCodeThemes?: [ThemeObjectOrShikiThemeName, ThemeObjectOrShikiThemeName]; } export default function createPlugin({ @@ -75,6 +84,7 @@ export default function createPlugin({ isolation, enterprise, expressiveCodePlugins = [], + expressiveCodeThemes, }: Options = {}): AstroIntegration { const webcontainerFiles = new WebContainerFiles(); @@ -149,7 +159,7 @@ export default function createPlugin({ config.integrations.splice( selfIndex + 1, 0, - ...extraIntegrations({ root: fileURLToPath(config.root), expressiveCodePlugins }), + ...extraIntegrations({ root: fileURLToPath(config.root), expressiveCodePlugins, expressiveCodeThemes }), ); }, 'astro:config:done'({ config }) { diff --git a/packages/astro/src/integrations.ts b/packages/astro/src/integrations.ts index 74348a2b7..01a95cac6 100644 --- a/packages/astro/src/integrations.ts +++ b/packages/astro/src/integrations.ts @@ -4,21 +4,28 @@ import react from '@astrojs/react'; import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections'; import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers'; import { getInlineContentForPackage } from '@tutorialkit/theme'; -import expressiveCode, { type ExpressiveCodePlugin } from 'astro-expressive-code'; +import expressiveCode, { type ExpressiveCodePlugin, type ThemeObjectOrShikiThemeName } from 'astro-expressive-code'; import UnoCSS from 'unocss/astro'; export function extraIntegrations({ root, expressiveCodePlugins = [], + expressiveCodeThemes = ['light-plus', 'dark-plus'], }: { root: string; expressiveCodePlugins?: ExpressiveCodePlugin[]; + + /** + * Themes for Expressive Code. + * Takes a tuple of themes, e.g. `[lightTheme, darkTheme]`. + */ + expressiveCodeThemes?: [ThemeObjectOrShikiThemeName, ThemeObjectOrShikiThemeName]; }) { return [ react(), expressiveCode({ plugins: [pluginCollapsibleSections(), pluginLineNumbers(), ...expressiveCodePlugins], - themes: ['dark-plus', 'light-plus'], + themes: expressiveCodeThemes, customizeTheme: (theme) => { const isDark = theme.type === 'dark'; @@ -35,13 +42,7 @@ export function extraIntegrations({ }; }, themeCssSelector: (theme) => { - let customThemeName = 'light'; - - if (theme.name === 'dark-plus') { - customThemeName = 'dark'; - } - - return `[data-theme='${customThemeName}']`; + return `[data-theme='${theme.type}']`; }, defaultProps: { showLineNumbers: false, diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index da0893c6d..752b77ddf 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,3 +1,7 @@ +# [1.6.0](https://github.com/stackblitz/tutorialkit/compare/1.5.2...1.6.0) "@tutorialkit/cli" (2025-09-01) + + + ## [1.5.2](https://github.com/stackblitz/tutorialkit/compare/1.5.0...1.5.2) "@tutorialkit/cli" (2025-06-17) diff --git a/packages/cli/package.json b/packages/cli/package.json index 6db3d2adc..5f03f7a12 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@tutorialkit/cli", - "version": "1.5.0", + "version": "1.5.2", "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 index 3503008ed..14b15f4e8 100644 --- 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.5.2...0.0.3) "create-tutorial" (2025-09-01) + + + ## [0.0.3](https://github.com/stackblitz/tutorialkit/compare/1.5.0...0.0.3) "create-tutorial" (2025-06-17) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 4e1bca30b..c8e25985e 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,3 +1,7 @@ +# [1.6.0](https://github.com/stackblitz/tutorialkit/compare/1.5.2...1.6.0) "@tutorialkit/react" (2025-09-01) + + + ## [1.5.2](https://github.com/stackblitz/tutorialkit/compare/1.5.0...1.5.2) "@tutorialkit/react" (2025-06-17) diff --git a/packages/react/package.json b/packages/react/package.json index 79f71d31c..e828d1fae 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@tutorialkit/react", - "version": "1.5.2", + "version": "1.6.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 index 1dcbf3f82..6212330f0 100644 --- a/packages/runtime/CHANGELOG.md +++ b/packages/runtime/CHANGELOG.md @@ -1,3 +1,7 @@ +# [1.6.0](https://github.com/stackblitz/tutorialkit/compare/1.5.2...1.6.0) "@tutorialkit/runtime" (2025-09-01) + + + ## [1.5.2](https://github.com/stackblitz/tutorialkit/compare/1.5.0...1.5.2) "@tutorialkit/runtime" (2025-06-17) diff --git a/packages/runtime/package.json b/packages/runtime/package.json index bc405184f..44af2a593 100644 --- a/packages/runtime/package.json +++ b/packages/runtime/package.json @@ -1,6 +1,6 @@ { "name": "@tutorialkit/runtime", - "version": "1.5.2", + "version": "1.6.0", "description": "TutorialKit runtime", "author": "StackBlitz Inc.", "type": "module", diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md index acd037aaf..84b78216b 100644 --- a/packages/theme/CHANGELOG.md +++ b/packages/theme/CHANGELOG.md @@ -1,3 +1,7 @@ +# [1.6.0](https://github.com/stackblitz/tutorialkit/compare/1.5.2...1.6.0) "@tutorialkit/theme" (2025-09-01) + + + ## [1.5.2](https://github.com/stackblitz/tutorialkit/compare/1.5.0...1.5.2) "@tutorialkit/theme" (2025-06-17) diff --git a/packages/theme/package.json b/packages/theme/package.json index 3c49b37d2..28e37587b 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -1,6 +1,6 @@ { "name": "@tutorialkit/theme", - "version": "1.5.2", + "version": "1.6.0", "description": "TutorialKit theme configuration", "author": "StackBlitz Inc.", "type": "module", diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md index 8077cebb2..df039da7d 100644 --- a/packages/types/CHANGELOG.md +++ b/packages/types/CHANGELOG.md @@ -1,3 +1,7 @@ +# [1.6.0](https://github.com/stackblitz/tutorialkit/compare/1.5.2...1.6.0) "@tutorialkit/types" (2025-09-01) + + + ## [1.5.2](https://github.com/stackblitz/tutorialkit/compare/1.5.0...1.5.2) "@tutorialkit/types" (2025-06-17) diff --git a/packages/types/package.json b/packages/types/package.json index bcc51be91..5ee207207 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,6 +1,6 @@ { "name": "@tutorialkit/types", - "version": "1.5.2", + "version": "1.6.0", "description": "Types for TutorialKit", "author": "StackBlitz Inc.", "type": "module",