@clidey/dory 1.0.8 → 1.9.0

package/docs/components/callouts.mdx

@@ -0,0 +1,134 @@
+---
+title: 'Callouts'
+description: 'Highlight important information with Note, Warning, Info, Tip, Check, and custom Callout components.'
+---
+
+# Callouts
+
+Callouts draw attention to important information. Dory provides five pre-configured callout types plus a generic `Callout` component for custom types.
+
+## Note
+
+Use `<Note>` for supplementary information:
+
+<Specimen label="&lt;Note&gt;">
+
+```mdx
+<Note>
+  This feature requires Node.js 18 or later. Check your version with `node --version`.
+</Note>
+```
+
+<Note>
+  This feature requires Node.js 18 or later. Check your version with `node --version`.
+</Note>
+
+</Specimen>
+
+## Warning
+
+Use `<Warning>` for critical caveats or destructive actions:
+
+<Specimen label="&lt;Warning&gt;">
+
+```mdx
+<Warning>
+  This action is **irreversible**. All data in the selected namespace will be permanently deleted.
+</Warning>
+```
+
+<Warning>
+  This action is **irreversible**. All data in the selected namespace will be permanently deleted.
+</Warning>
+
+</Specimen>
+
+## Info
+
+Use `<Info>` for contextual information:
+
+<Specimen label="&lt;Info&gt;">
+
+```mdx
+<Info>
+  Rate limiting applies to all API endpoints. The default limit is 1000 requests per hour per API key.
+</Info>
+```
+
+<Info>
+  Rate limiting applies to all API endpoints. The default limit is 1000 requests per hour per API key.
+</Info>
+
+</Specimen>
+
+## Tip
+
+Use `<Tip>` for helpful hints and best practices:
+
+<Specimen label="&lt;Tip&gt;">
+
+```mdx
+<Tip>
+  Enable response caching to reduce API calls. Cache keys are scoped to the authenticated user.
+</Tip>
+```
+
+<Tip>
+  Enable response caching to reduce API calls. Cache keys are scoped to the authenticated user.
+</Tip>
+
+</Specimen>
+
+## Check
+
+Use `<Check>` for success states, confirmations, or completed items:
+
+<Specimen label="&lt;Check&gt;">
+
+```mdx
+<Check>
+  Your API key has been generated and is ready to use. Store it securely — it won't be shown again.
+</Check>
+```
+
+<Check>
+  Your API key has been generated and is ready to use. Store it securely — it won't be shown again.
+</Check>
+
+</Specimen>
+
+## Custom Callout
+
+Use `<Callout>` with a `type` and `title` for full control:
+
+<Specimen label="&lt;Callout&gt;">
+
+```mdx
+<Callout type="warning" title="Breaking Change in v2.0">
+  The `authenticate()` method signature has changed. Update your integration before upgrading.
+</Callout>
+```
+
+<Callout type="warning" title="Breaking Change in v2.0">
+  The `authenticate()` method signature has changed. Update your integration before upgrading.
+</Callout>
+
+</Specimen>
+
+### Callout Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `'note' \| 'warning' \| 'info' \| 'tip' \| 'check'` | `'note'` | Determines the color scheme and icon. |
+| `title` | `string` | — | Optional title displayed above the content. |
+| `children` | `ReactNode` | — | Callout body content. Supports MDX. |
+
+## Callout Types Reference
+
+| Component | Color | Icon | Use Case |
+| --- | --- | --- | --- |
+| `<Note>` | Neutral | Info | Supplementary information |
+| `<Warning>` | Yellow outline | Alert Triangle | Destructive or risky actions |
+| `<Info>` | Blue | Info Circle | Contextual facts |
+| `<Tip>` | Green | Star | Helpful hints, best practices |
+| `<Check>` | Outlined, green badge | Check | Success states, confirmations |

package/docs/components/cards.mdx

@@ -0,0 +1,153 @@
+---
+title: 'Cards'
+description: 'Informational and linked cards in responsive grid layouts using Card and CardGroup.'
+---
+
+# Cards
+
+Cards are versatile components for showcasing features, navigation links, or grouped information.
+
+## Basic Card
+
+<Specimen label="&lt;Card&gt;">
+
+```mdx
+<Card title="Getting Started" icon="rocket" description="Set up your first Dory project in minutes." />
+```
+
+<Card title="Getting Started" icon="rocket" description="Set up your first Dory project in minutes." />
+
+</Specimen>
+
+## Linked Card
+
+Add an `href` prop to make the entire card clickable:
+
+<Specimen label="&lt;Card&gt;">
+
+```mdx
+<Card
+  title="Installation"
+  icon="package"
+  href="/getting-started/installation"
+  description="Install Dory globally or as a project dependency."
+/>
+```
+
+<Card
+  title="Installation"
+  icon="package"
+  href="/getting-started/installation"
+  description="Install Dory globally or as a project dependency."
+/>
+
+</Specimen>
+
+## Card with Children
+
+Add content inside the card for richer layouts:
+
+<Specimen label="&lt;Card&gt;">
+
+```mdx
+<Card title="API Rate Limits" icon="gauge">
+  The default rate limit is **1000 requests per hour** per API key.
+
+  - Burst limit: 100 requests per second
+  - Retry after: `Retry-After` header in 429 responses
+</Card>
+```
+
+<Card title="API Rate Limits" icon="gauge">
+  The default rate limit is **1000 requests per hour** per API key.
+
+  - Burst limit: 100 requests per second
+  - Retry after: `Retry-After` header in 429 responses
+</Card>
+
+</Specimen>
+
+## CardGroup — Grid Layout
+
+Use `<CardGroup>` to arrange cards in a responsive grid:
+
+<Specimen label="&lt;CardGroup&gt; &lt;Card&gt;">
+
+```mdx
+<CardGroup cols={2}>
+  <Card title="TypeScript" icon="code-2" description="Full type definitions included." />
+  <Card title="Open Source" icon="github" description="MIT licensed. Contributions welcome." />
+  <Card title="Zero Config" icon="zap" description="Works out of the box with sensible defaults." />
+  <Card title="Extensible" icon="plug" description="Customize themes, fonts, and components." />
+</CardGroup>
+```
+
+<CardGroup cols={2}>
+  <Card title="TypeScript" icon="code-2" description="Full type definitions included." />
+  <Card title="Open Source" icon="github" description="Contributions welcome." />
+  <Card title="Zero Config" icon="zap" description="Works out of the box with sensible defaults." />
+  <Card title="Extensible" icon="plug" description="Customize themes, fonts, and components." />
+</CardGroup>
+
+</Specimen>
+
+### Three-Column Grid
+
+<Specimen label="&lt;CardGroup&gt; &lt;Card&gt;">
+
+```mdx
+<CardGroup cols={3}>
+  <Card title="Build" icon="hammer" description="Compile MDX into a static site." />
+  <Card title="Preview" icon="eye" description="Serve the built site locally." />
+  <Card title="Deploy" icon="rocket" description="Upload dist/ to any static host." />
+</CardGroup>
+```
+
+<CardGroup cols={3}>
+  <Card title="Build" icon="hammer" description="Compile MDX into a static site." />
+  <Card title="Preview" icon="eye" description="Serve the built site locally." />
+  <Card title="Deploy" icon="rocket" description="Upload dist/ to any static host." />
+</CardGroup>
+
+</Specimen>
+
+## Numbered Cards
+
+Add `numbered` to a `CardGroup` to label each card 01, 02, 03 in reading order.
+
+<Specimen label="&lt;CardGroup numbered&gt;">
+
+```mdx
+<CardGroup cols={2} numbered>
+  <Card title="Install" description="One Docker command. Runs on your machine." />
+  <Card title="Connect a database" description="Pick an engine, test, connect." />
+  <Card title="Explore the graph" description="Tables as nodes, keys as edges." />
+</CardGroup>
+```
+
+<CardGroup cols={2} numbered>
+  <Card title="Install" description="One Docker command. Runs on your machine." />
+  <Card title="Connect a database" description="Pick an engine, test, connect." />
+  <Card title="Explore the graph" description="Tables as nodes, keys as edges." />
+</CardGroup>
+
+</Specimen>
+
+## Props Reference
+
+### Card Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | Card heading. |
+| `description` | `string` | Optional subtitle text. |
+| `icon` | `string` | Clidey Design icon name (e.g. `"promote"`, `"code"`). |
+| `href` | `string` | Makes the card a link. Navigates on click. |
+| `children` | `ReactNode` | Rich content rendered inside the card body. |
+
+### CardGroup Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `cols` | `1 \| 2 \| 3 \| 4` | `2` | Number of columns in the grid. Responsive — collapses to 1 on mobile. |
+| `numbered` | `boolean` | `false` | Label cards 01, 02, 03 in order. |

package/docs/components/code-blocks.mdx

@@ -0,0 +1,281 @@
+---
+title: 'Code Blocks'
+description: 'Syntax-highlighted code blocks with multi-language tab groups, copy button, and HTTP method badges.'
+---
+
+# Code Blocks
+
+Dory provides rich code block components with syntax highlighting, tab groups, and interactive copy functionality.
+
+## Basic Code Block
+
+Use triple backticks with an optional language identifier:
+
+<Specimen label="```lang">
+
+````mdx
+```python
+def greet(name: str) -> str:
+    return f"Hello, {name}!"
+
+print(greet("World"))
+```
+````
+
+```python
+def greet(name: str) -> str:
+    return f"Hello, {name}!"
+
+print(greet("World"))
+```
+
+</Specimen>
+
+## Filenames and Highlighted Lines
+
+Text after the language becomes the block's filename. Add line numbers or ranges in braces to highlight them. A filename or highlight also turns on line numbers.
+
+<Specimen label="```lang title {lines}">
+
+````mdx
+```json dory.json {4-6}
+{
+  "name": "Dory",
+  "logo": "./logo/logo.svg",
+  "colors": {
+    "primary": "#2C6BD4"
+  },
+  "fonts": {
+    "family": "Hanken Grotesk"
+  }
+}
+```
+````
+
+```json dory.json {4-6}
+{
+  "name": "Dory",
+  "logo": "./logo/logo.svg",
+  "colors": {
+    "primary": "#2C6BD4"
+  },
+  "fonts": {
+    "family": "Hanken Grotesk"
+  }
+}
+```
+
+<SpecimenProps>
+
+<Prop name="Filename" type="dory.json">Any text after the language. Shown in the header with the language.</Prop>
+<Prop name='title="..."' type='title="Fetch users"'>Same as a bare filename; use it when the title contains braces or quotes.</Prop>
+<Prop name="{lines}" type="{1,4-6}">Comma-separated line numbers and ranges to highlight.</Prop>
+
+</SpecimenProps>
+
+</Specimen>
+
+## Diffs
+
+Use `diff` for a plain diff, or `diff-<lang>` to keep syntax highlighting. Lines starting with `+` or `-` are marked, and the header counts them.
+
+<Specimen label="```diff-json">
+
+````mdx
+```diff-json dory.json
+  "fonts": {
+-   "family": "Inter",
++   "family": "Hanken Grotesk",
+    "mono": { "family": "JetBrains Mono" }
+  }
+```
+````
+
+```diff-json dory.json
+  "fonts": {
+-   "family": "Inter",
++   "family": "Hanken Grotesk",
+    "mono": { "family": "JetBrains Mono" }
+  }
+```
+
+</Specimen>
+
+## Terminal Sessions
+
+A `bash`, `sh`, `shell`, `zsh` or `console` block with `$ ` prompts renders as a terminal. The command name is highlighted and other lines are output.
+
+<Specimen label="```sh">
+
+````mdx
+```sh
+$ dory dev
+✓ Compiled 48 pages in 1.2s
+$ dory build
+✓ Wrote 48 pages to ./dist
+```
+````
+
+```sh
+$ dory dev
+✓ Compiled 48 pages in 1.2s
+$ dory build
+✓ Wrote 48 pages to ./dist
+```
+
+</Specimen>
+
+## Supported Languages
+
+Dory supports syntax highlighting for 20+ languages:
+
+<Row>
+  <Col>
+    - `python`
+    - `javascript` / `js`
+    - `typescript` / `ts`
+    - `jsx` / `tsx`
+    - `java`
+    - `c`, `cpp`, `c#`
+    - `rust`
+    - `go`
+  </Col>
+  <Col>
+    - `ruby`
+    - `php`
+    - `swift`
+    - `kotlin`
+    - `bash`
+    - `json`
+    - `yaml` / `toml`
+    - `html` / `css`
+    - `sql`
+    - `graphql`
+  </Col>
+</Row>
+
+## CodeGroup — Multi-Language Tabs
+
+Use `<CodeGroup>` to show the same code in multiple languages. Each child code block becomes a tab, labelled by its title or language.
+
+<Specimen label="&lt;CodeGroup&gt;">
+
+````mdx
+<CodeGroup>
+  ```python
+  import requests
+
+  response = requests.get("https://api.example.com/users")
+  print(response.json())
+  ```
+  ```javascript
+  const response = await fetch("https://api.example.com/users");
+  const data = await response.json();
+  console.log(data);
+  ```
+  ```go
+  resp, err := http.Get("https://api.example.com/users")
+  if err != nil {
+      log.Fatal(err)
+  }
+  defer resp.Body.Close()
+  ```
+</CodeGroup>
+````
+
+<CodeGroup>
+  ```python
+  import requests
+
+  response = requests.get("https://api.example.com/users")
+  print(response.json())
+  ```
+  ```javascript
+  const response = await fetch("https://api.example.com/users");
+  const data = await response.json();
+  console.log(data);
+  ```
+  ```go
+  resp, err := http.Get("https://api.example.com/users")
+  if err != nil {
+      log.Fatal(err)
+  }
+  defer resp.Body.Close()
+  ```
+</CodeGroup>
+
+</Specimen>
+
+### CodeGroup with Title
+
+Add a `title` prop to label the group:
+
+<Specimen label="&lt;CodeGroup title&gt;">
+
+````mdx
+<CodeGroup title="Fetch Users">
+  ```python
+  import requests
+  response = requests.get("https://api.example.com/users")
+  ```
+  ```typescript
+  const res = await fetch("https://api.example.com/users");
+  ```
+</CodeGroup>
+````
+
+<CodeGroup title="Fetch Users">
+  ```python
+  import requests
+  response = requests.get("https://api.example.com/users")
+  ```
+  ```typescript
+  const res = await fetch("https://api.example.com/users");
+  ```
+</CodeGroup>
+
+</Specimen>
+
+## HTTP Method Badges
+
+Add `tag` and `label` to a code block inside a `CodeGroup` to show HTTP method badges:
+
+<Specimen label="```lang tag label">
+
+````mdx
+<CodeGroup>
+  ```bash tag="GET" label="/api/users"
+  curl https://api.example.com/users
+  ```
+  ```bash tag="POST" label="/api/users"
+  curl -X POST https://api.example.com/users \
+    -H "Content-Type: application/json" \
+    -d '{"name": "Alice"}'
+  ```
+</CodeGroup>
+````
+
+<CodeGroup>
+  ```bash tag="GET" label="/api/users"
+  curl https://api.example.com/users
+  ```
+  ```bash tag="POST" label="/api/users"
+  curl -X POST https://api.example.com/users \
+    -H "Content-Type: application/json" \
+    -d '{"name": "Alice"}'
+  ```
+</CodeGroup>
+
+</Specimen>
+
+## Inline Code
+
+Use single backticks for inline `code` within prose text.
+
+```mdx
+Call the `greet()` function with a `name` parameter.
+```
+
+## Copy Button
+
+All code blocks include a **copy button** in the header. It copies the raw code to the clipboard and shows a checkmark for 1 second.