aico-cli 2.1.7 → 2.1.23

package/templates/skills/vitepress/references/core-routing.md

@@ -0,0 +1,169 @@
+---
+name: vitepress-routing
+description: File-based routing, source directory structure, clean URLs, and route rewrites
+---
+
+# Routing
+
+VitePress uses file-based routing where markdown files map directly to HTML pages.
+
+## File to URL Mapping
+
+```
+.
+├─ index.md           →  /index.html (/)
+├─ about.md           →  /about.html
+├─ guide/
+│  ├─ index.md        →  /guide/index.html (/guide/)
+│  └─ getting-started.md → /guide/getting-started.html
+```
+
+## Project Structure
+
+```
+.
+├─ docs                    # Project root
+│  ├─ .vitepress          # VitePress directory
+│  │  ├─ config.ts        # Configuration
+│  │  ├─ theme/           # Custom theme
+│  │  ├─ cache/           # Dev server cache (gitignore)
+│  │  └─ dist/            # Build output (gitignore)
+│  ├─ public/             # Static assets (copied as-is)
+│  ├─ index.md            # Home page
+│  └─ guide/
+│     └─ intro.md
+```
+
+## Source Directory
+
+Separate source files from project root:
+
+```ts
+// .vitepress/config.ts
+export default {
+  srcDir: './src'  // Markdown files live in ./src/
+}
+```
+
+With `srcDir: 'src'`:
+
+```
+.
+├─ .vitepress/           # Config stays at project root
+└─ src/                  # Source directory
+   ├─ index.md          →  /
+   └─ guide/intro.md    →  /guide/intro.html
+```
+
+## Linking Between Pages
+
+Use relative or absolute paths. Omit file extensions:
+
+```md
+<!-- Recommended -->
+[Getting Started](./getting-started)
+[Guide](/guide/)
+
+<!-- Works but not recommended -->
+[Getting Started](./getting-started.md)
+[Getting Started](./getting-started.html)
+```
+
+## Clean URLs
+
+Remove `.html` extension from URLs (requires server support):
+
+```ts
+export default {
+  cleanUrls: true
+}
+```
+
+**Server requirements:**
+- Netlify, GitHub Pages: Supported by default
+- Vercel: Enable `cleanUrls` in `vercel.json`
+- Nginx: Configure `try_files $uri $uri.html $uri/ =404`
+
+## Route Rewrites
+
+Customize the mapping between source and output paths:
+
+```ts
+export default {
+  rewrites: {
+    // Static mapping
+    'packages/pkg-a/src/index.md': 'pkg-a/index.md',
+    'packages/pkg-a/src/foo.md': 'pkg-a/foo.md',
+    
+    // Dynamic parameters
+    'packages/:pkg/src/:slug*': ':pkg/:slug*'
+  }
+}
+```
+
+This maps `packages/pkg-a/src/intro.md` → `/pkg-a/intro.html`.
+
+**Important:** Relative links in rewritten files should be based on the rewritten path, not the source path.
+
+Rewrites can also be a function:
+
+```ts
+export default {
+  rewrites(id) {
+    return id.replace(/^packages\/([^/]+)\/src\//, '$1/')
+  }
+}
+```
+
+## Public Directory
+
+Files in `public/` are copied to output root as-is:
+
+```
+docs/public/
+  ├─ favicon.ico     →  /favicon.ico
+  ├─ robots.txt      →  /robots.txt
+  └─ images/logo.png →  /images/logo.png
+```
+
+Reference with absolute paths:
+
+```md
+![Logo](/images/logo.png)
+```
+
+## Base URL
+
+For sub-path deployment (e.g., GitHub Pages):
+
+```ts
+export default {
+  base: '/repo-name/'
+}
+```
+
+All absolute paths are automatically prefixed with base. For dynamic paths in components, use `withBase`:
+
+```vue
+<script setup>
+import { withBase } from 'vitepress'
+</script>
+
+<template>
+  <img :src="withBase('/logo.png')" />
+</template>
+```
+
+## Key Points
+
+- `index.md` files map to directory root (`/guide/` instead of `/guide/index`)
+- Use paths without extensions in links for flexibility
+- `srcDir` separates source from config
+- `cleanUrls` removes `.html` but requires server support
+- `rewrites` enables complex source structures with clean output URLs
+
+<!--
+Source references:
+- https://vitepress.dev/guide/routing
+- https://vitepress.dev/guide/asset-handling
+-->

package/templates/skills/vitepress/references/features-code-blocks.md

@@ -0,0 +1,243 @@
+---
+name: vitepress-code-blocks
+description: Syntax highlighting, line highlighting, colored diffs, focus, and line numbers
+---
+
+# Code Blocks
+
+VitePress uses Shiki for syntax highlighting with powerful code block features.
+
+## Syntax Highlighting
+
+Specify language after opening backticks:
+
+````md
+```js
+export default {
+  name: 'MyComponent'
+}
+```
+````
+
+Supports [all languages](https://shiki.style/languages) available in Shiki.
+
+## Line Highlighting
+
+Highlight specific lines:
+
+````md
+```js{4}
+export default {
+  data() {
+    return {
+      msg: 'Highlighted!'  // Line 4 highlighted
+    }
+  }
+}
+```
+````
+
+Multiple lines and ranges:
+
+````md
+```js{1,4,6-8}
+// Line 1 highlighted
+export default {
+  data() {
+    return {      // Line 4
+      msg: 'Hi',
+      foo: 'bar', // Lines 6-8
+      baz: 'qux'
+    }
+  }
+}
+```
+````
+
+Inline highlighting with comment:
+
+````md
+```js
+export default {
+  data() {
+    return {
+      msg: 'Highlighted!' // [!code highlight]
+    }
+  }
+}
+```
+````
+
+## Focus
+
+Blur other code and focus specific lines:
+
+````md
+```js
+export default {
+  data() {
+    return {
+      msg: 'Focused!' // [!code focus]
+    }
+  }
+}
+```
+````
+
+Focus multiple lines:
+
+```js
+// [!code focus:3]
+```
+
+## Colored Diffs
+
+Show additions and removals:
+
+````md
+```js
+export default {
+  data() {
+    return {
+      msg: 'Removed' // [!code --]
+      msg: 'Added'   // [!code ++]
+    }
+  }
+}
+```
+````
+
+## Errors and Warnings
+
+Color lines as errors or warnings:
+
+````md
+```js
+export default {
+  data() {
+    return {
+      msg: 'Error',   // [!code error]
+      msg: 'Warning'  // [!code warning]
+    }
+  }
+}
+```
+````
+
+## Line Numbers
+
+Enable globally:
+
+```ts
+// .vitepress/config.ts
+export default {
+  markdown: {
+    lineNumbers: true
+  }
+}
+```
+
+Per-block override:
+
+````md
+```ts:line-numbers
+// Line numbers enabled
+const a = 1
+```
+
+```ts:no-line-numbers
+// Line numbers disabled
+const b = 2
+```
+````
+
+Start from specific number:
+
+````md
+```ts:line-numbers=5
+// Starts at line 5
+const a = 1  // This is line 5
+const b = 2  // This is line 6
+```
+````
+
+## Code Groups
+
+Tabbed code blocks:
+
+````md
+::: code-group
+
+```js [JavaScript]
+export default { /* ... */ }
+```
+
+```ts [TypeScript]
+export default defineConfig({ /* ... */ })
+```
+
+:::
+````
+
+## Import Code Snippets
+
+From external files:
+
+```md
+<<< @/snippets/snippet.js
+```
+
+With highlighting:
+
+```md
+<<< @/snippets/snippet.js{2,4-6}
+```
+
+Specific region:
+
+```md
+<<< @/snippets/snippet.js#regionName{1,2}
+```
+
+With language and line numbers:
+
+```md
+<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}
+```
+
+In code groups:
+
+```md
+::: code-group
+
+<<< @/snippets/config.js [JavaScript]
+<<< @/snippets/config.ts [TypeScript]
+
+:::
+```
+
+## File Labels
+
+Add filename labels to code blocks:
+
+````md
+```js [vite.config.js]
+export default defineConfig({})
+```
+````
+
+## Key Points
+
+- Use `// [!code highlight]` for inline highlighting
+- Use `// [!code focus]` to focus with blur effect
+- Use `// [!code ++]` and `// [!code --]` for diffs
+- Use `// [!code error]` and `// [!code warning]` for status
+- `:line-numbers` and `:no-line-numbers` control line numbers per block
+- `@` in imports refers to source root
+- Code groups create tabbed interfaces
+
+<!--
+Source references:
+- https://vitepress.dev/guide/markdown#syntax-highlighting-in-code-blocks
+- https://vitepress.dev/guide/markdown#line-highlighting-in-code-blocks
+-->

package/templates/skills/vitepress/references/features-data-loading.md

@@ -0,0 +1,220 @@
+---
+name: vitepress-data-loading
+description: Build-time data loaders for fetching remote data or processing local files
+---
+
+# Data Loading
+
+VitePress data loaders run at build time to load arbitrary data that's serialized as JSON in the client bundle.
+
+## Basic Usage
+
+Create a file ending with `.data.js` or `.data.ts`:
+
+```ts
+// example.data.ts
+export default {
+  load() {
+    return {
+      hello: 'world',
+      timestamp: Date.now()
+    }
+  }
+}
+```
+
+Import the `data` named export:
+
+```vue
+<script setup>
+import { data } from './example.data.ts'
+</script>
+
+<template>
+  <pre>{{ data }}</pre>
+</template>
+```
+
+## Async Data
+
+Fetch remote data:
+
+```ts
+// api.data.ts
+export default {
+  async load() {
+    const response = await fetch('https://api.example.com/data')
+    return response.json()
+  }
+}
+```
+
+## Local Files with Watch
+
+Process local files with hot reload:
+
+```ts
+// posts.data.ts
+import fs from 'node:fs'
+import { parse } from 'csv-parse/sync'
+
+export default {
+  watch: ['./data/*.csv'],
+  load(watchedFiles) {
+    // watchedFiles = array of absolute paths
+    return watchedFiles.map(file => {
+      return parse(fs.readFileSync(file, 'utf-8'), {
+        columns: true,
+        skip_empty_lines: true
+      })
+    })
+  }
+}
+```
+
+## createContentLoader
+
+Helper for loading markdown content (common for blogs/archives):
+
+```ts
+// posts.data.ts
+import { createContentLoader } from 'vitepress'
+
+export default createContentLoader('posts/*.md')
+```
+
+Returns array of `ContentData`:
+
+```ts
+interface ContentData {
+  url: string                    // e.g. /posts/hello.html
+  frontmatter: Record<string, any>
+  src?: string                   // raw markdown (opt-in)
+  html?: string                  // rendered HTML (opt-in)
+  excerpt?: string               // excerpt HTML (opt-in)
+}
+```
+
+With options:
+
+```ts
+// posts.data.ts
+import { createContentLoader } from 'vitepress'
+
+export default createContentLoader('posts/*.md', {
+  includeSrc: true,     // Include raw markdown
+  render: true,         // Include rendered HTML
+  excerpt: true,        // Include excerpt (content before first ---)
+  
+  transform(rawData) {
+    // Sort by date, newest first
+    return rawData
+      .sort((a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date))
+      .map(page => ({
+        title: page.frontmatter.title,
+        url: page.url,
+        date: page.frontmatter.date,
+        excerpt: page.excerpt
+      }))
+  }
+})
+```
+
+## Usage Example: Blog Index
+
+```ts
+// posts.data.ts
+import { createContentLoader } from 'vitepress'
+
+export default createContentLoader('posts/*.md', {
+  excerpt: true,
+  transform(data) {
+    return data
+      .filter(post => !post.frontmatter.draft)
+      .sort((a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date))
+  }
+})
+```
+
+```vue
+<!-- posts/index.md -->
+<script setup>
+import { data as posts } from './posts.data.ts'
+</script>
+
+<template>
+  <ul>
+    <li v-for="post in posts" :key="post.url">
+      <a :href="post.url">{{ post.frontmatter.title }}</a>
+      <span>{{ post.frontmatter.date }}</span>
+    </li>
+  </ul>
+</template>
+```
+
+## Typed Data Loaders
+
+```ts
+// example.data.ts
+import { defineLoader } from 'vitepress'
+
+export interface Data {
+  posts: Array<{ title: string; url: string }>
+}
+
+declare const data: Data
+export { data }
+
+export default defineLoader({
+  watch: ['./posts/*.md'],
+  async load(): Promise<Data> {
+    // ...
+    return { posts: [] }
+  }
+})
+```
+
+## In Build Hooks
+
+Use in config for generating additional files:
+
+```ts
+// .vitepress/config.ts
+import { createContentLoader } from 'vitepress'
+
+export default {
+  async buildEnd() {
+    const posts = await createContentLoader('posts/*.md').load()
+    // Generate RSS feed, sitemap, etc.
+  }
+}
+```
+
+## Accessing Config
+
+```ts
+// example.data.ts
+import type { SiteConfig } from 'vitepress'
+
+export default {
+  load() {
+    const config: SiteConfig = (globalThis as any).VITEPRESS_CONFIG
+    return { base: config.site.base }
+  }
+}
+```
+
+## Key Points
+
+- Data loaders run only at build time in Node.js
+- File must end with `.data.js` or `.data.ts`
+- Import the `data` named export (not default)
+- Use `watch` for local file hot reload during dev
+- `createContentLoader` simplifies loading markdown collections
+- Keep data small - it's inlined in the client bundle
+- Heavy data should use `transform` to reduce payload
+
+<!--
+Source references:
+- https://vitepress.dev/guide/data-loading
+-->