@buley/hexgrid-3d 1.1.0 → 1.1.2

package/site/DEPLOYMENT.md

@@ -0,0 +1,196 @@
+# HexGrid 3D Site - Deployment Guide
+
+This guide covers deploying the HexGrid 3D promotional site to Vercel.
+
+## Prerequisites
+
+- A Vercel account (sign up at [vercel.com](https://vercel.com))
+- Git repository access
+- Node.js 18+ installed locally (for testing)
+
+## Deployment Options
+
+### Option 1: Deploy via Vercel Dashboard (Recommended)
+
+1. **Push to GitHub**
+   ```bash
+   git add .
+   git commit -m "feat(site): add Next.js promotional site"
+   git push origin main
+   ```
+
+2. **Import Project in Vercel**
+   - Go to [vercel.com/new](https://vercel.com/new)
+   - Click "Import Git Repository"
+   - Select your repository
+   - Configure the project:
+     - **Root Directory**: `shared-ui/src/components/Chamber/hexgrid-3d/site`
+     - **Framework Preset**: Next.js (auto-detected)
+     - **Build Command**: `npm run build` (default)
+     - **Output Directory**: `.next` (default)
+     - **Install Command**: `npm install` (default)
+
+3. **Deploy**
+   - Click "Deploy"
+   - Vercel will automatically build and deploy your site
+   - You'll get a URL like `https://hexgrid-3d-site.vercel.app`
+
+### Option 2: Deploy via Vercel CLI
+
+1. **Install Vercel CLI**
+   ```bash
+   npm i -g vercel
+   ```
+
+2. **Login to Vercel**
+   ```bash
+   vercel login
+   ```
+
+3. **Navigate to Site Directory**
+   ```bash
+   cd shared-ui/src/components/Chamber/hexgrid-3d/site
+   ```
+
+4. **Deploy**
+   ```bash
+   vercel
+   ```
+
+   Follow the prompts:
+   - Link to existing project or create new
+   - Confirm settings
+   - Deploy
+
+5. **Production Deployment**
+   ```bash
+   vercel --prod
+   ```
+
+### Option 3: Deploy from Monorepo Root
+
+If deploying from the monorepo root:
+
+1. **Create vercel.json at root** (if needed):
+   ```json
+   {
+     "buildCommand": "cd shared-ui/src/components/Chamber/hexgrid-3d/site && npm install && npm run build",
+     "outputDirectory": "shared-ui/src/components/Chamber/hexgrid-3d/site/.next",
+     "installCommand": "cd shared-ui/src/components/Chamber/hexgrid-3d/site && npm install"
+   }
+   ```
+
+2. **Set Root Directory in Vercel Dashboard**:
+   - Go to Project Settings → General
+   - Set Root Directory to: `shared-ui/src/components/Chamber/hexgrid-3d/site`
+
+## Environment Variables
+
+Currently, no environment variables are required. If you need to add any:
+
+1. Go to Project Settings → Environment Variables
+2. Add variables for Production, Preview, and Development
+3. Redeploy to apply changes
+
+## Custom Domain
+
+To add a custom domain:
+
+1. Go to Project Settings → Domains
+2. Add your domain (e.g., `hexgrid-3d.com`)
+3. Follow DNS configuration instructions
+4. Vercel will automatically provision SSL certificates
+
+## Continuous Deployment
+
+Vercel automatically deploys:
+- **Production**: Deploys from `main` branch
+- **Preview**: Creates preview deployments for pull requests
+
+To configure:
+1. Go to Project Settings → Git
+2. Connect your repository
+3. Set production branch (default: `main`)
+4. Enable preview deployments for PRs
+
+## Build Configuration
+
+The site uses the following build configuration (in `vercel.json`):
+
+```json
+{
+  "framework": "nextjs",
+  "buildCommand": "npm run build",
+  "outputDirectory": ".next",
+  "installCommand": "npm install"
+}
+```
+
+## Troubleshooting
+
+### Build Fails
+
+1. **Check Node.js Version**
+   - Vercel uses Node.js 18.x by default
+   - Update in Project Settings → General → Node.js Version
+
+2. **Check Build Logs**
+   - Go to Deployments → Select failed deployment → View Build Logs
+   - Look for error messages
+
+3. **Test Locally**
+   ```bash
+   cd shared-ui/src/components/Chamber/hexgrid-3d/site
+   npm install
+   npm run build
+   ```
+
+### Dependencies Not Found
+
+If dependencies from parent directory are needed:
+
+1. **Option 1**: Copy dependencies to `site/node_modules`
+2. **Option 2**: Use monorepo root deployment (Option 3 above)
+3. **Option 3**: Install dependencies in build command
+
+### 404 Errors
+
+- Ensure all routes have corresponding `page.tsx` files
+- Check that `next.config.js` is properly configured
+- Verify `outputDirectory` in `vercel.json` matches build output
+
+## Performance Optimization
+
+Vercel automatically optimizes:
+- Image optimization via Next.js Image component
+- Automatic code splitting
+- Edge caching
+- CDN distribution
+
+## Analytics
+
+To add Vercel Analytics:
+
+1. Go to Project Settings → Analytics
+2. Enable Vercel Analytics
+3. Add to your app (optional, for custom tracking)
+
+## Monitoring
+
+- **Deployments**: View all deployments in Vercel dashboard
+- **Logs**: Access function logs in Project → Logs
+- **Metrics**: View performance metrics in Project → Analytics
+
+## Rollback
+
+To rollback to a previous deployment:
+
+1. Go to Deployments
+2. Find the deployment you want to restore
+3. Click "..." menu → "Promote to Production"
+
+## Support
+
+- [Vercel Documentation](https://vercel.com/docs)
+- [Next.js Deployment](https://nextjs.org/docs/deployment)
+- [Vercel Support](https://vercel.com/support)

package/site/INDEX.md

@@ -0,0 +1,127 @@
+# HexGrid 3D Promotional Site
+
+Welcome to the HexGrid 3D promotional site! This Next.js application showcases the HexGrid 3D component with documentation, examples, and deployment instructions.
+
+## 📚 Documentation Index
+
+- **[README.md](./README.md)** - Project overview and development guide
+- **[QUICK_START.md](./QUICK_START.md)** - Get started in 5 minutes
+- **[DEPLOYMENT.md](./DEPLOYMENT.md)** - Complete Vercel deployment guide
+- **[SITE_SUMMARY.md](./SITE_SUMMARY.md)** - What was built and how it works
+
+## 🚀 Quick Links
+
+### For Developers
+- [Quick Start Guide](./QUICK_START.md) - Start developing locally
+- [Deployment Guide](./DEPLOYMENT.md) - Deploy to Vercel
+- [Site Summary](./SITE_SUMMARY.md) - Understand the structure
+
+### For Users
+- [Homepage](./src/app/page.tsx) - Landing page
+- [Documentation](./src/app/docs/page.tsx) - API docs
+- [Examples](./src/app/examples/page.tsx) - Code examples
+
+## 🎯 What's Included
+
+### Pages
+- ✅ **Homepage** - Feature showcase and quick start
+- ✅ **Documentation** - Complete API reference
+- ✅ **Examples** - Code examples and use cases
+
+### Configuration
+- ✅ **Next.js 16** - Latest framework
+- ✅ **TypeScript** - Full type safety
+- ✅ **Vercel Ready** - Pre-configured deployment
+- ✅ **SEO Optimized** - Metadata and Open Graph
+
+### Documentation
+- ✅ **README.md** - Project documentation
+- ✅ **DEPLOYMENT.md** - Deployment instructions
+- ✅ **QUICK_START.md** - Quick start guide
+- ✅ **SITE_SUMMARY.md** - Technical summary
+
+## 📦 Project Structure
+
+```
+site/
+├── src/app/              # Next.js App Router pages
+│   ├── layout.tsx        # Root layout
+│   ├── page.tsx          # Homepage
+│   ├── docs/             # Documentation
+│   └── examples/         # Examples
+├── next.config.js        # Next.js config
+├── vercel.json          # Vercel config
+└── package.json         # Dependencies
+```
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Start production server
+npm start
+```
+
+## 🚢 Deployment
+
+### Option 1: Vercel Dashboard (Recommended)
+1. Push to GitHub
+2. Import in Vercel dashboard
+3. Set root: `shared-ui/src/components/Chamber/hexgrid-3d/site`
+4. Deploy
+
+### Option 2: Vercel CLI
+```bash
+npm i -g vercel
+cd shared-ui/src/components/Chamber/hexgrid-3d/site
+vercel
+```
+
+See [DEPLOYMENT.md](./DEPLOYMENT.md) for detailed instructions.
+
+## 📝 Next Steps
+
+1. **Review the site locally**
+   ```bash
+   cd shared-ui/src/components/Chamber/hexgrid-3d/site
+   npm install
+   npm run dev
+   ```
+
+2. **Customize content**
+   - Edit `src/app/page.tsx` for homepage
+   - Update `src/app/docs/page.tsx` for docs
+   - Modify `src/app/globals.css` for styling
+
+3. **Deploy to Vercel**
+   - Follow [DEPLOYMENT.md](./DEPLOYMENT.md)
+   - Get your live URL
+
+4. **Add features** (optional)
+   - Interactive demo
+   - Live code editor
+   - More examples
+   - Blog section
+
+## 🔗 Related Links
+
+- **Component Repository**: [../README.md](../README.md)
+- **GitHub**: https://github.com/buley/hexgrid-3d
+- **Vercel Docs**: https://vercel.com/docs
+- **Next.js Docs**: https://nextjs.org/docs
+
+## 📄 License
+
+Personal Use Only - See LICENSE file in parent directory.
+
+---
+
+**Ready to deploy?** Start with [QUICK_START.md](./QUICK_START.md) or [DEPLOYMENT.md](./DEPLOYMENT.md)

package/site/QUICK_START.md

@@ -0,0 +1,86 @@
+# Quick Start Guide
+
+Get the HexGrid 3D promotional site up and running in minutes.
+
+## Local Development
+
+1. **Navigate to site directory**
+   ```bash
+   cd shared-ui/src/components/Chamber/hexgrid-3d/site
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+3. **Run development server**
+   ```bash
+   npm run dev
+   ```
+
+4. **Open browser**
+   - Visit [http://localhost:3000](http://localhost:3000)
+
+## Build for Production
+
+```bash
+npm run build
+npm start
+```
+
+## Deploy to Vercel
+
+### Quick Deploy (CLI)
+
+```bash
+# Install Vercel CLI (if not already installed)
+npm i -g vercel
+
+# Navigate to site directory
+cd shared-ui/src/components/Chamber/hexgrid-3d/site
+
+# Deploy
+vercel
+```
+
+### Deploy via Dashboard
+
+1. Push code to GitHub
+2. Go to [vercel.com/new](https://vercel.com/new)
+3. Import repository
+4. Set root directory: `shared-ui/src/components/Chamber/hexgrid-3d/site`
+5. Click Deploy
+
+See [DEPLOYMENT.md](./DEPLOYMENT.md) for detailed instructions.
+
+## Project Structure
+
+```
+site/
+├── src/
+│   └── app/
+│       ├── layout.tsx      # Root layout with metadata
+│       ├── page.tsx        # Homepage
+│       ├── docs/
+│       │   └── page.tsx     # Documentation
+│       └── examples/
+│           └── page.tsx     # Code examples
+├── next.config.js          # Next.js config
+├── vercel.json            # Vercel deployment config
+└── package.json           # Dependencies
+```
+
+## Customization
+
+- **Homepage**: Edit `src/app/page.tsx`
+- **Documentation**: Edit `src/app/docs/page.tsx`
+- **Examples**: Edit `src/app/examples/page.tsx`
+- **Styling**: Edit `src/app/globals.css`
+- **Metadata**: Edit `src/app/layout.tsx`
+
+## Next Steps
+
+- Read [README.md](./README.md) for full documentation
+- See [DEPLOYMENT.md](./DEPLOYMENT.md) for deployment details
+- Check the main [README.md](../README.md) for HexGrid 3D component docs

package/site/README.md

@@ -0,0 +1,85 @@
+# HexGrid 3D - Promotional Site
+
+This is a Next.js mini site to promote and document the HexGrid 3D project.
+
+## Features
+
+- **Landing Page** - Showcase the component with features and quick start
+- **Documentation** - Complete API documentation and usage guide
+- **Examples** - Code examples and use cases
+- **Vercel Ready** - Configured for easy deployment to Vercel
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Start production server
+npm start
+```
+
+## Deployment to Vercel
+
+### Option 1: Vercel CLI
+
+```bash
+# Install Vercel CLI
+npm i -g vercel
+
+# Deploy
+vercel
+```
+
+### Option 2: GitHub Integration
+
+1. Push this repository to GitHub
+2. Import the project in Vercel dashboard
+3. Set the root directory to `shared-ui/src/components/Chamber/hexgrid-3d/site`
+4. Configure build settings:
+   - Build Command: `cd ../.. && npm install && cd site && npm install && npm run build`
+   - Output Directory: `.next`
+   - Install Command: `cd ../.. && npm install && cd site && npm install`
+
+### Option 3: Using vercel.json
+
+The `vercel.json` file is already configured. Simply:
+
+1. Connect your GitHub repository to Vercel
+2. Vercel will automatically detect the Next.js project
+3. The build configuration in `vercel.json` will be used
+
+## Project Structure
+
+```
+site/
+├── src/
+│   └── app/
+│       ├── layout.tsx      # Root layout
+│       ├── page.tsx        # Homepage
+│       ├── docs/
+│       │   └── page.tsx     # Documentation page
+│       └── examples/
+│           └── page.tsx     # Examples page
+├── next.config.js          # Next.js configuration
+├── tsconfig.json          # TypeScript configuration
+├── vercel.json            # Vercel deployment configuration
+└── package.json           # Dependencies
+```
+
+## Customization
+
+- Update `src/app/page.tsx` to customize the homepage
+- Modify `src/app/docs/page.tsx` for documentation changes
+- Edit `src/app/globals.css` for styling changes
+- Update metadata in `src/app/layout.tsx` for SEO
+
+## License
+
+Personal Use Only - See LICENSE file in parent directory for full terms.

package/site/SITE_SUMMARY.md

@@ -0,0 +1,180 @@
+# HexGrid 3D Promotional Site - Summary
+
+## Overview
+
+A Next.js 16 mini site built to promote and document the HexGrid 3D project. The site features a modern, dark-themed design showcasing the component's capabilities.
+
+## What Was Built
+
+### 1. Next.js Application Structure
+- **Framework**: Next.js 16 with App Router
+- **TypeScript**: Fully typed with strict mode
+- **Styling**: Custom CSS with dark theme
+- **SEO**: Optimized metadata and Open Graph tags
+
+### 2. Pages Created
+
+#### Homepage (`/`)
+- Hero section with project title and description
+- Feature showcase with 6 key features
+- Quick start code examples
+- Call-to-action buttons
+- Footer with links
+
+#### Documentation (`/docs`)
+- Installation instructions
+- Basic usage examples
+- Complete props table
+- Camera controls guide
+- Performance tips
+- Links to GitHub repository
+
+#### Examples (`/examples`)
+- Basic implementation example
+- Advanced usage with controls
+- Custom theming example
+- Links to more examples
+
+### 3. Configuration Files
+
+- **`next.config.js`**: Next.js configuration with standalone output
+- **`tsconfig.json`**: TypeScript configuration with path aliases
+- **`vercel.json`**: Vercel deployment configuration
+- **`package.json`**: Dependencies and scripts
+- **`.eslintrc.json`**: ESLint configuration
+- **`.gitignore`**: Git ignore rules
+
+### 4. Documentation
+
+- **`README.md`**: Project overview and development guide
+- **`DEPLOYMENT.md`**: Comprehensive deployment guide for Vercel
+- **`QUICK_START.md`**: Quick start guide for developers
+- **`SITE_SUMMARY.md`**: This file
+
+## Features
+
+### Design
+- Dark theme with purple gradient accents
+- Responsive design for mobile and desktop
+- Modern UI with smooth transitions
+- Accessible color contrast
+
+### Content
+- Clear feature descriptions
+- Code examples with syntax highlighting
+- Complete API documentation
+- Usage examples for different scenarios
+
+### Technical
+- TypeScript for type safety
+- Next.js App Router for modern routing
+- Optimized for performance
+- SEO-friendly metadata
+
+## File Structure
+
+```
+site/
+├── src/
+│   └── app/
+│       ├── layout.tsx          # Root layout with metadata
+│       ├── page.tsx            # Homepage
+│       ├── globals.css         # Global styles
+│       ├── docs/
+│       │   └── page.tsx        # Documentation page
+│       └── examples/
+│           └── page.tsx        # Examples page
+├── next.config.js              # Next.js configuration
+├── tsconfig.json               # TypeScript configuration
+├── vercel.json                 # Vercel deployment config
+├── package.json                # Dependencies
+├── .eslintrc.json              # ESLint config
+├── .gitignore                  # Git ignore
+├── README.md                    # Project README
+├── DEPLOYMENT.md               # Deployment guide
+├── QUICK_START.md              # Quick start guide
+└── SITE_SUMMARY.md             # This file
+```
+
+## Deployment
+
+The site is configured for easy deployment to Vercel with three options:
+
+1. **Vercel Dashboard** (Recommended)
+   - Import from GitHub
+   - Set root directory
+   - Auto-deploy
+
+2. **Vercel CLI**
+   - Install CLI
+   - Run `vercel` command
+   - Follow prompts
+
+3. **Monorepo Root**
+   - Configure from root
+   - Set root directory in Vercel
+
+See [DEPLOYMENT.md](./DEPLOYMENT.md) for detailed instructions.
+
+## Development
+
+### Local Development
+```bash
+cd shared-ui/src/components/Chamber/hexgrid-3d/site
+npm install
+npm run dev
+```
+
+### Build
+```bash
+npm run build
+npm start
+```
+
+### Lint
+```bash
+npm run lint
+```
+
+## Customization
+
+All pages can be easily customized:
+
+- **Homepage**: Edit `src/app/page.tsx`
+- **Documentation**: Edit `src/app/docs/page.tsx`
+- **Examples**: Edit `src/app/examples/page.tsx`
+- **Styling**: Edit `src/app/globals.css`
+- **Metadata**: Edit `src/app/layout.tsx`
+
+## Next Steps
+
+1. **Deploy to Vercel**
+   - Follow [DEPLOYMENT.md](./DEPLOYMENT.md)
+   - Get your live URL
+
+2. **Customize Content**
+   - Update homepage with your branding
+   - Add more examples
+   - Enhance documentation
+
+3. **Add Features**
+   - Interactive demo component
+   - Live code editor
+   - More examples
+   - Blog section
+
+4. **Optimize**
+   - Add analytics
+   - Optimize images
+   - Add performance monitoring
+
+## Support
+
+- **Documentation**: See [README.md](./README.md)
+- **Deployment**: See [DEPLOYMENT.md](./DEPLOYMENT.md)
+- **Quick Start**: See [QUICK_START.md](./QUICK_START.md)
+- **Component Docs**: See [../README.md](../README.md)
+
+## License
+
+Personal Use Only - See LICENSE file in parent directory.

package/site/next.config.js

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  reactStrictMode: true,
+  swcMinify: true,
+  images: {
+    domains: ['images.unsplash.com', 'via.placeholder.com'],
+  },
+  transpilePackages: [],
+};
+
+module.exports = nextConfig;

package/site/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "hexgrid-3d-site",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^16.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": "^0.169.0",
+    "@types/three": "^0.169.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "typescript": "^5.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^16.1.1"
+  }
+}