Merge branch 'main' into doc-meta

Author: AriPerkkio

.github/workflows/integration-test-cli.yaml

@@ -3,20 +3,44 @@ name: CLI Integration Tests
 on:
   pull_request:
   workflow_dispatch:
+  push:
+    branches:
+      - main
 
 jobs:
-  cli-integration-test:
+  skip:
     name: CLI Integration Tests
-    # Note: `prepare-release.yaml` sets this commit message
-    if: ${{ contains(github.event.pull_request.title, 'release CLI') || github.event_name == 'workflow_dispatch' }}
     runs-on: ubuntu-latest
+    steps:
+      - name: skip
+        run: echo skip
+
+  cli-integration-test:
+    name: CLI Integration Test Matrix
+    # Note: `prepare-release.yaml` sets this commit message
+    if: ${{ contains(github.event.pull_request.title, 'release CLI') || github.event_name == 'workflow_dispatch' || github.event_name == 'push' }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [18, 20, 22]
+        include:
+          - os: macos-latest
+            node_version: 20
+          - os: windows-latest
+            node_version: 20.13.1
+
     steps:
       - name: Checkout
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - uses: ./.github/actions/setup-and-build
+        with:
+          node-version: ${{ matrix.node-version }}
 
       - name: Update template's versions
         working-directory: ./packages/cli

.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

.github/workflows/publish-docs.yaml

@@ -0,0 +1,30 @@
+# This is for publishing documentation manually.
+# During release `publish-release.yaml` publishes docs automatically.
+name: Publish Documentation
+
+on:
+  workflow_dispatch:
+
+jobs:
+  publish_docs:
+    name: Publish documentation
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: ./.github/actions/setup-and-build
+
+      - name: Build docs
+        run: pnpm run docs:build
+
+      - name: Deploy documentation
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: tutorialkit-docs-page
+          workingDirectory: 'docs/tutorialkit.dev'
+          directory: dist

CHANGELOG.md

@@ -1,3 +1,59 @@
+# [1.3.0](https://github.com/stackblitz/tutorialkit/compare/1.2.2...1.3.0) (2024-11-15)
+
+
+### Bug Fixes
+
+* remove `downloadAsZip` from template for now ([#416](https://github.com/stackblitz/tutorialkit/issues/416)) ([705fead](https://github.com/stackblitz/tutorialkit/commit/705fead006988a4ae865c9171062bd7d3afb3206))
+
+
+### Features
+
+* **astro:** add "Download lesson as zip" button ([#415](https://github.com/stackblitz/tutorialkit/issues/415)) ([9c6e534](https://github.com/stackblitz/tutorialkit/commit/9c6e5349b6ab7e7399437839f6fc4cf11bd6c5c3))
+* **astro:** support lessons without parts or chapters ([#374](https://github.com/stackblitz/tutorialkit/issues/374)) ([8c44cbe](https://github.com/stackblitz/tutorialkit/commit/8c44cbec3f276a4f788b5d1652f67e4cf8cf7948))
+
+
+
+## [1.2.2](https://github.com/stackblitz/tutorialkit/compare/1.2.1...1.2.2) (2024-11-12)
+
+
+### Bug Fixes
+
+* hide preview container when `previews: false` ([#412](https://github.com/stackblitz/tutorialkit/issues/412)) ([b35de43](https://github.com/stackblitz/tutorialkit/commit/b35de43d437492d124af232adddd2a30ec70ec0e))
+
+
+
+## [1.2.1](https://github.com/stackblitz/tutorialkit/compare/1.2.0...1.2.1) (2024-11-05)
+
+
+### Bug Fixes
+
+* **astro:** optimize CJS dependency `picomatch` ([#406](https://github.com/stackblitz/tutorialkit/issues/406)) ([17a48a6](https://github.com/stackblitz/tutorialkit/commit/17a48a6858912277942d87b8af28a601adfad8da))
+
+
+
+# [1.2.0](https://github.com/stackblitz/tutorialkit/compare/1.1.1...1.2.0) (2024-11-05)
+
+
+### Bug Fixes
+
+* **react:** file tree scroll visibility ([#399](https://github.com/stackblitz/tutorialkit/issues/399)) ([e1e9160](https://github.com/stackblitz/tutorialkit/commit/e1e916044cc225dab925bd846d9208181f2080e1))
+
+
+### Features
+
+* **runtime:** `fs.watch` to support syncing new files from webcontainer ([#394](https://github.com/stackblitz/tutorialkit/issues/394)) ([3beda90](https://github.com/stackblitz/tutorialkit/commit/3beda905df20ed9c7d286fc02007cf5b2e74835a))
+
+
+
+## [1.1.1](https://github.com/stackblitz/tutorialkit/compare/1.1.0...1.1.1) (2024-10-20)
+
+
+### Bug Fixes
+
+* **theme:** apply `fast-glob` Windows work-around for all `\@` matches ([#383](https://github.com/stackblitz/tutorialkit/issues/383)) ([9f4bd13](https://github.com/stackblitz/tutorialkit/commit/9f4bd13270f877b9f52e6b85eca5693c283ee249))
+
+
+
 # [1.1.0](https://github.com/stackblitz/tutorialkit/compare/1.0.0...1.1.0) (2024-10-18)
 
 

docs/tutorialkit.dev/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@tutorialkit/react": "workspace:*",
-    "@webcontainer/api": "1.2.4",
+    "@webcontainer/api": "1.5.1",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

docs/tutorialkit.dev/public/tutorialkit-opengraph.png

@@ -3,6 +3,7 @@ title: Content creation
 description: 'Creating content in TutorialKit.'
 ---
 import { FileTree } from '@astrojs/starlight/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 From an information architecture perspective, tutorial content is divided into **parts**, which are further divided into **chapters**, each consisting of **lessons**.
 
@@ -36,6 +37,64 @@ This structure is reflected in the directory structure of your TutorialKit proje
 
 Navigate into one of these folders to see another folder that represents a **chapter**. Inside the chapter folder, you will find one or more **lesson** folders.
 
+You can also omit parts or chapters such that you only have lessons or only lessons and parts. Here are a few examples:
+
+<Tabs>
+  <TabItem label="Structure">
+    ```plaintext
+    - Lesson 1: Getting started
+    - Lesson 2: Adding pages
+    ```
+  </TabItem>
+
+  <TabItem label="File tree">
+    <FileTree>
+      - src
+        - content
+          - tutorial
+            - getting-started
+              - _files/
+              - _solution/
+              - content.md
+            - adding-pages/
+            - meta.md
+        - config.ts
+        - templates/
+    </FileTree>
+  </TabItem>
+</Tabs>
+
+<Tabs>
+  <TabItem label="Structure">
+    ```plaintext
+    - Part 1: Introduction
+      - Lesson 1: What is Vite?
+      - Lesson 2: Installing
+        - …
+    - Part 2: Project structure
+        - …
+    ```
+  </TabItem>
+
+  <TabItem label="File tree">
+    <FileTree>
+      - src
+        - content
+          - tutorial
+            - introduction/
+              - what-is-vite/
+                - _files/
+                - _solution/
+                - content.md
+              - installing/
+            - project-structure/
+            - meta.md
+        - config.ts
+        - templates/
+    </FileTree>
+  </TabItem>
+</Tabs>
+
 ## A lesson content file
 
 Navigate to the `src/content/tutorial/1-basics/1-introduction/1-welcome` folder and open the `content.md` in your editor. You will see a file structured like this:
@@ -192,6 +251,39 @@ const removed = 'This line was removed';
 const highlighted = 'This line is highlighted';
 ```
 
+#### Useful Expressive Code Attributes
+
+- **`title`** - Sets the title of the code block.
+- **`frame`** - Defines the frame of the code block. Options: `"code"`, `"terminal"`, `"none"`, `"auto"`.
+- **`showLineNumbers`** - Displays line numbers. You can combine this with `startLineNumber=#` to begin numbering from a specific line.
+- **`wrap`** - Controls word wrapping. Use `preserveIndent` and `preserveIndent=false` to adjust indentation handling.
+
+##### Marking Lines
+
+- **`{x}`** - Marks specific lines. For example, `{6,10-18}` will mark lines 6 and 10 through 18.
+- **`ins`** - Marks inserted lines. Example: `ins={6,10-18}`.
+- **`del`** - Marks deleted lines. Example: `del={6,10-18}`.
+- **`{"Label":x}`** - Assigns a label to a line or range of lines. Works with `mark`, `ins`, and `del`. Example: `{"Label1":5} del={"Label2":7-8} ins={"Label3":10-12}`. If the label is long, consider placing an empty line in the code for better readability.
+- **`collapse={X-Y}`** - Collapses the specified lines. Example: `collapse={1-5,12-14}`.
+
+##### Marking Text
+
+You can highlight text using strings or regular expressions. For example:
+
+````md title="content.md"
+```jsx title="code.js" "hello" /ye[sp]/ add=/add[12]/ del=/remove[12]/
+console.log(
+  'Hello, the words yes and yep will be marked. Also add1, add2, remove1, remove2',
+)
+```
+````
+
+```jsx title="code.js" "hello" /ye[sp]/ add=/add[12]/ del=/remove[12]/
+console.log(
+  'Hello, the words yes and yep will be marked. Also add1, add2, remove1, remove2',
+)
+```
+
 #### Importing files
 
 In addition to Expressive Code features, you can import files from your code template `_files` and `_solution` folders using the file or solution shortcodes. These shortcodes insert the content of the specified file directly into your lesson content.

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

@@ -46,6 +46,7 @@ When overriding `TopBar` you can place TutorialKit's default components using fo
 
 - `logo`: Logo of the application
 - `open-in-stackblitz-link`: Link for opening current lesson in StackBlitz
+- `download-button`: Button for downloading current lesson as `.zip` file
 - `theme-switch`:  Switch for changing the theme
 - `login-button`: For StackBlitz Enterprise user, the login button
 
@@ -61,6 +62,8 @@ When overriding `TopBar` you can place TutorialKit's default components using fo
 
   <LanguageSelect />
 
+  <slot name="download-button" />
+
   <slot name="open-in-stackblitz-link" />
 
   <slot name="login-button" />