MsGine Documentation

Official documentation for the MsGine Messaging API.

Quick Start

Install Dependencies

pnpm install

Run Development Server

pnpm dev

Visit http://localhost:5173 to view the documentation.

Build for Production

pnpm build

The built files will be in .vitepress/dist.

Preview Production Build

pnpm preview

Project Structure

docs/
├── .vitepress/
│   ├── config.ts              # VitePress configuration
│   └── theme/
│       ├── index.ts           # Custom theme
│       ├── custom.css         # Custom styles
│       └── components/
│           ├── ApiPlayground.vue  # Interactive API playground
│           └── CodeBlock.vue      # Enhanced code blocks
├── sdk/
│   ├── installation.md        # SDK installation guide
│   ├── quick-start.md         # Quick start guide
│   ├── configuration.md       # Configuration options
│   ├── sending-sms.md         # Send SMS guide
│   └── batch-messaging.md     # Batch messaging guide
├── api/
│   └── rest-api.md            # REST API documentation
├── guides/
│   └── best-practices.md      # Best practices
├── index.md                   # Home page
└── package.json

## Features

- **Full-text search** - Built-in search with fuzzy matching
- **Dark mode** - Automatic dark mode support
- **Interactive playground** - Test API calls in the browser
- **Version support** - Multiple API versions
- **Fast** - Built with VitePress for optimal performance
- **Responsive** - Mobile-friendly design

## Development

### Adding New Pages

1. Create a new `.md` file in the appropriate directory
2. Add it to the sidebar in `.vitepress/config.ts`
3. Write content using Markdown and Vue components

Example:

```md
# Page Title

Regular markdown content...

<ApiPlayground
  endpoint="/developers/sms"
  method="POST"
  title="Try it out"
/>

Using Custom Components

The documentation includes custom Vue components:

ApiPlayground

Interactive API testing component:

<ApiPlayground
  endpoint="/developers/sms"
  method="POST"
  title="Send SMS - Try it out"
/>

CodeBlock

Enhanced code block with copy button:

<CodeBlock
  :code="codeString"
  language="typescript"
  title="Example"
/>

Customizing Styles

Edit .vitepress/theme/custom.css to customize colors and styles.

Markdown Extensions

VitePress supports various markdown extensions:

Code Groups

::: code-group

\`\`\`bash [pnpm]
pnpm install @msgine/sdk
\`\`\`

\`\`\`bash [npm]
npm install @msgine/sdk
\`\`\`

:::

Custom Containers

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a danger message
:::

::: info
This is an info message
:::

Deployment

Vercel (Recommended)

1. Push to GitHub
2. Import project in Vercel
3. Set build settings:
   • Build Command: pnpm build
   • Output Directory: .vitepress/dist
   • Install Command: pnpm install
4. Configure custom domain: docs.msgine.net

Netlify

1. Push to GitHub
2. Import project in Netlify
3. Set build settings:
   • Build Command: pnpm build
   • Publish Directory: .vitepress/dist
4. Configure custom domain: docs.msgine.net

GitHub Pages

# Build the docs
pnpm build

# Deploy to gh-pages branch
pnpm deploy

Add this script to package.json:

{
  "scripts": {
    "deploy": "vitepress build && cd .vitepress/dist && git init && git add -A && git commit -m 'deploy' && git push -f git@github.com:msgine/docs.git main:gh-pages"
  }
}

Writing Guidelines

Headings

• Use # for page title (one per page)
• Use ## for main sections
• Use ### for subsections
• Use #### sparingly

Code Examples

• Always include complete, runnable examples
• Use TypeScript for SDK examples
• Show both success and error handling
• Include comments for complex logic

Links

• Use relative links for internal pages: [Link](/sdk/installation)
• Use absolute links for external resources
• Always include descriptive link text

Tone

• Be clear and concise
• Use active voice
• Explain "why" not just "how"
• Include real-world examples

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test locally with pnpm dev
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

• GitHub Issues
• Email Support
• Discord Community