@bonadocs/widget

Bonadocs widget is a simple widget that can be used to make your smart contract documentation interactive.

Installation

npm install @bonadocs/widget

Usage

Configuring the widget

The widget relies on IPFS for hosting configuration data to guarantee immutability of the configuration for trustlessness and for the safety of developers interacting with the widget.

To generate a new widget configuration, you can use our editor at https://bonadocs.com or the CLI tool https://github.com/bonadocs/cli. Both options will generate a configuration file on IPFS and provide the IPFS URI for the configuration.

React Apps (like Docusaurus)

import { BonadocsWidget } from '@bonadocs/widget';

// Add the widget to the documentation like this:
<BonadocsWidget widgetConfigUri="ipfs://cid-for-your-widget-configuration" />

Other JS frameworks (like Vue, Angular, etc)

Register the widget as a custom element by importing the register-element module like this:

import '@bonadocs/widget/register-element';

This only needs to be done once in your app. Be mindful of where you run it as it must be executed in the browser environment. Once the element is registered, you can add the widget to the documentation like this:

<bonadocs-widget widget-config-uri="ipfs://cid-for-your-widget-configuration"></bonadocs-widget>

Plain HTML and other JS frameworks

Add a script tag to your HTML file. You can use the jsDelivr CDN to get the script as shown below. This works for all modern JS frameworks and plain HTML.

<script src="https://cdn.jsdelivr.net/npm/@bonadocs/widget@1"></script>

Then add the widget to the documentation like this:

<bonadocs-widget widget-config-uri="ipfs://cid-for-your-widget-configuration"></bonadocs-widget>