📚 Uptime Watcher Documentation Site

📖 Official documentation website for Uptime Watcher

Built with Docusaurus - Modern static website generator for technical documentation

🎯 About This Site

This is the backup documentation repository for the Uptime Watcher project. The documentation is automatically generated from the main repository and deployed to GitHub Pages at:

🌐 Live site: nick2bad4u.github.io/Uptime-Watcher

📂 Repository Structure

This documentation site is part of the main Uptime Watcher project and serves as:

• 📚 User Documentation: Installation guides, feature documentation, and tutorials
• 🔧 Developer Documentation: Architecture guides, API references, and contribution guidelines
• 📊 Project Resources: Changelogs, release notes, and project roadmaps
• 🔄 Backup Repository: Redundant storage for critical documentation assets

🚀 Quick Start

Prerequisites

• Node.js: 24.8+ (required)
• npm: 11.6.4+ (included with Node.js)
• Git: Latest version

Development Setup

# Navigate to the docusaurus directory
cd docs/docusaurus

# Install dependencies
npm install
# or
yarn install

# Start local development server
npm start
# or
yarn start

The development server will start at http://localhost:3000 with hot reload enabled.

🛠️ Available Commands

Development

# Start development server with hot reload
npm start
yarn start

# Build for production
npm run build
yarn build

# Serve production build locally
npm run serve
yarn serve

# Clear cache and build artifacts
npm run clear
yarn clear

Deployment

# Deploy to GitHub Pages (SSH)
USE_SSH=true npm run deploy
USE_SSH=true yarn deploy

# Deploy to GitHub Pages (HTTPS)
GIT_USER=<Your GitHub username> npm run deploy
GIT_USER=<Your GitHub username> yarn deploy

Quality & Maintenance

# Type checking
npm run typecheck
yarn typecheck

# Lint documentation files
npm run lint
yarn lint

# Format code
npm run format
yarn format

📁 Site Architecture

docs/docusaurus/
├── blog/                   # Blog posts and announcements
├── docs/                   # Main documentation content
│   ├── guides/            # User guides and tutorials
│   ├── api/               # API documentation
│   ├── architecture/      # Technical architecture docs
│   └── testing/          # Testing documentation
├── src/                   # Custom React components
│   ├── components/        # Reusable UI components
│   ├── css/              # Global styles
│   └── pages/            # Custom pages
├── static/               # Static assets (images, files)
├── docusaurus.config.ts  # Docusaurus configuration
├── sidebars.ts           # Navigation sidebars
└── package.json          # Dependencies and scripts

🎨 Customization

Theming

The site uses a custom theme based on Docusaurus's default theme with:

• 🎯 Brand Colors: Matching Uptime Watcher's visual identity
• 📱 Responsive Design: Optimized for all device sizes
• 🌙 Dark Mode: Full dark mode support
• ⚡ Performance: Optimized build with code splitting

Content Management

Documentation is organized using:

• 📄 Markdown Files: All content written in MDX (Markdown + JSX)
• 🗂️ Frontmatter: Metadata for SEO and navigation
• 🔗 Auto-Generated: Sidebars and navigation from folder structure
• 🏷️ Tagging System: Content categorization and search

🔧 Configuration

Key configuration files:

• docusaurus.config.ts: Main site configuration, plugins, and theme settings
• sidebars.ts: Navigation structure and sidebar configuration
• package.json: Dependencies, scripts, and project metadata
• tsconfig.json: TypeScript configuration for type safety

📦 Build Process

The site build process:

1. 📝 Content Processing: Markdown files are processed and converted to React components
2. ⚡ Bundling: Webpack bundles all assets with optimization
3. 🗂️ Static Generation: Pre-rendered HTML for fast loading
4. 🚀 Deployment: Automated deployment to GitHub Pages via GitHub Actions

Build Artifacts

build/                     # Production build output
├── index.html            # Homepage
├── docs/                 # Documentation pages
├── blog/                 # Blog pages
├── assets/               # Optimized assets
└── sitemap.xml          # SEO sitemap

🚀 Deployment

Automated Deployment

The site automatically deploys to GitHub Pages when:

• Changes are pushed to the main branch
• Documentation files are updated
• GitHub Actions workflow completes successfully

Manual Deployment

For manual deployments:

# Using SSH (recommended for contributors)
USE_SSH=true yarn deploy

# Using HTTPS (requires GitHub token)
GIT_USER=<username> GITHUB_TOKEN=<token> yarn deploy

📊 Features

Built-in Features

• 🔍 Search: Full-text search across all documentation
• 📱 Mobile Responsive: Optimized mobile experience
• 🌙 Dark Mode: Toggle between light and dark themes
• 📦 PWA: Installable app experience + offline mode (via @docusaurus/plugin-pwa)
• 🔗 Cross-References: Internal linking between docs
• 📈 Analytics: Built-in analytics tracking
• 🏷️ Versioning: Documentation versioning support

Custom Features

• 📊 Interactive Demos: Embedded interactive examples
• 🎯 Code Highlighting: Syntax highlighting for multiple languages
• 📋 Copy-to-Clipboard: One-click code copying
• 🔄 Live Updates: Real-time content updates

🤝 Contributing

Content Contributions

To contribute to the documentation:

1. 📝 Edit Content: Modify markdown files in docs/ or blog/
2. 🧪 Test Locally: Run npm start to preview changes
3. ✅ Verify Build: Run npm run build to ensure no errors
4. 📤 Submit PR: Create a pull request with your changes

Technical Contributions

For technical improvements:

1. 🔧 Component Development: Create reusable React components in src/components/
2. 🎨 Styling: Update global styles in src/css/
3. ⚙️ Configuration: Modify site configuration in docusaurus.config.ts
4. 🧪 Testing: Add tests for new functionality

🆘 Troubleshooting

Common Issues

PWA / Service Worker Issues

# Enable verbose PWA debug logs during build
set DOCUSAURUS_PWA_DEBUG=true
npm run build

Build Failures

# Clear cache and rebuild
npm run clear
npm install
npm run build

Deployment Issues

# Verify GitHub permissions
# Check GitHub Pages settings
# Review GitHub Actions logs

Local Development Issues

# Check Node.js version (24.8+ required)
node --version

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

📞 Support

Need help with the documentation site?

• 📖 Docusaurus Documentation
• 🐛 Report Issues
• 💬 GitHub Discussions
• 📧 Contact Maintainer

---

📄 License

This documentation site is part of the Uptime Watcher project and is released under the Unlicense - Public Domain.

---

📚 Documentation powered by Docusaurus

Last updated: November 2025