slidev-theme-hatch-corporate/docs/PUBLISHING.md

A comprehensive Slidev theme for Hatch corporate presentations with advanced layouts and components

# Publishing Hatch Corporate Theme to NPM

This guide explains how to publish the enhanced Hatch Corporate theme to NPM for global availability.

## 📋 Prerequisites

1. **NPM Account**: Ensure you have an NPM account with publishing rights
2. **Repository**: Code should be in a Git repository
3. **Testing**: Theme has been thoroughly tested

## 🚀 Publishing Steps

### 1. Prepare Package
```bash
# Navigate to theme directory
cd theme/

# Clean install dependencies
rm -rf node_modules package-lock.json
npm install

# Run tests and linting
npm run lint
npm run build
```

### 2. Version Management
```bash
# Update version (choose one)
npm version patch    # 2.0.1 (bug fixes)
npm version minor    # 2.1.0 (new features)
npm version major    # 3.0.0 (breaking changes)
```

### 3. Build and Test
```bash
# Test the theme locally
npm run dev

# Test export functionality
npm run export

# Verify all layouts work correctly
```

### 4. Publish to NPM
```bash
# Login to NPM (if not already logged in)
npm login

# Publish package
npm publish

# For first publish or major changes
npm publish --access public
```

### 5. Verify Publication
```bash
# Check package page
npm view slidev-theme-hatch-corporate

# Test installation in new project
mkdir test-install
cd test-install
npm init -y
npm install slidev-theme-hatch-corporate
```

## 📦 Package Structure

The published package includes:
```
slidev-theme-hatch-corporate/
├── layouts/
│   ├── cover.vue
│   ├── default.vue
│   ├── qa.vue
│   ├── metrics.vue
│   ├── timeline.vue
│   └── closing.vue
├── components/
│   ├── HatchCard.vue
│   ├── HatchButton.vue
│   └── HatchBadge.vue
├── templates/
│   ├── qa-slide.md
│   └── metrics-slide.md
├── docs/
│   └── README.md
├── package.json
├── index.ts
├── config.ts
└── style.css
```

## 🔧 Usage After Publication

### Installation
```bash
npm install slidev-theme-hatch-corporate
```

### Basic Usage
```yaml
---

theme: hatch-corporate
---

```

### Advanced Configuration
```yaml
---

theme: hatch-corporate
contact:
  email: "team@hatch.com"
  docs: "hatch.com/docs"
branding:
  hideDate: true
  showAnniversary: true
---

```

## 🔄 Update Process

### For Minor Updates
1. Make changes
2. Update version: `npm version patch`
3. Test thoroughly
4. Publish: `npm publish`

### For Major Updates
1. Update documentation
2. Add migration guide
3. Update version: `npm version major`
4. Create release notes
5. Publish with announcement

## 📈 Monitoring

### Package Statistics
- Monitor downloads: https://www.npmjs.com/package/slidev-theme-hatch-corporate
- Track usage and feedback
- Monitor GitHub issues

### Maintenance
- Regular dependency updates
- Security patches
- Feature requests from community
- Bug fixes

## 📚 Documentation Hosting

### GitHub Pages
```bash
# Create docs branch
git checkout -b gh-pages

# Build documentation
npm run docs:build

# Deploy to GitHub Pages
git add docs/
git commit -m "Update documentation"
git push origin gh-pages
```

### Access Documentation
- Main docs: https://hatch.github.io/slidev-theme-hatch-corporate
- NPM page: https://www.npmjs.com/package/slidev-theme-hatch-corporate

## 🤝 Community

### Contribution Guidelines
1. Fork repository
2. Create feature branch
3. Follow coding standards
4. Add tests for new features
5. Update documentation
6. Submit pull request

### Release Notes Template
```markdown
## v2.0.0 - Enhanced Theme

### ✨ New Features
- Q&A layout with interactive cards
- Metrics dashboard layout
- Timeline visualization layout
- Reusable component library
- TypeScript configuration system

### 🔧 Improvements
- Better responsive design
- Enhanced animations
- Improved documentation

### 🐛 Bug Fixes
- Fixed header date display
- Corrected slide overflow issues

### 📝 Documentation
- Complete usage guide
- Component documentation
- Migration guide
```

## 🎯 Best Practices

1. **Semantic Versioning**: Follow semver for version numbers
2. **Comprehensive Testing**: Test all layouts and components
3. **Documentation**: Keep docs updated with every release
4. **Backward Compatibility**: Maintain compatibility when possible
5. **Community Feedback**: Respond to issues and feature requests