Integrate Mighty in Docusaurus

Here's how to integrate the Mighty Widget into a Docusaurus site:

1. Install the package:

npm install mighty-academy-widget

1. Create src/mighty-wrapper.js:

import React from 'react';
import { MightyWrapper } from 'mighty-academy-widget';
import Root from '@theme/Root';

export default function CustomRoot(props) {
  return (
    <MightyWrapper>
      <Root {...props} />
    </MightyWrapper>
  );
}

1. Use the widget in any component:

import { MightyWidget, MightyPage } from 'mighty-academy-widget';

// For sidebar button:
function MyComponent() {
  return (
    <MightyWidget
      partnerId="YOUR_PARTNER_ID"
      targetUrl="YOUR_TARGET_URL"
      percent="50%"
      theme="dark"
    >
      <button>Open Widget</button>
    </MightyWidget>
  );
}

// For full page:
function LearnPage() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <MightyPage 
        partnerId="YOUR_PARTNER_ID" 
        targetUrl="YOUR_TARGET_URL"
        theme="dark"
      />
    </div>
  );
}