``` # Code Collapse ## Overview The `ProseCodeCollapse` component wraps code blocks and provides a toggle button to expand or collapse content. It's ideal for lengthy code examples that would take up too much vertical space, starting at a fixed height with a gradient fade effect. ::prose-callout{title="Features" variant="info"} - **Clean Toggle** - Simple expand/collapse functionality - **Gradient Fade** - Visual indicator when content is collapsed - **Customizable Labels** - Configure button text and labels - **Accessible** - Proper ARIA attributes for screen readers - **Smart Defaults** - Works great out of the box with sensible defaults :: ## Basic Usage Wrap any code block to make it collapsible: ::show-case --- prose: "" --- :::prose-code-collapse ::::prose-code-snippet --- file: /plugins/mermaid.client.ts language: ts title: Mermaid Plugin --- :::: ::: #code ```mdc ::prose-code-collapse ::prose-code-snippet{file="/plugins/mermaid.client.ts" language="ts" title="Mermaid Plugin"} :: :: ``` :: ## Custom Labels Customize the button text and name: ::show-case --- prose: "" --- :::prose-code-collapse{close-text="Hide" name="Implementation" open-text="Show"} ```vue ``` ::: #code ````mdc ::prose-code-collapse{name="Implementation" openText="Show" closeText="Hide"} ```vue ``` :: ```` :: ## With Code Snippet Combine with `::prose-code-snippet` to show actual source files: ::show-case --- prose: "" --- :::prose-code-collapse{name="Full Source"} ::::prose-code-snippet --- file: /composables/useFormField.ts language: ts title: useFormField Composable --- :::: ::: #code ```mdc ::prose-code-collapse{name="Full Source"} ::prose-code-snippet{file="/composables/useFormField.ts" language="typescript" title="useFormField Composable"} :: :: ``` :: ## Custom Icon Change the toggle icon: ::show-case --- prose: "" --- :::prose-code-collapse{icon="lucide:code" name="Example"} ::::prose-code-snippet --- file: /components/Ui/Chip.vue language: vue title: Chip Component --- :::: ::: #code ```mdc ::prose-code-collapse{icon="lucide:code" name="Example"} ::prose-code-snippet{file="/components/Ui/Chip.vue" language="vue" title="Chip Component"} :: :: ``` :: ## Props | Prop | Type | Default | Description | | :---------- | :------- | :---------------------- | :------------------------------------------------------- | | `icon` | `string` | `"lucide:chevron-down"` | Icon displayed on the toggle button | | `name` | `string` | `"Code"` | Name/label shown in the button text | | `openText` | `string` | `"Expand"` | Text shown when code is collapsed (clickable to expand) | | `closeText` | `string` | `"Collapse"` | Text shown when code is expanded (clickable to collapse) | | `class` | `string` | - | Additional CSS classes for the root container | ## Behavior ### Initial State - Code starts **collapsed** at 200px height - Gradient fade overlay indicates more content below - Button shows: "{openText} {name}" (e.g., "Expand Code") ### Expanded State - Code expands to full height (max 80vh) - Gradient fade removed - Button shows: "{closeText} {name}" (e.g., "Collapse Code") ## Accessibility The component includes proper accessibility features: - **ARIA Attributes**: `aria-expanded` indicates current state - **ARIA Labels**: `aria-label` provides context for screen readers - **Keyboard Support**: Button is focusable and clickable via keyboard - **Icon Decoration**: Chevron icon is marked `aria-hidden="true"` - **Semantic HTML**: Uses proper button element for interaction ## Use Cases ::prose-callout{title="When to Use Code Collapse" variant="tip"} - **Long Examples** - Code snippets over \~30 lines - **Complete Files** - Full component implementations - **Optional Details** - Advanced examples users can expand if needed - **Tutorial Code** - Progressive disclosure of complex solutions - **API References** - Full endpoint implementations :: ## Best Practices 1. **Use Descriptive Names** - Make it clear what's being collapsed ```mdc ::prose-code-collapse{name="Full Implementation"} ``` 2. **Customize Button Text** - Match your documentation tone ```mdc ::prose-code-collapse{openText="Show" closeText="Hide"} ``` 3. **Combine with Snippets** - Keep docs in sync with source ```mdc ::prose-code-collapse ::prose-code-snippet{file="/path/to/file.vue"} :: :: ``` 4. **Use Sparingly** - Don't collapse everything; save for truly long code 5. **Consider Context** - Some readers want full code upfront, others prefer collapsed ## Related Components ::prose-icon-list [**ProseCodeSnippet**](https://uithing.com/prose/code-snippet) - Import code from files or URL [**ProseCodeGroup**](https://uithing.com/prose/code-group) - Tabbed code snippets [**ProseCodeTree**](https://uithing.com/prose/code-tree) - Interactive file tree with code preview :: # Code Group ## Overview The `ProseCodeGroup` component creates a tabbed interface for displaying multiple code blocks. It's perfect for showing the same functionality in different languages, comparing implementations, or displaying related configuration files side by side. ::prose-callout{title="Features" variant="info"} - **Automatic Language Icons** - Detects language from code fence and shows appropriate icon - **Custom Icons** - Override with custom icons per tab - **Tab Sync** - Synchronize selections across multiple code groups - **Search Functionality** - Quick tab search for groups with many options - **Responsive Design** - Works seamlessly on all screen sizes :: ## Basic Usage Use the `::prose-code-group` wrapper with code fences. The filename in brackets becomes the tab label: ::show-case --- prose: "" --- :::prose-code-group ```vue [app.vue] noFormat ``` ```vue [pages/index.vue] noFormat ``` ::: #code ````mdc ::prose-code-group ```vue [app.vue] noFormat ``` ```vue [pages/index.vue] noFormat ``` :: ```` :: ## Multi-Language Examples ### Component Implementation Show how to create the same component in different frameworks: ::show-case --- prose: "" --- :::prose-code-group ```vue [Vue 3] hideHeader // hideHeader removes the name in the pre component ``` ```tsx [React] hideHeader import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); return ; } ``` ```svelte [Svelte] hideHeader ``` ```tsx [Solid] hideHeader import { createSignal } from "solid-js"; export default function Counter() { const [count, setCount] = createSignal(0); return ; } ``` ::: #code ````mdc ::prose-code-group ```vue [Vue 3] hideHeader // hideHeader removes the name in the pre component ``` ```tsx [React] hideHeader import { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0) return ( ) } ``` ```svelte [Svelte] hideHeader ``` ```tsx [Solid] hideHeader // Hide header removes the name in the pre component import { createSignal } from 'solid-js' export default function Counter() { const [count, setCount] = createSignal(0) return ( ) } ``` :: ```` :: ### API Requests Compare different HTTP client libraries: ::prose-code-group ```ts [Fetch API] hideHeader async function getUser(id: string) { const response = await fetch(`/api/users/${id}`); if (!response.ok) { throw new Error("Failed to fetch user"); } return response.json(); } ``` ```ts [Axios] hideHeader import axios from "axios"; async function getUser(id: string) { const { data } = await axios.get(`/api/users/${id}`); return data; } ``` ```ts [Ky] hideHeader import ky from "ky"; async function getUser(id: string) { return ky.get(`/api/users/${id}`).json(); } ``` ```ts [ofetch] hideHeader import { ofetch } from "ofetch"; async function getUser(id: string) { return ofetch(`/api/users/${id}`); } ``` :: ## Configuration Files ### Framework Setup Show related configuration files together: ::prose-code-group ```ts [nuxt.config.ts] hideHeader export default defineNuxtConfig({ modules: ["@nuxtjs/tailwindcss", "@nuxt/content"], content: { highlight: { theme: "github-dark", }, }, }); ``` ```js [tailwind.config.js] hideHeader export default { content: ["./components/**/*.{vue,js,ts}", "./layouts/**/*.vue", "./pages/**/*.vue", "./app.vue"], theme: { extend: {}, }, }; ``` ```json [package.json] hideHeader { "name": "my-app", "scripts": { "dev": "nuxt dev", "build": "nuxt build", "preview": "nuxt preview" }, "dependencies": { "nuxt": "^3.13.0", "@nuxt/content": "^2.13.0" } } ``` ```json [tsconfig.json] hideHeader { "extends": "./.nuxt/tsconfig.json", "compilerOptions": { "strict": true, "types": ["@nuxt/types"] } } ``` :: ### Environment Variables ::prose-code-group ```bash [.env] hideHeader DATABASE_URL=postgresql://localhost:5432/mydb REDIS_URL=redis://localhost:6379 JWT_SECRET=your-secret-key API_KEY=your-api-key ``` ```bash [.env.example] hideHeader DATABASE_URL= REDIS_URL= JWT_SECRET= API_KEY= ``` ```ts [env.d.ts] hideHeader declare global { namespace NodeJS { interface ProcessEnv { DATABASE_URL: string; REDIS_URL: string; JWT_SECRET: string; API_KEY: string; } } } export {}; ``` :: ## Synced Code Groups Use the `sync` prop to keep tab selections synchronized across multiple code groups on the same page: ### Installation ::prose-code-group{sync="package-manager"} ```bash [npm] hideHeader icon="devicon:npm" npm install ui-thing@latest ``` ```bash [pnpm] hideHeader icon="devicon:pnpm" pnpm add ui-thing@latest ``` ```bash [yarn] hideHeader icon="devicon:yarn" yarn add ui-thing@latest ``` ```bash [bun] hideHeader icon="devicon:bun" bun add ui-thing@latest ``` :: ### Run Dev Server ::prose-code-group{sync="package-manager"} ```bash [npm] hideHeader icon="devicon:npm" npm run dev ``` ```bash [pnpm] hideHeader icon="devicon:pnpm" pnpm dev ``` ```bash [yarn] hideHeader icon="devicon:yarn" yarn dev ``` ```bash [bun] hideHeader icon="devicon:bun" bun dev ``` :: ::prose-callout{title="Try It!" variant="tip"} Click between tabs above - both groups stay synchronized because they use `sync="package-manager"`. :: ## Custom Icons Override default language icons with custom ones: ::show-case --- prose: "" --- :::prose-code-group ```ts [server.ts] icon="lucide:server" import express from "express"; const app = express(); const PORT = 3000; app.get("/", (req, res) => { res.json({ message: "Hello World" }); }); app.listen(PORT); ``` ```ts [client.ts] icon="lucide:smartphone" async function fetchData() { const response = await fetch("/api/data"); return response.json(); } ``` ```ts [database.ts] icon="lucide:database" import { PrismaClient } from "@prisma/client"; const prisma = new PrismaClient(); export async function getUsers() { return prisma.user.findMany(); } ``` ::: #code ````mdc ::prose-code-group ```ts [server.ts] icon="lucide:server" import express from 'express' const app = express() const PORT = 3000 app.get('/', (req, res) => { res.json({ message: 'Hello World' }) }) app.listen(PORT) ``` ```ts [client.ts] icon="lucide:smartphone" async function fetchData() { const response = await fetch('/api/data') return response.json() } ``` ```ts [database.ts] icon="lucide:database" import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() export async function getUsers() { return prisma.user.findMany() } ``` :: ```` :: ## Testing Examples ### Unit Tests ::prose-code-group ```ts [component.test.ts] import { mount } from "@vue/test-utils"; import { describe, expect, it } from "vitest"; import MyButton from "./MyButton.vue"; describe("MyButton", () => { it("renders correctly", () => { const wrapper = mount(MyButton, { props: { label: "Click me" }, }); expect(wrapper.text()).toBe("Click me"); }); it("emits click event", async () => { const wrapper = mount(MyButton); await wrapper.trigger("click"); expect(wrapper.emitted("click")).toBeTruthy(); }); }); ``` ```ts [utils.test.ts] import { describe, expect, it } from "vitest"; import { calculateTotal, formatDate } from "./utils"; describe("Utils", () => { it("formats date correctly", () => { const date = new Date("2024-01-15"); expect(formatDate(date)).toBe("Jan 15, 2024"); }); it("calculates total", () => { expect(calculateTotal([10, 20, 30])).toBe(60); }); }); ``` ```ts [api.test.ts] import { describe, expect, it, vi } from "vitest"; import { getUser } from "./api"; describe("API", () => { it("fetches user successfully", async () => { global.fetch = vi.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve({ id: 1, name: "John" }), }) ) as any; const user = await getUser("1"); expect(user.name).toBe("John"); }); }); ``` :: ## Database Schemas ### Prisma Schema ::prose-code-group ```prisma [schema.prisma] datasource db { provider = "postgresql" url = env("DATABASE_URL") } generator client { provider = "prisma-client-js" } model User { id Int @id @default(autoincrement()) email String @unique name String? posts Post[] createdAt DateTime @default(now()) } model Post { id Int @id @default(autoincrement()) title String content String? published Boolean @default(false) author User @relation(fields: [authorId], references: [id]) authorId Int createdAt DateTime @default(now()) } ``` ```sql [migration.sql] CREATE TABLE "User" ( "id" SERIAL PRIMARY KEY, "email" TEXT NOT NULL UNIQUE, "name" TEXT, "createdAt" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE "Post" ( "id" SERIAL PRIMARY KEY, "title" TEXT NOT NULL, "content" TEXT, "published" BOOLEAN NOT NULL DEFAULT false, "authorId" INTEGER NOT NULL, "createdAt" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY ("authorId") REFERENCES "User"("id") ); ``` ```ts [types.ts] export interface User { id: number; email: string; name: string | null; posts: Post[]; createdAt: Date; } export interface Post { id: number; title: string; content: string | null; published: boolean; author: User; authorId: number; createdAt: Date; } ``` :: ## Styling Examples ### CSS Solutions ::prose-code-group ```css [styles.css] .button { padding: 0.5rem 1rem; border-radius: 0.25rem; background: #3b82f6; color: white; border: none; cursor: pointer; transition: background 0.2s; } .button:hover { background: #2563eb; } .button:disabled { opacity: 0.5; cursor: not-allowed; } ``` ```scss [styles.scss] .button { padding: 0.5rem 1rem; border-radius: 0.25rem; background: #3b82f6; color: white; border: none; cursor: pointer; transition: background 0.2s; &:hover { background: #2563eb; } &:disabled { opacity: 0.5; cursor: not-allowed; } } ``` ```vue [Scoped CSS] ``` ```ts [Tailwind] const buttonClasses = [ "px-4 py-2", "rounded", "bg-blue-500", "text-white", "border-none", "cursor-pointer", "transition-colors", "hover:bg-blue-600", "disabled:opacity-50", "disabled:cursor-not-allowed", ].join(" "); ``` :: ## Props | Prop | Type | Default | Description | | :------------------ | :-------- | :---------------- | :------------------------------------------------ | | `inStack` | `boolean` | `false` | Whether the code group is in a stack layout | | `sync` | `string` | - | Sync identifier for syncing with other tab groups | | `padded` | `boolean` | `true` | Whether to add padding around the tabs | | `disableSearch` | `boolean` | `false` | Disable the search functionality | | `searchPlaceholder` | `string` | `'Search Tab...'` | Placeholder text for the search input | | `searchEmpty` | `string` | `'No tab found.'` | Text to display when no tab is found | | `comboBoxFullWidth` | `boolean` | `false` | Whether the combobox should take full width | | `class` | `string` | - | Additional classes to add to the wrapper | ## Syntax ### Basic Structure ````mdc ::prose-code-group ```language [Tab Name] code here ``` ```language [Another Tab] more code ``` :: ```` ### With Props ````mdc ::prose-code-group{sync="my-group" padded=false} ```ts [Option 1] const a = 1 ``` ```ts [Option 2] const b = 2 ``` :: ```` ### With Icons ````mdc ::prose-code-group ```ts [server.ts] icon="lucide:server" // server code ``` ```ts [client.ts] icon="lucide:smartphone" // client code ``` :: ```` ## Search Functionality For code groups with many tabs, users can search: ::prose-code-group ```ts [auth.ts] export async function login(email: string, password: string) { // Login logic } ``` ```ts [user.ts] export async function getUser(id: string) { // Get user logic } ``` ```ts [post.ts] export async function createPost(data: any) { // Create post logic } ``` ```ts [comment.ts] export async function addComment(postId: string, text: string) { // Add comment logic } ``` ```ts [profile.ts] export async function updateProfile(userId: string, data: any) { // Update profile logic } ``` ```ts [settings.ts] export async function updateSettings(settings: any) { // Update settings logic } ``` ```ts [notification.ts] export async function sendNotification(userId: string, message: string) { // Send notification logic } ``` ```ts [analytics.ts] export async function trackEvent(event: string, data: any) { // Track event logic } ``` :: ::prose-callout{title="Search Tips" variant="tip"} When you have 5 or more tabs, the `Combobox` variant is automatically used to help users find tabs quickly. :: ## Real-World Use Cases ### API Routes ::prose-code-group ```ts [GET /api/users] noFormat export default defineEventHandler(async (event) => { const users = await prisma.user.findMany(); return users; }); ``` ```ts [GET /api/users/[id\\]] noFormat export default defineEventHandler(async (event) => { const id = getRouterParam(event, "id"); const user = await prisma.user.findUnique({ where: { id: Number(id) }, }); if (!user) { throw createError({ statusCode: 404, message: "User not found", }); } return user; }); ``` ```ts [POST /api/users] noFormat export default defineEventHandler(async (event) => { const body = await readBody(event); const user = await prisma.user.create({ data: body, }); return user; }); ``` ```ts [PUT /api/users/[id\\]] noFormat export default defineEventHandler(async (event) => { const id = getRouterParam(event, "id"); const body = await readBody(event); const user = await prisma.user.update({ where: { id: Number(id) }, data: body, }); return user; }); ``` ```ts [DELETE /api/users/[id\\]] noFormat export default defineEventHandler(async (event) => { const id = getRouterParam(event, "id"); await prisma.user.delete({ where: { id: Number(id) }, }); return { success: true }; }); ``` :: ### Docker Setup ::prose-code-group ```dockerfile [Dockerfile] FROM node:20-alpine WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build EXPOSE 3000 CMD ["node", ".output/server/index.mjs"] ``` ```yaml [docker-compose.yml] version: "3.8" services: app: build: . ports: - "3000:3000" environment: - DATABASE_URL=postgresql://postgres:password@db:5432/mydb - NODE_ENV=production depends_on: - db - redis db: image: postgres:16-alpine environment: - POSTGRES_PASSWORD=password - POSTGRES_DB=mydb volumes: - postgres_data:/var/lib/postgresql/data redis: image: redis:7-alpine volumes: - redis_data:/data volumes: postgres_data: redis_data: ``` ```yaml [.dockerignore] node_modules .nuxt .output .git .env .env.* *.log ``` :: ### GitHub Actions ::prose-code-group ```yaml [test.yml] name: Test on: push: branches: [main] pull_request: branches: [main] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 - run: npm ci - run: npm test ``` ```yaml [deploy.yml] name: Deploy on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 - run: npm ci - run: npm run build - name: Deploy to production run: | # Deploy command here env: API_KEY: ${{ secrets.API_KEY }} ``` ```yaml [lint.yml] name: Lint on: [push, pull_request] jobs: lint: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 - run: npm ci - run: npm run lint ``` :: ## Best Practices ::prose-callout{title="Tips for Code Groups" variant="tip"} - Use descriptive tab names that clearly indicate what the code does - Keep the number of tabs reasonable (5-10 max for best UX) - Use `sync` prop when showing package manager commands across multiple groups - Add custom icons to make tabs more visually distinct - Use `noFormat` meta flag if you want to preserve exact filename formatting - Use `hideHeader` meta flag if you want to hide the tab header - Consider grouping related code (configs, routes, tests) together :: ## Accessibility The component provides excellent keyboard navigation: - **Tab** - Move between tabs - **Enter/Space** - Activate selected tab - **Arrow Keys** - Navigate tabs in the list - **Type to Search** - Quick search when many tabs are present Screen readers announce tab labels and active states properly. ## Vue Component Usage You can also use it programmatically in Vue files: ```vue ``` ## Related Components ::prose-icon-list :::prose-li{icon="lucide:table-2"} [**ProseTabs**](https://uithing.com/prose/tabs) - General-purpose tabbed interface ::: :::prose-li{icon="lucide:workflow"} [**ProseMermaid**](https://uithing.com/prose/mermaid) - Diagram rendering in code blocks ::: :: # Code Snippet ## Overview The `ProseCodeSnippet` component allows you to reference actual source files from your project or external URLs, ensuring your documentation always shows the latest code without manual updates. Perfect for keeping docs in sync with your codebase. ::prose-callout{title="Features" variant="info"} - **Dynamic Imports** - Load code directly from your project files - **External URLs** - Fetch code from GitHub, GitLab, or any URL - **Line Extraction** - Show specific line ranges from large files - **Syntax Highlighting** - Full language support via Shiki - **Auto-sync** - Documentation updates automatically when source code changes - **Performance** - Lazy loads files only when needed :: ::prose-callout{title="Build Consideration" variant="warning"} Files must match the `import.meta.glob` patterns in the component. The current setup includes all `.vue`, `.ts`, `.css`, and `.json` files from `/app/**` (excluding test files). Adjust patterns as needed for your use case. :: ## Basic Usage Import a component from your project: ::show-case --- prose: "" --- :::prose-code-snippet --- file: /components/Ui/Button.vue language: vue title: Button Component --- ::: #code ```mdc ::prose-code-snippet{file="/components/Ui/Button.vue" language="vue" title="Button Component"} :: ``` :: ## Import Project Files ### Vue Components Show your actual component code: ::show-case --- prose: "" --- :::prose-code-snippet --- file: /components/Ui/Card/Card.vue language: vue title: Card.vue --- ::: #code ```mdc ::prose-code-snippet{file="/components/Ui/Card/Card.vue" language="vue" title="Card.vue"} :: ``` :: ### TypeScript Utilities Reference utility functions: ::show-case --- prose: "" --- :::prose-code-snippet --- file: /utils/colors.ts language: ts title: Color Utilities --- ::: #code ```mdc ::prose-code-snippet{file="/utils/colors.ts" language="ts" title="Color Utilities"} :: ``` :: ### Composables Display your composable logic: ::show-case --- prose: "" --- :::prose-code-snippet --- file: /composables/usePm.ts language: ts meta: noFormat title: usePm Composable --- ::: #code ```mdc ::prose-code-snippet{file="/composables/usePm.ts" language="ts" title="usePm Composable" meta="noFormat"} :: ``` :: ## Extract Specific Lines Use `start` and `offset` to show only relevant portions of large files: ::show-case --- prose: "" --- :::prose-code-snippet --- file: /components/Ui/Button.vue language: vue offset: "31" start: 137 title: Button Props --- ::: #code ```mdc ::prose-code-snippet{file="/components/Ui/Button.vue" language="vue" title="Button Props" start="137" offset="31"} :: ``` :: The example above starts at line 137 and shows the next 31 lines. ## Highlight Lines Combine with the `highlights` prop to emphasize important code: ::show-case --- prose: "" --- :::prose-code-snippet --- file: /components/Ui/Button.vue highlights: 2,4-6,10 language: vue meta: lines offset: "31" start: 137 title: Button Props --- ::: #code ```mdc ::prose-code-snippet{file="/components/Ui/Button.vue" language="vue" title="Button Props" start="137" offset="31" highlights="2,4-6,10" meta="lines"} :: ``` :: ## External URLs ### GitHub Raw Content Load code directly from GitHub: ::show-case --- prose: "" --- :::prose-code-snippet --- language: ts meta: lines noFormat title: Nuxt useState Source url: https://raw.githubusercontent.com/nuxt/nuxt/refs/heads/main/packages/nuxt/src/app/composables/state.ts --- ::: #code ```mdc ::prose-code-snippet{url="https://raw.githubusercontent.com/nuxt/nuxt/refs/heads/main/packages/nuxt/src/app/composables/state.ts" language="ts" title="Nuxt useState Source" meta="lines noFormat"} :: ``` :: ### External Examples Pull examples from documentation sites or CDNs. This example fetches the Vue 3 ESM build from a CDN and displays lines 1-20: ::show-case --- prose: "" --- :::prose-code-snippet --- language: js meta: lines offset: "20" start: 1 title: Vue 3 ESM Build url: https://unpkg.com/vue@3/dist/vue.esm-browser.js --- ::: #code ```mdc ::prose-code-snippet{url="https://unpkg.com/vue@3/dist/vue.esm-browser.js" language="js" title="Vue 3 ESM Build" start="1" offset="20" meta="lines"} :: ``` :: ### Style Guide Show your actual CSS/Tailwind configuration: ::show-case{prose prose=""} :::prose-code-snippet --- file: /assets/css/tailwind.css language: css title: Tailwind Base Styles --- ::: :: ### Migration Guides Show before and after by referencing different file versions or branches: ```mdc ## Migration from v1 to v2 ### Old API (v1) ::prose-code-snippet{url="https://raw.githubusercontent.com/yourorg/yourrepo/v1/src/api.ts" language="typescript" title="Old API"} :: ### New API (v2) ::prose-code-snippet{file="/app/utils/api.ts" language="typescript" title="New API"} :: ### Changes The new API uses fetch instead of axios and includes better error handling. ``` ### Tutorial Series Create step-by-step tutorials showing progressive code changes: ```mdc ## Step 1: Create Basic Component ::prose-code-snippet{file="/app/components/Tutorial/Step1.vue" language="vue" title="Step 1: Basic Setup"} :: ## Step 2: Add Props ::prose-code-snippet{file="/app/components/Tutorial/Step2.vue" language="vue" title="Step 2: With Props"} :: ## Step 3: Add State Management ::prose-code-snippet{file="/app/components/Tutorial/Step3.vue" language="vue" title="Step 3: Complete"} :: ``` ## Advanced Meta Options Use the `meta` prop to pass additional options to the code block: ::show-case --- prose: "" --- :::prose-code-snippet --- file: /composables/useDocPage.ts language: ts meta: icon=lucide:package noFormat lines title: useDocPage Composable --- ::: #code ```mdc ::prose-code-snippet{file="/composables/useDocPage.ts" language="ts" title="useDocPage Composable" meta="icon=lucide:package noFormat lines"} :: ``` :: Available meta options: - `icon=` - Custom file icon - `noFormat` - Disable code formatting - `lines` - Show line numbers - `noHeader` - Hide title header ## Extract Function Definitions Show just a specific function from a large file: ::show-case --- prose: "" --- :::prose-code-snippet --- file: /utils/colors.ts language: ts offset: "8" start: 45 title: hexToRgb Function --- ::: #code ```mdc ::prose-code-snippet{file="/utils/colors.ts" language="ts" title="hexToRgb Function" start="45" offset="8"} :: ``` :: ## Multiple File Comparison Compare related files side by side using tabs: ::show-case --- prose: "" --- :::prose-tabs{variant="line"} ::::div{label="Button Component"} :::::prose-code-snippet --- file: /components/Ui/Button.vue language: vue title: Button Component --- ::::: :::: ::::div{label="Badge Component"} :::::prose-code-snippet --- file: /components/Ui/Badge.vue language: vue title: Badge Component --- ::::: :::: ::::div{label="Divider Component"} :::::prose-code-snippet --- file: /components/Ui/Divider.vue language: vue title: Divider Component --- ::::: :::: ::: #code ```mdc :::prose-tabs{variant="line"} ::div{label="Button Component"} ::prose-code-snippet{file="/components/Ui/Button.vue" language="vue" title="Button Component"} :: :: ::div{label="Badge Component"} ::prose-code-snippet{file="/components/Ui/Badge.vue" language="vue" title="Badge Component"} :: :: ::div{label="Divider Component"} ::prose-code-snippet{file="/components/Ui/Divider.vue" language="vue" title="Divider Component"} :: :: ::: ``` :: ## Props | Prop | Type | Default | Description | | :----------- | :------- | :----------- | :------------------------------------------------------------------- | | `file` | `string` | - | Relative path to a file in your project (must match glob patterns) | | `url` | `string` | - | External URL to fetch code from | | `language` | `string` | **required** | Programming language for syntax highlighting | | `title` | `string` | - | Optional title displayed above the code block | | `highlights` | `string` | - | Line numbers or ranges to highlight (e.g., `"1,3-5,10"`) | | `meta` | `string` | - | Additional metadata passed to ProsePre (e.g., `"icon=vue noFormat"`) | | `start` | `number` | - | Starting line number to extract (1-indexed) | | `offset` | `number` | - | Number of lines to extract from the starting line | ## Syntax ### Basic Import ```mdc ::prose-code-snippet{file="/app/components/Button.vue" language="vue"} :: ``` ### With Title ```mdc ::prose-code-snippet{file="/app/utils/helpers.ts" language="typescript" title="Helper Functions"} :: ``` ### With Line Extraction ```mdc ::prose-code-snippet{file="/app/app.vue" language="vue" start="10" offset="5"} :: ``` ### From URL ```mdc ::prose-code-snippet{url="https://example.com/code.js" language="javascript" title="External Example"} :: ``` ::prose-callout{title="Extending Patterns" variant="tip"} To include more directories, edit the `import.meta.glob` array in `ProseCodeSnippet.global.vue`. :: ## Performance Considerations ### Bundle Size Impact The `import.meta.glob` pattern includes files in your build. Be strategic: **✅ Good Practices:** - Use specific file extensions: `*.{vue,ts}` instead of `*` - Exclude test files: `!**/*.test.ts` - Only include directories you'll reference in docs - Use `eager: false` for lazy loading (already configured) **❌ Avoid:** - Overly broad patterns like `/app/**/*` (includes everything) - Including asset files (images, videos) - Globbing node\_modules or build outputs ### Current Configuration Impact With the default patterns (`/app/**/*.{vue,ts,css,json}`), expect: - **Small projects** (<100 files): \~100-200KB added to bundle - **Medium projects** (100-500 files): \~200KB-1MB added to bundle - **Large projects** (500+ files): 1MB+ added to bundle Files are lazy-loaded, so only referenced snippets are downloaded to the client. ### URL Fetching for Large Files For very large files or files outside your project: ```mdc ::prose-code-snippet{url="/api/files/large-schema.json" language="json"} :: ``` This avoids bundling and fetches on-demand. ## Error Handling The component handles errors gracefully: ### File Not Found ```mdc ::prose-code-snippet{file="/app/nonexistent.ts" language="typescript"} :: ``` Shows error callout: "Cannot load code: /app/nonexistent.ts" ::prose-callout{title="Code Snippet Error" variant="error"} Cannot load code: `/app/nonexistent.ts` :: ### Invalid URL ```mdc ::prose-code-snippet{url="https://invalid-url-404.com/code.js" language="javascript"} :: ``` Shows error callout with the URL. ::prose-callout{title="Code Snippet Error" variant="error"} Cannot load code: `https://invalid-url-404.com/code.js` :: ## Best Practices ::prose-callout{title="Documentation Tips" variant="tip"} 1. **Keep Docs in Sync** - Reference actual source files instead of copying code 2. **Show Relevant Code** - Use `start` and `offset` to show only what matters 3. **Add Context** - Always use `title` to explain what the code does 4. **Highlight Key Lines** - Use `highlights` to draw attention to important parts 5. **Version Control** - Reference specific branches/tags in URLs for stable examples 6. **Test Paths** - Ensure file paths match your glob patterns 7. **Performance** - For large apps, consider creating a `/docs-examples/` directory with curated files :: ## Common Patterns ### Tutorial with Progressive Examples ```mdc ## Build a User Card ### 1. Basic Structure ::prose-code-snippet{file="/app/examples/tutorial/UserCard-1.vue" language="vue" title="Step 1: Basic HTML"} :: ### 2. Add Styling ::prose-code-snippet{file="/app/examples/tutorial/UserCard-2.vue" language="vue" title="Step 2: With Tailwind"} :: ### 3. Make Interactive ::prose-code-snippet{file="/app/examples/tutorial/UserCard-3.vue" language="vue" title="Step 3: Complete Component"} :: ``` ### API Endpoint Documentation ````mdc ## Users API ### List Users ::prose-code-snippet{file="/server/api/users/index.get.ts" language="typescript" title="GET /api/users"} :: **Response:** ```json { "data": [...], "total": 100, "page": 1, "limit": 10 } ``` ### Get Single User ::prose-code-snippet{file="/server/api/users/[id].get.ts" language="typescript" title="GET /api/users/:id"} :: ```` ### Component Anatomy ```mdc ## Understanding the Button Component The button component consists of three main files: ::prose-code-snippet{file="/app/components/Ui/Button/Button.vue" language="vue" title="Component Implementation"} :: ::prose-code-snippet{file="/app/components/Ui/Button/types.ts" language="typescript" title="TypeScript Types"} :: ::prose-code-snippet{file="/app/components/Ui/Button/index.ts" language="typescript" title="Public API"} :: ``` # Code Tree ## Overview The `ProseCodeTree` component renders an interactive file tree navigator that displays code files in a two-panel layout. The left panel shows the directory structure with expandable folders, while the right panel displays the selected file's content with syntax highlighting. ::prose-callout{title="Features" variant="info"} - **Interactive Navigation** - Click folders to expand/collapse, click files to view content - **Material Icons** - Beautiful file and folder icons based on file extensions - **Auto-expansion** - Automatically expands path to selected file - **Keyboard Accessible** - Full keyboard navigation support - **Responsive** - Adapts to mobile and desktop screens - **Sort Intelligence** - Folders first, then alphabetically :: ## Basic Usage ::show-case --- prose: "" --- :::prose-code-tree{default-value="app.vue" title="Simple Vue App"} ```vue [app.vue] ``` ```ts [utils.ts] export function greet(name: string) { return `Hello, ${name}!`; } ``` ::: #code ````mdc ::prose-code-tree{defaultValue="app.vue" title="Simple Vue App"} ```vue [app.vue] ``` ```ts [utils.ts] export function greet(name: string) { return `Hello, ${name}!` } ``` :: ```` :: ## Project Showcase Show a complete project structure: ::show-case --- prose: "" --- :::prose-code-tree{default-value="src/main.ts" title="TypeScript React App"} ```tsx [src/App.tsx] import { useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); return (

Counter: {count}

); } export default App; ``` ```ts [src/main.ts] import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' ReactDOM.createRoot( document.getElementById('root')! ).render( , ) ``` ```ts [src/vite-env.d.ts] /// ``` ```css [src/App.css] .App { text-align: center; padding: 2rem; } button { padding: 0.5rem 1rem; font-size: 1rem; background: #646cff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #535bf2; } ``` ```css [src/index.css] :root { font-family: Inter, system-ui, sans-serif; line-height: 1.5; font-weight: 400; } body { margin: 0; min-height: 100vh; } ``` ```html [index.html] React App

Counter: {count}

) } export default App ``` ```ts [src/main.ts] import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' ReactDOM.createRoot( document.getElementById('root')! ).render( , ) ``` ```ts [src/vite-env.d.ts] /// ``` ```css [src/App.css] .App { text-align: center; padding: 2rem; } button { padding: 0.5rem 1rem; font-size: 1rem; background: #646cff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #535bf2; } ``` ```css [src/index.css] :root { font-family: Inter, system-ui, sans-serif; line-height: 1.5; font-weight: 400; } body { margin: 0; min-height: 100vh; } ``` ```html [index.html] React App

``` ```json [package.json] { "name": "react-app", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "preview": "vite preview" }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "typescript": "^5.5.3", "vite": "^5.4.2" } } ``` ```json [tsconfig.json] { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } ``` :: ```` :: ## Expand All Folders Use `expandAll` to show the full structure at once: ::show-case --- prose: "" --- :::prose-code-tree{expand-all expand-all="" title="API Routes"} ```ts [server/api/users/index.get.ts] export default defineEventHandler(async (event) => { const users = await prisma.user.findMany(); return users; }); ``` ```ts [server/api/users/[id\\].get.ts] export default defineEventHandler(async (event) => { const id = getRouterParam(event, "id"); const user = await prisma.user.findUnique({ where: { id: Number(id) }, }); if (!user) { throw createError({ statusCode: 404, message: "User not found", }); } return user; }); ``` ```ts [server/api/users/index.post.ts] export default defineEventHandler(async (event) => { const body = await readBody(event); const user = await prisma.user.create({ data: body, }); return user; }); ``` ```ts [server/api/posts/index.get.ts] export default defineEventHandler(async (event) => { const posts = await prisma.post.findMany({ include: { author: true }, }); return posts; }); ``` ::: #code ````mdc ::prose-code-tree{expandAll title="API Routes"} ```ts [server/api/users/index.get.ts] export default defineEventHandler(async (event) => { const users = await prisma.user.findMany() return users }) ``` ```ts [server/api/users/[id].get.ts] export default defineEventHandler(async (event) => { const id = getRouterParam(event, 'id') const user = await prisma.user.findUnique({ where: { id: Number(id) } }) if (!user) { throw createError({ statusCode: 404, message: 'User not found' }) } return user }) ``` ```ts [server/api/users/index.post.ts] export default defineEventHandler(async (event) => { const body = await readBody(event) const user = await prisma.user.create({ data: body }) return user }) ``` ```ts [server/api/posts/index.get.ts] export default defineEventHandler(async (event) => { const posts = await prisma.post.findMany({ include: { author: true } }) return posts }) ``` :: ```` :: ## Component Library Structure Perfect for documenting UI component libraries: ::show-case --- prose: "" --- :::prose-code-tree --- default-value: components/Button/Button.vue title: Component Library --- ```vue [components/Button/Button.vue] ``` ```ts [components/Button/types.ts] export interface ButtonProps { variant?: "primary" | "secondary" | "outline"; size?: "sm" | "md" | "lg"; disabled?: boolean; } ``` ```ts [components/Button/index.ts] export { default as Button } from "./Button.vue"; export type { ButtonProps } from "./types"; ``` ```vue [components/Input/Input.vue] ``` ```ts [components/Input/types.ts] export interface InputProps { modelValue?: string; type?: "text" | "email" | "password"; placeholder?: string; } ``` ```ts [components/Input/index.ts] export { default as Input } from "./Input.vue"; export type { InputProps } from "./types"; ``` ```ts [components/index.ts] export * from "./Button"; export * from "./Input"; ``` ::: #code ````mdc ::prose-code-tree{defaultValue="components/Button/Button.vue" title="Component Library"} ```vue [components/Button/Button.vue] ``` ```ts [components/Button/types.ts] export interface ButtonProps { variant?: 'primary' | 'secondary' | 'outline' size?: 'sm' | 'md' | 'lg' disabled?: boolean } ``` ```ts [components/Button/index.ts] export { default as Button } from './Button.vue' export type { ButtonProps } from './types' ``` ```vue [components/Input/Input.vue] ``` ```ts [components/Input/types.ts] export interface InputProps { modelValue?: string type?: 'text' | 'email' | 'password' placeholder?: string } ``` ```ts [components/Input/index.ts] export { default as Input } from './Input.vue' export type { InputProps } from './types' ``` ```ts [components/index.ts] export * from './Button' export * from './Input' ``` :: ```` :: ## Configuration Files Show configuration setups: ::show-case --- prose: "" --- :::prose-code-tree{default-value="vite.config.ts" title="Build Configuration"} ```ts [vite.config.ts] import { resolve } from "path"; import vue from "@vitejs/plugin-vue"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [vue()], resolve: { alias: { "@": resolve(__dirname, "src"), }, }, build: { outDir: "dist", sourcemap: true, }, }); ``` ```json [tsconfig.json] { "compilerOptions": { "target": "ES2020", "module": "ESNext", "lib": ["ES2020", "DOM"], "moduleResolution": "bundler", "paths": { "@/*": ["./src/*"] }, "strict": true }, "include": ["src/**/*"] } ``` ```js [tailwind.config.js] export default { content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], theme: { extend: { colors: { primary: "#646cff", }, }, }, plugins: [], }; ``` ```js [eslint.config.js] import js from "@eslint/js"; import typescript from "@typescript-eslint/eslint-plugin"; import vue from "eslint-plugin-vue"; export default [ js.configs.recommended, { files: ["**/*.{ts,tsx,vue}"], plugins: { "@typescript-eslint": typescript, vue: vue, }, rules: { "no-console": "warn", "no-debugger": "warn", }, }, ]; ``` ::: #code ````mdc ::prose-code-tree{defaultValue="vite.config.ts" title="Build Configuration"} ```ts [vite.config.ts] import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src'), }, }, build: { outDir: 'dist', sourcemap: true, }, }) ``` ```json [tsconfig.json] { "compilerOptions": { "target": "ES2020", "module": "ESNext", "lib": ["ES2020", "DOM"], "moduleResolution": "bundler", "paths": { "@/*": ["./src/*"] }, "strict": true }, "include": ["src/**/*"] } ``` ```js [tailwind.config.js] export default { content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], theme: { extend: { colors: { primary: "#646cff", }, }, }, plugins: [], }; ``` ```js [eslint.config.js] import js from "@eslint/js"; import typescript from "@typescript-eslint/eslint-plugin"; import vue from "eslint-plugin-vue"; export default [ js.configs.recommended, { files: ["**/*.{ts,tsx,vue}"], plugins: { "@typescript-eslint": typescript, vue: vue, }, rules: { "no-console": "warn", "no-debugger": "warn", }, }, ]; ``` :: ```` :: ## API Documentation Document API endpoints: ::show-case --- prose: "" --- :::prose-code-tree{default-value="routes/auth.ts" title="API Endpoints"} ```ts [routes/auth.ts] import { Router } from "express"; import { login, logout, register } from "../controllers/auth"; const router = Router(); router.post("/login", login); router.post("/register", register); router.post("/logout", logout); export default router; ``` ```ts [routes/users.ts] import { Router } from "express"; import { createUser, deleteUser, getUser, getUsers, updateUser } from "../controllers/users"; import { authenticate } from "../middleware/auth"; const router = Router(); router.get("/", authenticate, getUsers); router.get("/:id", authenticate, getUser); router.post("/", authenticate, createUser); router.put("/:id", authenticate, updateUser); router.delete("/:id", authenticate, deleteUser); export default router; ``` ```ts [routes/index.ts] import { Router } from "express"; import authRoutes from "./auth"; import userRoutes from "./users"; const router = Router(); router.use("/auth", authRoutes); router.use("/users", userRoutes); export default router; ``` ::: #code ````mdc ::prose-code-tree{defaultValue="routes/auth.ts" title="API Endpoints"} ```ts [routes/auth.ts] import { Router } from 'express' import { login, register, logout } from '../controllers/auth' const router = Router() router.post('/login', login) router.post('/register', register) router.post('/logout', logout) export default router ``` ```ts [routes/users.ts] import { Router } from 'express' import { getUsers, getUser, createUser, updateUser, deleteUser } from '../controllers/users' import { authenticate } from '../middleware/auth' const router = Router() router.get('/', authenticate, getUsers) router.get('/:id', authenticate, getUser) router.post('/', authenticate, createUser) router.put('/:id', authenticate, updateUser) router.delete('/:id', authenticate, deleteUser) export default router ``` ```ts [routes/index.ts] import { Router } from 'express' import authRoutes from './auth' import userRoutes from './users' const router = Router() router.use('/auth', authRoutes) router.use('/users', userRoutes) export default router ``` :: ```` :: ## Testing Structure Show test organization: ::show-case --- prose: "" --- :::prose-code-tree{default-value="tests/unit/utils.test.ts" title="Test Suite"} ```ts [tests/unit/utils.test.ts] import { calculateTotal, formatDate } from "@/utils"; import { describe, expect, it } from "vitest"; describe("Utils", () => { describe("formatDate", () => { it("formats date correctly", () => { const date = new Date("2024-01-15"); expect(formatDate(date)).toBe("Jan 15, 2024"); }); }); describe("calculateTotal", () => { it("calculates sum of numbers", () => { expect(calculateTotal([10, 20, 30])).toBe(60); }); it("returns 0 for empty array", () => { expect(calculateTotal([])).toBe(0); }); }); }); ``` ```ts [tests/unit/components/Button.test.ts] import Button from "@/components/Button.vue"; import { mount } from "@vue/test-utils"; import { describe, expect, it } from "vitest"; describe("Button", () => { it("renders correctly", () => { const wrapper = mount(Button, { props: { label: "Click me" }, }); expect(wrapper.text()).toBe("Click me"); }); it("emits click event", async () => { const wrapper = mount(Button); await wrapper.trigger("click"); expect(wrapper.emitted("click")).toBeTruthy(); }); it("applies variant class", () => { const wrapper = mount(Button, { props: { variant: "primary" }, }); expect(wrapper.classes()).toContain("button--primary"); }); }); ``` ```ts [tests/integration/api.test.ts] import app from "@/app"; import request from "supertest"; import { describe, expect, it } from "vitest"; describe("API Integration", () => { describe("GET /api/users", () => { it("returns list of users", async () => { const response = await request(app).get("/api/users"); expect(response.status).toBe(200); expect(Array.isArray(response.body)).toBe(true); }); }); describe("POST /api/users", () => { it("creates new user", async () => { const userData = { email: "test@example.com", name: "Test User", }; const response = await request(app).post("/api/users").send(userData); expect(response.status).toBe(201); expect(response.body.email).toBe(userData.email); }); }); }); ``` ```ts [tests/setup.ts] import { afterAll, afterEach, beforeAll } from "vitest"; import { server } from "./mocks/server"; beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => server.close()); ``` ::: #code ````mdc ::prose-code-tree{defaultValue="tests/unit/utils.test.ts" title="Test Suite"} ```ts [tests/unit/utils.test.ts] import { describe, it, expect } from 'vitest' import { formatDate, calculateTotal } from '@/utils' describe('Utils', () => { describe('formatDate', () => { it('formats date correctly', () => { const date = new Date('2024-01-15') expect(formatDate(date)).toBe('Jan 15, 2024') }) }) describe('calculateTotal', () => { it('calculates sum of numbers', () => { expect(calculateTotal([10, 20, 30])).toBe(60) }) it('returns 0 for empty array', () => { expect(calculateTotal([])).toBe(0) }) }) }) ``` ```ts [tests/unit/components/Button.test.ts] import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' import Button from '@/components/Button.vue' describe('Button', () => { it('renders correctly', () => { const wrapper = mount(Button, { props: { label: 'Click me' } }) expect(wrapper.text()).toBe('Click me') }) it('emits click event', async () => { const wrapper = mount(Button) await wrapper.trigger('click') expect(wrapper.emitted('click')).toBeTruthy() }) it('applies variant class', () => { const wrapper = mount(Button, { props: { variant: 'primary' } }) expect(wrapper.classes()).toContain('button--primary') }) }) ``` ```ts [tests/integration/api.test.ts] import { describe, it, expect } from 'vitest' import request from 'supertest' import app from '@/app' describe('API Integration', () => { describe('GET /api/users', () => { it('returns list of users', async () => { const response = await request(app).get('/api/users') expect(response.status).toBe(200) expect(Array.isArray(response.body)).toBe(true) }) }) describe('POST /api/users', () => { it('creates new user', async () => { const userData = { email: 'test@example.com', name: 'Test User' } const response = await request(app) .post('/api/users') .send(userData) expect(response.status).toBe(201) expect(response.body.email).toBe(userData.email) }) }) }) ``` ```ts [tests/setup.ts] import { beforeAll, afterAll, afterEach } from 'vitest' import { server } from './mocks/server' beforeAll(() => server.listen()) afterEach(() => server.resetHandlers()) afterAll(() => server.close()) ``` :: ```` :: ## Props | Prop | Type | Default | Description | | :------------- | :-------- | :------ | :-------------------------------------------------------------------------- | | `defaultValue` | `string` | - | Default file path to select on mount (e.g., `"src/main.ts"`) | | `expandAll` | `boolean` | `false` | Expand all directories by default instead of just the path to selected file | | `title` | `string` | - | Optional title displayed above the file tree | | `class` | `string` | - | Additional CSS classes for the root container | ## Syntax ### Basic Structure ````mdc ::prose-code-tree ```language [path/to/file.ext] code content ``` ```language [another/file.ext] more code ``` :: ```` ### With Props ````mdc ::prose-code-tree{defaultValue="src/App.vue" title="My Project"} ```vue [src/App.vue] ``` :: ```` ### With Expand All ````mdc ::prose-code-tree{expandAll title="Full Structure"} ```ts [src/utils/helpers.ts] export function helper() {} ``` :: ```` ## File Path Format The file path in brackets `[path/to/file.ext]` determines the tree structure: - `file.txt` - Root level file - `folder/file.txt` - File inside folder - `folder/subfolder/file.txt` - Nested structure - Folders are created automatically from paths - Files are sorted alphabetically within folders - Folders always appear before files ## Keyboard Navigation The component supports full keyboard navigation: - **Arrow Up/Down** - Navigate between files and folders - **Arrow Right** - Expand folder - **Arrow Left** - Collapse folder - **Enter/Space** - Select file or toggle folder - **Tab** - Move focus to next interactive element - **Home** - Jump to first item - **End** - Jump to last item ## Accessibility Features The component is built with accessibility in mind: ✅ **Semantic HTML** - Uses `

`, `

BayBreezy starred 3 repositories

Column Reorder

Application

@vuejs

Tags

{{ item.label }}

{{ item.label }}

{{ item.label }}

UI Thing

Users

Users

Users

Uploaded Files ({{ files.length }})

Files ({{ files.length }})

Files ({{ files.length }})

All Variants

Filled Style

With Slots

Clickable Callout

Custom Icons

Users ({{ totalUsers }})

Users ({{ totalUsers }})

Welcome

Welcome

Hello World

Hello World

Counter: {count}

Counter: {count}

Basic Usage

Mixed Variants

Custom Icons

Default Icon Override

Advanced Example

{{ title }}

First Step

Second Step

Custom Styled Step

Hello World

Hello World