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
|
||||
|
||||
Reference in New Issue
Block a user