web: la página de creadores de contenido (el menú VIDEOS), que daba 404

SiteHeader enlazaba /content-creators y esa página no existía en Next: el menú
VIDEOS llevaba a un 404. Réplica del partial Django `partials/videos.html`, con
sus clases del tema (cc-box, cc-avatar, cc-name...). Lee el primer registro de
home_contentcreator, igual que la vista de Django.

La descripción es HTML de CKEditor (lo edita un admin), así que se sanea con
`cleanPostHtml`, la misma allowlist que los mensajes del foro. Comprobado
metiendo un <script>alert(1)</script> a propósito: no aparece en el HTML servido.

Dos arreglos sobre el diseño de Django, que copiaba tal cual:

- El título va SIEMPRE. Django lo metía dentro del `if content_creator`, así que
  sin datos la página quedaba con un <p> suelto, sin cabecera ni caja. Ahora sin
  creador sale el título de la sección y el aviso centrado en su box-content.
- Los enlaces de YouTube/Facebook se salían por abajo de la caja. El tema le da a
  `.cc-box` una altura FIJA de 172px contando con el content-box del navegador, y
  el border-box de Tailwind le restaba el padding y el borde: 24px menos de alto
  útil. Es el mismo caso que .item-box en la tienda. Medido: la caja pasa de 172
  a 196px de alto y los enlaces dejan de desbordar.

Verificado con un creador de prueba (borrado después): /es/ y /en/ dan 200, el
título, el avatar, el iframe y los enlaces caen dentro de la caja, y con la tabla
vacía sale el mismo texto que Django.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/app/[locale]/content-creators/page.tsx

@@ -0,0 +1,106 @@
+import type { Metadata } from 'next'
+import { getTranslations, setRequestLocale } from 'next-intl/server'
+import { getContentCreator } from '@/lib/content-creator'
+import { cleanPostHtml } from '@/lib/forum-sanitize'
+
+export const dynamic = 'force-dynamic'
+
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: 'Misc' })
+  return { title: t('creators.pageTitle') }
+}
+
+/**
+ * Creadores de contenido (el menú VIDEOS) — réplica del partial Django
+ * `partials/videos.html`. Enseña el primer creador de `home_contentcreator`, y
+ * si no hay ninguno, el mismo aviso que Django.
+ */
+export default async function ContentCreatorsPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params
+  setRequestLocale(locale)
+  const t = await getTranslations('Misc')
+  const cc = await getContentCreator()
+
+  return (
+    <div className="main-page">
+      <div className="middle-content">
+        <div className="body-content">
+          {/* El título va SIEMPRE, haya creadores o no: Django lo metía dentro
+              del `if` y sin datos la página quedaba con un <p> suelto, sin
+              cabecera ni caja. Sin creador se usa el título de la sección. */}
+          <div className="title-content">
+            <h1>{cc ? cc.title : t('creators.pageTitle')}</h1>
+          </div>
+          {!cc ? (
+            <div className="box-content">
+              <div className="body-box-content centered">
+                <br />
+                <p className="second-brown">{t('creators.empty')}</p>
+                <br />
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="box-content">
+                <div className="body-box-content justified">
+                  {/* La descripción es HTML de CKEditor (lo edita un admin): se
+                      sanea con la misma allowlist que los mensajes del foro. */}
+                  <div dangerouslySetInnerHTML={{ __html: cleanPostHtml(cc.description) }} />
+                  <br />
+                  <br />
+
+                  {(cc.youtubeVideoUrl || cc.avatarImageUrl) && (
+                    <div className="cc-box cc-youtube">
+                      <div className="cc-text">
+                        {cc.avatarImageUrl && (
+                          // eslint-disable-next-line @next/next/no-img-element
+                          <img className="cc-avatar" src={cc.avatarImageUrl} alt="Avatar" />
+                        )}
+                        {cc.youtubeVideoUrl && (
+                          <iframe
+                            src={cc.youtubeVideoUrl}
+                            height="168"
+                            width="300"
+                            title="YouTube video player"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                            allowFullScreen
+                            data-cookieconsent="ignore"
+                          />
+                        )}
+                        <p className="cc-name">{cc.subtitle}</p>
+                        <br />
+                        <p className="second-brown">{t('creators.contentType')}:</p>
+                        <p>{cc.contentType}</p>
+                        <br />
+                        <p className="second-brown">{t('creators.media')}:</p>
+                        <ul>
+                          {cc.youtubeChannelUrl && (
+                            <li>
+                              <i className="fab fa-youtube" />{' '}
+                              <a href={cc.youtubeChannelUrl} target="_blank" rel="noopener noreferrer">
+                                YouTube
+                              </a>
+                            </li>
+                          )}
+                          {cc.facebookPageUrl && (
+                            <li>
+                              <i className="fab fa-facebook" />{' '}
+                              <a href={cc.facebookPageUrl} target="_blank" rel="noopener noreferrer">
+                                Facebook
+                              </a>
+                            </li>
+                          )}
+                        </ul>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

web-next/app/globals.css

@@ -40,6 +40,13 @@ input[type='number'] {
 table {
   border-collapse: separate;
 }
+/* Mismo caso que .item-box de la tienda: el tema da a `.cc-box` (creadores de
+   contenido) una altura FIJA de 172px contando con el content-box del navegador,
+   y el border-box de Tailwind le resta el padding y el borde. Con 24px menos de
+   alto útil, los enlaces de YouTube/Facebook se salían por abajo de la caja. */
+.cc-box {
+  box-sizing: content-box;
+}
 /* El tooltip de wowhead se inyecta en el <body>, así que le caen encima las
    reglas globales del tema. La que lo rompe es `th { height: 40px }` (global,
    viene tal cual del tema original): el tooltip usa <th> para la columna de la

web-next/lib/content-creator.ts

@@ -0,0 +1,45 @@
+import type { RowDataPacket } from 'mysql2'
+import { db, DB } from './db'
+
+/**
+ * Creador de contenido destacado (`home_contentcreator`, el menú VIDEOS).
+ *
+ * Como en Django, se muestra SOLO el primero: la tabla se maneja desde el admin
+ * y ahora mismo está vacía, así que la página enseña el aviso de "no hay
+ * información" igual que hacía Django.
+ */
+export interface ContentCreator {
+  title: string
+  /** HTML de CKEditor. Se sanea antes de pintarlo (ver la página). */
+  description: string
+  contentType: string
+  subtitle: string
+  youtubeVideoUrl: string | null
+  avatarImageUrl: string | null
+  youtubeChannelUrl: string | null
+  facebookPageUrl: string | null
+}
+
+export async function getContentCreator(): Promise<ContentCreator | null> {
+  try {
+    const [rows] = await db(DB.default).query<RowDataPacket[]>(
+      `SELECT title, description, content_type, subtitle, youtube_video_url,
+              avatar_image_url, youtube_channel_url, facebook_page_url
+         FROM home_contentcreator ORDER BY id LIMIT 1`,
+    )
+    const r = rows[0]
+    if (!r) return null
+    return {
+      title: String(r.title),
+      description: String(r.description ?? ''),
+      contentType: String(r.content_type ?? ''),
+      subtitle: String(r.subtitle ?? ''),
+      youtubeVideoUrl: r.youtube_video_url ?? null,
+      avatarImageUrl: r.avatar_image_url ?? null,
+      youtubeChannelUrl: r.youtube_channel_url ?? null,
+      facebookPageUrl: r.facebook_page_url ?? null,
+    }
+  } catch {
+    return null
+  }
+}

web-next/messages/en.json

@@ -1367,6 +1367,12 @@
       "charactersHeading": "Characters",
       "realmHeading": "Realm"
     },
+    "creators": {
+      "pageTitle": "Content creators",
+      "empty": "No information available at this time.",
+      "contentType": "Content type",
+      "media": "Media"
+    },
     "downloadAddons": {
       "title": "Addon download",
       "recommended": "Recommended addons",

web-next/messages/es.json

@@ -1367,6 +1367,12 @@
       "charactersHeading": "Personajes",
       "realmHeading": "Reino"
     },
+    "creators": {
+      "pageTitle": "Creadores de contenido",
+      "empty": "No hay información disponible en este momento.",
+      "contentType": "Tipo de contenido",
+      "media": "Medios"
+    },
     "downloadAddons": {
       "title": "Descarga de addons",
       "recommended": "Addons recomendados",