@tutorialkit-rb/cli 0.1.5 → 0.1.7

package/template/.claude/skills/tutorial-quickstart/SKILL.md

@@ -0,0 +1,440 @@
+---
+name: tutorial-quickstart
+description: |
+  Use this skill whenever starting a new tutorial project, understanding the end-to-end
+  workflow from scaffold to deployment, or working with the rails-app template's built-in
+  features. Trigger when the user says 'new tutorial', 'create tutorial', 'getting started',
+  'npx create-tutorialkit-rb', 'scaffold', 'first lesson', 'deploy tutorial', 'build:wasm',
+  'COEP headers', 'COOP headers', 'hosting setup', 'CSS classes', 'BEM components',
+  'design system', 'application.css', 'customize demo app', 'rails-app template',
+  'branding', 'logo', 'favicon', 'accent color', 'theme color', 'look and feel',
+  'customize colors', or asks how to set up, build, style, brand, or deploy a Rails
+  tutorial from scratch — even if they don't explicitly mention quickstart. This skill
+  provides the exact CLI commands, project structure, WASM build steps, rails-app template
+  features (CSS design system, layout), branding customization (logos, favicons, accent
+  colors, top bar title, component colors), demo app customization steps, deployment header
+  configuration, and common issue troubleshooting. Do NOT attempt project setup or deployment
+  without this skill. Do NOT use for detailed frontmatter reference (use tutorial-lesson-config)
+  or WASM compatibility questions (use rails-wasm-author-constraints).
+---
+
+# Tutorial Quickstart
+
+End-to-end guide: scaffold a project, write your first lesson, and deploy.
+
+## Step 1: Scaffold
+
+```bash
+npx create-tutorialkit-rb my-tutorial
+```
+
+The CLI prompts for:
+
+| Prompt | Default | Notes |
+|--------|---------|-------|
+| Tutorial name | random (e.g., "fierce-turtle") | Used as `package.json` name |
+| Directory | `./{name}` | Where files are created |
+| Hosting provider | Skip | Vercel, Netlify, or Cloudflare — adds COEP/COOP headers |
+| Package manager | npm | npm, yarn, pnpm, or bun |
+| Init git repo? | Yes | Creates initial commit |
+| Edit Gemfile? | Yes | Opens `ruby-wasm/Gemfile` in `$EDITOR` |
+
+Skip all prompts with `--defaults`, or pass flags directly:
+
+```bash
+npx create-tutorialkit-rb my-tutorial -p pnpm --provider netlify --git
+```
+
+### What Gets Created
+
+```
+my-tutorial/
+├── src/
+│   ├── content/tutorial/        ← Your tutorial content goes here
+│   │   ├── meta.md              ← Tutorial root config (already set up)
+│   │   └── 1-getting-started/   ← Sample part with starter lessons
+│   ├── templates/default/       ← WebContainer runtime (don't modify)
+│   └── components/              ← UI components
+├── ruby-wasm/
+│   └── Gemfile                  ← Add gems here, then rebuild WASM
+├── bin/build-wasm               ← Rebuilds the WASM binary
+├── astro.config.ts
+└── package.json
+```
+
+## Step 2: Add Your Gems
+
+Edit `ruby-wasm/Gemfile` to include the gems your tutorial needs:
+
+```ruby
+# ruby-wasm/Gemfile
+source "https://rubygems.org"
+
+gem "wasmify-rails", "~> 0.4.0"
+gem "rails", "~> 8.0.0"
+
+# Your tutorial's gems
+gem "action_policy"
+gem "devise"
+```
+
+Then build the WASM binary:
+
+```bash
+npm run build:wasm    # Takes up to 20 minutes on first run
+```
+
+Subsequent rebuilds are faster thanks to caching, but still take a few minutes.
+
+## Step 3: Start the Dev Server
+
+```bash
+npm run dev           # Starts at http://localhost:4321/
+```
+
+The sample tutorial loads immediately. You'll see the starter lessons from the scaffold.
+
+## Step 4: Write Your First Lesson
+
+### 4a. Create the Directory Structure
+
+```
+src/content/tutorial/
+├── meta.md                              ← Already exists (tutorial root)
+└── 1-basics/
+    ├── meta.md                          ← Part metadata
+    └── 1-hello-rails/
+        ├── content.md                   ← Your lesson
+        ├── _files/                      ← Starting code
+        │   └── workspace/
+        │       └── app/
+        │           └── controllers/
+        │               └── pages_controller.rb
+        └── _solution/                   ← Solution code
+            └── workspace/
+                └── app/
+                    └── controllers/
+                        └── pages_controller.rb
+```
+
+### 4b. Write the Part Metadata
+
+```yaml
+# src/content/tutorial/1-basics/meta.md
+---
+type: part
+title: The Basics
+---
+```
+
+### 4c. Write the Lesson
+
+```yaml
+# src/content/tutorial/1-basics/1-hello-rails/content.md
+---
+type: lesson
+title: Hello Rails
+focus: /workspace/app/controllers/pages_controller.rb
+previews: [3000]
+mainCommand: ['node scripts/rails.js server', 'Starting Rails server']
+prepareCommands:
+  - ['npm install', 'Preparing Ruby runtime']
+  - ['node scripts/rails.js db:prepare', 'Prepare development database']
+terminalBlockingPrepareCommandsCount: 2
+custom:
+  shell:
+    workdir: '/workspace'
+---
+
+# Hello Rails
+
+Open `app/controllers/pages_controller.rb` and add a `home` action:
+
+\`\`\`ruby title="app/controllers/pages_controller.rb" ins={2-4}
+class PagesController < ApplicationController
+  def home
+    render plain: "Hello from Rails on WebAssembly!"
+  end
+end
+\`\`\`
+
+Visit the preview to see your message.
+```
+
+### 4d. Add Starting Files
+
+Put a skeleton file in `_files/`:
+
+```ruby
+# _files/workspace/app/controllers/pages_controller.rb
+class PagesController < ApplicationController
+  # Add your action here
+end
+```
+
+### 4e. Add Solution Files
+
+Put the completed code in `_solution/`:
+
+```ruby
+# _solution/workspace/app/controllers/pages_controller.rb
+class PagesController < ApplicationController
+  def home
+    render plain: "Hello from Rails on WebAssembly!"
+  end
+end
+```
+
+### 4f. Delete the Sample Content
+
+Remove the scaffold's starter lessons once you have your own:
+
+```bash
+rm -rf src/content/tutorial/1-getting-started/
+rm -rf src/content/tutorial/2-controllers/
+```
+
+## The `rails-app` Template
+
+The scaffold includes a pre-built `rails-app` template at `src/templates/rails-app/` with a minimal Rails app skeleton and CSS design system. Most tutorials should extend this template rather than building from scratch.
+
+### What's Included
+
+- **CSS design system** — modern BEM-based stylesheet with CSS custom properties
+- **Layout** — nav bar with brand name; flash messages; `.container` wrapper
+- **Minimal app skeleton** — `ApplicationController`, basic layout, empty routes and seeds
+
+The template is intentionally minimal. Tutorial-specific features like authentication, models, controllers, and views should be added via lesson `_files/` overlays or custom templates that extend `rails-app`.
+
+### CSS Design System
+
+The template's `application.css` uses pure CSS with custom properties and BEM naming. Use these classes in your lesson ERB files — no extra setup needed.
+
+**CSS Custom Properties (`:root` variables):**
+
+| Category | Variables | Example |
+|----------|-----------|---------|
+| Colors | `--color-primary`, `--color-danger`, `--color-success`, `--color-warning`, `--color-info` | `color: var(--color-primary)` |
+| Text | `--color-text`, `--color-text-muted`, `--color-text-inverse` | `color: var(--color-text-muted)` |
+| Background | `--color-bg`, `--color-bg-white`, `--color-border` | `background: var(--color-bg)` |
+| Spacing | `--space-xs` through `--space-2xl` | `padding: var(--space-md)` |
+| Typography | `--font-sans`, `--font-mono`, `--font-size-sm` through `--font-size-3xl` | `font-size: var(--font-size-lg)` |
+| Radius | `--radius-sm` through `--radius-xl` | `border-radius: var(--radius-md)` |
+| Shadows | `--shadow-sm`, `--shadow-md` | `box-shadow: var(--shadow-sm)` |
+
+**BEM Components:**
+
+| Component | Classes | Usage |
+|-----------|---------|-------|
+| Button | `.btn`, `.btn--primary`, `.btn--danger`, `.btn--small`, `.btn--link` | Links, submits, actions |
+| Input | `.input`, `.input--error` | Text fields, selects, textareas |
+| Card | `.card`, `.card__header`, `.card__body`, `.card__footer` | Content containers |
+| Alert | `.alert`, `.alert--error`, `.alert--success`, `.alert--info`, `.alert--warning` | Flash messages, notices |
+| Badge | `.badge`, `.badge--primary`, `.badge--success`, `.badge--danger`, `.badge--warning` | Status labels, role tags |
+| Nav | `.nav`, `.nav__brand`, `.nav__link`, `.nav__user` | Top navigation (in layout) |
+| Form | `.form__group`, `.form__label`, `.form__hint`, `.form__errors`, `.form__actions` | Form layout |
+| Table | `.table` | Data tables with hover rows |
+| Page header | `.page-header` | Title + action button row |
+| Hero | `.hero`, `.hero__title`, `.hero__subtitle`, `.hero__actions` | Landing/home pages |
+| Utility | `.text-muted`, `.text-sm`, `.mt-md`, `.mb-md`, `.inline-actions`, `.container` | Spacing, text helpers |
+
+### Customizing the Demo App for Your Domain
+
+To turn the generic demo app into your tutorial's domain (e.g., a Help Desk, a Store, etc.):
+
+**1. Rename the app module** in `config/application.rb`:
+
+```ruby
+module Helpdesk  # was DemoApp
+  class Application < Rails::Application
+```
+
+**2. Add your models.** Create migrations in `db/migrate/` and models in `app/models/`. Update `db/schema.rb` to match.
+
+**3. Add controllers and views.** Put CRUD controllers in `app/controllers/` and ERB views in `app/views/`. Use the BEM classes from the CSS design system.
+
+**4. Update routes** in `config/routes.rb`.
+
+**5. Update seeds** in `db/seeds.rb` with sample data for your domain.
+
+**6. Update the layout** — change the brand name in `app/views/layouts/application.html.erb`, add nav links for your resources.
+
+## Step 5: Use a Template for Pre-Built State
+
+If your lesson needs an existing Rails app (not just an empty workspace), create a template:
+
+```
+src/templates/my-app/
+├── .tk-config.json          → { "extends": "../default" }
+└── workspace/
+      ├── app/
+      ├── config/
+      ├── db/
+      └── ...
+```
+
+Then reference it from your lesson's `_files/.tk-config.json`:
+
+```json
+{
+  "extends": "../../../../../templates/my-app"
+}
+```
+
+See the `rails-file-management` skill for details on template inheritance.
+
+## Step 6: Deploy
+
+Tutorials need **Cross-Origin-Embedder-Policy** and **Cross-Origin-Opener-Policy** headers for WebContainers to work. If you chose a hosting provider during scaffold, these are already configured.
+
+### Build for Production
+
+```bash
+npm run build         # Produces a static site in dist/
+```
+
+### Manual Header Configuration
+
+If you didn't choose a provider during scaffold, add these headers to every response:
+
+```
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+#### Vercel (`vercel.json`)
+
+```json
+{
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" },
+        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" }
+      ]
+    }
+  ]
+}
+```
+
+#### Netlify (`netlify.toml`)
+
+```toml
+[[headers]]
+for = "/*"
+[headers.values]
+Cross-Origin-Embedder-Policy = "require-corp"
+Cross-Origin-Opener-Policy = "same-origin"
+```
+
+#### Cloudflare (`public/_headers`)
+
+```
+/*
+  Cross-Origin-Embedder-Policy: require-corp
+  Cross-Origin-Opener-Policy: same-origin
+```
+
+## Customizing Look & Feel (Branding)
+
+To match your tutorial's branding to your project's documentation site, update these files:
+
+### Logos
+
+Replace `public/logo.svg` (light mode) and `public/logo-dark.svg` (dark mode) with your project's logo SVG. Use a dark fill (e.g., `#0F4D8A`) for the light-mode version and a light fill (e.g., `#E4E6E9`) for the dark-mode version.
+
+### Title in Top Bar
+
+Edit `src/components/TopBar.astro` — add a `<span>` after the logo images inside the `<a>` tag:
+
+```html
+<span class="ml-2 text-sm font-medium text-tk-elements-topBar-iconButton-iconColor whitespace-nowrap">
+  Your Tutorial Title
+</span>
+```
+
+### Favicon
+
+Replace `public/favicon.svg` with your project's icon. Optionally add a `public/favicon.ico` for broader browser support.
+
+### Accent Colors (UnoCSS Theme)
+
+Override the `accent` palette in `uno.config.ts` to change buttons, links, active tabs, and badges site-wide:
+
+```ts
+import { defineConfig } from '@tutorialkit-rb/theme';
+
+export default defineConfig({
+  theme: {
+    colors: {
+      accent: {
+        50: '#EFF6FF',
+        100: '#E5F0FF',
+        200: '#B6D4FF',
+        300: '#75B5FF',
+        400: '#4DA6FF',   // dark mode accent
+        500: '#0E7EF1',   // primary interactive
+        600: '#0F4D8A',   // primary brand
+        700: '#0C3F72',
+        800: '#09325A',
+        900: '#072848',
+        950: '#041A30',
+      },
+    },
+  },
+  content: {
+    pipeline: { include: '**' },
+  },
+});
+```
+
+Generate your scale from your brand's primary color. The `600` slot is the main brand color; `500` is for hover/interactive states; `400` is used in dark mode.
+
+### Component Hardcoded Colors
+
+Some components use hardcoded Tailwind color classes instead of theme tokens. Search for and replace these:
+
+- **`src/components/HelpDropdown.tsx`** — Reload button uses `bg-blue-600`. Change to `bg-accent-600 hover:bg-accent-700`.
+- **`src/components/HeadTags.astro`** — Rails path link colors. Update hex values to match your brand.
+
+### Rails Demo App CSS
+
+Update the primary color in `src/templates/rails-app/workspace/app/assets/stylesheets/application.css`:
+
+```css
+:root {
+  --color-primary: #0F4D8A;       /* your brand color */
+  --color-primary-hover: #0C3F72; /* darker shade */
+  --color-primary-light: #EFF6FF; /* tinted background */
+}
+```
+
+### GitHub Link
+
+Update the repo URL in `src/components/GitHubLink.astro`:
+
+```html
+<a href="https://github.com/your-org/your-repo" ...>
+```
+
+## Common Issues
+
+| Problem | Cause | Fix |
+|---------|-------|-----|
+| `build:wasm` fails | Missing WASI SDK or build tools | Check `rbwasm` prerequisites |
+| Preview shows nothing | Server not started | Add `mainCommand: ['node scripts/rails.js server', ...]` |
+| Terminal stuck on "Preparing" | WASM binary not built | Run `npm run build:wasm` first |
+| Files not appearing in editor | Wrong path | All Rails files must be under `workspace/<app>/` |
+| Database empty | No `db:prepare` in prepareCommands | Add `['node scripts/rails.js db:prepare', '...']` |
+| Deploy fails with blank page | Missing COEP/COOP headers | Add headers per provider instructions above |
+
+## Next Steps
+
+| Want to... | See skill |
+|------------|-----------|
+| Structure parts, chapters, lessons | `tutorial-content-structure` |
+| Configure frontmatter options | `tutorial-lesson-config` |
+| Organize Rails files properly | `rails-file-management` |
+| Check if a feature works in WASM | `rails-wasm-author-constraints` |
+| Get a recipe for a specific lesson type | `rails-lesson-recipes` |

package/template/.github/workflows/deploy.yml

@@ -0,0 +1,85 @@
+name: Deploy Tutorial
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+concurrency:
+  group: deploy
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions-rust-lang/setup-rust-toolchain@v1
+        with:
+          toolchain: 1.74.0
+
+      - name: Install wasi-vfs
+        env:
+          WASI_VFS_VERSION: 0.5.4
+        run: |
+          curl -LO "https://github.com/kateinoigakukun/wasi-vfs/releases/download/v${WASI_VFS_VERSION}/wasi-vfs-cli-x86_64-unknown-linux-gnu.zip"
+          unzip wasi-vfs-cli-x86_64-unknown-linux-gnu.zip
+          mv wasi-vfs /usr/local/bin/wasi-vfs
+
+      - uses: ruby/setup-ruby@v1
+        env:
+          BUNDLE_GEMFILE: ruby-wasm/Gemfile
+          BUNDLE_PATH: ruby-wasm/vendor
+        with:
+          ruby-version: 3.3
+          bundler-cache: true
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Cache ruby.wasm build artifacts
+        uses: actions/cache@v4
+        with:
+          path: |
+            ruby-wasm/build
+            ruby-wasm/rubies
+          key: ${{ runner.os }}-ruby-wasm-${{ hashFiles('ruby-wasm/Gemfile.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-ruby-wasm-
+
+      - name: Build ruby.wasm
+        run: npm run build:wasm
+
+      - name: Build tutorial
+        run: |
+          npm install
+          npm run build
+
+      - name: Upload dist
+        uses: actions/upload-artifact@v4
+        with:
+          name: tutorial-dist
+          path: ./dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: tutorial-dist
+          path: dist
+
+      - uses: nwtgck/actions-netlify@v3
+        with:
+          publish-dir: ./dist
+          netlify-config-path: ./netlify.toml
+          production-deploy: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

package/template/.gitignore

@@ -12,3 +12,13 @@ pnpm-debug.log*
 
 public/ruby.wasm
 public/ruby.wasm.hash
+
+ruby-wasm/build
+ruby-wasm/dist
+ruby-wasm/tmp
+ruby-wasm/vendor
+ruby-wasm/.bundle
+ruby-wasm/rubies
+
+# Local development linking (created by npm run link:local)
+pnpm-workspace.yaml

package/template/CLAUDE.md

@@ -0,0 +1,47 @@
+# Tutorial Authoring Guide
+
+You are authoring an interactive Ruby on Rails tutorial that runs entirely in the browser using WebAssembly. Tutorial content lives in `src/content/tutorial/`. The Rails WASM runtime, templates, and infrastructure are already set up — your job is to write lessons.
+
+## Project Layout
+
+```
+src/content/tutorial/     ← Your tutorial content (lessons, parts, chapters)
+src/templates/            ← WebContainer file templates (base app states)
+ruby-wasm/Gemfile         ← Gems compiled into the WASM binary
+bin/build-wasm            ← Rebuild WASM after Gemfile changes
+```
+
+## Key Constraints
+
+- **All Rails app files go under `workspace/`** — this is the WASI filesystem boundary
+- **Each lesson should be self-contained** — don't rely on user actions from previous lessons persisting
+- **Gems require a WASM rebuild** — edit `ruby-wasm/Gemfile`, then run `bin/build-wasm`
+- **Outbound HTTP works** (`Net::HTTP`, Faraday, etc.) via JS fetch bridge — CORS restrictions apply, see `rails-wasm-author-constraints`
+- **No threading or process spawning** from Ruby — see `rails-wasm-author-constraints`
+- **Database resets on page reload** — use `prepareCommands` with `db:prepare` for lessons that need data
+- **Use `node scripts/rails.js <cmd>`** in frontmatter commands, not bare `rails <cmd>`
+
+## Development
+
+```bash
+npm install         # Install dependencies (or pnpm/yarn/bun — whichever this project uses)
+npm run dev         # Start dev server at http://localhost:4321/
+```
+
+## Before Creating or Modifying Lessons
+
+**MANDATORY:** Always invoke these skills before writing any lesson content:
+
+- `rails-lesson-recipes` — lesson patterns, directory structures, and post-creation checklist
+- `rails-file-management` — `_files/`, `_solution/`, template organization, and the file layering model
+- `tutorial-lesson-config` — frontmatter options, inheritance rules, and invalid-combination constraints
+
+Do NOT create lessons without loading these skills first. Incorrect structure causes silent runtime failures.
+
+## Additional Skills
+
+| Question | Skill |
+|----------|-------|
+| How do I start a new tutorial from scratch? | `tutorial-quickstart` |
+| How do I structure parts, chapters, and lessons? | `tutorial-content-structure` |
+| Can I teach feature X in WASM? | `rails-wasm-author-constraints` |

package/template/astro.config.ts

@@ -6,6 +6,18 @@ export default defineConfig({
   devToolbar: {
     enabled: false,
   },
+  vite: {
+    server: {
+      watch: {
+        ignored: ['**/ruby-wasm/**'],
+      },
+    },
+    build: {
+      rollupOptions: {
+        external: [/ruby-wasm/],
+      },
+    },
+  },
   integrations: [
     tutorialkit({
       components: {

package/template/bin/build-pack

@@ -0,0 +1,84 @@
+#!/bin/bash
+
+set -e
+
+# Dynamic gem packing: cross-compile gems and pack them into a pre-built
+# Ruby WASM base binary via wasi-vfs.
+#
+# This is the fast path (~30s) compared to the monolithic `bin/build-wasm`
+# (~5-20min). Requires a pre-built base binary (from bin/build-ruby-base
+# or the @tutorialkit-rb/ruby-3.3 npm package).
+#
+# Usage: ./bin/build-pack
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+TEMPLATE_DIR="$(dirname "$SCRIPT_DIR")"
+RUBY_WASM_DIR="$TEMPLATE_DIR/ruby-wasm"
+
+echo "=== Dynamic gem packing ==="
+echo
+
+# --- Preflight checks --------------------------------------------------------
+
+if ! command -v wasi-vfs &> /dev/null; then
+  echo "Error: wasi-vfs CLI not found"
+  echo "Install it with: cargo install wasi-vfs-cli"
+  echo "See: https://github.com/aspect-build/aspect-workflows/tree/main/packages/wasi-vfs"
+  exit 1
+fi
+
+# --- Resolve base binary -----------------------------------------------------
+
+echo "Resolving base binary..."
+BASE_WASM=""
+
+# 1. Local build
+if [ -f "$RUBY_WASM_DIR/dist/ruby-base.wasm" ]; then
+  BASE_WASM="$RUBY_WASM_DIR/dist/ruby-base.wasm"
+  echo "  Found: local build (dist/ruby-base.wasm)"
+fi
+
+# 2. npm package fallback
+if [ -z "$BASE_WASM" ]; then
+  NPM_BASE="$RUBY_WASM_DIR/node_modules/@tutorialkit-rb/ruby-3.3/dist/ruby-base.wasm"
+  if [ -f "$NPM_BASE" ]; then
+    BASE_WASM="$NPM_BASE"
+    echo "  Found: @tutorialkit-rb/ruby-3.3 npm package"
+  fi
+fi
+
+if [ -z "$BASE_WASM" ]; then
+  echo
+  echo "Error: No base WASM binary found."
+  echo "Either run 'bin/build-ruby-base' to build one,"
+  echo "or install @tutorialkit-rb/ruby-3.3 npm package."
+  exit 1
+fi
+
+echo
+
+# --- Cross-compile gems + pack -----------------------------------------------
+
+echo "Installing host gems for cross-compilation..."
+cd "$RUBY_WASM_DIR"
+bundle install --path vendor/bundle
+echo
+
+echo "Running pack-gems..."
+bundle exec ruby bin/pack-gems
+echo
+
+# --- Copy output to public/ --------------------------------------------------
+
+echo "Copying ruby.wasm to public directory..."
+cp "$RUBY_WASM_DIR/dist/ruby.wasm" "$TEMPLATE_DIR/public/ruby.wasm"
+echo "  ruby.wasm → public/"
+
+# Generate hash of Gemfile.lock for cache versioning
+GEMFILE_HASH=$(shasum -a 256 "$RUBY_WASM_DIR/Gemfile.lock" | cut -c1-16)
+echo "$GEMFILE_HASH" > "$TEMPLATE_DIR/public/ruby.wasm.hash"
+echo "  ruby.wasm.hash: $GEMFILE_HASH"
+
+echo
+echo "=== Done ==="
+echo "Run 'npm run dev' to test your tutorial."