Files
portfolio/push-to-dev.sh
denshooter 4cd3f60c98 feat: Fix hydration errors, navbar overlap, and add AI image generation system
## 🎨 UI/UX Fixes

### Fixed React Hydration Errors
- ActivityFeed: Standardized button styling (gradient → solid)
- ActivityFeed: Unified icon sizes and spacing for SSR/CSR consistency
- ActivityFeed: Added timestamps to chat messages for stable React keys
- About: Fixed duplicate keys in tech stack items (added unique key combinations)
- Projects: Fixed duplicate keys in project tags (combined projectId + tag + index)

### Fixed Layout Issues
- Added spacer after Header component (h-24 md:h-32) to prevent navbar overlap
- Hero section now properly visible below fixed navbar

## 🔧 Backend Improvements

### Database Schema
- Added ActivityStatus model for real-time activity tracking
- Supports: coding activity, music playing, watching, gaming, status/mood
- Single-row design (id=1) with auto-updating timestamps

### API Enhancements
- Fixed n8n status endpoint to handle missing table gracefully
- Added TypeScript interfaces (removed ESLint `any` warnings)
- New API: POST /api/n8n/generate-image for AI image generation
- New API: GET /api/n8n/generate-image?projectId=X for status check

## 🔐 Security & Auth

### Middleware Updates
- Removed premature auth redirect for /manage and /editor routes
- Pages now handle their own authentication (show login forms)
- Security headers still applied to all routes

## 🤖 New Feature: AI Image Generation System

### Complete automated project cover image generation using local Stable Diffusion

**Core Components:**
- Admin UI component (AIImageGenerator.tsx) with preview, generate, and regenerate
- n8n workflow integration for automation
- Context-aware prompt generation based on project metadata
- Support for 10+ project categories with optimized prompts

**Documentation (6 new files):**
- README.md - System overview and features
- SETUP.md - Detailed installation guide (486 lines)
- QUICKSTART.md - 15-minute quick start
- PROMPT_TEMPLATES.md - Category-specific templates (612 lines)
- ENVIRONMENT.md - Environment variables reference
- n8n-workflow-ai-image-generator.json - Ready-to-import workflow

**Database Migration:**
- SQL script: create_activity_status.sql
- Auto-setup script: quick-fix.sh
- Migration guide: prisma/migrations/README.md

**Key Features:**
 Automatic generation on project creation
 Manual regeneration via admin UI
 Category-specific prompts (web, mobile, devops, ai, game, etc.)
 Local Stable Diffusion (no API costs, privacy-first)
 n8n workflow orchestration
 Optimized for web (1024x768)

## 📝 Documentation

- CHANGELOG_DEV.md - Complete changelog with migration guide
- PRE_PUSH_CHECKLIST.md - Pre-push verification checklist
- Comprehensive AI image generation docs

## 🐛 Bug Fixes

1. Fixed "Hydration failed" errors in ActivityFeed
2. Fixed "two children with same key" warnings
3. Fixed navbar overlapping hero section
4. Fixed "relation activity_status does not exist" errors
5. Fixed /manage redirect loop (was going to home page)
6. Fixed TypeScript ESLint errors and warnings
7. Fixed duplicate transition prop in Hero component

## ⚠️ Breaking Changes

None - All changes are backward compatible

## 🔄 Migration Required

Database migration needed for new ActivityStatus table:
```bash
./prisma/migrations/quick-fix.sh
# OR
psql -d portfolio -f prisma/migrations/create_activity_status.sql
```

## 📦 Files Changed

**Modified (7):**
- app/page.tsx
- app/components/About.tsx
- app/components/Projects.tsx
- app/components/ActivityFeed.tsx
- app/components/Hero.tsx
- app/api/n8n/status/route.ts
- middleware.ts
- prisma/schema.prisma

**Created (14):**
- app/api/n8n/generate-image/route.ts
- app/components/admin/AIImageGenerator.tsx
- docs/ai-image-generation/* (6 files)
- prisma/migrations/* (3 files)
- CHANGELOG_DEV.md
- PRE_PUSH_CHECKLIST.md
- COMMIT_MESSAGE.txt

##  Testing

- [x] Build successful: npm run build
- [x] Linting passed: npm run lint (0 errors, 8 warnings)
- [x] No hydration errors in console
- [x] No duplicate key warnings
- [x] /manage accessible (shows login form)
- [x] API endpoints responding correctly
- [x] Navbar no longer overlaps content

## 🚀 Next Steps

1. Test AI image generation with Stable Diffusion setup
2. Test n8n workflow integration
3. Create demo screenshots for new features
4. Update main README.md after merge

---
Co-authored-by: AI Assistant (Claude Sonnet 4.5)
2026-01-07 14:38:57 +01:00

186 lines
6.3 KiB
Bash
Executable File

#!/bin/bash
# Push to Dev Branch - Automated Script
# This script performs final checks and pushes changes to the dev branch
set -e
# Colors for output
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
NC='\033[0m' # No Color
echo -e "${BLUE}╔════════════════════════════════════════════════════════════╗${NC}"
echo -e "${BLUE}║ Portfolio - Push to Dev Branch ║${NC}"
echo -e "${BLUE}╚════════════════════════════════════════════════════════════╝${NC}"
echo ""
# Check if we're on dev branch
CURRENT_BRANCH=$(git branch --show-current)
if [ "$CURRENT_BRANCH" != "dev" ]; then
echo -e "${YELLOW}⚠️ Warning: You're on branch '${CURRENT_BRANCH}', not 'dev'${NC}"
read -p "Do you want to switch to dev branch? (y/n) " -n 1 -r
echo
if [[ $REPLY =~ ^[Yy]$ ]]; then
git checkout dev
echo -e "${GREEN}✓ Switched to dev branch${NC}"
else
echo -e "${RED}✗ Aborted${NC}"
exit 1
fi
fi
echo -e "${BLUE}📋 Running Pre-Push Checks...${NC}"
echo ""
# Check 1: Build Test
echo -e "${YELLOW}[1/5] Building project...${NC}"
if npm run build > /dev/null 2>&1; then
echo -e "${GREEN}✓ Build successful${NC}"
else
echo -e "${RED}✗ Build failed${NC}"
echo "Run 'npm run build' to see errors"
exit 1
fi
# Check 2: Lint Test
echo -e "${YELLOW}[2/5] Running linter...${NC}"
LINT_OUTPUT=$(npm run lint 2>&1)
ERROR_COUNT=$(echo "$LINT_OUTPUT" | grep -oP '\d+(?= error)' || echo "0")
if [ "$ERROR_COUNT" -eq 0 ]; then
echo -e "${GREEN}✓ Lint passed (0 errors)${NC}"
else
echo -e "${RED}✗ Lint failed ($ERROR_COUNT errors)${NC}"
echo "Run 'npm run lint' to see errors"
exit 1
fi
# Check 3: Check for uncommitted changes
echo -e "${YELLOW}[3/5] Checking git status...${NC}"
if [ -n "$(git status --porcelain)" ]; then
echo -e "${GREEN}✓ Found uncommitted changes${NC}"
echo ""
echo "Modified files:"
git status --short
echo ""
else
echo -e "${YELLOW}⚠️ No uncommitted changes found${NC}"
read -p "Push anyway? (y/n) " -n 1 -r
echo
if [[ ! $REPLY =~ ^[Yy]$ ]]; then
echo -e "${RED}✗ Aborted${NC}"
exit 1
fi
fi
# Check 4: Verify critical files exist
echo -e "${YELLOW}[4/5] Verifying critical files...${NC}"
REQUIRED_FILES=(
"CHANGELOG_DEV.md"
"AFTER_PUSH_SETUP.md"
"prisma/migrations/create_activity_status.sql"
"docs/ai-image-generation/README.md"
)
MISSING=0
for file in "${REQUIRED_FILES[@]}"; do
if [ ! -f "$file" ]; then
echo -e "${RED}✗ Missing: $file${NC}"
MISSING=$((MISSING + 1))
fi
done
if [ $MISSING -eq 0 ]; then
echo -e "${GREEN}✓ All critical files present${NC}"
else
echo -e "${RED}✗ Missing $MISSING critical file(s)${NC}"
exit 1
fi
# Check 5: Check for .env.local in staging
echo -e "${YELLOW}[5/5] Checking for sensitive files...${NC}"
if git ls-files --error-unmatch .env.local > /dev/null 2>&1; then
echo -e "${RED}✗ DANGER: .env.local is staged for commit!${NC}"
echo "Run: git reset HEAD .env.local"
exit 1
else
echo -e "${GREEN}✓ No sensitive files staged${NC}"
fi
echo ""
echo -e "${GREEN}╔════════════════════════════════════════════════════════════╗${NC}"
echo -e "${GREEN}║ All Pre-Push Checks Passed! ✓ ║${NC}"
echo -e "${GREEN}╚════════════════════════════════════════════════════════════╝${NC}"
echo ""
# Show what will be committed
echo -e "${BLUE}📦 Changes to be committed:${NC}"
echo ""
git status --short
echo ""
# Ask for confirmation
echo -e "${YELLOW}Ready to commit and push to dev branch?${NC}"
read -p "Continue? (y/n) " -n 1 -r
echo
if [[ ! $REPLY =~ ^[Yy]$ ]]; then
echo -e "${RED}✗ Aborted by user${NC}"
exit 1
fi
# Stage all changes
echo -e "${BLUE}📝 Staging changes...${NC}"
git add .
# Commit with prepared message
echo -e "${BLUE}💾 Committing...${NC}"
if [ -f "COMMIT_MESSAGE.txt" ]; then
git commit -F COMMIT_MESSAGE.txt
echo -e "${GREEN}✓ Committed with prepared message${NC}"
else
echo -e "${YELLOW}⚠️ COMMIT_MESSAGE.txt not found, using default message${NC}"
git commit -m "feat: Fix hydration errors, navbar overlap, and add AI image generation system
- Fixed React hydration errors in ActivityFeed
- Fixed duplicate keys in About and Projects
- Fixed navbar overlapping hero section
- Fixed /manage redirect loop
- Added complete AI image generation system
- Added ActivityStatus database model
- Comprehensive documentation included
See CHANGELOG_DEV.md for details."
echo -e "${GREEN}✓ Committed with default message${NC}"
fi
# Push to remote
echo -e "${BLUE}🚀 Pushing to origin/dev...${NC}"
if git push origin dev; then
echo ""
echo -e "${GREEN}╔════════════════════════════════════════════════════════════╗${NC}"
echo -e "${GREEN}║ Successfully Pushed to Dev Branch! 🎉 ║${NC}"
echo -e "${GREEN}╚════════════════════════════════════════════════════════════╝${NC}"
echo ""
echo -e "${BLUE}Next Steps:${NC}"
echo " 1. Verify changes on remote: git log origin/dev --oneline -3"
echo " 2. Share AFTER_PUSH_SETUP.md with team members"
echo " 3. Test in staging environment"
echo " 4. Create PR to main when ready"
echo ""
echo -e "${YELLOW}⚠️ Remember: Team members must run database migration!${NC}"
echo " ./prisma/migrations/quick-fix.sh"
echo ""
else
echo ""
echo -e "${RED}✗ Push failed${NC}"
echo "Check your network connection and remote permissions"
exit 1
fi
# Show final commit
echo -e "${BLUE}📊 Latest commits:${NC}"
git log --oneline -3
echo ""
echo -e "${GREEN}✅ All done!${NC}"