npm package: @mysten-docs/docusaurus-shared
Description: Shared Docusaurus components, plugins, and themes
Latest version: 0.1.1

# Docusaurus Shared Components

A monorepo for developing and maintaining shared Docusaurus components, plugins, and themes that can be used across multiple deployments.

## 📦 Packages

- **[@mysten-docs/docusaurus-components](./packages/components)** - Reusable React components for Docusaurus sites
- **[@mysten-docs/docusaurus-plugins](./packages/plugins)** - Custom Docusaurus plugins
- **[@mysten-docs/docusaurus-themes](./packages/themes)** - Custom Docusaurus themes

## 🚀 Getting Started

### Prerequisites

- Node.js 18+
- pnpm (recommended) or npm

### Installation

```bash
# Clone the repository
git clone https://github.com/MystenLabs/ml-shared-docs.git
cd ml-shared-docs

# Install dependencies
pnpm install

# Build all packages
pnpm run build
```

### Development

```bash
# Start development mode (watches for changes)
pnpm run dev

# Run linting
pnpm run lint

# Run type checking
pnpm run type-check

# Clean all build artifacts
pnpm run clean
```

### Demo Site

A demo site is included to showcase the shared components:

```bash
cd examples/demo-site
pnpm start
```

## 📝 Usage

### Installing Packages

Install the packages from npm:

```bash
pnpm add @mysten-docs/docusaurus-components
pnpm add @mysten-docs/docusaurus-plugins
pnpm add @mysten-docs/docusaurus-themes
```

### Using Components

Components are built with Tailwind CSS for modern styling and include TypeScript support:

```jsx
import { CustomButton, InfoCard } from '@mysten-docs/docusaurus-components';

function MyPage() {
  return (
    <div className="space-y-4">
      <CustomButton 
        variant="primary" 
        size="large"
        className="w-full md:w-auto"
      >
        Click me!
      </CustomButton>
      
      <InfoCard 
        title="Important Note" 
        type="warning"
        icon="⚠️"
      >
        This is an important message with Tailwind styling.
      </InfoCard>
    </div>
  );
}
```

#### Tailwind CSS Integration

All components are built with Tailwind CSS. To use Tailwind classes in your Docusaurus site:

1. Install Tailwind CSS in your Docusaurus project
2. Import the component styles: `import '@mysten-docs/docusaurus-components/dist/styles.css'`
3. Configure your `tailwind.config.js` to include the component paths

### Using Plugins

```js
// docusaurus.config.js
module.exports = {
  plugins: [
    [
      '@mysten-docs/docusaurus-plugins/analytics-plugin',
      {
        trackingId: 'G-XXXXXXXXXX',
        enableInDevelopment: false,
      },
    ],
  ],
};
```

### Using Themes

```js
// docusaurus.config.js
module.exports = {
  themes: [
    [
      '@mysten-docs/docusaurus-themes',
      {
        primaryColor: '#2e8555',
        fontFamily: 'Inter, sans-serif',
      },
    ],
  ],
};
```

## 🔧 Development Workflow

### Adding New Components

1. Create a new component in `packages/components/src/`
2. Export it from `packages/components/src/index.ts`
3. Add documentation and examples
4. Test in the demo site

### Publishing

Packages are automatically published to npm when you create a new tag:

```bash
# Bump version and create tag
pnpm version patch
git push origin main --tags
```

The GitHub Action will automatically build and publish all packages.

## 🏗️ Project Structure

```
.
├── packages/
│   ├── components/          # React components
│   ├── plugins/            # Docusaurus plugins
│   └── themes/             # Docusaurus themes
├── examples/
│   └── demo-site/          # Demo Docusaurus site
├── .github/
│   └── workflows/          # CI/CD workflows
└── package.json            # Root package with workspaces
```

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests and documentation
5. Submit a pull request

## 📄 License

MIT License - see [LICENSE](LICENSE) file for details.