burmddit/deploy-ui-improvements.sh

#!/bin/bash
# Deploy Burmddit UI/UX Improvements
# Run this script to update your live site with the new design

set -e  # Exit on error

echo "🎨 Burmddit UI/UX Deployment Script"
echo "===================================="
echo ""

# Colors
GREEN='\033[0;32m'
BLUE='\033[0;34m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color

# Get current directory
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
cd "$SCRIPT_DIR"

echo -e "${BLUE}Step 1: Backup existing files${NC}"
echo "--------------------------------"
cd frontend/app

# Backup old files
if [ -f "globals.css" ]; then
    echo "Backing up globals.css..."
    cp globals.css globals-backup-$(date +%Y%m%d-%H%M%S).css
fi

if [ -f "page.tsx" ]; then
    echo "Backing up page.tsx..."
    cp page.tsx page-backup-$(date +%Y%m%d-%H%M%S).tsx
fi

if [ -f "article/[slug]/page.tsx" ]; then
    echo "Backing up article page..."
    mkdir -p article/[slug]/backup
    cp article/[slug]/page.tsx "article/[slug]/backup/page-backup-$(date +%Y%m%d-%H%M%S).tsx"
fi

echo -e "${GREEN}✓ Backups created${NC}"
echo ""

echo -e "${BLUE}Step 2: Deploy new frontend files${NC}"
echo "-----------------------------------"

# Replace CSS
if [ -f "globals-improved.css" ]; then
    echo "Deploying new CSS..."
    mv globals-improved.css globals.css
    echo -e "${GREEN}✓ CSS updated${NC}"
else
    echo -e "${YELLOW}⚠ globals-improved.css not found${NC}"
fi

# Replace homepage
if [ -f "page-improved.tsx" ]; then
    echo "Deploying new homepage..."
    mv page-improved.tsx page.tsx
    echo -e "${GREEN}✓ Homepage updated${NC}"
else
    echo -e "${YELLOW}⚠ page-improved.tsx not found${NC}"
fi

# Replace article page
if [ -f "article/[slug]/page-improved.tsx" ]; then
    echo "Deploying new article page..."
    mv article/[slug]/page-improved.tsx article/[slug]/page.tsx
    echo -e "${GREEN}✓ Article page updated${NC}"
else
    echo -e "${YELLOW}⚠ article page-improved.tsx not found${NC}"
fi

# Tag page should already be in place
if [ ! -f "tag/[slug]/page.tsx" ]; then
    echo -e "${YELLOW}⚠ Tag page not found - check if it was copied${NC}"
else
    echo -e "${GREEN}✓ Tag pages ready${NC}"
fi

echo ""

echo -e "${BLUE}Step 3: Database Migration (Tags System)${NC}"
echo "-----------------------------------------"

# Check if DATABASE_URL is set
if [ -z "$DATABASE_URL" ]; then
    echo -e "${YELLOW}DATABASE_URL not set. Please run migration manually:${NC}"
    echo ""
    echo "  psql \$DATABASE_URL < $SCRIPT_DIR/database/tags_migration.sql"
    echo ""
    echo "Or if you have connection details:"
    echo "  psql -h HOST -U USER -d DATABASE < $SCRIPT_DIR/database/tags_migration.sql"
    echo ""
    read -p "Press Enter to continue without migration, or Ctrl+C to exit..."
else
    echo "Running tags migration..."
    psql "$DATABASE_URL" < "$SCRIPT_DIR/database/tags_migration.sql" 2>&1 | grep -v "NOTICE" || true
    echo -e "${GREEN}✓ Database migration complete${NC}"
fi

echo ""

echo -e "${BLUE}Step 4: Install dependencies${NC}"
echo "------------------------------"
cd "$SCRIPT_DIR/frontend"

if [ -f "package.json" ]; then
    if command -v npm &> /dev/null; then
        echo "Installing/updating npm packages..."
        npm install
        echo -e "${GREEN}✓ Dependencies updated${NC}"
    else
        echo -e "${YELLOW}⚠ npm not found - skip dependency update${NC}"
    fi
fi

echo ""

echo -e "${BLUE}Step 5: Build frontend${NC}"
echo "-----------------------"

if command -v npm &> /dev/null; then
    echo "Building production frontend..."
    npm run build
    echo -e "${GREEN}✓ Build complete${NC}"
else
    echo -e "${YELLOW}⚠ npm not found - skip build${NC}"
    echo "If using Vercel/external deployment, push to Git and it will auto-build"
fi

echo ""

echo -e "${GREEN}════════════════════════════════════════${NC}"
echo -e "${GREEN}✓ DEPLOYMENT COMPLETE!${NC}"
echo -e "${GREEN}════════════════════════════════════════${NC}"
echo ""
echo "🎉 New features deployed:"
echo "  ✓ Modern design system"
echo "  ✓ Hashtag/tag system"
echo "  ✓ Cover images with overlays"
echo "  ✓ Trending tags section"
echo "  ✓ Better typography"
echo "  ✓ Improved article pages"
echo ""
echo -e "${BLUE}Next steps:${NC}"
echo "1. If using Vercel/Railway: Push to Git to trigger auto-deploy"
echo "   cd $SCRIPT_DIR && git push origin main"
echo ""
echo "2. Test the new design at: burmddit.qikbite.asia"
echo ""
echo "3. If auto-tagging not working, update backend/publisher.py"
echo "   (see UI-IMPROVEMENTS.md for code snippet)"
echo ""
echo "4. Clear browser cache if design doesn't update immediately"
echo ""
echo -e "${YELLOW}For rollback:${NC} Restore from backup files created in step 1"
echo ""