@lukoweb/apitogo 0.2.23 → 0.2.25

package/docs/components/markdown.mdx

@@ -1,151 +1,151 @@
----
-title: Markdown
-sidebar_icon: heading-1
----
-
-A component for rendering markdown content with syntax highlighting and custom components.
-
-## Import
-
-```tsx
-import { Markdown } from "@lukoweb/apitogo/components";
-```
-
-## Props
-
-```ts
-type MarkdownProps = {
-  content: string;
-  className?: string;
-  components?: Components;
-};
-```
-
-## Usage
-
-### Basic Markdown
-
-```tsx
-<Markdown content="# Hello World\n\nThis is **bold** text." />
-```
-
-### With Custom Styling
-
-```tsx
-<Markdown content="# Styled Content" className="max-w-2xl mx-auto" />
-```
-
-### With Custom Components
-
-```tsx
-const customComponents = {
-  h1: ({ children }) => <h1 className="text-4xl font-bold text-blue-600">{children}</h1>,
-  p: ({ children }) => <p className="text-gray-700 leading-relaxed">{children}</p>,
-};
-
-<Markdown content="# Custom Heading\n\nCustom paragraph styling." components={customComponents} />;
-```
-
-:::info
-
-Custom components provided via the `components` prop will merge with default MDX components,
-allowing you to override specific elements while keeping others intact.
-
-:::
-
-## Features
-
-- **GitHub Flavored Markdown**: Full GFM support including tables, strikethrough, and task lists
-- **Syntax Highlighting**: Code blocks with configurable Shiki themes
-- **Raw HTML Support**: Safely renders HTML mixed with markdown
-- **Custom Components**: Override default markdown elements with custom React components
-- **Prose Styling**: Built-in typography styles with dark mode support
-
-## Supported Markdown
-
-### Headers
-
-```markdown
-# H1 Header
-
-## H2 Header
-
-### H3 Header
-```
-
-### Emphasis
-
-<!-- prettier-ignore -->
-```markdown
-_italic_ or *italic*
-**bold** or __bold__
-**_bold italic_**
-~~strikethrough~~
-```
-
-### Lists
-
-```markdown
-- Unordered list item
-- Another item
-  - Nested item
-
-1. Ordered list item
-2. Another numbered item
-```
-
-### Code
-
-The Markdown component supports both inline code and code blocks with syntax highlighting.
-
-**Inline code** with backticks:
-
-```markdown
-Inline `code` with backticks
-```
-
-**Code blocks** with syntax highlighting:
-
-````markdown
-```javascript
-// Code block with syntax highlighting
-function hello() {
-  console.log("Hello, world!");
-}
-```
-````
-
-For advanced syntax highlighting features like line numbers, titles, and line highlighting, see:
-
-- [Code Blocks](/docs/markdown/code-blocks) - Markdown code block syntax and features
-- [Syntax Highlight](/docs/components/syntax-highlight) - React component for syntax highlighting
-
-### Links and Images
-
-```markdown
-[Link text](https://example.com) ![Alt text](image.jpg)
-```
-
-### Tables
-
-```markdown
-| Column 1 | Column 2 |
-| -------- | -------- |
-| Cell 1   | Cell 2   |
-| Cell 3   | Cell 4   |
-```
-
-## Configuration
-
-The Markdown component automatically uses:
-
-- **Remark GFM**: For GitHub Flavored Markdown features
-- **Rehype Raw**: For HTML support
-- **Shiki**: For syntax highlighting with your configured themes
-
-:::tip
-
-The Markdown component integrates with APIToGo's syntax highlighting configuration and will use the
-same themes as configured in your APIToGo options.
-
-:::
+---
+title: Markdown
+sidebar_icon: heading-1
+---
+
+A component for rendering markdown content with syntax highlighting and custom components.
+
+## Import
+
+```tsx
+import { Markdown } from "@lukoweb/apitogo/components";
+```
+
+## Props
+
+```ts
+type MarkdownProps = {
+  content: string;
+  className?: string;
+  components?: Components;
+};
+```
+
+## Usage
+
+### Basic Markdown
+
+```tsx
+<Markdown content="# Hello World\n\nThis is **bold** text." />
+```
+
+### With Custom Styling
+
+```tsx
+<Markdown content="# Styled Content" className="max-w-2xl mx-auto" />
+```
+
+### With Custom Components
+
+```tsx
+const customComponents = {
+  h1: ({ children }) => <h1 className="text-4xl font-bold text-blue-600">{children}</h1>,
+  p: ({ children }) => <p className="text-gray-700 leading-relaxed">{children}</p>,
+};
+
+<Markdown content="# Custom Heading\n\nCustom paragraph styling." components={customComponents} />;
+```
+
+:::info
+
+Custom components provided via the `components` prop will merge with default MDX components,
+allowing you to override specific elements while keeping others intact.
+
+:::
+
+## Features
+
+- **GitHub Flavored Markdown**: Full GFM support including tables, strikethrough, and task lists
+- **Syntax Highlighting**: Code blocks with configurable Shiki themes
+- **Raw HTML Support**: Safely renders HTML mixed with markdown
+- **Custom Components**: Override default markdown elements with custom React components
+- **Prose Styling**: Built-in typography styles with dark mode support
+
+## Supported Markdown
+
+### Headers
+
+```markdown
+# H1 Header
+
+## H2 Header
+
+### H3 Header
+```
+
+### Emphasis
+
+<!-- prettier-ignore -->
+```markdown
+_italic_ or *italic*
+**bold** or __bold__
+**_bold italic_**
+~~strikethrough~~
+```
+
+### Lists
+
+```markdown
+- Unordered list item
+- Another item
+  - Nested item
+
+1. Ordered list item
+2. Another numbered item
+```
+
+### Code
+
+The Markdown component supports both inline code and code blocks with syntax highlighting.
+
+**Inline code** with backticks:
+
+```markdown
+Inline `code` with backticks
+```
+
+**Code blocks** with syntax highlighting:
+
+````markdown
+```javascript
+// Code block with syntax highlighting
+function hello() {
+  console.log("Hello, world!");
+}
+```
+````
+
+For advanced syntax highlighting features like line numbers, titles, and line highlighting, see:
+
+- [Code Blocks](/docs/markdown/code-blocks) - Markdown code block syntax and features
+- [Syntax Highlight](/docs/components/syntax-highlight) - React component for syntax highlighting
+
+### Links and Images
+
+```markdown
+[Link text](https://example.com) ![Alt text](image.jpg)
+```
+
+### Tables
+
+```markdown
+| Column 1 | Column 2 |
+| -------- | -------- |
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |
+```
+
+## Configuration
+
+The Markdown component automatically uses:
+
+- **Remark GFM**: For GitHub Flavored Markdown features
+- **Rehype Raw**: For HTML support
+- **Shiki**: For syntax highlighting with your configured themes
+
+:::tip
+
+The Markdown component integrates with APIToGo's syntax highlighting configuration and will use the
+same themes as configured in your APIToGo options.
+
+:::

package/docs/components/mermaid.mdx

@@ -1,81 +1,81 @@
----
-title: Mermaid
-sidebar_icon: chart-network
-description: Render Mermaid diagrams dynamically with client-side rendering.
----
-
-import { Mermaid } from "@lukoweb/apitogo/mermaid";
-
-The `Mermaid` component renders [Mermaid diagrams](https://mermaid.js.org/) in the browser using
-client-side rendering.
-
-<br />
-
-:::info{title="Build-Time Alternative"}
-
-For static diagrams, consider [build-time rendering with rehype-mermaid](/docs/guides/mermaid).
-
-:::
-
-## Prerequisites
-
-Install the `mermaid` peer dependency:
-
-```bash
-npm install mermaid
-```
-
-## Import
-
-```tsx
-import { Mermaid } from "@lukoweb/apitogo/mermaid";
-```
-
-## Props
-
-```ts
-type MermaidProps = {
-  chart: string; // Mermaid diagram definition
-  config?: MermaidConfig; // Optional Mermaid configuration
-} & ComponentProps<"div">;
-```
-
-## Usage
-
-### Basic Usage
-
-```tsx
-<Mermaid
-  chart={`graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;`}
-/>
-```
-
-<Mermaid
-  chart={`graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;`}
-/>
-
-### With Configuration
-
-```tsx
-<Mermaid
-  config={{ theme: "dark" }}
-  chart={`sequenceDiagram
-    Alice->>Bob: Hello Bob
-    Bob-->>Alice: Hi Alice`}
-/>
-```
-
-<Mermaid
-  config={{ theme: "dark" }}
-  chart={`sequenceDiagram
-    Alice->>Bob: Hello Bob
-    Bob-->>Alice: Hi Alice`}
-/>
+---
+title: Mermaid
+sidebar_icon: chart-network
+description: Render Mermaid diagrams dynamically with client-side rendering.
+---
+
+import { Mermaid } from "@lukoweb/apitogo/mermaid";
+
+The `Mermaid` component renders [Mermaid diagrams](https://mermaid.js.org/) in the browser using
+client-side rendering.
+
+<br />
+
+:::info{title="Build-Time Alternative"}
+
+For static diagrams, consider [build-time rendering with rehype-mermaid](/docs/guides/mermaid).
+
+:::
+
+## Prerequisites
+
+Install the `mermaid` peer dependency:
+
+```bash
+npm install mermaid
+```
+
+## Import
+
+```tsx
+import { Mermaid } from "@lukoweb/apitogo/mermaid";
+```
+
+## Props
+
+```ts
+type MermaidProps = {
+  chart: string; // Mermaid diagram definition
+  config?: MermaidConfig; // Optional Mermaid configuration
+} & ComponentProps<"div">;
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+<Mermaid
+  chart={`graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;`}
+/>
+```
+
+<Mermaid
+  chart={`graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;`}
+/>
+
+### With Configuration
+
+```tsx
+<Mermaid
+  config={{ theme: "dark" }}
+  chart={`sequenceDiagram
+    Alice->>Bob: Hello Bob
+    Bob-->>Alice: Hi Alice`}
+/>
+```
+
+<Mermaid
+  config={{ theme: "dark" }}
+  chart={`sequenceDiagram
+    Alice->>Bob: Hello Bob
+    Bob-->>Alice: Hi Alice`}
+/>

package/docs/components/playground.mdx

@@ -1,85 +1,85 @@
----
-title: API Playground
-sidebar_icon: circle-play
----
-
-You can use this component to allow users to test your API anywhere in your documentation.
-
-This component is **only available in [MDX files](/docs/markdown/mdx)** and you can use it directly
-without any imports:
-
-```tsx
-<OpenPlaygroundButton {...props} />
-```
-
-:::tip{title="Hot tip"}
-
-The Playground can point to any API endpoint, even if it's not in the API catalog.
-
-:::
-
-## Props
-
-```ts
-type PlaygroundProps = {
-  server: string;
-  url: string;
-  method: string;
-  headers?: Header[];
-  pathParams?: PathParam[];
-  queryParams?: QueryParam[];
-  body?: string;
-};
-```
-
-## Examples
-
-### httpbin example
-
-Example against [httpbin](https://httpbin.org/) `POST /post`:
-
-<OpenPlaygroundButton
-  server="https://httpbin.org/"
-  url="/post"
-  headers={[{ name: "X-APIToGo-Playground", defaultValue: "Hello World" }]}
-  queryParams={[
-    { name: "age", defaultValue: "30" },
-    { name: "city", defaultValue: "New York" },
-  ]}
-  body={JSON.stringify({ message: "Hello World" })}
-  method="POST"
-/>
-
-```tsx
-<OpenPlaygroundButton
-  server="https://httpbin.org/"
-  url="/post"
-  headers={[
-    {
-      name: "X-APIToGo-Playground",
-      defaultValue: "Hello World",
-    },
-  ]}
-  queryParams={[
-    { name: "age", defaultValue: "30" },
-    { name: "city", defaultValue: "New York" },
-  ]}
-  body={JSON.stringify({ message: "Hello World" })}
-  method="POST"
-/>
-```
-
-### JSON Placeholder
-
-In this example, we're using the JSON Placeholder API to test the `GET /photos` endpoint. We can
-also change the Text on the button to something more specific to the API.
-
-<OpenPlaygroundButton server="https://jsonplaceholder.typicode.com" url="/photos" method="GET">
-  Test Photos Endpoint
-</OpenPlaygroundButton>
-
-```tsx
-<OpenPlaygroundButton server="https://jsonplaceholder.typicode.com" url="/photos" method="GET">
-  Test Photos Endpoint
-</OpenPlaygroundButton>
-```
+---
+title: API Playground
+sidebar_icon: circle-play
+---
+
+You can use this component to allow users to test your API anywhere in your documentation.
+
+This component is **only available in [MDX files](/docs/markdown/mdx)** and you can use it directly
+without any imports:
+
+```tsx
+<OpenPlaygroundButton {...props} />
+```
+
+:::tip{title="Hot tip"}
+
+The Playground can point to any API endpoint, even if it's not in the API catalog.
+
+:::
+
+## Props
+
+```ts
+type PlaygroundProps = {
+  server: string;
+  url: string;
+  method: string;
+  headers?: Header[];
+  pathParams?: PathParam[];
+  queryParams?: QueryParam[];
+  body?: string;
+};
+```
+
+## Examples
+
+### httpbin example
+
+Example against [httpbin](https://httpbin.org/) `POST /post`:
+
+<OpenPlaygroundButton
+  server="https://httpbin.org/"
+  url="/post"
+  headers={[{ name: "X-APIToGo-Playground", defaultValue: "Hello World" }]}
+  queryParams={[
+    { name: "age", defaultValue: "30" },
+    { name: "city", defaultValue: "New York" },
+  ]}
+  body={JSON.stringify({ message: "Hello World" })}
+  method="POST"
+/>
+
+```tsx
+<OpenPlaygroundButton
+  server="https://httpbin.org/"
+  url="/post"
+  headers={[
+    {
+      name: "X-APIToGo-Playground",
+      defaultValue: "Hello World",
+    },
+  ]}
+  queryParams={[
+    { name: "age", defaultValue: "30" },
+    { name: "city", defaultValue: "New York" },
+  ]}
+  body={JSON.stringify({ message: "Hello World" })}
+  method="POST"
+/>
+```
+
+### JSON Placeholder
+
+In this example, we're using the JSON Placeholder API to test the `GET /photos` endpoint. We can
+also change the Text on the button to something more specific to the API.
+
+<OpenPlaygroundButton server="https://jsonplaceholder.typicode.com" url="/photos" method="GET">
+  Test Photos Endpoint
+</OpenPlaygroundButton>
+
+```tsx
+<OpenPlaygroundButton server="https://jsonplaceholder.typicode.com" url="/photos" method="GET">
+  Test Photos Endpoint
+</OpenPlaygroundButton>
+```