/CLAUDE.md

CLAUDE.md at /CLAUDE.md

Path: CLAUDE.md

zudo-codemirror

Takazudo’s personal CodeMirror 6 dev notes. Astro 6 + MDX + Tailwind CSS v4 + React islands. Base path: /pj/zudo-codemirror/.

Commands

pnpm dev          # Start Astro dev server (port 8847)
pnpm build        # Build static site to dist/
pnpm build:cm6    # Rebuild CodeMirror IIFE bundle
pnpm preview      # Preview built site
pnpm check        # Astro type checking
pnpm format:md    # Format MDX files
pnpm b4push       # Pre-push validation (cm6 bundle + format + typecheck + build)

Content

• English (default): src/content/docs/ → /docs/...
• Japanese: src/content/docs-ja/ → /ja/docs/...
• Japanese docs mirror the English directory structure
• Required frontmatter: title (string). Optional: description, sidebar_position (number).
• When adding/modifying EN content, update the corresponding JA file.

MDX Components

Available globally without imports:

• <Note>, <Tip>, <Info>, <Warning>, <Danger> - Admonitions
• <HtmlPreview> - Interactive HTML/CSS/JS preview with code display

Live Demos (CM6 Bundle)

Pre-built IIFE bundle at public/assets/cm6-bundle.min.js exposes window.CM in every HtmlPreview iframe.

• Rebuild: pnpm build:cm6 (entry: scripts/cm6-bundle-entry.ts)
• js prop: runtime code using CM.* globals
• displayJs prop: clean ESM imports shown in “Show code” panel
• Keep HtmlPreview blocks identical in EN/JA — only translate surrounding text.

CI/CD

• PR checks: typecheck + build + Cloudflare Pages preview
• Main deploy: build + Cloudflare Pages production + IFTTT notification
• Secrets: CLOUDFLARE_ACCOUNT_ID, CLOUDFLARE_API_TOKEN, IFTTT_PROD_NOTIFY
• Cloudflare Pages project: zudo-codemirror