Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions docs/userGuide/plugins/custardui.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
### Plugin: CustardUI

<div id="content">

This plugin automatically injects the [CustardUI](https://custardui.js.org/) auto-init script into the page, enhancing generated static sites with more interactivity and personalization.

<box type="info">

CustardUI provides additional custom elements like `<cv-toggle>`, `<cv-tabgroup>`, placeholders, page highlighting capabilities, and more.

</box>

To enable this plugin, add `custardui` to your site's plugins.

```js {heading="site.json"}
{
...
"plugins": [
"custardui"
]
}
```

<panel header="Optional: Specifying a Base URL">

By default, the plugin sets the `data-base-url` attribute for CustardUI to `/`. If you are hosting your site in a subdirectory or need to customize this base URL, you can configure it under `pluginsContext`.

```js {heading="site.json"}
{
...
"pluginsContext": {
"custardui": {
"baseUrl": "/my-base-url"
}
}
}
```

</panel>

<br>

**Adding a CustardUI configuration file**:

After enabling the plugin, create a `custardui.config.json` file in your site's root directory. This tells CustardUI what options and features to expose to your readers.

<box type="tip">

Make sure your `site.json` ignore list does not exclude JSON files, or MarkBind will not copy `custardui.config.json` into the generated site and the plugin will not work.

</box>

Here is a sample configuration with the settings panel enabled:

```json {heading="custardui.config.json"}
Comment thread
Incogdino marked this conversation as resolved.
{
"config": {
"toggles": [
{ "toggleId": "mac", "label": "macOS", "description": "Show macOS instructions" },
{ "toggleId": "win", "label": "Windows", "description": "Show Windows instructions" }
]
},
"settings": {
"enabled": true
}
}
```

With this configuration, readers will see a settings panel they can use to switch between viewing macOS and Windows content. For more information, check out the [CustardUI documentation](https://custardui.js.org/).

</div>
1 change: 1 addition & 0 deletions docs/userGuide/usingPlugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ MarkBind has a set of built-in plugins that can be used immediately without inst
<include src="plugins/web3Form.md" />
<include src="plugins/dataTable.md" />
<include src="plugins/mermaid.md" />
<include src="plugins/custardui.md" />

## Using External Plugins

Expand Down
30 changes: 30 additions & 0 deletions packages/core/src/plugins/custardui.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { PluginContext } from './Plugin.js';

/**
* CustardUI Plugin for MarkBind
* Injects the CustardUI auto-init script into every page.
*/

const getScripts = (pluginContext: PluginContext) => {
const baseUrl = pluginContext?.baseUrl || '/';
return [
// Latest Stable Release
'<script src="https://cdn.jsdelivr.net/npm/@custardui/custardui@latest" '
+ `data-base-url="${baseUrl}"></script>`,
];
};

const tagConfig = {
'cv-toggle': { isCustomElement: true },
'cv-toggle-control': { isCustomElement: true },
'cv-tabgroup': { isCustomElement: true },
'cv-tab': { isCustomElement: true },
'cv-tab-body': { isCustomElement: true },
'cv-tab-header': { isCustomElement: true },
'cv-define-placeholder': { isCustomElement: true },
'cv-placeholder-input': { isCustomElement: true },
'cv-label': { isCustomElement: true },
'cv-insertion': { isCustomElement: true },
};

export { getScripts, tagConfig };
Loading