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
pnpm install

# Run an example
cd examples/integ-vue
pnpm dev