Merge branch 'main' into ronith/overriding-footer

Author: RonithManikonda

.github/workflows/publish-commit.yaml

@@ -1,65 +1,30 @@
-# PRs can be published by commenting `/pkg-pr-new` in the PR
+# PRs can be published by adding `pkg-pr-new` tag
 
-name: Publish Any Commit
+name: PR Preview Releases
 
 on:
-  issue_comment:
-    types: [created]
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, synchronize, labeled]
 
 jobs:
-  build:
-    if: github.repository == 'stackblitz/tutorialkit' && (github.event_name == 'push' || github.event.issue.pull_request && startsWith(github.event.comment.body, '/pkg-pr-new'))
+  release:
+    if: github.repository == 'stackblitz/tutorialkit' && (github.ref == 'refs/heads/main' || contains(github.event.pull_request.labels.*.name, 'pkg-pr-new'))
     runs-on: ubuntu-latest
+    name: 'Release: pkg.pr.new'
 
     steps:
-      - if: github.event.issue.pull_request
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const user = context.payload.sender.login
-            console.log(`Validate user: ${user}`)
-
-            let hasTriagePermission = false
-            try {
-              const { data } = await github.rest.repos.getCollaboratorPermissionLevel({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                username: user,
-              });
-              hasTriagePermission = data.user.permissions.triage
-            } catch (e) {
-              console.warn(e)
-            }
-
-            if (hasTriagePermission) {
-              console.log('Allowed')
-              await github.rest.reactions.createForIssueComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                comment_id: context.payload.comment.id,
-                content: '+1',
-              })
-            } else {
-              console.log('Not allowed')
-              await github.rest.reactions.createForIssueComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                comment_id: context.payload.comment.id,
-                content: '-1',
-              })
-              throw new Error('not allowed')
-            }
-
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          ref: refs/pull/${{ github.event.issue.number }}/head
+          fetch-depth: 0
 
       - uses: ./.github/actions/setup-and-build
 
       - name: Publish to pkg.pr.new
         run: >
-          pnpm dlx pkg-pr-new@0.0 publish --compact --pnpm
+          pnpm dlx pkg-pr-new publish --compact --pnpm
           ./packages/astro
           ./packages/react
           ./packages/runtime

CHANGELOG.md

@@ -1,3 +1,14 @@
+## [1.3.1](https://github.com/stackblitz/tutorialkit/compare/1.3.0...1.3.1) (2024-11-25)
+
+
+### Bug Fixes
+
+* **astro:** allow URLs in `meta.image` ([#422](https://github.com/stackblitz/tutorialkit/issues/422)) ([3125547](https://github.com/stackblitz/tutorialkit/commit/3125547c043fe4a76dca95b1eb973362967ccf02))
+* switch default `meta.image` to `.png` ([#427](https://github.com/stackblitz/tutorialkit/issues/427)) ([d39bf40](https://github.com/stackblitz/tutorialkit/commit/d39bf404bc1947c48b5cb15164f20f67c0be49bc))
+* warn when using `.svg` in `meta.image` ([#377](https://github.com/stackblitz/tutorialkit/issues/377)) ([6e1edc1](https://github.com/stackblitz/tutorialkit/commit/6e1edc1af274d0eb65587f358e5db9557d259171))
+
+
+
 # [1.3.0](https://github.com/stackblitz/tutorialkit/compare/1.2.2...1.3.0) (2024-11-15)
 
 

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

@@ -426,10 +426,11 @@ type DownloadAsZip =
 
 ```
 
-##### `meta`
+### `meta`
 
 Configures `<meta>` tags for Open Graph protocole and Twitter.
 TutorialKit will use your logo as the default image.
+Relative paths are resolved to `public` directory.
 <PropertyTable inherited type="MetaTagsSchema" />
 
 The `MetaTagsSchema` type has the following shape:
@@ -449,14 +450,21 @@ meta:
   image: /cover.png
   title: Title shown on social media and search engines
   description: Description shown on social media and search engines
+
+meta:
+  image: /cover.png # Resolves to public/cover.png
+
+meta:
+  image: 'https://tutorialkit.dev/tutorialkit-opengraph.png' # URL is used as is
+
 ```
 
 :::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`
+### `custom`
 
 Assign custom fields to a chapter/part/lesson.
 <PropertyTable inherited type="Record<string,any>" />

integration/cli/__snapshots__/npm-built.json

@@ -10,4 +10,4 @@
   "logo-dark.svg",
   "logo.svg",
   "template-default.json"
-]
+]

integration/cli/__snapshots__/npm-created.json

@@ -50,4 +50,4 @@
   "src/templates/default/style.css",
   "tsconfig.json",
   "uno.config.ts"
-]
+]

integration/cli/__snapshots__/pnpm-built.json

@@ -10,4 +10,4 @@
   "logo-dark.svg",
   "logo.svg",
   "template-default.json"
-]
+]

integration/cli/__snapshots__/pnpm-created.json

@@ -50,4 +50,4 @@
   "src/templates/default/style.css",
   "tsconfig.json",
   "uno.config.ts"
-]
+]

integration/cli/__snapshots__/yarn-built.json

@@ -10,4 +10,4 @@
   "logo-dark.svg",
   "logo.svg",
   "template-default.json"
-]
+]

integration/cli/__snapshots__/yarn-created.json

@@ -50,4 +50,4 @@
   "tsconfig.json",
   "uno.config.ts",
   "yarn.lock"
-]
+]

integration/package.json

@@ -9,6 +9,6 @@
     "@tutorialkit/theme": "workspace:*",
     "execa": "^9.2.0",
     "tempy": "^3.1.0",
-    "vitest": "^2.1.1"
+    "vitest": "^3.0.5"
   }
 }

packages/astro/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [1.3.1](https://github.com/stackblitz/tutorialkit/compare/1.3.0...1.3.1) "@tutorialkit/astro" (2024-11-25)
+
+
+### Bug Fixes
+
+* **astro:** allow URLs in `meta.image` ([#422](https://github.com/stackblitz/tutorialkit/issues/422)) ([3125547](https://github.com/stackblitz/tutorialkit/commit/3125547c043fe4a76dca95b1eb973362967ccf02))
+* switch default `meta.image` to `.png` ([#427](https://github.com/stackblitz/tutorialkit/issues/427)) ([d39bf40](https://github.com/stackblitz/tutorialkit/commit/d39bf404bc1947c48b5cb15164f20f67c0be49bc))
+* warn when using `.svg` in `meta.image` ([#377](https://github.com/stackblitz/tutorialkit/issues/377)) ([6e1edc1](https://github.com/stackblitz/tutorialkit/commit/6e1edc1af274d0eb65587f358e5db9557d259171))
+
+
+
 # [1.3.0](https://github.com/stackblitz/tutorialkit/compare/1.2.2...1.3.0) "@tutorialkit/astro" (2024-11-15)
 
 

packages/astro/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit/astro",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "TutorialKit integration for Astro (https://astro.build)",
   "author": "StackBlitz Inc.",
   "type": "module",
@@ -73,7 +73,7 @@
     "execa": "^9.2.0",
     "typescript": "^5.4.5",
     "vite-plugin-inspect": "0.8.4",
-    "vitest": "^2.1.1"
+    "vitest": "^3.0.5"
   },
   "peerDependencies": {
     "astro": "^4.15.0"

packages/astro/src/default/components/MetaTags.astro

@@ -6,15 +6,28 @@ import { readPublicAsset } from '../utils/publicAsset';
 interface Props {
   meta?: MetaTagsConfig;
 }
+
+const DEFAULT_OG_IMAGE = 'https://tutorialkit.dev/tutorialkit-opengraph.png';
+
 const { meta = {} } = Astro.props;
-let imageUrl;
-if (meta.image) {
-  imageUrl = readPublicAsset(meta.image, true);
+let imageUrl = meta.image;
+
+// Resolve relative paths to /public folder
+if (imageUrl?.startsWith('/') || imageUrl?.startsWith('.')) {
+  imageUrl = readPublicAsset(imageUrl, true);
+
   if (!imageUrl) {
-    console.warn(`Image ${meta.image} not found in "/public" folder`);
+    console.warn(`\nImage ${meta.image} not found in "/public" folder`);
   }
 }
-imageUrl ??= readLogoFile('logo', true);
+
+imageUrl ??= DEFAULT_OG_IMAGE;
+
+if (imageUrl?.endsWith('.svg')) {
+  console.warn(
+    `\nUsing a SVG open graph image "${imageUrl}". This is not supported by most social platforms. You should rather set "meta.image" to a raster image (PNG, WEBP).`,
+  );
+}
 ---
 
 <meta charset="UTF-8" />

packages/astro/src/default/layouts/Layout.astro

@@ -11,6 +11,7 @@ interface Props {
 }
 const { title, meta } = Astro.props;
 const faviconUrl = readPublicAsset('favicon.svg');
+const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).toString() : null;
 ---
 
 <!doctype html>
@@ -20,6 +21,7 @@ const faviconUrl = readPublicAsset('favicon.svg');
       <title slot="title">{title}</title>
 
       <Fragment slot="links">
+        {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
         {faviconUrl ? <link rel="icon" type="image/svg+xml" href={faviconUrl} /> : null}
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

packages/astro/src/default/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+import MetaTags from '../components/MetaTags.astro';
 import { getTutorial } from '../utils/content';
 import { joinPaths } from '../utils/url';
 
@@ -9,11 +10,16 @@ const part = lesson.part && tutorial.parts[lesson.part.id];
 const chapter = lesson.chapter && part?.chapters[lesson.chapter.id];
 
 const slug = [part?.slug, chapter?.slug, lesson.slug].filter(Boolean).join('/');
+const meta = lesson.data?.meta ?? {};
+
+meta.title ??= [lesson.part?.title, lesson.chapter?.title, lesson.data.title].filter(Boolean).join(' / ');
+meta.description ??= 'A TutorialKit interactive lesson';
 
 const redirect = joinPaths(import.meta.env.BASE_URL, `/${slug}`);
 ---
 
 <!doctype html>
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <title>Redirecting to {redirect}</title>
+<MetaTags slot="meta" meta={meta} />
 <meta http-equiv="refresh" content=`0;url=${redirect}` />

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

@@ -320,6 +320,7 @@ describe('ordering', () => {
 
   test('parts not mention in order are excluded ', async () => {
     vi.spyOn(logger, 'warn').mockImplementationOnce(vi.fn());
+    vi.mocked(logger.warn).mockClear();
 
     getCollection.mockReturnValueOnce([
       {
@@ -381,6 +382,7 @@ describe('ordering', () => {
 
   test('chapters not mention in order are excluded ', async () => {
     vi.spyOn(logger, 'warn').mockImplementationOnce(vi.fn());
+    vi.mocked(logger.warn).mockClear();
 
     getCollection.mockReturnValueOnce([
       { id: 'meta.md', ...tutorial },
@@ -515,6 +517,7 @@ describe('ordering', () => {
 
   test('lessons not mention in order are excluded ', async () => {
     vi.spyOn(logger, 'warn').mockImplementationOnce(vi.fn());
+    vi.mocked(logger.warn).mockClear();
 
     getCollection.mockReturnValueOnce([
       { id: 'meta.md', ...tutorial },

packages/cli/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.3.1](https://github.com/stackblitz/tutorialkit/compare/1.3.0...1.3.1) "@tutorialkit/cli" (2024-11-25)
+
+
+
 # [1.3.0](https://github.com/stackblitz/tutorialkit/compare/1.2.2...1.3.0) "@tutorialkit/cli" (2024-11-15)
 
 

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit/cli",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Interactive tutorials powered by WebContainer API",
   "author": "StackBlitz Inc.",
   "type": "module",
@@ -53,7 +53,7 @@
     "esbuild-node-externals": "^1.13.1",
     "fs-extra": "^11.2.0",
     "tempy": "^3.1.0",
-    "vitest": "^2.1.1"
+    "vitest": "^3.0.5"
   },
   "engines": {
     "node": ">=18.18.0"

packages/create-tutorial/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [0.0.3](https://github.com/stackblitz/tutorialkit/compare/1.3.0...0.0.3) "create-tutorial" (2024-11-25)
+
+
+
 ## [0.0.3](https://github.com/stackblitz/tutorialkit/compare/1.2.2...0.0.3) "create-tutorial" (2024-11-15)
 
 

packages/react/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.3.1](https://github.com/stackblitz/tutorialkit/compare/1.3.0...1.3.1) "@tutorialkit/react" (2024-11-25)
+
+
+
 # [1.3.0](https://github.com/stackblitz/tutorialkit/compare/1.2.2...1.3.0) "@tutorialkit/react" (2024-11-15)
 
 

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit/react",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "TutorialKit's React components and utilities",
   "author": "StackBlitz Inc.",
   "type": "module",
@@ -104,6 +104,6 @@
     "chokidar": "3.6.0",
     "execa": "^9.2.0",
     "typescript": "^5.4.5",
-    "vitest": "^2.1.1"
+    "vitest": "^3.0.5"
   }
 }

packages/runtime/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.3.1](https://github.com/stackblitz/tutorialkit/compare/1.3.0...1.3.1) "@tutorialkit/runtime" (2024-11-25)
+
+
+
 # [1.3.0](https://github.com/stackblitz/tutorialkit/compare/1.2.2...1.3.0) "@tutorialkit/runtime" (2024-11-15)
 
 

packages/runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit/runtime",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "TutorialKit runtime",
   "author": "StackBlitz Inc.",
   "type": "module",
@@ -43,6 +43,6 @@
     "typescript": "^5.4.5",
     "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^2.1.1"
+    "vitest": "^3.0.5"
   }
 }

packages/test-utils/package.json

@@ -7,6 +7,6 @@
   "devDependencies": {
     "@webcontainer/api": "1.5.1",
     "typescript": "^5.4.5",
-    "vitest": "^2.1.1"
+    "vitest": "^3.0.5"
   }
 }