@atiqisrak/shadcn-weekly-calendar/DEPLOYMENT.md

A beautiful weekly calendar component for shadcn/ui with zoom functionality and event management

# Deployment Guide

This guide will help you deploy the Weekly Calendar component so that users can install it with `npx shadcn add weekly-calendar`.

## Prerequisites

- GitHub account
- NPM account (optional, for NPM publishing)
- Git configured with your credentials

## Deployment Options

### Option 1: GitHub Pages (Free and Easy)

1. **Push to GitHub Repository:**

   ```bash
   git add .
   git commit -m "Initial release of weekly-calendar component"
   git push origin main
   ```

2. **Enable GitHub Pages:**

   - Go to your repository settings
   - Scroll to "Pages" section
   - Set source to "Deploy from a branch"
   - Select "main" branch and "/ (root)" folder
   - Save the settings

3. **Access your registry:**
   Your component will be available at:

   ```
   https://atiqisrak.github.io/shadcn-weekly-calendar/public/weekly-calendar.json
   ```

4. **Users can install with:**
   ```bash
   npx shadcn add https://atiqisrak.github.io/shadcn-weekly-calendar/public/weekly-calendar.json
   ```

### Option 2: NPM Publishing

1. **Login to NPM:**

   ```bash
   npm login
   ```

2. **Build the registry:**

   ```bash
   npm run build
   ```

3. **Publish to NPM:**

   ```bash
   npm publish
   ```

4. **Users can install with:**
   ```bash
   npx shadcn add https://unpkg.com/@atiqisrak/shadcn-weekly-calendar@latest/public/weekly-calendar.json
   ```

### Option 3: Vercel/Netlify (Static Hosting)

1. **Connect your repository to Vercel or Netlify**

2. **Deploy with default settings**

3. **Your component will be available at:**
   ```
   https://your-project.vercel.app/public/weekly-calendar.json
   ```

## Updating the Component

When you make changes to the component:

1. **Update version in package.json:**

   ```json
   {
     "version": "1.0.3"
   }
   ```

2. **Rebuild the registry:**

   ```bash
   npm run build
   ```

3. **Commit and push changes:**

   ```bash
   git add .
   git commit -m "Update component to v1.0.3"
   git push origin main
   ```

4. **For NPM: Republish:**
   ```bash
   npm publish
   ```

## Verification

Test your deployment by trying to install the component in a test project:

```bash
npx create-next-app@latest test-project
cd test-project
npx shadcn@latest init
npx shadcn add https://your-deployment-url/public/weekly-calendar.json
```

## File Structure

After deployment, your registry should be accessible with this structure:

```
/public/
  └── weekly-calendar.json  # Main registry file
```

The registry file contains:

- Component metadata
- Dependencies
- Component source code
- Installation instructions

## Troubleshooting

### CORS Issues

If users encounter CORS issues, ensure your hosting service serves JSON files with proper headers.

### 404 Errors

Make sure the `/public/weekly-calendar.json` path is publicly accessible.

### Component Not Installing

Verify the JSON structure matches the shadcn/ui registry format.

## Usage Example for Users

Once deployed, users can install your component like this:

```bash
# Install the component
npx shadcn add https://your-domain.com/public/weekly-calendar.json

# Use in their React component
import { WeeklyCalendar } from "@/components/ui/weekly-calendar"

function App() {
  return (
    <WeeklyCalendar
      events={[]}
      height="600px"
    />
  )
}
```

## Support

For issues with the component itself, users can file issues on your GitHub repository.