NGO-4 Website Migration — WordPress to Next.js Headless Conversion

// src/api/forms.ts
import { Hono } from 'hono';
import { z } from 'zod';

const contactSchema = z.object({
  name: z.string().min(2).max(100),
  email: z.string().email(),
  message: z.string().min(10).max(1000),
});

const app = new Hono();

app.post('/contact-relay', async (c) => {
  const body = await c.req.json();
  const parsed = contactSchema.safeParse(body);
  if (!parsed.success) {
    return c.json({ success: false, errors: parsed.error.format() }, 422);
  }

  // Forward to WordPress Contact Form endpoint safely
  const response = await fetch(`${process.env.WP_API_URL}/contact-form-7/v1/contact-forms/1/feedback`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(parsed.data),
  });

  return c.json({ success: response.ok });
});
export default app;

// src/components/common/NavbarDrawer.tsx
import React, { useEffect, useRef } from 'react';

export function NavbarDrawer({ isOpen, onClose, children }: { isOpen: boolean; onClose: () => void; children: React.ReactNode }) {
  const drawerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!isOpen) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
      // Handle focus trapping inside drawerRef
      if (e.key === 'Tab') {
        const focusables = drawerRef.current?.querySelectorAll('a, button') || [];
        const first = focusables[0] as HTMLElement;
        const last = focusables[focusables.length - 1] as HTMLElement;

        if (e.shiftKey && document.activeElement === first) {
          last.focus();
          e.preventDefault();
        } else if (!e.shiftKey && document.activeElement === last) {
          first.focus();
          e.preventDefault();
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose]);

  return (
    <div ref={drawerRef} role="dialog" aria-modal="true" aria-hidden={!isOpen} className="drawer">
      {children}
    </div>
  );
}

// src/shared/utils/image-srcset.ts
export function parseWordPressHtmlImages(htmlContent: string): string {
  // Replace legacy img sources with responsive source attributes
  return htmlContent.replace(
    /<img([\s\S]*?)src="https:\/\/wp-domain\.org\/wp-content\/uploads\/(.*?)"([\s\S]*?)>/gi,
    (match, before, filePath, after) => {
      const optimizedUrl = `https://cdn.ngo4.org/uploads/${filePath}`;
      return `<img ${before} src="${optimizedUrl}" srcset="${optimizedUrl}?w=400 400w, ${optimizedUrl}?w=800 800w" sizes="(max-width: 600px) 480px, 800px" ${after} loading="lazy" />`;
    }
  );
}

/* src/components/projects/ProjectCard.module.css */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-card);
  padding: var(--spacing-grid);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
}

# Set environment variables
cp .env.example .env.local

# Install pnpm workspace dependencies
pnpm install

# Start the dev build script
pnpm dev