Robert A. Santana

El Proyecto

CurioCine es un sitio web de curiosidades de cine que contenía más de 1000 películas con datos, anécdotas de rodaje y detalles que la mayoría de la gente nunca conoce. El problema: el sitio original corría sobre Drupal, una plataforma pesada y obsoleta que ya no mantenía. El hosting expiró, la base de datos se corrompió, y todo el contenido parecía perdido.

Hasta que descubrí OpenCode.

El Punto de Partida

Tenía un respaldo parcial del sitio original: archivos HTML estáticos en una carpeta public/, con el contenido de cada película en un formato viejo e inconsistente. Pero no era un CMS moderno, no era responsive, y la infraestructura estaba muerta.

# El archive original
curiosidadesdecine/public/movie/
├── el-padrino/index.html
├── pulp-fiction/index.html
├── alien-el-octavo-pasajero/index.html
└── ... (1043 carpetas de películas)

Cada HTML contenía el trivia en un formato así:

<div class="trivia status_1">
    <div class="trivia_text">
        Brando se hizo al personaje a las mil maravillas,
        aparentando tener casi 70 años cuando sólo contaba 47.
    </div>
</div>

La Solución: OpenCode

OpenCode es una herramienta de AI para desarrollo de software. Lo que hace es entender tu código, tu proyecto, y ejecutar cambios reales en tus archivos. No es un chatbot: es un asistente que puede leer, escribir, ejecutar comandos y trabajar contigo como un desarrollador más.

1. Migración del Contenido

Usé OpenCode para parsear los 1043 archivos HTML del archive y extraer el contenido de cada película. El script de migración leía cada HTML, extraía los items de trivia, y generaba archivos Markdown limpios:

// extract-trivia.mjs - El script que creé con OpenCode
function extractTrivia(html) {
  const items = [];
  const regex = /<div class="trivia_text">\s*([\s\S]*?)\s*<\/div>/g;
  let match;
  while ((match = regex.exec(html)) !== null) {
    let text = match[1]
      .replace(/<[^>]+>/g, '')
      .replace(/&amp;/g, '&')
      .replace(/\s+/g, ' ')
      .trim();
    if (text) items.push(text);
  }
  return items;
}

El resultado: archivos Markdown limpios y estructurados:

---
title: 'Curiosidades de El Padrino (1972)'
description: 'Curiosidades, anécdotas de rodaje de El Padrino.'
pubDate: '2026-07-20'
tags: ['el padrino']
---

## Curiosidades

1. El palo que Sonny Corleone le lanza a Carlo es algo
   totalmente improvisado por James Caan.

2. Coppola con la ayuda de George Lucas, añadió imágenes
   de pasillos vacíos extraídas del metraje sobrante.

2. El Build System

OpenCode me ayudó a crear un build system completo en Node.js que toma los Markdown y genera un sitio estático completo:

// build.js - El corazón del proyecto
import fs from 'fs';
import path from 'path';

function mdToHtml(md) {
  let cleaned = md.replace(/<!--[\s\S]*?-->/g, '');
  const blocks = cleaned.split(/\n\n+/);
  let html = '';

  for (const block of blocks) {
    const trimmed = block.trim();
    if (!trimmed) continue;

    const headerMatch = trimmed.match(/^#{2,3}\s+(.+)$/m);
    if (headerMatch) {
      html += '<h2>' + headerMatch[1] + '</h2>\n';
      continue;
    }

    const listItems = trimmed.split(/\n/)
      .filter(l => /^\d+\.\s+/.test(l.trim()));
    if (listItems.length > 0) {
      html += '<ol class="trivia-list">\n';
      for (const item of listItems) {
        const text = item.trim().replace(/^\d+\.\s+/, '');
        html += '<li>' + text + '</li>\n';
      }
      html += '</ol>\n';
    }
  }
  return html;
}

3. Integración con TMDB API

Cada película necesita imágenes: posters y backdrops. OpenCode integró la API de The Movie Database (TMDB) para buscar y descargar automáticamente las imágenes de cada película:

async function searchTMDB(title) {
  const clean = cleanTitle(title);
  const url = TMDB_BASE_URL + '/search/movie?query='
    + encodeURIComponent(clean)
    + '&language=es-ES&api_key=' + TMDB_API_KEY;

  return new Promise((resolve) => {
    https.get(url, (res) => {
      let data = '';
      res.on('data', (chunk) => data += chunk);
      res.on('end', () => {
        const json = JSON.parse(data);
        resolve(json.results && json.results.length > 0
          ? json.results[0] : null);
      });
    }).on('error', () => resolve(null));
  });
}

4. El Diseño

El sitio necesita ser rápido, limpio, y funcionar en móvil. OpenCode diseñó un CSS moderno con:

• Navbar sticky que funciona como buscador
• Grid responsive de tarjetas de películas
• Trivia items con hover effects y botón de compartir
• Directorio alfabético de todas las películas

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.movie-card {
  background: #fff;
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
}

.movie-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

5. Sharing en Twitter/X

Cada curiosidad individual se puede compartir. OpenCode implementó un botón de share en cada <li> que genera un tweet con el texto de la curiosidad:

function shareScript(movieTitle) {
  document.querySelectorAll('.trivia-list li').forEach(function(li) {
    var btn = document.createElement('button');
    btn.className = 'share-btn';
    btn.addEventListener('click', function(e) {
      var text = li.textContent.trim().replace(/\s+/g, ' ');
      if (text.length > 200) text = text.substring(0, 197) + '...';
      var tweet = text + ' \n\nCurioCine: ' + title;
      var url = 'https://twitter.com/intent/tweet?text='
        + encodeURIComponent(tweet) + '&via=robbieicaro';
      window.open(url, '_blank', 'width=600,height=400');
    });
    li.appendChild(btn);
  });
}

El Tech Stack

Tecnología	Uso
Node.js	Build system y scripts de migración
OpenCode	Asistente de desarrollo, generación de código, debugging
Firebase Hosting	Deploy del sitio estático
TMDB API	Imágenes de películas (posters y backdrops)
Markdown	Formato de contenido
HTML/CSS/JS	Frontend del sitio
Git	Control de versiones

Los Números

• 175 películas migradas y funcionando
• +2000 curiosidades individuales
• 346 imágenes descargadas automáticamente
• 1 archivo build.js (~800 líneas) que genera todo el sitio
• 0 dependencias externas: solo Node.js y la API de TMDB

Deploy con Firebase

El deploy es un solo comando:

firebase deploy --only hosting

El sitio queda vivo en: curiosidades-f6edc.web.app

Lo que OpenCode Realmente Hizo

Lo impresionante no es solo que generó código, sino que:

1. Entendió el contexto: supo que era un sitio de curiosidades de cine en español
2. Trabajó con el archive real: parseó HTML viejo, extrajo contenido y manejó casos especiales
3. Creó un sistema completo: no solo un script, sino un build system con TMDB, diseño responsive y sharing social
4. Iteró conmigo: cuando algo no funcionaba (como 127horas, que no tenía formato estándar), encontró soluciones
5. Deployó: configuró Firebase, resolvió problemas de autenticación y publicó el sitio

Conclusión

Recuperar un sitio web de 1043 películas parecía imposible. Drupal estaba muerto, la base de datos corrupta, y el contenido atrapado en HTML viejo. Pero con OpenCode, en unas pocas sesiones de trabajo, convertí ese archive muerto en un sitio moderno, rápido, y funcional.

La clave fue tratar a OpenCode no como un generador de código, sino como un compañero de desarrollo que entiende tu proyecto y trabaja contigo para resolver problemas reales.