docusaurus-plugin-copy-page-button

KO | EN

gitlite — search

#hacktoberfest #react #ai #llm #golang #android #machine-learning #macos #java #windows #awesome #vue #awesome-list #security

docusaurus-plugin-copy-page-button

(★ 13)

Docusaurus plugin that adds a copy page button to extract documentation content as markdown for AI tools like ChatGPT, Claude, and Gemini

docusaurus-plugin-copy-page-button 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Docusaurus Copy Page Button Plugin

[![npm version](https://badge.fury.io/js/docusaurus-plugin-copy-page-button.svg)](https://www.npmjs.com/package/docusaurus-plugin-copy-page-button)
[![npm downloads](https://img.shields.io/npm/dm/docusaurus-plugin-copy-page-button.svg)](https://www.npmjs.com/package/docusaurus-plugin-copy-page-button)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Mentioned in Awesome Docusaurus](https://awesome.re/mentioned-badge.svg)](https://github.com/webbertakken/awesome-docusaurus)

**[Live Demo](https://portdeveloper.github.io/copy-page-button-showcase/)** · **[Read the story](https://portdeveloper.github.io/articles/how-a-button-i-built-for-one-docs-site-ended-up-on-twenty.html)**

**Extract Docusaurus documentation content as markdown for AI tools like ChatGPT, Claude, Perplexity, and Gemini**

A lightweight Docusaurus plugin that adds a "Copy page" button to your documentation site. Perfect for developers who want to quickly extract documentation content for AI assistance, code reviews, or content analysis.

## Used by

Shipping in production on documentation sites across the ecosystem:

Source-confirmed public docs sites:

- [React Native](https://reactnative.dev)
- [Puppeteer](https://pptr.dev)
- [pnpm](https://pnpm.io)
- [PlayCanvas](https://developer.playcanvas.com)
- [Sui](https://docs.sui.io)
- [Besu](https://besu.hyperledger.org)
- [Ethereum execution-apis](https://ethereum.github.io/execution-apis/)
- [Arbitrum](https://docs.arbitrum.io)
- [Cardano](https://docs.cardano.org)
- [Seal](https://seal-docs.wal.app)
- [Walrus](https://docs.wal.app)
- [Seeed Studio Wiki](https://wiki.seeedstudio.com)
- [SuiNS](https://docs.suins.io)
- [Kaia](https://docs.kaia.io)
- [Chronicle](https://docs.chroniclelabs.org)
- [FitFileViewer](https://nick2bad4u.github.io/FitFileViewer/)
- [Uptime Watcher](https://nick2bad4u.github.io/Uptime-Watcher/)
- [Flare](https://dev.flare.network)
- [Hashi](https://mystenlabs.github.io/hashi/design/)
- [Nillion](https://docs.nillion.com)
- [1claw Docs](https://docs.1claw.xyz)
- [Agent Layer](https://agent-layer.dev)
- [Ai DIY](https://docs.yiw.me)
- [Ovineko](https://ovineko.com)
- [ThunderID](https://thunderid.dev)
- [Redux Toolkit](https://redux-toolkit.js.org)
- [Stryker](https://stryker-mutator.io)
- [Ionic](https://ionicframework.com/docs)

Using this plugin? Open a PR to add your project.

In review for [Cypress documentation](https://github.com/cypress-io/cypress-documentation/pull/6462), [Uniswap docs](https://github.com/Uniswap/docs/pull/1132), [Osmosis docs](https://github.com/osmosis-labs/docs/pull/342), [BandChain docs](https://github.com/bandprotocol/bandchain-docs/pull/93), [Capacitor docs](https://github.com/ionic-team/capacitor-docs/pull/556), [Lerna](https://github.com/lerna/lerna/pull/4368), and [Sequelize](https://github.com/sequelize/website/pull/840).

## Why Use This Plugin?

- **AI-Ready Content**: Instantly convert documentation pages to clean markdown for ChatGPT, Claude, Perplexity, or other AI tools
- **Developer Productivity**: Copy entire documentation pages without manual selection and cleanup
- **Zero Configuration**: Works out of the box - just install and go
- **Documentation Workflow**: Streamline the process of getting documentation context for AI assistance

## Features

- 📋 **Copy page as markdown** - Clean page content extraction
- 👁️ **View as markdown** - Preview extracted content in new tab
- 🤖 **AI integration** - Direct "Open in ChatGPT", "Open in Claude", "Open in Perplexity", and "Open in Gemini" buttons
- ⚙️ **Configurable actions** - Show/hide specific dropdown actions (perfect for private sites)
- ⚡ **Auto-injection** - Automatically adds to the docs page (no configuration needed)
- 🧩 **Theme integration** - Import the React component directly when your site needs exact placement or no layout shift
- 🔌 **Optional MCP actions** - Add Cursor and VS Code MCP install links when your docs expose an MCP server
- 🎨 **Theme-aware** - Supports light/dark themes
- 🎨 **Customizable styling** - Easy custom CSS classes and inline styles
- 📱 **Mobile-friendly** - Responsive design
- 🛠️ **Zero-config** - Works out of the box with sensible defaults

## Installation

```bash
npm install docusaurus-plugin-copy-page-button
```

## Usage

### Option 1: Auto-injection

Add the plugin to your `docusaurus.config.js`:

```js
module.exports = {
  plugins: ["docusaurus-plugin-copy-page-button"],
};
```

The button automatically appears in the table of contents sidebar when one is visible. On mobile and no-TOC pages, it falls back to the top of the article.

### Option 2: Choose placement

Use `placement: "article"` if your theme header, sidebar, or table of contents layout makes the sidebar placement awkward:

```js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        placement: "article",
      },
    ],
  ],
};
```

Available values:
- `"auto"` - sidebar on desktop when visible, article on mobile/no-TOC pages. The button migrates from the article fallback up into the table of contents as soon as the sidebar mounts, so placement is deterministic across loads.
- `"toc"` - table of contents only. Pin the button to the right rail and never fall back into the article column. Recommended when you want the most predictable placement on a docs site that always has a ToC.
- `"article"` - top of the article column

### Option 3: Custom positioning

Use custom styles to position the button differently:

```js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        customStyles: {
          button: {
            style: {
              position: "fixed",
              top: "20px",
              right: "20px",
            },
          },
        },
      },
    ],
  ],
};
```

### Option 4: Render the React component yourself

For high-traffic docs sites that want zero client-side placement shift, disable auto-injection and render the button from a swizzled Docusaurus theme component.

```js
// docusaurus.config.js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        injectButton: false,
        generateMarkdownRoutes: true,
      },
    ],
  ],
};
```

```tsx
// src/theme/DocItem/Layout/index.tsx
import CopyPageButton from "docusaurus-plugin-copy-page-button/react";

export default function DocItemLayout(props) {
  return (
    <>
      <div style={{display: "flex", justifyContent: "flex-end"}}>
        <CopyPageButton generateMarkdownRoutes />
      </div>
      {/* render your normal Docusaurus DocItem layout here */}
    </>
  );
}
```

This path is best when maintainers care about first paint, exact visual placement, or avoiding any post-hydration DOM insertion.

## Configuration

### Enabled Actions

You can control which actions appear in the dropdown menu using the `enabledActions` option. This is particularly useful for private documentation sites where the AI tool links (ChatGPT/Claude/Perplexity/Gemini) won't work properly.

```js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        // Only show copy and view actions (hide AI tools)
        enabledActions: ['copy', 'view'],
      },
    ],
  ],
};
```

**Available actions:**
- `'copy'` - Copy page as Markdown
- `'view'` - View as Markdown in new tab
- `'chatgpt'` - Open in ChatGPT
- `'claude'` - Open in Claude
- `'perplexity'` - Open in Perplexity
- `'gemini'` - Open in Gemini
- `'mcp-copy'` - Copy MCP server JSON (shown when `mcpServer` is configured)
- `'mcp-cursor'` - Install MCP server in Cursor (shown when `mcpServer` is configured)
- `'mcp-vscode'` - Install MCP server in VS Code (shown when `mcpServer` is configured)

**Default:** Standard actions are enabled: `['copy', 'view', 'chatgpt', 'claude', 'perplexity', 'gemini']`. MCP actions are enabled automatically only when `mcpServer` is configured.

**Example configurations:**

```js
// Only copy functionality
enabledActions: ['copy']

// Copy and view only (no AI tools)
enabledActions: ['copy', 'view']

// All standard AI actions (default)
enabledActions: ['copy', 'view', 'chatgpt', 'claude', 'perplexity', 'gemini']
```

### MCP server actions

If your documentation site exposes an MCP server, configure it to add MCP actions to the dropdown:

```js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        mcpServer: {
          name: "my-docs",
          url: "https://docs.example.com/mcp",
        },
      },
    ],
  ],
};
```

The plugin can copy the MCP JSON config and generate install links for Cursor and VS Code. Cursor install links follow Cursor's MCP deeplink format, and VS Code install links use `vscode:mcp/install`.

For URL-only MCP servers, you can also pass the URL string directly:

```js
mcpServer: "https://docs.example.com/mcp"
```

The shorthand uses `docs` as the server name.

### Custom Styling

You can customize the appearance of the copy page button by passing a `customStyles` option:

```js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        customStyles: {
          button: {
            className: "my-custom-button",
            style: {
              backgroundColor: "#4CAF50",
              color: "white",
              borderRadius: "8px",
            },
          },
          dropdown: {
            className: "my-custom-dropdown",
            style: {
              backgroundColor: "#f8f9fa",
              border: "2px solid #4CAF50",
            },
          },
          dropdownItem: {
            style: {
              padding: "12px 20px",
              fontSize: "16px",
            },
          },
          container: {
            className: "my-button-container",
          },
        },
      },
    ],
  ],
};
```

#### Available Style Targets

- **`button`** - The main copy page button (positioning styles like `position`, `top`, `left` are automatically applied to the container)
- **`dropdown`** - The dropdown menu that appears when clicking the button
- **`dropdownItem`** - Individual items in the dropdown menu
- **`container`** - The wrapper container around the button

#### Style Options

Each target accepts:
- **`className`** - CSS class name(s) to add to the element
- **`style`** - Inline styles object (React style format)

Custom styles are merged with the default styles, so you only need to specify what you want to change.

#### Example: Custom positioning

```js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        customStyles: {
          button: {
            style: {
              position: "fixed",
              top: "100px",
              left: "100px",
              zIndex: 1000,
            },
          },
        },
      },
    ],
  ],
};
```

**Note**: Positioning styles (`position`, `top`, `right`, `bottom`, `left`, `zIndex`, `transform`) specified in the `button` configuration are automatically applied to the container element for proper positioning control.

#### Example: Styling without positioning

```js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        customStyles: {
          button: {
            style: {
              backgroundColor: "transparent",
              border: "2px solid #007acc",
              color: "#007acc",
              borderRadius: "12px",
              fontWeight: "bold",
            },
          },
        },
      },
    ],
  ],
};
```

### Localization

Two ways to translate the visible labels, each suited to a different site shape.

#### Option A — `labels` plugin option (works for any site, including monolingual or one-site-per-language setups)

Pass label overrides directly in your `docusaurus.config.js`. The `labels` object wins over everything else when set:

```js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        labels: {
          button: { label: "ページをコピー" },
          copy: {
            title: "ページをコピー",
            description: "このページを Markdown としてコピー",
          },
          view: { title: "Markdown で表示" },
          chatgpt: { title: "ChatGPT で開く" },
          claude: { title: "Claude で開く" },
          perplexity: { title: "Perplexity で開く" },
          gemini: { title: "Gemini で開く" },
        },
      },
    ],
  ],
};
```

Override only the keys you need — anything you leave out falls back to the default English (or to an `i18n/<locale>/code.json` entry; see Option B).

This is the right option when each language has its own Docusaurus site (each with its own `defaultLocale`), because Docusaurus's `<Translate>` machinery only applies to non-default locales and `labels` sidesteps that constraint.

#### Option B — Docusaurus i18n (standard multi-locale sites)

For a site with `i18n: { defaultLocale, locales }` covering multiple locales, all visible strings also flow through Docusaurus's `translate()` calls. Add the translation IDs to `i18n/<locale>/code.json` for each non-default locale:

```json
{
  "copyPageButton.button.label": { "message": "コピー" },
  "copyPageButton.copy.title": { "message": "ページをコピー" },
  "copyPageButton.copy.description": { "message": "このページを Markdown としてコピー" },
  "copyPageButton.view.title": { "message": "Markdown で表示" },
  "copyPageButton.chatgpt.title": { "message": "ChatGPT で開く" },
  "copyPageButton.claude.title": { "message": "Claude で開く" },
  "copyPageButton.perplexity.title": { "message": "Perplexity で開く" },
  "copyPageButton.gemini.title": { "message": "Gemini で開く" }
}
```

> **Note:** `docusaurus write-translations` only scans your site's source code, not `node_modules`. The plugin's IDs won't be auto-extracted; copy them in manually from the table below.

Available translation IDs:

| ID | Default English |
|---|---|
| `copyPageButton.button.label` | `Copy page` (visible button text) |
| `copyPageButton.copy.title` / `.description` | `Copy page` / `Copy the page as Markdown for LLMs` |
| `copyPageButton.view.title` / `.description` | `View as Markdown` / `View this page as plain text` |
| `copyPageButton.chatgpt.title` / `.description` | `Open in ChatGPT` / `Ask questions about this page` |
| `copyPageButton.claude.title` / `.description` | `Open in Claude` / `Ask questions about this page` |
| `copyPageButton.perplexity.title` / `.description` | `Open in Perplexity` / `Ask questions about this page` |
| `copyPageButton.gemini.title` / `.description` | `Open in Gemini` / `Ask questions about this page` |
| `copyPageButton.mcpCopy.title` / `.description` | `Copy MCP config` / `Copy MCP server JSON` |
| `copyPageButton.mcpCursor.title` / `.description` | `Install in Cursor` / `Open Cursor MCP installer` |
| `copyPageButton.mcpVscode.title` / `.description` | `Install in VS Code` / `Open VS Code MCP installer` |

## Markdown URL routes

Set `generateMarkdownRoutes: true` to emit a plain-markdown URL for each generated documentation page:

```js
module.exports = {
  plugins: [["docusaurus-plugin-copy-page-button", { generateMarkdownRoutes: true }]],
};
```

For a Docusaurus page rendered at `build/page/index.html`, the plugin writes `build/page.md`, so static hosts serve it at `https://your-docs.com/page.md`. Users can now share `https://your-docs.com/page.md` directly with Claude, ChatGPT, or any tool that can fetch URLs as context. When this option is enabled, the AI tool actions also point at the `.md` URL.

### Pointing the AI links at markdown you already publish

If your site already serves per-page markdown — for example through an `llms.txt` setup — you don't need `generateMarkdownRoutes`. Use `markdownUrl` to send the "Open in ChatGPT / Claude / …" links at those URLs directly:

```js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        // true  -> derive a `/path.md` URL from the current page (the standard
        //          llms.txt layout). No files are generated by this plugin.
        // false -> always use the HTML page URL.
        markdownUrl: true,
      },
    ],
  ],
};
```

`markdownUrl` takes precedence over `generateMarkdownRoutes` for the AI links. If your markdown lives at a non-standard path, render the component directly (see Option 4) and pass a function: `markdownUrl={(pageUrl) => /* your mapping */}`. Functions can't cross the auto-injection boundary, so for `docusaurus.config.js` use `true`/`false`.

## Tracking interactions

To measure how often the button is used, listen for the `copy-page-button:action` event. It fires on `document` whenever a dropdown action runs, with the action id and the current page URL:

```js
document.addEventListener("copy-page-button:action", (event) => {
  const { action, url } = event.detail; // action: "copy" | "claude" | "chatgpt" | ...
  // forward to your analytics, e.g. plausible / GA / posthog
  window.plausible?.("copy-page-button", { props: { action, url } });
});
```

Prefer DOM/delegated listeners? The rendered elements carry stable hooks: `[data-copy-page-button-container]` on the wrapper, `[data-copy-page-button-trigger]` on the button, and `[data-copy-page-action="<id>"]` on each dropdown item.

## Local Development

To test this plugin locally during development:

### 1. Clone and setup

```bash
git clone https://github.com/portdeveloper/docusaurus-plugin-copy-page-button.git
cd docusaurus-plugin-copy-page-button
npm install
```

### 2. Link the package

```bash
npm link
```

### 3. Use in your Docusaurus project

Navigate to your Docusaurus project and link the local plugin:

```bash
cd /path/to/your/docusaurus/project
npm link docusaurus-plugin-copy-page-button
```

### 4. Configure in docusaurus.config.js

Add the plugin to your config:

```js
module.exports = {
  plugins: ["docusaurus-plugin-copy-page-button"],
};
```

### 5. Start development server

```bash
npm start
```

The locally linked plugin will now be active in your Docusaurus site. Any changes you make to the plugin source will require restarting the Docusaurus development server.

## How It Works

The plugin intelligently extracts page content by:

1. **Smart Content Selection**: Automatically identifies the main documentation content area
2. **Clean Extraction**: Removes navigation, sidebars, headers, footers, and UI elements
3. **Markdown Conversion**: Converts HTML to properly formatted markdown with preserved structure
4. **AI-Optimized Format**: Includes page title, URL, and clean content perfect for AI tool input

## Use Cases

- **AI-Assisted Development**: Quickly share documentation context with ChatGPT, Claude, Perplexity, or Gemini for coding help
- **Code Reviews**: Extract relevant documentation for code review discussions
- **Content Analysis**: Analyze documentation structure and content for improvements
- **Knowledge Sharing**: Easily share specific documentation sections with team members
- **Documentation Migration**: Extract content for migrating to other documentation platforms

## SEO Keywords

Docusaurus plugin, copy page button, extract documentation, markdown conversion, AI tools integration, ChatGPT documentation, Claude AI, Perplexity AI, Gemini AI, MCP, content extraction, developer tools, documentation productivity, React plugin, JavaScript documentation tools.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

See [CONTRIBUTING.md](./CONTRIBUTING.md) for development setup, testing, and PR guidelines. All participants are expected to follow our [Code of Conduct](./CODE_OF_CONDUCT.md).

## Support

- 🐛 [Report Issues](https://github.com/portdeveloper/docusaurus-plugin-copy-page-button/issues)
- 💡 [Request Features](https://github.com/portdeveloper/docusaurus-plugin-copy-page-button/issues/new)
- 📖 [Documentation](https://github.com/portdeveloper/docusaurus-plugin-copy-page-button#readme)

## Reach out to me for faster replies!

My telegram username is portdev, feel free to dm me whenever (and bug me if I don't reply)

## License

docusaurus-plugin-copy-page-button

docusaurus-plugin-copy-page-button 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

docusaurus-plugin-copy-page-button

docusaurus-plugin-copy-page-button 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README