@lukoweb/apitogo 0.2.23 → 0.2.25

package/docs/configuration/sentry.mdx

@@ -1,44 +1,44 @@
----
-sidebar_icon: bug
----
-
-# Sentry
-
-Sentry is a popular error tracking tool that helps you monitor and fix crashes in real time. It
-provides you with detailed error reports, so you can quickly identify and resolve issues before they
-affect your users.
-
-## Enable Sentry
-
-1. To enable it you have to first install the optional dependency `@sentry/react`.
-
-```bash
-npm install --save @sentry/react
-```
-
-2. And then set the `SENTRY_DSN` environment variable in your APIToGo project.
-
-```bash
-
-SENTRY_DSN=https://your-sentry-dsn
-```
-
-## Release management
-
-However this does not handle release management for you. For that you can
-[create a custom `vite.config.ts`](./vite-config) and use the `@sentry/vite-plugin` plugin.
-
-```ts
-import { sentryVitePlugin } from "@sentry/vite-plugin";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  plugins: [
-    sentryVitePlugin({
-      authToken: "your-token",
-      org: "your-org",
-      project: "your-project",
-    }),
-  ],
-});
-```
+---
+sidebar_icon: bug
+---
+
+# Sentry
+
+Sentry is a popular error tracking tool that helps you monitor and fix crashes in real time. It
+provides you with detailed error reports, so you can quickly identify and resolve issues before they
+affect your users.
+
+## Enable Sentry
+
+1. To enable it you have to first install the optional dependency `@sentry/react`.
+
+```bash
+npm install --save @sentry/react
+```
+
+2. And then set the `SENTRY_DSN` environment variable in your APIToGo project.
+
+```bash
+
+SENTRY_DSN=https://your-sentry-dsn
+```
+
+## Release management
+
+However this does not handle release management for you. For that you can
+[create a custom `vite.config.ts`](./vite-config) and use the `@sentry/vite-plugin` plugin.
+
+```ts
+import { sentryVitePlugin } from "@sentry/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    sentryVitePlugin({
+      authToken: "your-token",
+      org: "your-org",
+      project: "your-project",
+    }),
+  ],
+});
+```

package/docs/configuration/site.md

@@ -1,124 +1,124 @@
----
-sidebar_label: Branding & Layout
-sidebar_icon: layout-dashboard
-description:
-  Customize your APIToGo site's branding, logo, banner, and layout options with detailed
-  configuration examples and guidance.
----
-
-# Branding & Layout
-
-We offer you to customize the main aspects of your APIToGo site's appearance and behavior.
-
-## Branding
-
-**Title**, **logo** can be configured in under the `site` property:
-
-```tsx title=config
-const config = {
-  site: {
-    title: "My API Documentation",
-    logo: {
-      src: {
-        light: "/path/to/light-logo.png",
-        dark: "/path/to/dark-logo.png",
-      },
-      alt: "Company Logo",
-      href: "/",
-    },
-    // Other options...
-  },
-};
-```
-
-### Available Options
-
-#### Title
-
-Set the title of your site next to the logo in the header:
-
-```tsx title=config
-{
-  site: {
-    title: "My API Documentation",
-  }
-}
-```
-
-#### Logo
-
-Configure the site's logo with different versions for light and dark themes:
-
-```tsx title=config
-{
-  site: {
-    logo: {
-      src: {
-        light: "/light-logo.png",
-        dark: "/dark-logo.png"
-      },
-      alt: "Company Logo",
-      width: "120px", // optional width
-      href: "/", // optional link target (defaults to "/")
-      reloadDocument: true, // optional, defaults to true
-    }
-  }
-}
-```
-
-The `reloadDocument` option controls whether clicking the logo triggers a full page reload (`true`,
-the default) or uses client-side SPA navigation (`false`). A full reload is useful when your landing
-page is served by a different system (e.g. a CMS) outside of APIToGo.
-
-#### Colors & Theme
-
-We allow you to fully customize all colors, borders, etc - read more about it in
-[Colors & Themes](/docs/customization/colors-theme)
-
-## Layout
-
-### Banner
-
-Add a banner message to the top of the page:
-
-```tsx title=config
-{
-  site: {
-    banner: {
-      message: "Welcome to our beta documentation!",
-      color: "info", // "note" | "tip" | "info" | "caution" | "danger" or custom
-      dismissible: true
-    }
-  }
-}
-```
-
-### Footer
-
-The footer configuration has its own dedicated section. See the [Footer Configuration](./footer) for
-details.
-
-## Complete Example
-
-Here's a comprehensive example showing all available page configuration options:
-
-```tsx title=config
-{
-  site: {
-    title: "My API Documentation",
-    logo: {
-      src: {
-        light: "/images/logo-light.svg",
-        dark: "/images/logo-dark.svg"
-      },
-      alt: "Company Logo",
-      width: "100px",
-    },
-    banner: {
-      message: "Welcome to our documentation!",
-      color: "info",
-      dismissible: true
-    },
-  }
-}
-```
+---
+sidebar_label: Branding & Layout
+sidebar_icon: layout-dashboard
+description:
+  Customize your APIToGo site's branding, logo, banner, and layout options with detailed
+  configuration examples and guidance.
+---
+
+# Branding & Layout
+
+We offer you to customize the main aspects of your APIToGo site's appearance and behavior.
+
+## Branding
+
+**Title**, **logo** can be configured in under the `site` property:
+
+```tsx title=config
+const config = {
+  site: {
+    title: "My API Documentation",
+    logo: {
+      src: {
+        light: "/path/to/light-logo.png",
+        dark: "/path/to/dark-logo.png",
+      },
+      alt: "Company Logo",
+      href: "/",
+    },
+    // Other options...
+  },
+};
+```
+
+### Available Options
+
+#### Title
+
+Set the title of your site next to the logo in the header:
+
+```tsx title=config
+{
+  site: {
+    title: "My API Documentation",
+  }
+}
+```
+
+#### Logo
+
+Configure the site's logo with different versions for light and dark themes:
+
+```tsx title=config
+{
+  site: {
+    logo: {
+      src: {
+        light: "/light-logo.png",
+        dark: "/dark-logo.png"
+      },
+      alt: "Company Logo",
+      width: "120px", // optional width
+      href: "/", // optional link target (defaults to "/")
+      reloadDocument: true, // optional, defaults to true
+    }
+  }
+}
+```
+
+The `reloadDocument` option controls whether clicking the logo triggers a full page reload (`true`,
+the default) or uses client-side SPA navigation (`false`). A full reload is useful when your landing
+page is served by a different system (e.g. a CMS) outside of APIToGo.
+
+#### Colors & Theme
+
+We allow you to fully customize all colors, borders, etc - read more about it in
+[Colors & Themes](/docs/customization/colors-theme)
+
+## Layout
+
+### Banner
+
+Add a banner message to the top of the page:
+
+```tsx title=config
+{
+  site: {
+    banner: {
+      message: "Welcome to our beta documentation!",
+      color: "info", // "note" | "tip" | "info" | "caution" | "danger" or custom
+      dismissible: true
+    }
+  }
+}
+```
+
+### Footer
+
+The footer configuration has its own dedicated section. See the [Footer Configuration](./footer) for
+details.
+
+## Complete Example
+
+Here's a comprehensive example showing all available page configuration options:
+
+```tsx title=config
+{
+  site: {
+    title: "My API Documentation",
+    logo: {
+      src: {
+        light: "/images/logo-light.svg",
+        dark: "/images/logo-dark.svg"
+      },
+      alt: "Company Logo",
+      width: "100px",
+    },
+    banner: {
+      message: "Welcome to our documentation!",
+      color: "info",
+      dismissible: true
+    },
+  }
+}
+```

package/docs/configuration/slots.mdx

@@ -1,125 +1,125 @@
----
-title: Slots
-sidebar_icon: between-horizontal-start
-description:
-  Learn how to use slots to inject custom content into predefined locations throughout your APIToGo
-  site.
----
-
-Slots provide a powerful way to inject custom content into predefined locations throughout APIToGo.
-They allow you to extend the default layout and functionality without modifying the core components.
-
-## Configuration
-
-You can define slots in your `apitogo.config.json` file using the `slots` property:
-
-```tsx
-import type { ApitogoConfig } from "@lukoweb/apitogo";
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-
-const config: ApitogoConfig = {
-  // ... other config
-  slots: {
-    "head-navigation-end": () => (
-      <div className="flex items-center gap-2">
-        <Button variant="ghost" size="icon" asChild>
-          <a href="https://github.com/your-repo">
-            <GithubIcon className="w-4 h-4" />
-          </a>
-        </Button>
-      </div>
-    ),
-    "footer-before": <div>Custom footer content</div>,
-  },
-};
-
-export default config;
-```
-
-## Slot Types
-
-Slots accept either:
-
-- **React components/elements**: JSX elements
-- **Function components**: Functions that return JSX elements and receive routing props
-
-```tsx
-slots: {
-  // JSX element
-  "footer-after": <CustomFooter />,
-
-  // Function with access to routing props
-  "head-navigation-end": ({ navigate, location, searchParams }) => (
-    <Button
-      onClick={() => navigate('/settings')}
-      variant={location.pathname === '/settings' ? 'default' : 'ghost'}
-    >
-      Settings
-    </Button>
-  ),
-}
-```
-
-Functions receive an object with routing properties:
-
-- `location` - Current route location
-- `navigate` - Navigation function
-- `searchParams` - URL search parameters
-- `setSearchParams` - Function to update search parameters
-- `params` - Route parameters
-
-## Type Safety
-
-APIToGo provides full TypeScript support for slot names. All predefined slot names will show up with
-autocomplete when you type them in your configuration.
-
-## Advanced Usage
-
-For more advanced slot usage, including programmatic slot management, dynamic content, and adding
-custom slot names, see the [Slot Component](/docs/components/slot) documentation.
-
-## Examples
-
-### Adding Social Links to Header
-
-```tsx
-slots: {
-  "head-navigation-end": () => (
-    <div className="flex items-center gap-2">
-      <Button variant="ghost" size="icon" asChild>
-        <a href="https://github.com/your-org" target="_blank">
-          <GithubIcon className="w-4 h-4" />
-        </a>
-      </Button>
-      <Button variant="ghost" size="icon" asChild>
-        <a href="https://discord.gg/your-server" target="_blank">
-          <DiscordIcon className="w-4 h-4" />
-        </a>
-      </Button>
-    </div>
-  ),
-}
-```
-
-### Dynamic Content with Routing
-
-```tsx
-slots: {
-  "top-navigation-side": ({ location, navigate }) => (
-    <div className="flex items-center gap-2">
-      <Button
-        variant={location.pathname === '/docs' ? 'default' : 'ghost'}
-        onClick={() => navigate('/docs')}
-      >
-        Documentation
-      </Button>
-      <Button
-        variant={location.pathname === '/api' ? 'default' : 'ghost'}
-        onClick={() => navigate('/api')}
-      >
-        API Reference
-      </Button>
-    </div>
-  ),
-}
-```
+---
+title: Slots
+sidebar_icon: between-horizontal-start
+description:
+  Learn how to use slots to inject custom content into predefined locations throughout your APIToGo
+  site.
+---
+
+Slots provide a powerful way to inject custom content into predefined locations throughout APIToGo.
+They allow you to extend the default layout and functionality without modifying the core components.
+
+## Configuration
+
+You can define slots in your `apitogo.config.json` file using the `slots` property:
+
+```tsx
+import type { ApitogoConfig } from "@lukoweb/apitogo";
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+
+const config: ApitogoConfig = {
+  // ... other config
+  slots: {
+    "head-navigation-end": () => (
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="icon" asChild>
+          <a href="https://github.com/your-repo">
+            <GithubIcon className="w-4 h-4" />
+          </a>
+        </Button>
+      </div>
+    ),
+    "footer-before": <div>Custom footer content</div>,
+  },
+};
+
+export default config;
+```
+
+## Slot Types
+
+Slots accept either:
+
+- **React components/elements**: JSX elements
+- **Function components**: Functions that return JSX elements and receive routing props
+
+```tsx
+slots: {
+  // JSX element
+  "footer-after": <CustomFooter />,
+
+  // Function with access to routing props
+  "head-navigation-end": ({ navigate, location, searchParams }) => (
+    <Button
+      onClick={() => navigate('/settings')}
+      variant={location.pathname === '/settings' ? 'default' : 'ghost'}
+    >
+      Settings
+    </Button>
+  ),
+}
+```
+
+Functions receive an object with routing properties:
+
+- `location` - Current route location
+- `navigate` - Navigation function
+- `searchParams` - URL search parameters
+- `setSearchParams` - Function to update search parameters
+- `params` - Route parameters
+
+## Type Safety
+
+APIToGo provides full TypeScript support for slot names. All predefined slot names will show up with
+autocomplete when you type them in your configuration.
+
+## Advanced Usage
+
+For more advanced slot usage, including programmatic slot management, dynamic content, and adding
+custom slot names, see the [Slot Component](/docs/components/slot) documentation.
+
+## Examples
+
+### Adding Social Links to Header
+
+```tsx
+slots: {
+  "head-navigation-end": () => (
+    <div className="flex items-center gap-2">
+      <Button variant="ghost" size="icon" asChild>
+        <a href="https://github.com/your-org" target="_blank">
+          <GithubIcon className="w-4 h-4" />
+        </a>
+      </Button>
+      <Button variant="ghost" size="icon" asChild>
+        <a href="https://discord.gg/your-server" target="_blank">
+          <DiscordIcon className="w-4 h-4" />
+        </a>
+      </Button>
+    </div>
+  ),
+}
+```
+
+### Dynamic Content with Routing
+
+```tsx
+slots: {
+  "top-navigation-side": ({ location, navigate }) => (
+    <div className="flex items-center gap-2">
+      <Button
+        variant={location.pathname === '/docs' ? 'default' : 'ghost'}
+        onClick={() => navigate('/docs')}
+      >
+        Documentation
+      </Button>
+      <Button
+        variant={location.pathname === '/api' ? 'default' : 'ghost'}
+        onClick={() => navigate('/api')}
+      >
+        API Reference
+      </Button>
+    </div>
+  ),
+}
+```

package/docs/configuration/vite-config.md

@@ -1,18 +1,18 @@
----
-title: Vite Config
-sidebar_icon: server-crash
----
-
-APIToGo is built on top of [Vite](https://vite.dev/) and can be customized using a
-[Vite configuration file](https://vite.dev/config/) if advanced functionality is required.
-
-Not all configurations are supported in APIToGo, but common tasks like adding plugins will generally
-work as expected. Simply create a `vite.config.ts` file in the root of your project and set the
-configuration options as needed.
-
-APIToGo will automatically pick up the configuration file and will use it to augment the built-in
-configuration.
-
-You can find an
-[example project](https://github.com/lukoweb/apitogo-doc-tool/tree/main/examples/with-vite-config)
-on GitHub that demonstrates how to use a custom Vite configuration with APIToGo.
+---
+title: Vite Config
+sidebar_icon: server-crash
+---
+
+APIToGo is built on top of [Vite](https://vite.dev/) and can be customized using a
+[Vite configuration file](https://vite.dev/config/) if advanced functionality is required.
+
+Not all configurations are supported in APIToGo, but common tasks like adding plugins will generally
+work as expected. Simply create a `vite.config.ts` file in the root of your project and set the
+configuration options as needed.
+
+APIToGo will automatically pick up the configuration file and will use it to augment the built-in
+configuration.
+
+You can find an
+[example project](https://github.com/lukoweb/apitogo-doc-tool/tree/main/examples/with-vite-config)
+on GitHub that demonstrates how to use a custom Vite configuration with APIToGo.