ads-fe 0.0.1

package/skills/vitepress/references/core-markdown.md

@@ -0,0 +1,277 @@
+---
+name: vitepress-markdown
+description: Markdown extensions including frontmatter, custom containers, tables, anchors, and file includes
+---
+
+# Markdown Extensions
+
+VitePress extends standard markdown with additional features for documentation.
+
+## Frontmatter
+
+YAML metadata at the top of markdown files:
+
+```md
+---
+title: Page Title
+description: Page description for SEO
+layout: doc
+outline: [2, 3]
+---
+
+# Content starts here
+```
+
+Access frontmatter in templates:
+
+```md
+# {{ $frontmatter.title }}
+```
+
+Or in script:
+
+```vue
+<script setup>
+import { useData } from 'vitepress'
+const { frontmatter } = useData()
+</script>
+```
+
+## Custom Containers
+
+Styled callout blocks:
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details Click to expand
+Hidden content here.
+:::
+```
+
+Custom titles:
+
+```md
+::: danger STOP
+Do not proceed!
+:::
+
+::: details Click me {open}
+Open by default with {open} attribute.
+:::
+```
+
+## GitHub-flavored Alerts
+
+Alternative syntax using blockquotes:
+
+```md
+> [!NOTE]
+> Highlights information users should know.
+
+> [!TIP]
+> Optional information for success.
+
+> [!WARNING]
+> Critical content requiring attention.
+
+> [!CAUTION]
+> Negative potential consequences.
+```
+
+## Header Anchors
+
+Headers get automatic anchor links. Custom anchors:
+
+```md
+# My Heading {#custom-anchor}
+
+[Link to heading](#custom-anchor)
+```
+
+## Table of Contents
+
+Generate a TOC with:
+
+```md
+[[toc]]
+```
+
+## GitHub-Style Tables
+
+```md
+| Feature | Status |
+|---------|--------|
+| SSR     | ✅     |
+| HMR     | ✅     |
+```
+
+## Emoji
+
+Use shortcodes:
+
+```md
+:tada: :rocket: :100:
+```
+
+## File Includes
+
+Include content from other files:
+
+```md
+<!--@include: ./shared/header.md-->
+```
+
+With line ranges:
+
+```md
+<!--@include: ./code.md{3,10}-->  <!-- Lines 3-10 -->
+<!--@include: ./code.md{3,}-->   <!-- From line 3 -->
+<!--@include: ./code.md{,10}-->  <!-- Up to line 10 -->
+```
+
+With regions:
+
+```md
+<!-- In parts/basics.md -->
+<!-- #region usage -->
+Usage content here
+<!-- #endregion usage -->
+
+<!-- Include just that region -->
+<!--@include: ./parts/basics.md#usage-->
+```
+
+## Code Snippet Import
+
+Import code from files:
+
+```md
+<<< @/snippets/example.js
+```
+
+With line highlighting:
+
+```md
+<<< @/snippets/example.js{2,4-6}
+```
+
+With language override:
+
+```md
+<<< @/snippets/example.cs{1,2 c#:line-numbers}
+```
+
+Import specific region:
+
+```md
+<<< @/snippets/example.js#regionName{1,2}
+```
+
+## Code Groups
+
+Tab groups for code variants:
+
+````md
+::: code-group
+
+```js [config.js]
+export default { /* ... */ }
+```
+
+```ts [config.ts]
+export default defineConfig({ /* ... */ })
+```
+
+:::
+````
+
+Import files in code groups:
+
+```md
+::: code-group
+
+<<< @/snippets/config.js
+<<< @/snippets/config.ts
+
+:::
+```
+
+## Math Equations
+
+Requires setup:
+
+```bash
+npm add -D markdown-it-mathjax3@^4
+```
+
+```ts
+// .vitepress/config.ts
+export default {
+  markdown: {
+    math: true
+  }
+}
+```
+
+Then use LaTeX:
+
+```md
+Inline: $E = mc^2$
+
+Block:
+$$
+\frac{-b \pm \sqrt{b^2-4ac}}{2a}
+$$
+```
+
+## Image Lazy Loading
+
+```ts
+export default {
+  markdown: {
+    image: {
+      lazyLoading: true
+    }
+  }
+}
+```
+
+## Raw Container
+
+Prevent VitePress style conflicts:
+
+```md
+::: raw
+<CustomComponent />
+:::
+```
+
+## Key Points
+
+- Frontmatter supports YAML or JSON format
+- Custom containers support info, tip, warning, danger, details
+- `[[toc]]` generates table of contents
+- `@` in imports refers to source root (or `srcDir` if configured)
+- Code groups create tabbed code blocks
+- Math support requires markdown-it-mathjax3 package
+
+<!--
+Source references:
+- https://vitepress.dev/guide/markdown
+- https://vitepress.dev/guide/frontmatter
+-->

package/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/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
+-->