opencode-skill/skills/website-creator/scripts/preview.sh

#!/usr/bin/env bash
#===============================================================================
# preview.sh - Preview เว็บไซต์ผ่าน local server
#
# Usage: ./preview.sh [project-path] [port]
#
# รัน dev server ที่ 0.0.0.0 เพื่อให้เข้าดูจาก VPS IP ได้
#
#===============================================================================

set -e

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

# Default values
PROJECT_PATH="${1:-.}"
PORT="${2:-4321}"
HOST="0.0.0.0"

#-------------------------------------------------------------------------------
# Helper functions
#-------------------------------------------------------------------------------

log_info() {
    echo -e "${BLUE}[INFO]${NC} $1"
}

log_success() {
    echo -e "${GREEN}[SUCCESS]${NC} $1"
}

log_error() {
    echo -e "${RED}[ERROR]${NC} $1"
}

get_ip_address() {
    # Get the primary IP address of the VPS
    if command -v hostname &> /dev/null; then
        hostname -I 2>/dev/null | awk '{print $1}' || echo "unknown"
    else
        echo "unknown"
    fi
}

#-------------------------------------------------------------------------------
# Check project
#-------------------------------------------------------------------------------

check_project() {
    log_info "ตรวจสอบ project..."
    
    if [ ! -d "$PROJECT_PATH" ]; then
        log_error "Project path ไม่พบ: $PROJECT_PATH"
        exit 1
    fi
    
    if [ ! -f "$PROJECT_PATH/package.json" ]; then
        log_error "ไม่พบ package.json"
        exit 1
    fi
    
    # Check for Astro or Emdash
    if ! grep -q "astro" "$PROJECT_PATH/package.json"; then
        log_error "ไม่ใช่ Astro project"
        exit 1
    fi
    
    log_success "พบ Astro project"
}

#-------------------------------------------------------------------------------
# Install dependencies
#-------------------------------------------------------------------------------

install_deps() {
    log_info "ตรวจสอบ dependencies..."
    
    if [ ! -d "$PROJECT_PATH/node_modules" ]; then
        log_info "ยังไม่ได้ติดตั้ง dependencies - กำลังติดตั้ง..."
        
        if command -v pnpm &> /dev/null; then
            cd "$PROJECT_PATH" && pnpm install
        elif command -v npm &> /dev/null; then
            cd "$PROJECT_PATH" && npm install
        else
            log_error "ไม่พบ npm หรือ pnpm"
            exit 1
        fi
        
        log_success "ติดตั้ง dependencies เสร็จสมบูรณ์"
    else
        log_success "Dependencies พร้อมแล้ว"
    fi
}

#-------------------------------------------------------------------------------
# Start dev server
#-------------------------------------------------------------------------------

start_dev_server() {
    log_info "เริ่ม dev server..."
    log_info "Host: $HOST"
    log_info "Port: $PORT"
    
    local ip=$(get_ip_address)
    echo ""
    echo "=============================================="
    echo "  Dev Server Started"
    echo "=============================================="
    echo ""
    echo "Local:   http://localhost:$PORT"
    echo "Network: http://$ip:$PORT"
    echo ""
    echo "กด Ctrl+C เพื่อหยุด server"
    echo "=============================================="
    echo ""
    
    # Change to project directory
    cd "$PROJECT_PATH"
    
    # Check which package manager to use
    if [ -f "$PROJECT_PATH/pnpm-lock.yaml" ]; then
        PACKAGE_MANAGER="pnpm"
    elif [ -f "$PROJECT_PATH/yarn.lock" ]; then
        PACKAGE_MANAGER="yarn"
    else
        PACKAGE_MANAGER="npm"
    fi
    
    # Run dev server
    # Note: ไม่ใช้ background mode - ให้ user เห็น output ตรง
    $PACKAGE_MANAGER run dev -- --host "$HOST" --port "$PORT"
}

#-------------------------------------------------------------------------------
# Check if port is in use
#-------------------------------------------------------------------------------

check_port() {
    log_info "ตรวจสอบ port $PORT..."
    
    if command -v lsof &> /dev/null; then
        if lsof -i :$PORT &> /dev/null; then
            log_error "Port $PORT ถูกใช้งานอยู่"
            log_info "ลองใช้ port อื่น: ./preview.sh $PROJECT_PATH $((PORT + 1))"
            exit 1
        fi
    fi
}

#-------------------------------------------------------------------------------
# Main
#-------------------------------------------------------------------------------

main() {
    echo "=============================================="
    echo "  Astro Preview Server"
    echo "=============================================="
    echo ""
    
    # Check if we should just print the IP
    if [ "$1" == "--ip" ]; then
        local ip=$(get_ip_address)
        echo "IP Address: $ip"
        exit 0
    fi
    
    # Check requirements
    if ! command -v node &> /dev/null; then
        log_error "ไม่พบ node.js"
        exit 1
    fi
    
    # Run setup
    check_project
    check_port
    install_deps
    
    # Start server
    start_dev_server
}

main "$@"