@crtobiasdelsud/portal-ui 1.0.0

package/src/components/ArticleHero/variants/V4/V4.jsx

@@ -0,0 +1,25 @@
+import shared from '../../ArticleHero.module.scss'
+import s from './V4.module.scss'
+
+export default function V4({ isAmp, inlineStyle, titulo, volanta, ImgEl, ExtrasEl, imgOnlyClass, noImgMod }) {
+  const VolantaEl = volanta
+    ? <span className={isAmp ? 'article-hero__volanta' : `${shared.volanta} ${s.volanta}`}>{volanta}</span>
+    : null
+  const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
+
+  return (
+    <article
+      className={isAmp ? 'article-hero article-hero--4' : `${shared.container}${noImgMod}`}
+      style={inlineStyle}
+    >
+      <div className={isAmp ? 'article-hero__img-wrap' : shared.imgWrap}>
+        {imgOnlyClass ? <div className={imgOnlyClass}>{ImgEl}</div> : ImgEl}
+        <div className={isAmp ? 'article-hero__overlay' : s.overlay}>
+          {VolantaEl}
+          {TituloEl}
+        </div>
+      </div>
+      {ExtrasEl}
+    </article>
+  )
+}

package/src/components/ArticleHero/variants/V4/V4.module.scss

@@ -0,0 +1,36 @@
+@use "../../../../styles/index" as *;
+.volanta {
+  align-self: flex-start;
+  background: transparent;
+  color: var(--primary-color, #b1043f);
+  padding: 0;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.7625rem;
+  color: #B1043F;
+
+
+  @include respond(tablet)  { font-size: 24px; }
+  @include respond(desktop) { font-size: 24px; }
+}
+
+.overlay {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 72%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 20px 18px 24px;
+  gap: 8px;
+}
+
+.titulo {
+  color: #ffffff;
+  font-weight: 500;
+  font-size: clamp(32px, 5vw, 60px);
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
+
+  @include respond(tablet) { font-size: 2rem; }
+}

package/src/components/ArticleHero/variants/V5/V5.jsx

@@ -0,0 +1,25 @@
+import shared from '../../ArticleHero.module.scss'
+import s from './V5.module.scss'
+
+export default function V5({ isAmp, inlineStyle, titulo, volanta, ImgEl, ExtrasEl, imgOnlyClass, noImgMod }) {
+  const VolantaEl = volanta
+    ? <span className={isAmp ? 'article-hero__volanta' : `${shared.volanta} ${s.volanta}`}>{volanta}</span>
+    : null
+  const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
+
+  return (
+    <article
+      className={isAmp ? 'article-hero article-hero--5' : `${shared.container}${noImgMod}`}
+      style={inlineStyle}
+    >
+      <div className={isAmp ? 'article-hero__img-wrap' : shared.imgWrap}>
+        {imgOnlyClass ? <div className={imgOnlyClass}>{ImgEl}</div> : ImgEl}
+        <div className={isAmp ? 'article-hero__overlay' : s.overlay}>
+          {VolantaEl}
+          {TituloEl}
+        </div>
+      </div>
+      {ExtrasEl}
+    </article>
+  )
+}

package/src/components/ArticleHero/variants/V5/V5.module.scss

@@ -0,0 +1,33 @@
+@use "../../../../styles/index" as *;
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    var(--secondary-color) 70%,
+    var(--secondary-color) 100%
+  );
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px 18px 36px;
+}
+
+.volanta {
+  font-size: 16px;
+  align-self: center;
+  font-weight: 500;
+
+  @include respond(tablet)  { font-size: 24px; }
+  @include respond(desktop) { font-size: 24px; }
+}
+
+.titulo {
+  color: #ffffff;
+  font-size: clamp(32px, 5vw, 60px);
+  text-align: center;
+
+  @include respond(tablet) { font-size: 2.25rem; }
+}

package/src/components/ArticleHeroFull/ArticleHeroFull.jsx

@@ -0,0 +1,38 @@
+'use client'
+
+import styles from './ArticleHeroFull.module.scss'
+import { useSiteConfig } from '../../context/SiteConfigContext.jsx'
+
+export default function ArticleHeroFull({ titulo, copete, imagen, focalPoint, categoria }) {
+  const { config } = useSiteConfig()
+  const siteName = config?.slots?.header?.settings?.siteName ?? ''
+
+  const objPos = focalPoint
+    ? `${focalPoint.x ?? 50}% ${focalPoint.y ?? 50}%`
+    : 'center center'
+
+  return (
+    <div className={styles.hero}>
+      {imagen && (
+        <img
+          src={imagen}
+          alt={titulo ?? ''}
+          className={styles.img}
+          style={{ objectPosition: objPos }}
+        />
+      )}
+      <div className={styles.gradient} />
+      <div className={styles.content}>
+        {categoria && (
+          <div className={styles.breadcrumb}>
+            {siteName && <span>{siteName}</span>}
+            {siteName && <span className={styles.sep}>&rsaquo;</span>}
+            <a href={`/${categoria.slug}`}>{categoria.nombre ?? categoria.slug}</a>
+          </div>
+        )}
+        <h1 className={styles.titulo}>{titulo}</h1>
+        {copete && <p className={styles.copete}>{copete}</p>}
+      </div>
+    </div>
+  )
+}

package/src/components/ArticleHeroFull/ArticleHeroFull.module.scss

@@ -0,0 +1,116 @@
+@use "../../styles/index" as *;
+
+.hero {
+  position: relative;
+  width: 100%;
+  min-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+
+  @include respond(tablet) {
+    min-height: 75vh;
+  }
+
+  @include respond(desktop) {
+    min-height: 75vh;
+  }
+}
+
+.img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .5) .01%, #000 67.03%);
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  padding: 0 10% 2.5rem;
+  text-align: center;
+  color: #fff;
+
+  @include respond(tablet) {
+    max-width: 80%;
+    margin: 40px auto;
+    padding: 0px;
+  }
+
+  @include respond(desktop) {
+    padding: 0px;
+    max-width: 70%;
+    max-width: 1010px;
+    margin: 40px auto;
+  }
+}
+
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.3rem 0.9rem;
+  margin-bottom: 0.9rem;
+  font-family: var(--font-inter), Inter, sans-serif;
+  color: #fff;
+  letter-spacing: 0.02em;
+  font-size: .875em;
+    font-weight: 300;
+    line-height: 1.25rem;
+
+  a {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.sep {
+  opacity: 0.6;
+  font-size: 0.9rem;
+}
+
+.titulo {
+  font-size: 2.25em;
+  font-weight: 700;
+  line-height: 1.3em;
+  margin: 0 0 1rem;
+  text-align: center;
+
+  @include respond(tablet) {
+    font-size: 3.75rem;
+    font-weight: 700;
+    line-height: 1.3em;
+    margin: 0 0 1rem;
+  }
+
+  @include respond(desktop) {
+    font-size: 3.75rem;
+    font-weight: 700;
+    line-height: 1.3em;
+    margin: 0 0 1rem;
+  }
+}
+
+.copete {
+  color: rgb(255, 255, 255);
+  margin: 0 auto;
+  font-size: 1.125rem;
+  line-height: 1.3em;
+  padding-top: 1.875rem;
+  font-weight: 400;
+  font-family: var(--font-inter), Inter, sans-serif;
+
+  @include respond(tablet) {
+    font-size: 1.125rem;
+    line-height: 1.3em;
+    padding-top: 1.875rem;
+  }
+}

package/src/components/ArticleSidebar/ArticleSidebar.jsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { useBanners } from '../../context/SiteConfigContext.jsx'
+import BannerDisplay from '../Banner/BannerDisplay.jsx'
+import styles from './ArticleSidebar.module.scss'
+
+export default function ArticleSidebar({ children, hasWidgets = false }) {
+  const banners = useBanners()
+  const banner  = banners?.[0]
+
+  if (!hasWidgets && !banner) return null
+
+  const hasImage = banner?.imagen?.url || banner?.imagenVertical?.url || banner?.imagenHorizontal?.url
+
+  return (
+    <aside className={styles.sidebar}>
+      {hasWidgets
+        ? <div className={styles.widgetList}>{children}</div>
+        : <div className={styles.sticky}>
+            {hasImage
+              ? <BannerDisplay banner={banner} />
+              : <div className={styles.placeholder} />
+            }
+          </div>
+      }
+    </aside>
+  )
+}

package/src/components/ArticleSidebar/ArticleSidebar.module.scss

@@ -0,0 +1,41 @@
+.sidebar {
+  display: none;
+
+  @media (min-width: 1200px) {
+    display: block;
+    min-width: 0;
+    height: 100%;
+  }
+}
+
+// Fallback banner (sin widgets configurados)
+.sticky {
+  @media (min-width: 1200px) {
+    position: sticky;
+    top: 100px;
+    min-height: 250px;
+  }
+}
+
+// Lista de widgets configurados desde el CMS
+.widgetList {
+  @media (min-width: 1200px) {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    height: 100%;
+
+    // Solo el último widget sigue al scroll
+    & > :last-child {
+      position: sticky;
+      top: 100px;
+    }
+  }
+}
+
+.placeholder {
+  width: 100%;
+  height: 250px;
+  background: #e9e9e9;
+  border-radius: 4px;
+}

package/src/components/AuthorBlock/AuthorBlock.jsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useTheme, useSiteConfig } from '../../context/SiteConfigContext.jsx'
+import V1 from './variants/V1/V1'
+import V2 from './variants/V2/V2'
+import V3 from './variants/V3/V3'
+import V4 from './variants/V4/V4'
+
+const VARIANTS = { '1': V1, '2': V2, '3': V3, '4': V4 }
+
+function formatDate(fechaPublicacion, useLongDate) {
+  if (!fechaPublicacion) return null
+  const date  = new Date(fechaPublicacion)
+  const fecha = date.toLocaleDateString('es-AR', useLongDate
+    ? { day: '2-digit', month: 'long',    year: 'numeric' }
+    : { day: '2-digit', month: '2-digit', year: 'numeric' })
+  const hora  = date.toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit' })
+  return `${fecha} - ${hora}`
+}
+
+export default function AuthorBlock({ autor, publicarComoOrg = false, fechaPublicacion, isAmp = false }) {
+  const theme      = useTheme()
+  const { slots }  = useSiteConfig()
+  const v          = String(theme.authorBlock ?? 1)
+
+  const settings    = slots?.header?.settings ?? {}
+  const iconUrl     = settings.iconUrl ?? null
+  const siteName    = settings.siteName ?? null
+
+  const useOrg      = publicarComoOrg || !autor
+  const displayName = useOrg ? siteName : autor?.nombre
+  const authorSlug  = !useOrg ? (autor?.slug ?? null) : null
+
+  const showAvatar  = v === '1' || v === '2'
+  const avatarSrc   = (!useOrg && autor?.avatar) ? autor.avatar : (iconUrl || '/profile-placeholder.svg')
+  const useLongDate = v === '1' || v === '2'
+
+  const [dateStr, setDateStr] = useState(null)
+  useEffect(() => {
+    setDateStr(formatDate(fechaPublicacion, useLongDate))
+  }, [fechaPublicacion, useLongDate])
+
+  const inlineStyle = isAmp ? {} : {
+    '--primary-color':   theme.primary,
+    '--surface-color':   theme.surface,
+    '--secondary-color': theme.secondary,
+  }
+
+  const ampDate = isAmp ? formatDate(fechaPublicacion, useLongDate) : null
+
+  const Variant = VARIANTS[v] ?? V1
+
+  const sharedProps = {
+    isAmp,
+    inlineStyle,
+    displayName,
+    authorSlug,
+    dateStr,
+    ampDate,
+    avatarSrc,
+    showAvatar,
+    v,
+  }
+
+  return <Variant {...sharedProps} />
+}

package/src/components/AuthorBlock/AuthorBlock.module.scss

@@ -0,0 +1,35 @@
+@use "../../styles/index.scss" as *;
+
+// ── Base ─────────────────────────────────────────────────────────────────────
+
+.container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.25rem;
+  font-family: var(--font-inter, Inter, sans-serif);
+  font-size: 14px;
+  border-left: 3px solid var(--primary-color, #b1043f);
+
+  @include respond(desktop) {
+    margin-bottom: 0rem;
+  }
+
+}
+
+
+.avatar {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.name strong {
+  font-weight: 700;
+}

package/src/components/AuthorBlock/variants/V1/V1.jsx

@@ -0,0 +1,38 @@
+import { useAdapters } from '../../../../adapters/AdaptersContext.jsx'
+import shared from '../../AuthorBlock.module.scss'
+import s from './V1.module.scss'
+
+export default function V1({ isAmp, inlineStyle, displayName, authorSlug, dateStr, ampDate, avatarSrc, showAvatar, v }) {
+  const { Link } = useAdapters()
+  if (isAmp) {
+    return (
+      <div className={`author-block author-block--${v}`} style={inlineStyle}>
+        {showAvatar && (
+          <amp-img src={avatarSrc} alt={displayName ?? ''} width="64" height="64" layout="fixed" class="author-block__avatar" />
+        )}
+        <div className="author-block__info">
+          <span className="author-block__name">Por <strong>{displayName}</strong></span>
+          {ampDate && <span className="author-block__date">{ampDate}</span>}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`${shared.container} ${s.root}`} style={inlineStyle}>
+      {showAvatar && (
+        <img src={avatarSrc} alt={displayName ?? ''} className={shared.avatar} />
+      )}
+      <div className={shared.info}>
+        <span className={`${shared.name} ${s.name}`}>
+          
+          {authorSlug
+            ? <Link href={`/autor/${authorSlug}`}><strong>{displayName}</strong></Link>
+            : <strong>Por{' '} {displayName}</strong>
+          }
+        </span>
+        {dateStr && <span className={`${shared.date} ${s.date}`}>{dateStr}</span>}
+      </div>
+    </div>
+  )
+}

package/src/components/AuthorBlock/variants/V1/V1.module.scss

@@ -0,0 +1,25 @@
+@use "../../../../styles/index.scss" as *;
+
+.root {
+  background: var(--surface-color, #f5f5f5);
+  padding: 14px 16px;
+  gap: 14px;
+}
+
+.name {
+  color: var(--text-color, #252523);
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover strong {
+      color: var(--primary-color, #b1043f);
+    }
+  }
+
+  strong:hover {
+    color: var(--primary-color, #b1043f);
+  }
+}
+.date { color: var(--text-color, #252523); }

package/src/components/AuthorBlock/variants/V2/V2.jsx

@@ -0,0 +1,38 @@
+import { useAdapters } from '../../../../adapters/AdaptersContext.jsx'
+import shared from '../../AuthorBlock.module.scss'
+import s from './V2.module.scss'
+
+export default function V2({ isAmp, inlineStyle, displayName, authorSlug, dateStr, ampDate, avatarSrc, showAvatar, v }) {
+  const { Link } = useAdapters()
+  if (isAmp) {
+    return (
+      <div className={`author-block author-block--${v}`} style={inlineStyle}>
+        {showAvatar && (
+          <amp-img src={avatarSrc} alt={displayName ?? ''} width="64" height="64" layout="fixed" class="author-block__avatar" />
+        )}
+        <div className="author-block__info">
+          <span className="author-block__name">Por <strong>{displayName}</strong></span>
+          {ampDate && <span className="author-block__date">{ampDate}</span>}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`${shared.container} ${s.root}`} style={inlineStyle}>
+      {showAvatar && (
+        <img src={avatarSrc} alt={displayName ?? ''} className={shared.avatar} />
+      )}
+      <div className={shared.info}>
+        <span className={`${shared.name} ${s.name}`}>
+          Por{' '}
+          {authorSlug
+            ? <Link href={`/autor/${authorSlug}`}><strong>{displayName}</strong></Link>
+            : <strong>{displayName}</strong>
+          }
+        </span>
+        {dateStr && <span className={`${shared.date} ${s.date}`}>{dateStr}</span>}
+      </div>
+    </div>
+  )
+}

package/src/components/AuthorBlock/variants/V2/V2.module.scss

@@ -0,0 +1,10 @@
+@use "../../../../styles/index.scss" as *;
+
+.root {
+  background: var(--secondary-color, #16234a);
+  padding: 14px 16px;
+  gap: 14px;
+}
+
+.name  { color: #fff; }
+.date  { color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; }

package/src/components/AuthorBlock/variants/V3/V3.jsx

@@ -0,0 +1,30 @@
+import { useAdapters } from '../../../../adapters/AdaptersContext.jsx'
+import shared from '../../AuthorBlock.module.scss'
+import s from './V3.module.scss'
+
+export default function V3({ isAmp, inlineStyle, displayName, authorSlug, dateStr, ampDate, v }) {
+  const { Link } = useAdapters()
+  if (isAmp) {
+    return (
+      <div className={`author-block author-block--${v}`} style={inlineStyle}>
+        <div className="author-block__info">
+          <span className="author-block__name">Por <strong>{displayName}</strong></span>
+          {ampDate && <span className="author-block__date">{ampDate}</span>}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`${shared.container} ${s.root}`} style={inlineStyle}>
+      <span className={`${shared.name} ${s.name}`}>
+        Por{' '}
+        {authorSlug
+          ? <Link href={`/autor/${authorSlug}`}><strong>{displayName}</strong></Link>
+          : <strong>{displayName}</strong>
+        }
+      </span>
+      {dateStr && <span className={`${shared.date} ${s.date}`}>{dateStr}</span>}
+    </div>
+  )
+}

package/src/components/AuthorBlock/variants/V3/V3.module.scss

@@ -0,0 +1,10 @@
+@use "../../../../styles/index.scss" as *;
+
+.root {
+  background: var(--secondary-color, #16234a);
+  padding: 14px 16px;
+  justify-content: space-between;
+}
+
+.name { color: #fff; }
+.date { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; }

package/src/components/AuthorBlock/variants/V4/V4.jsx

@@ -0,0 +1,30 @@
+import { useAdapters } from '../../../../adapters/AdaptersContext.jsx'
+import shared from '../../AuthorBlock.module.scss'
+import s from './V4.module.scss'
+
+export default function V4({ isAmp, inlineStyle, displayName, authorSlug, dateStr, ampDate, v }) {
+  const { Link } = useAdapters()
+  if (isAmp) {
+    return (
+      <div className={`author-block author-block--${v}`} style={inlineStyle}>
+        <div className="author-block__info">
+          <span className="author-block__name">Por <strong>{displayName}</strong></span>
+          {ampDate && <span className="author-block__date">{ampDate}</span>}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`${shared.container} ${s.root}`} style={inlineStyle}>
+      <span className={`${shared.name} ${s.name}`}>
+        Por{' '}
+        {authorSlug
+          ? <Link href={`/autor/${authorSlug}`}><strong>{displayName}</strong></Link>
+          : <strong>{displayName}</strong>
+        }
+      </span>
+      {dateStr && <span className={`${shared.date} ${s.date}`}>{dateStr}</span>}
+    </div>
+  )
+}

package/src/components/AuthorBlock/variants/V4/V4.module.scss

@@ -0,0 +1,10 @@
+@use "../../../../styles/index.scss" as *;
+
+.root {
+  background: var(--surface-color, #f5f5f5);
+  padding: 14px 16px;
+  justify-content: space-between;
+}
+
+.name { color: #1a1a1a; }
+.date { color: #555; font-size: 0.9rem; }