docsify-page-actions-menu

A docsify plugin that adds a customizable menu to the beginning of each page on the top. Inspired by the 'copy page' menu of Mintlify, but extended to write completely custom actions by the user into the $docsify.

By default, the plugin provides:

- Copy page markdown
- View page markdown in a new tab
- Open Claude with the current page context
- Open Perplexity with the current page context

!default-light-mode

Installation

Add the script from CDN or include it from our dist directory here in your index.html.

``html


`

Styling

The plugin is designed to work with Docsify Theme variables by default, see the below variable settings. All our customizable CSS variables are listed here, to make this plugin work with custom themes or styles, adjust the shown variables for consistent look and feel.

`css
:root {
--dapm-bg-alt: var(--color-mono-2, #f5f5f5);
--dapm-bg: var(--color-mono-1, #fff);
--dapm-border-color: var(--border-color, #eee);
--dapm-border-radius: var(--border-radius, 6px);
--dapm-button-padding: var(--button-padding, 8px 16px);
--dapm-desc-color: var(--color-mono-max, #888);
--dapm-font-size-desc: var(--font-size-xs, 0.9rem);
--dapm-font-size-label: var(--font-size-l, 1.1rem);
--dapm-font-size: var(--font-size-s, 1rem);
--dapm-font-weight: var(--font-weight, 500);
--dapm-icon-bg: var(--color-mono-min, #f9f9f9);
--dapm-icon-box-size: 26px;
--dapm-spacing: var(--navbar-drop-link-spacing, 8px);
--dapm-text: var(--color-text, #222);
--dapm-transition-duration: var(--duration-medium, 0.2s);
--dapm-z-index: var(--z-sidebar-toggle, 20);
}
`

Configuration

Override or extend the behaviour of the plugin by adding a pageActionItems object to your Docsify config. Supported configuration:

- items (array of the menu items)
- button (the triggering button icon and label)

`js
window.$docsify = {
// ...other config,
pageActionItems: {
button: {
icon: '',
label: 'Copy page',
},
items: [
{
icon: '🔗', // HTML string, SVG, or
label: 'Custom link',
desc: 'Description goes here',
action: 'custom', // or 'llm' | 'view' | 'copy'
llm: 'claude', // 'perplexity' | 'chatgpt' (if action is 'llm')
onClick: ({ rawMarkdown, blobUrl, vm }) => {
// Custom handler logic
},
// New: success and error handlers (see below for details)
onSuccess: 'Link opened!',
onError: { '/en/': 'Failed to open link', '/zh-cn/': '链接打开失败' },
},
{
icon: '🗃️',
// you can customize the localisation for each text of each item as shown:
// same internationalization is available for the main button.
label: {
'/': 'Copy page',
'/en/': 'Copy Page',
'/zh-cn/': '复制页面',
},
desc: {
'/': 'Description goes here',
'/en/': 'Description goes here',
'/zh-cn/': '描述在这里',
},
action: 'copy',
// Also works for copy/view/llm actions:
onSuccess: (ctx) => {
// Show a toast, log analytics, etc.
alert('Copied!');
},
onError: 'Copy failed.',
},
],
},
};
`



Default list of actions

For context here's the default items that are included by default:

`js
[
{
icon: '',
label: 'Copy page',
desc: 'Copy page as Markdown for LLMs',
action: 'copy',
onSuccess: 'Copied!',
onError: 'Copy failed!',
},
{
icon: '',
label: 'View as Markdown ↗',
desc: 'View this page as plain text',
action: 'view',
},
{
icon: '',
label: 'Open in Claude ↗',
desc: 'Ask questions about this page',
label: 'Open in Claude ↗',
desc: 'Ask questions about this page',
action: 'llm',
llm: 'claude',
},
{
icon: '',
label: 'Open in Perplexity ↗',
desc: 'Ask questions about this page',
label: 'Open in Perplexity ↗',
desc: 'Ask questions about this page',
action: 'llm',
llm: 'perplexity',
},
];
`



$3

All text fields (label, desc, onSuccess, onError) support either a string or an object mapping Docsify routes or locales to strings, e.g.:

`js
label: {
'/en/': 'Copy Page',
'/zh-cn/': '复制页面',
'/': 'Copy page'
}
`

---

Advanced: Success and Error Handlers

Each action item supports:

- onSuccess: _string_, _localization object_, or _function_ called when the action completes successfully.
- onError: _string_, _localization object_, or _function_ called if the action throws or fails.

Handler Function Arguments:

- All handler functions receive a context object:
{ rawMarkdown, blobUrl, vm, triggerButton, triggerButtonConfig, item, event, error? }

Examples:

`js
{
label: 'Copy',
action: 'copy',
onSuccess: 'Copied to clipboard!',
onError: ctx => {
// Custom error handling
alert('Copy failed: ' + ctx.error?.message);
}
},
{
label: 'Open in Claude',
action: 'llm',
llm: 'claude',
onSuccess: {
'/en/': 'Opened in Claude!',
'/zh-cn/': '已在Claude中打开！'
}
}
`

If you use a string or localization object, the plugin will automatically display it as a notification (by default, temporarily replacing the menu button label).
If you use a function, you are responsible for displaying any messages/UI feedback.

_Shoutout to the docsify-pagination-plugin for their tranlsation implementation, it gave a strong foundation for our implementation._

Development

1. Clone the repository and install dependencies:

`sh
pnpm install
`

2. Start the development server to open the demo page with the latest src/index.js:

`sh
pnpm dev
`

3. Edit the plugin code in src/index.js. Changes will be reflected in the demo.

4. Build the plugin after making changes:
`sh
pnpm build
``

---

License

MIT