Arquitectura del Sitio Web de ESG México

┌──────────────────────────────────────────────────────────────┐
│                        SANITY CMS                            │
│  Studio (localhost:3333 / sanity.io/studio)                  │
│  Schemas: blogPost · noticia · author · tag                  │
│  CDN: cdn.sanity.io  │  API GROQ: api.sanity.io              │
└───────────────────────────────┬──────────────────────────────┘
                                │ GROQ queries (@sanity/client)
                                ▼
┌──────────────────────────────────────────────────────────────┐
│                      ASTRO 6 (BUILD)                         │
│  src/pages/       → rutas estáticas + SSR endpoint           │
│  src/layouts/     → Layout.astro (HTML shell)                │
│  src/components/  → Astro + React islands                    │
│  src/content/     → blog (MD) + noticias (JSON)              │
│  src/lib/         → sanity.ts (cliente + helpers de imagen)  │
└───────────────────────────────┬──────────────────────────────┘
                                │ astro build → @astrojs/vercel
                                ▼
┌──────────────────────────────────────────────────────────────┐
│                    VERCEL EDGE NETWORK                       │
│  Static assets  │  Edge Functions  │  Deploy Hooks           │
│  esgmexico.net  │  /api/*          │  Sanity → rebuild       │
└──────────────────────────────────────────────────────────────┘

// astro.config.mjs
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
import react from "@astrojs/react";
import vercel from "@astrojs/vercel";

export default defineConfig({
  site: "https://www.esgmexico.net",
  trailingSlash: "never",
  adapter: vercel(),
  integrations: [react()],
  vite: {
    plugins: [tailwindcss()],
  },
});

// src/lib/sanity.ts
import { createClient } from '@sanity/client'

export const sanity = createClient({
  projectId: import.meta.env.PUBLIC_SANITY_PROJECT_ID,
  dataset:   import.meta.env.PUBLIC_SANITY_DATASET ?? 'production',
  apiVersion: '2024-01-01',
  useCdn: true,
})

// Aplica parámetros del Sanity Image Pipeline a una URL del CDN
export function sanityImg(
  url: string | undefined,
  opts: { w: number; h?: number; q?: number } = { w: 640 },
): string {
  if (!url || !url.includes('cdn.sanity.io')) return url ?? ''
  const params = new URLSearchParams()
  params.set('w', String(opts.w))
  if (opts.h) {
    params.set('h', String(opts.h))
    params.set('fit', 'crop')
  }
  params.set('auto', 'format')
  params.set('q', String(opts.q ?? 75))
  return `${url}${url.includes('?') ? '&' : '?'}${params.toString()}`
}

// srcset con múltiples anchos para imágenes responsivas
export function sanitySrcset(
  url: string | undefined,
  widths: number[] = [400, 640, 960],
): string {
  if (!url || !url.includes('cdn.sanity.io')) return ''
  return widths.map((w) => `${sanityImg(url, { w })} ${w}w`).join(', ')
}

// Convierte una referencia de imagen Sanity (image-HASH-WxH-ext) a URL pública
export function imageUrl(ref: string | undefined): string {
  if (!ref) return ''
  const projectId = import.meta.env.PUBLIC_SANITY_PROJECT_ID
  const dataset   = import.meta.env.PUBLIC_SANITY_DATASET ?? 'production'
  const [, id, dims, ext] = ref.split('-')
  return `https://cdn.sanity.io/images/${projectId}/${dataset}/${id}-${dims}.${ext}`
}

src/
├── content.config.ts       # Define las colecciones con Zod schemas (raíz de src/)
└── content/
    ├── blog/               # Artículos en Markdown (.md)
    │   ├── abril.md
    │   ├── abril2024_Politica_Gobierno.md
    │   ├── diciembre2023_Carbono.md
    │   └── ...
    └── noticias/           # Noticias en JSON
        ├── adaptacion-estrategica-cfo.json
        ├── impuesto-carbono-mexico.json
        ├── semarnat-requisitos-2026.json
        └── ...

import tailwindcss from "@tailwindcss/vite";

// En vite.plugins:
plugins: [tailwindcss()]

interface Props {
  title: string;
  description: string;
  canonical?: string;
  ogImage?: string;
  noindex?: boolean;
  ogType?: string;
  articlePublishedTime?: string;
  articleAuthor?: string;
  waMessage?: string;  // Mensaje pre-cargado para el FAB de WhatsApp
}

<html lang="es">
  <head>
    <SEO />       ← meta tags, OG, canonical
    <Analytics /> ← GTM (GTM-NW8M7NXX) + script de analytics
  </head>
  <body>
    <Header />      ← nav fija, 68px de alto
    <main>
      <slot />      ← contenido de la página
    </main>
    <Footer />
    <WhatsAppFAB /> ← botón flotante con mensaje contextual
  </body>
</html>

src/pages/api/autoevaluacion.ts
  └── POST handler
        ├── Parsea el body del formulario
        ├── Crea un transporte nodemailer con SMTP de Google Workspace
        │     HOST: smtp.gmail.com  PORT: 587  (STARTTLS)
        │     USER: $SMTP_USER  PASS: $SMTP_PASS (contraseña de aplicación)
        └── Envía el correo a buzon@esgmexico.net

{
  "dependencies": {
    "astro":                   "^6.4.6",
    "@astrojs/react":          "^5.0.7",
    "@astrojs/vercel":         "^10.0.8",
    "tailwindcss":             "^4.3.1",
    "@tailwindcss/vite":       "^4.3.1",
    "@tailwindcss/typography": "^0.5.20",
    "react":                   "^19.2.7",
    "react-dom":               "^19.2.7",
    "@types/react":            "^19.2.17",
    "@types/react-dom":        "^19.2.3",
    "nodemailer":              "^9.0.1",
    "@portabletext/to-html":   "^5.0.2"
  },
  "devDependencies": {
    "@sanity/client":        "^7.23.0",
    "sanity":                "^6.1.0",
    "@portabletext/react":   "^6.2.0",
    "@types/nodemailer":     "^8.0.1"
  }
}