Examples

Ox Content provides several examples demonstrating different use cases.

Integration Examples

Vue Integration

Embed Vue 3 components in Markdown using @ox-content/vite-plugin-vue.

import { oxContentVue } from "@ox-content/vite-plugin-vue";

export default defineConfig({
  plugins: [
    vue(),
    oxContentVue({
      components: "./src/components/*.vue",
    }),
  ],
});

React Integration

Embed React components in Markdown using @ox-content/vite-plugin-react.

import { oxContentReact } from "@ox-content/vite-plugin-react";

export default defineConfig({
  plugins: [
    react(),
    oxContentReact({
      components: "./src/components/*.tsx",
    }),
  ],
});

Svelte Integration

Embed Svelte 5 components in Markdown using @ox-content/vite-plugin-svelte.

import { oxContentSvelte } from "@ox-content/vite-plugin-svelte";

export default defineConfig({
  plugins: [
    svelte(),
    oxContentSvelte({
      components: "./src/components/*.svelte",
    }),
  ],
});

Plugin Examples

markdown-it Plugin

Use Ox Content as a markdown-it plugin for existing markdown-it projects.

rehype Plugin

Use Ox Content as a rehype plugin in the unified ecosystem.

Generator Examples

Source Docs Generation

Generate API documentation from JSDoc/TSDoc comments automatically.

oxContent({
  docs: {
    src: ["./src"],
    out: "docs/api",
    include: ["**/*.ts"],
  },
});

OG Image Examples

OG Viewer

Dev tool for previewing Open Graph metadata of all pages. Accessible at /__og-viewer during development.

Custom OG Image Templates

Generate per-page Open Graph images with a custom template. Pass arbitrary frontmatter data as props.

oxContent({
  ogImage: true,
  ogImageOptions: {
    template: "./og-template.ts",
  },
});

Other Examples

Playground

Interactive web playground for testing Markdown parsing.

Vite SSG

Static Site Generation example using Vite.

Running Examples

# Clone the repository
git clone https://github.com/ubugeeei/ox-content.git
cd ox-content

# Install dependencies
npm install

# Run an example
cd examples/integ-vue
npm run dev