Skip to content

Commit 8e5251e

Browse files
docs: add missing documentation for Video, ImageZoom, and 9 plugins (#63)
Add EN/KO documentation pages for undocumented features: - Video component (YouTube, Vimeo, Loom) - ImageZoom component (medium-zoom) - Plugin guides: openapi, search, analytics, sitemap, rss, pwa, og-image, llms-txt, docsearch - Update navigation with new Components entries and Plugins group Closes #62 Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent a144a2f commit 8e5251e

23 files changed

Lines changed: 1332 additions & 1 deletion

docs/barodoc.config.json

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,29 @@
4141
"components/file-tree",
4242
"components/frame",
4343
"components/icon",
44+
"components/image-zoom",
4445
"components/mermaid",
4546
"components/param-field",
4647
"components/response-field",
4748
"components/steps",
4849
"components/tabs",
49-
"components/tooltip"
50+
"components/tooltip",
51+
"components/video"
52+
]
53+
},
54+
{
55+
"group": "Plugins",
56+
"group:ko": "플러그인",
57+
"pages": [
58+
"guides/plugins/openapi",
59+
"guides/plugins/search",
60+
"guides/plugins/analytics",
61+
"guides/plugins/sitemap",
62+
"guides/plugins/rss",
63+
"guides/plugins/pwa",
64+
"guides/plugins/og-image",
65+
"guides/plugins/llms-txt",
66+
"guides/plugins/docsearch"
5067
]
5168
},
5269
{
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: Image Zoom
3+
description: Click-to-zoom images with medium-zoom
4+
---
5+
import { ImageZoom } from "@barodoc/theme-docs/components/mdx/ImageZoom.tsx";
6+
import { ParamField, ParamFieldGroup } from "@barodoc/theme-docs/components/mdx/ParamField.tsx";
7+
8+
Add click-to-zoom functionality to images. Powered by [medium-zoom](https://github.com/francoischalifour/medium-zoom).
9+
10+
## Basic Usage
11+
12+
<ImageZoom client:load src="/logo.svg" alt="Barodoc Logo" width={200} />
13+
14+
Click the image above to zoom in. Click again or press `Esc` to close.
15+
16+
```mdx
17+
<ImageZoom client:load src="/images/screenshot.png" alt="Screenshot" />
18+
```
19+
20+
## With High-Resolution Zoom Source
21+
22+
Use `zoomSrc` to load a higher-resolution image when zoomed:
23+
24+
```mdx
25+
<ImageZoom
26+
client:load
27+
src="/images/thumbnail.png"
28+
zoomSrc="/images/full-resolution.png"
29+
alt="Architecture diagram"
30+
/>
31+
```
32+
33+
## With Custom Dimensions
34+
35+
```mdx
36+
<ImageZoom client:load src="/images/diagram.png" alt="Diagram" width={600} height={400} />
37+
```
38+
39+
## Props
40+
41+
<ParamFieldGroup>
42+
<ParamField name="src" type="string" required>
43+
Image source URL
44+
</ParamField>
45+
<ParamField name="alt" type="string">
46+
Alt text for accessibility
47+
</ParamField>
48+
<ParamField name="zoomSrc" type="string">
49+
Higher-resolution image URL loaded when zoomed
50+
</ParamField>
51+
<ParamField name="width" type="number">
52+
Image width in pixels
53+
</ParamField>
54+
<ParamField name="height" type="number">
55+
Image height in pixels
56+
</ParamField>
57+
<ParamField name="client:load" type="directive" required>
58+
Required Astro directive for client-side interactivity
59+
</ParamField>
60+
</ParamFieldGroup>
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: Video
3+
description: Embed videos from YouTube, Vimeo, and Loom
4+
---
5+
import { Video } from "@barodoc/theme-docs/components/mdx/Video.tsx";
6+
import { ParamField, ParamFieldGroup } from "@barodoc/theme-docs/components/mdx/ParamField.tsx";
7+
8+
Embed videos from YouTube, Vimeo, and Loom with a responsive player and optional caption.
9+
10+
## YouTube
11+
12+
<Video client:load url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Demo video" caption="A YouTube video embedded with the Video component" />
13+
14+
```mdx
15+
<Video client:load url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Demo video" caption="A YouTube video" />
16+
```
17+
18+
## Vimeo
19+
20+
```mdx
21+
<Video client:load url="https://vimeo.com/123456789" title="Vimeo video" />
22+
```
23+
24+
## Loom
25+
26+
```mdx
27+
<Video client:load url="https://www.loom.com/share/abc123def456" title="Loom recording" caption="Screen recording" />
28+
```
29+
30+
## Supported URL Formats
31+
32+
| Provider | Formats |
33+
|----------|---------|
34+
| YouTube | `youtube.com/watch?v=ID`, `youtu.be/ID`, `youtube.com/embed/ID` |
35+
| Vimeo | `vimeo.com/ID`, `player.vimeo.com/video/ID` |
36+
| Loom | `loom.com/share/ID`, `loom.com/embed/ID` |
37+
38+
## Props
39+
40+
<ParamFieldGroup>
41+
<ParamField name="url" type="string" required>
42+
Video URL from YouTube, Vimeo, or Loom
43+
</ParamField>
44+
<ParamField name="title" type="string">
45+
Accessible title for the iframe (defaults to provider name)
46+
</ParamField>
47+
<ParamField name="caption" type="string">
48+
Caption text displayed below the video
49+
</ParamField>
50+
<ParamField name="client:load" type="directive" required>
51+
Required Astro directive for client-side interactivity
52+
</ParamField>
53+
</ParamFieldGroup>
Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
title: Analytics Plugin
3+
description: Add analytics tracking to your docs
4+
---
5+
import { ParamField, ParamFieldGroup } from "@barodoc/theme-docs/components/mdx/ParamField.tsx";
6+
7+
The analytics plugin injects tracking scripts into your documentation site. It supports Google Analytics, Plausible, and Umami.
8+
9+
## Installation
10+
11+
```bash
12+
pnpm add @barodoc/plugin-analytics@latest
13+
```
14+
15+
## Google Analytics
16+
17+
```json
18+
{
19+
"plugins": [
20+
["@barodoc/plugin-analytics", {
21+
"provider": "google",
22+
"id": "G-XXXXXXXXXX"
23+
}]
24+
]
25+
}
26+
```
27+
28+
## Plausible
29+
30+
```json
31+
{
32+
"plugins": [
33+
["@barodoc/plugin-analytics", {
34+
"provider": "plausible",
35+
"domain": "docs.example.com"
36+
}]
37+
]
38+
}
39+
```
40+
41+
## Umami
42+
43+
```json
44+
{
45+
"plugins": [
46+
["@barodoc/plugin-analytics", {
47+
"provider": "umami",
48+
"websiteId": "your-website-id",
49+
"src": "https://analytics.example.com/umami.js"
50+
}]
51+
]
52+
}
53+
```
54+
55+
## Options
56+
57+
### Google Analytics
58+
59+
<ParamFieldGroup>
60+
<ParamField name="provider" type="'google'" required>
61+
Set to `"google"`
62+
</ParamField>
63+
<ParamField name="id" type="string" required>
64+
Google Analytics measurement ID (e.g. `"G-XXXXXXXXXX"`)
65+
</ParamField>
66+
</ParamFieldGroup>
67+
68+
### Plausible
69+
70+
<ParamFieldGroup>
71+
<ParamField name="provider" type="'plausible'" required>
72+
Set to `"plausible"`
73+
</ParamField>
74+
<ParamField name="domain" type="string" required>
75+
Your site domain
76+
</ParamField>
77+
<ParamField name="src" type="string">
78+
Custom Plausible script URL. Default: `"https://plausible.io/js/script.js"`
79+
</ParamField>
80+
</ParamFieldGroup>
81+
82+
### Umami
83+
84+
<ParamFieldGroup>
85+
<ParamField name="provider" type="'umami'" required>
86+
Set to `"umami"`
87+
</ParamField>
88+
<ParamField name="websiteId" type="string" required>
89+
Your Umami website ID
90+
</ParamField>
91+
<ParamField name="src" type="string" required>
92+
Umami script URL
93+
</ParamField>
94+
</ParamFieldGroup>
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: DocSearch Plugin
3+
description: Integrate Algolia DocSearch for advanced search
4+
---
5+
import { ParamField, ParamFieldGroup } from "@barodoc/theme-docs/components/mdx/ParamField.tsx";
6+
7+
The DocSearch plugin integrates [Algolia DocSearch](https://docsearch.algolia.com) into your documentation site, replacing the default Pagefind search with Algolia's AI-powered search.
8+
9+
## Installation
10+
11+
```bash
12+
pnpm add @barodoc/plugin-docsearch@latest
13+
```
14+
15+
## Prerequisites
16+
17+
Apply for DocSearch at [docsearch.algolia.com](https://docsearch.algolia.com/apply). You will receive an `appId`, `apiKey`, and `indexName` after approval.
18+
19+
## Configuration
20+
21+
```json
22+
{
23+
"plugins": [
24+
["@barodoc/plugin-docsearch", {
25+
"appId": "YOUR_APP_ID",
26+
"apiKey": "YOUR_SEARCH_API_KEY",
27+
"indexName": "your_index_name"
28+
}]
29+
]
30+
}
31+
```
32+
33+
When enabled, the DocSearch plugin automatically disables the default Pagefind search and replaces it with the Algolia search modal.
34+
35+
## Options
36+
37+
<ParamFieldGroup>
38+
<ParamField name="appId" type="string" required>
39+
Algolia application ID
40+
</ParamField>
41+
<ParamField name="apiKey" type="string" required>
42+
Algolia search-only API key (not the admin key)
43+
</ParamField>
44+
<ParamField name="indexName" type="string" required>
45+
Algolia index name
46+
</ParamField>
47+
<ParamField name="container" type="string">
48+
CSS selector for the search container element. Default: `"#docsearch"`
49+
</ParamField>
50+
<ParamField name="placeholder" type="string">
51+
Placeholder text for the search input. Default: `"Search docs..."`
52+
</ParamField>
53+
</ParamFieldGroup>
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: LLMs.txt Plugin
3+
description: Generate llms.txt for AI-friendly documentation
4+
---
5+
import { ParamField, ParamFieldGroup } from "@barodoc/theme-docs/components/mdx/ParamField.tsx";
6+
7+
The LLMs.txt plugin generates `llms.txt` and `llms-full.txt` files following the [llms.txt specification](https://llmstxt.org). These files make your documentation easily consumable by AI assistants and large language models.
8+
9+
## Installation
10+
11+
```bash
12+
pnpm add @barodoc/plugin-llms-txt@latest
13+
```
14+
15+
## Configuration
16+
17+
```json
18+
{
19+
"plugins": [
20+
["@barodoc/plugin-llms-txt", {
21+
"description": "Documentation for My Project",
22+
"full": true,
23+
"links": [
24+
{ "title": "GitHub", "url": "https://github.com/user/repo" },
25+
{ "title": "API Reference", "url": "https://docs.example.com/api" }
26+
]
27+
}]
28+
]
29+
}
30+
```
31+
32+
## Generated Files
33+
34+
- **`llms.txt`** — Summary with page titles, descriptions, and links
35+
- **`llms-full.txt`** — Full content of all documentation pages (when `full: true`)
36+
37+
## Options
38+
39+
<ParamFieldGroup>
40+
<ParamField name="description" type="string">
41+
Site description for the llms.txt header. Defaults to the site name
42+
</ParamField>
43+
<ParamField name="full" type="boolean">
44+
Generate `llms-full.txt` with complete page content. Default: `true`
45+
</ParamField>
46+
<ParamField name="links" type="Array<{ title, url, description? }>">
47+
Additional links to include (e.g. GitHub repo, API docs)
48+
</ParamField>
49+
</ParamFieldGroup>

0 commit comments

Comments
 (0)