### Getting Started Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/README.md Commands to install dependencies and start the development server. ```bash <% pkgManager %> install <% pkgManager %> run dev ``` -------------------------------- ### Start TutorialKit with Yarn Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/installation.mdx Start the development server with Yarn. ```shell yarn start ``` -------------------------------- ### Start Demo Website Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/README.md Starts the demo website for TutorialKit. ```bash pnpm run demo ``` -------------------------------- ### Start TutorialKit with pnpm Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/installation.mdx Start the development server with pnpm. ```shell pnpm start ``` -------------------------------- ### Start TutorialKit with npm Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/installation.mdx Start the development server with npm. ```shell npm start ``` -------------------------------- ### Start the documentation website Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/README.md Runs the command to start the documentation website locally. ```bash pnpm run docs ``` -------------------------------- ### Install Dependencies Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/README.md Installs project dependencies using pnpm workspaces. ```bash pnpm install ``` -------------------------------- ### Install TutorialKit with Yarn Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/installation.mdx Create a new project with Yarn. ```shell # create a new project with Yarn yarn create tutorial ``` -------------------------------- ### Content Structure Example Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/README.md An example of how tutorial content is organized within the `src/content/tutorial` directory. ```bash tutorial ├── 1-basics-of-vite │ ├── 1-introduction │ │ ├── 1-welcome │ │ │ ├── content.md # The content of your lesson │ │ │ ├── _files # Initial set of files │ │ │ │ └── ... │ │ │ └── _solution # Solution of the lesson │ │ │ └── ... │ │ ├── 2-why-vite │ │ │ ├── content.md │ │ │ └── _files │ │ │ └── ... │ │ └── meta.md # Metadata for the chapter │ └── meta.md # Metadata for the part ├── 2-advanced │ ├── ... │ └── meta.md └── meta.md # Metadata for the tutorial ``` -------------------------------- ### Install TutorialKit with pnpm Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/installation.mdx Create a new project with pnpm. ```shell # create a new project with pnpm pnpm create tutorial ``` -------------------------------- ### TypeScript Example with Client Focus Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md TypeScript code snippet focused on the client setup and action consumption. ```typescript // 1. Import modules import { createPublicClient, http } from 'viem'; import { mainnet } from 'viem/chains'; // 2. Set up your client with desired chain & transport const client = createPublicClient({ chain: mainnet, transport: http(), }); // 3. Consume an action! const blockNumber = await client.getBlockNumber(); ``` -------------------------------- ### Install TutorialKit with npm Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/installation.mdx Create a new project with npm. ```shell # create a new project with npm npm create tutorial ``` -------------------------------- ### Preview Configuration Examples Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Examples showing how to configure preview ports and titles, including hiding the preview panel. ```yaml previews: - 3000 # Preview is on :3000/ - "3001/docs" # Preview is on :3001/docs/ - [3002, "Dev Server"] # Preview is on :3002/. Displayed title is "Dev Server". - [3003, "Dev Server", "/docs"] # Preview is on :3003/docs/. Displayed title is "Dev Server". - { port: 3004, title: "Dev Server" } # Preview is on :3004/. Displayed title is "Dev Server". - { port: 3005, title: "Dev Server", pathname: "/docs" } # Preview is on :3005/docs/. Displayed title is "Dev Server". previews: false # Do not show preview panel ``` -------------------------------- ### File Path Example Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md Example of a file path with specific line highlighting and collapse options. ```file ``` -------------------------------- ### Markdown Content Example Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/README.md An example of a lesson written in Markdown with Front Matter. ```markdown --- type: lesson title: Welcome! --- # Welcome to TutorialKit! In this tutorial we'll walk you through how to setup your environment to write your first tutorial 🤩 ``` -------------------------------- ### Filesystem Watch Configuration Examples Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Examples illustrating how to configure the filesystem watch option to reflect changes in the editor. ```yaml filesystem: watch: true # Filesystem changes to files already in the editor are reflected in the editor filesystem: watch: false # Or if it's omitted, the default value is false filesystem: watch: ['/*.json', '/src/**/*'] # Files changed, added or deleted that match one of the globs are updated in the editor ``` -------------------------------- ### Plain Text Example Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md A simple example of plain text code block. ```plaintext wowee plain text! ``` -------------------------------- ### Clone Repository Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/README.md Clones the TutorialKit repository and navigates into the project directory. ```bash git clone git@github.com:stackblitz/tutorialkit.git cd tutorialkit ``` -------------------------------- ### Editor Configuration Examples Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Examples demonstrating various ways to configure the editor, including hiding it, hiding the file tree, and enabling file edits with different glob patterns. ```yaml editor: false # Editor is hidden editor: # Editor is visible fileTree: false # File tree is hidden editor: # Editor is visible fileTree: # File tree is visible allowEdits: true # User can add new files and folders from the file tree editor: # Editor is visible fileTree: # File tree is visible allowEdits: "/src/**" # User can add files and folders anywhere inside "/src/" editor: # Editor is visible fileTree: # File tree is visible allowEdits: - "/*" # User can add files and folders directly in the root - "/first-level/allowed-filename-only.js" # Only "allowed-filename-only.js" inside "/first-level" folder - "**/second-level/**" # Anything inside "second-level" folders anywhere ``` -------------------------------- ### Meta Tags Schema Example (YAML) Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Example of how to configure meta tags for social media and search engines using YAML. ```yaml 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 ``` -------------------------------- ### Example Terminal Configuration Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx An example YAML configuration for the terminal, demonstrating how to set it to open, specify the active panel, and configure individual panels with titles, IDs, redirection, and allowed commands. ```yaml terminal: open: true activePanel: 1 panels: - ['output', 'Dev Server'] - type: terminal id: 'cmds' title: 'Command Line' allowRedirects: true allowCommands: - ls - echo ``` -------------------------------- ### Basic TypeScript Example with Line Numbers Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md A standard TypeScript example demonstrating client creation and action consumption, with line numbers. ```typescript // 1. Import modules import { createPublicClient, http } from 'viem'; import { mainnet } from 'viem/chains'; // 2. Set up your client with desired chain & transport const client = createPublicClient({ chain: mainnet, transport: http(), }); // 3. Consume an action const blockNumber = await client.getBlockNumber(); ``` -------------------------------- ### pnpm Overrides Configuration Source: https://github.com/stackblitz/tutorialkit/blob/main/CONTRIBUTING.md Example of how to configure pnpm overrides in package.json to use local copies of TutorialKit packages. ```json { "pnpm": { "overrides": { "@tutorialkit/astro": "file:../tutorialkit/packages/astro", "@tutorialkit/react": "file:../tutorialkit/packages/react", "@tutorialkit/runtime": "file:../tutorialkit/packages/runtime", "@tutorialkit/theme": "file:../tutorialkit/packages/theme", "@tutorialkit/types": "file:../tutorialkit/packages/types" } } } ``` -------------------------------- ### Custom Fields Example (YAML) Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Example of assigning custom fields like published date and tags to a tutorial item. ```yaml custom: publishedAt: 2024-16-10 tags: tutorialkit,astro,vite ``` -------------------------------- ### Callout example Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx An example of how to create an 'info' callout with markdown syntax and links. ```markdown :::info Some info with some markdown `syntax` and a [`link`](https://tutorialkit.dev/). Here's a normal [link](https://tutorialkit.dev/). ::: ``` -------------------------------- ### Example editPageLink Configuration Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Example of how to configure the editPageLink property in YAML format, showing both a URL pattern and how to disable it. ```yaml editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/${path} ``` ```yaml editPageLink: false ``` -------------------------------- ### Clone Repository Source: https://github.com/stackblitz/tutorialkit/blob/main/CONTRIBUTING.md Steps to clone the TutorialKit repository and navigate into the directory. ```bash git clone https://github.com/stackblitz/tutorialkit cd tutorialkit ``` -------------------------------- ### Template directory structure example Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx An example illustrating the directory structure for shared and specific templates. ```tree 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 ``` -------------------------------- ### Terminal Command Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md Example of a terminal command using npm. ```bash npm i vocs ``` -------------------------------- ### Lesson content file example Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx Example of a lesson content file in Markdown format, showing frontmatter and content. ```markdown --- type: lesson title: Welcome to TutorialKit # ... --- # Kitchen Sink [Heading 1] Lorem ipsum dolor ``` -------------------------------- ### TypeScript Example with Highlighting Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md TypeScript code snippet with inline highlighting on a type definition. ```typescript type Example = string; // [!code hl] const example: Example = 'example'; ``` -------------------------------- ### Developing UI Tests Source: https://github.com/stackblitz/tutorialkit/blob/main/e2e/README.md Commands to start the development server for the example/fixture project and to start Playwright in UI mode. ```bash pnpm start ``` ```bash pnpm test:ui ``` -------------------------------- ### TypeScript Example with Deletions and Additions Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md TypeScript code demonstrating changes with deleted and added lines. ```typescript // 1. Import modules. import { createPublicClient } from 'viem'; // [!code --] import { createPublicClient, http } from 'viem'; // [!code ++] import { mainnet } from 'viem/chains'; // 2. Set up your client with desired chain & transport. const client = createPublicClient({ chain: mainnet, transport: http(), }); // 3. Consume an action! const blockNumber = await client.getBlockNumber(); ``` -------------------------------- ### CodeMirrorEditor Example Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx An example demonstrating the usage of the CodeMirrorEditor component for syntax highlighting and multi-file edits. ```tsx import { CodeMirrorEditor } from '@astrojs/tutorialkit/react'; import type { EditorDocument, EditorUpdate } from '@codemirror/state'; import type { OnScrollCallback } from '@codemirror/view'; const sourceExampleCodeMirrorEditor = ` { console.log(update.state.doc.toString()); }} theme="dark" /> `; ``` -------------------------------- ### Setup Counter Function Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/cli/overwrites/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md This TypeScript code demonstrates how to set up a counter with an event listener for click events. ```typescript export function setupCounter(element) { let counter = 0; const setCounter = (count) => { counter = count; element.innerHTML = `count is ${counter}`; }; element.addEventListener('click', () => setCounter(counter + 1)); setCounter(0); } ``` -------------------------------- ### Tutorial Core Import Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/tutorialkit-api.mdx Example of how to import the Tutorial Core, which provides access to webcontainer APIs. ```typescript import * as core from "tutorialkit:core"; ``` -------------------------------- ### Install dependencies Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx Dependencies required to use TutorialKit's React components. ```shell npm install @tutorialkit/react @tutorialkit/theme ``` ```shell pnpm install @tutorialkit/react @tutorialkit/theme ``` ```shell yarn add @tutorialkit/react @tutorialkit/theme ``` -------------------------------- ### Astro Configuration with TutorialKit Integration Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Example of how to configure the TutorialKit Astro integration in your astro.config.ts file. ```typescript import tutorialkit from "@tutorialkit/astro"; import { defineConfig } from "astro/config"; export default defineConfig({ devToolbar: { enabled: false, }, integrations: [ tutorialkit(), ], }); ``` -------------------------------- ### src/content/tutorial/1-basics/1-introduction/1-welcome/content.mdx Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/how-to-use-tutorialkit-api.mdx This MDX file defines a lesson that uses the HelpButton component. It includes a title and instructions for the user, and renders the HelpButton component which allows users to get help by clicking it. ```mdx --- type: lesson title: TutorialKit API usage example focus: /index.js --- import HelpButton from '@components/HelpButton'; # TutorialKit API usage example Click this button if you get stuck: ``` -------------------------------- ### TypeScript Example with Focus and Line Numbers Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/content.md TypeScript code snippet highlighting specific lines related to action consumption. ```typescript // 1. Import modules import { createPublicClient, http } from 'viem'; import { mainnet } from 'viem/chains'; // 2. Set up your client with desired chain & transport const client = createPublicClient({ chain: mainnet, transport: http(), }); // 3. Consume an action! // [!code focus] const blockNumber = await client.getBlockNumber(); // [!code focus] ``` -------------------------------- ### Overriding Components with TutorialKit Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Example of how to provide paths to custom components to override default TutorialKit components. ```typescript tutorialkit({ components: { TopBar: './src/components/CustomTopBar.astro', }, }); ``` -------------------------------- ### Structure with only lessons Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx Example structure when a tutorial only contains lessons. ```plaintext - Lesson 1: Getting started - Lesson 2: Adding pages ``` -------------------------------- ### Configuring Expressive Code Themes Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Example of how to set custom themes for Expressive Code within the TutorialKit integration. ```typescript tutorialkit({ expressiveCodeThemes: ['catppuccin-latte', 'catppuccin-mocha'], }); ``` -------------------------------- ### editPageLink with plain=1 parameter Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx A diff example showing how to add the `plain=1` query parameter to the editPageLink URL to instruct GitHub to show the source code instead of rendering the Markdown file. ```diff -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/${path} +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/${path}?plain=1 ``` -------------------------------- ### Structure with parts and lessons Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx Example structure when a tutorial contains both parts and lessons, but no explicit chapters. ```plaintext - Part 1: Introduction - Lesson 1: What is Vite? - Lesson 2: Installing - … - Part 2: Project structure - … ``` -------------------------------- ### Vite tutorial structure Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx Example of how a Vite tutorial might be structured, showing parts, chapters, and lessons. ```plaintext - Part 1: Basics of Vite - Chapter 1: Introduction - Lesson 1: Welcome! - Lesson 2: Why Vite? - … - Chapter 2: Your first Vite project - Part 2: Vite CLI - … ``` -------------------------------- ### Accessing Custom Fields in Astro (TypeScript) Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx Example of how to access custom fields from the 'tutorial' collection in an Astro project. ```typescript 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) } ``` -------------------------------- ### Specifying a custom template Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx This example shows how to specify a custom template name in a lesson's front matter. ```markdown --- title: Advanced Topics template: my-advanced-template --- ``` -------------------------------- ### Project Structure Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/README.md The directory structure for a TutorialKit project. ```bash .\nAstro.config.mjs # TutorialKit uses Astro 🚀 (https://astro.build)\n├── src\n│ ├── ...\n│ ├── content\n│ │ └── tutorial # Your tutorial content lives here\n│ └── templates # Your templates (see below for more information)\n├── public\n│ ├── favicon.svg\n│ └── logo.svg # Default logo used in top left for your tutorial\n├── ...\n├── theme.ts # Customize the theme of the tutorial\n└── uno.config.ts # UnoCSS config (https://unocss.dev/) ``` -------------------------------- ### UI Structure Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/README.md A visual representation of the TutorialKit UI layout. ```markdown ┌─────────────────────────────────────────────────────┐ │ ● ● ● │ ├───────────────────────────┬─────────────────────────┤ │ │ │ │ │ │ │ │ │ │ │ │ │ Content │ Code Editor │ │ │ │ │ │ │ │ │ │ │ ├─────────────────────────┤ │ │ │ │ │ Preview & Boot Screen │ │ │ │ │ │ │ │ ├─────────────────────────┤ │ │ │ │ │ Terminal │ │ │ │ └───────────────────────────┴─────────────────────────┘ ``` -------------------------------- ### HTML Fieldset Example Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/_solution/index.html An example of using the fieldset and legend elements to group related form controls. ```html
Personal info



Notes
``` -------------------------------- ### Create a new tutorial with NPM Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/cli/README.md Use npx to create a new tutorial project. ```bash npx tutorialkit@latest create my-tutorial ``` -------------------------------- ### Create a new tutorial with PNPM Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/cli/README.md Use pnpm dlx to create a new tutorial project. ```bash pnpm dlx tutorialkit@latest create my-tutorial ``` -------------------------------- ### Terminal Example Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx An example demonstrating the usage of the Terminal component for interacting with a terminal using xterm.js. It shows lazy loading and wrapping in a Suspense boundary for SSR compatibility. ```tsx import { Terminal } from '@astrojs/tutorialkit/react'; import type { Terminal as XTermTerminal } from 'xterm'; const sourceExampleTerminal = ` { terminal.write('Welcome to the terminal!\r\n$ '); }} onTerminalResize={ (cols, rows) => { console.log(`Terminal resized to ${cols}x${rows}`); }} /> `; ``` -------------------------------- ### useWebcontainer hook Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx Example of the useWebcontainer hook. ```typescript import { useState, useEffect, useRef } from 'react'; import type { WebContainer, WebContainerTransport, } from '@webcontainer/api'; import { WebContainer, WebContainerTransport, } from '@webcontainer/api'; export function useWebcontainer() { const webcontainerInstance = useRef(null); const [isWebcontainerReady, setIsWebcontainerReady] = useState(false); useEffect(() => { async function init() { const container = await WebContainer.create(); container.on("error", ({ message }): void => { console.error("WebContainer error:", message); }); webcontainerInstance.current = container; setIsWebcontainerReady(true); } init(); return () => { webcontainerInstance.current?.dispose(); }; }, []); return { webcontainerInstance: webcontainerInstance.current, isWebcontainerReady, }; } ``` -------------------------------- ### useTheme hook Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx Example of the useTheme hook. ```typescript export function useTheme() { return 'light'; } ``` -------------------------------- ### CustomHeadLinks.astro Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx Example of a custom HeadTags component using Astro slots. ```jsx {/** Add your own tags **} ``` -------------------------------- ### Build command Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/deployment.mdx Command to prepare the production build of a TutorialKit project. ```shell npm run build ``` ```shell pnpm build ``` ```shell yarn build ``` -------------------------------- ### CustomTopBar.astro Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx Example of a custom TopBar component using Astro slots. ```jsx ``` -------------------------------- ### ButtonWriteToFile Component Source: https://github.com/stackblitz/tutorialkit/blob/main/e2e/src/content/tutorial/tests/preview/single/content.mdx Example of using the ButtonWriteToFile component to write to a file. ```javascript import { ButtonWriteToFile } from '@components/ButtonWriteToFile'; ``` -------------------------------- ### BootStatus Type Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/tutorialkit-api.mdx Status of the webcontainer's booting. ```typescript type BootStatus = 'unknown' | 'blocked' | 'booting' | 'booted'; ``` -------------------------------- ### src/content/tutorial/chapter/part/lesson/content.mdx Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/how-to-use-tutorialkit-api.mdx This MDX file defines a lesson that uses the TerminalWriter component. It includes a title and instructions for the user, and renders the TerminalWriter component which allows users to run tests by clicking a button. ```mdx --- type: lesson title: Write to Terminal example --- import TerminalWriter from "@components/TerminalWriter"; # Write to Terminal example Fix counter.js and run the tests! ``` -------------------------------- ### Running UI Tests Source: https://github.com/stackblitz/tutorialkit/blob/main/e2e/README.md Commands to install Playwright dependencies and run the UI tests. ```bash pnpm exec playwright install chromium --with-deps ``` ```bash pnpm test ``` -------------------------------- ### Example: Overriding TopBar Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx Provide a path to the new Astro component to override `TopBar`. ```typescript tutorialkit({ components: { TopBar: './src/components/CustomTopBar.astro', }, }) ``` -------------------------------- ### Astro Component Import Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/index.mdx This snippet shows how to import and use an Astro component. ```astro import HomePage from './index.astro'; ``` -------------------------------- ### Import Tutorial Store Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/tutorialkit-api.mdx You can access Tutorial Store by importing the `tutorialkit:store` entrypoint. ```typescript import tutorialStore from "tutorialkit:store"; ``` -------------------------------- ### Button Components for File Operations Source: https://github.com/stackblitz/tutorialkit/blob/main/e2e/src/content/tutorial/tests/filesystem/watch-glob/content.mdx Example usage of ButtonWriteToFile and ButtonDeleteFile components for interacting with the filesystem. ```javascript import { ButtonWriteToFile } from '@components/ButtonWriteToFile'; import { ButtonDeleteFile } from '@components/ButtonDeleteFile'; ``` -------------------------------- ### Preview Shape Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/README.md Defines the possible shapes for a Preview object, used for configuring preview ports. ```typescript string | [port: number, title: string] | { port: number, title: string } ``` -------------------------------- ### Command Shape Source: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/README.md Defines the possible shapes for a Command object, used for preparing and running scripts. ```typescript string | [command: string, title: string] | { command: string, title: string } ``` -------------------------------- ### PreviewInfo Class Source: https://github.com/stackblitz/tutorialkit/blob/main/docs/tutorialkit.dev/src/content/docs/reference/tutorialkit-api.mdx Instances of the preview tabs. ```typescript import type { PreviewSchema } from '@tutorialkit/types'; class PreviewInfo { readonly portInfo: PortInfo; title?: string; pathname?: string; get url(): string | undefined; get port(): number; get baseUrl(): string | undefined; get ready(): boolean; static parse(preview: Exclude[0]): Preview; static equals(a: PreviewInfo, b: PreviewInfo): boolean; } class PortInfo { readonly port: number; origin?: string | undefined; ready: boolean; } interface Preview { port: number; pathname?: string; title?: string; } ```