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>
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user