@crtobiasdelsud/portal-ui 1.1.13 → 1.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "Componentes compartidos entre el portal (Next) y el CMS (Vite) — widgets, views, providers para adapters y article pool.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/ArticleHero/ArticleHero.jsx

@@ -43,7 +43,10 @@ export default function ArticleHero({ titulo, volanta, copete, imagen, imagenes,
           alt={titulo ?? ''}
           class="article-hero__img"
           layout="fill"
-        />
+        >
+          {/* Placeholder si la imagen falla (AMP no deja colapsar el hueco). */}
+          <div fallback="" className="article-hero__img-fallback">Imagen no disponible</div>
+        </amp-img>
       )
     } else if (slides.length > 1) {
       ImgEl = (

package/src/components/Blocks/BlockColumns/BlockColumns.jsx

@@ -15,7 +15,9 @@ export default function BlockColumns({ widgets, registry, settings = {} }) {
   const fantasmaArticleId = importantHero?.settings?.fantasmaArticleId
   const layout = settings.layout ?? 'default'
 
-  const gridClass = layout === 'categoriaDos'
+  const gridClass = layout === 'heroIzquierda'
+    ? style.gridHeroLeft
+    : layout === 'categoriaDos'
     ? style.gridCategoriaDos
     : hasImportant ? style.gridFeatured : style.gridNormal
 

package/src/components/Blocks/BlockColumns/BlockColumns.module.scss

@@ -56,6 +56,20 @@
   }
 }
 
+/* Espejo de gridNormal: hero ancho (2 cols) a la IZQUIERDA + los 2 widgets
+   acompañantes (1 col c/u) a la derecha. Apilado en mobile como el resto. */
+.gridHeroLeft {
+  grid-template-areas:
+    "hero"
+    "recommended"
+    "feed";
+
+  @include respond(desktop) {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-areas: "hero hero recommended feed";
+  }
+}
+
 .item {
   min-width: 0;
   overflow: hidden;

package/src/components/Blocks/BlockColumnsHeroLeft/BlockColumnsHeroLeft.jsx

@@ -0,0 +1,12 @@
+import BlockColumns from "../BlockColumns/BlockColumns"
+
+/**
+ * Espejo de BlockColumns con el Hero ancho (2 cols) a la IZQUIERDA y los 2
+ * widgets acompañantes (1 col c/u) a la derecha. No tiene grilla propia: solo
+ * fuerza `layout: 'heroIzquierda'`, que BlockColumns traduce a la clase
+ * `.gridHeroLeft` ("hero hero recommended feed"). Mismo patrón que el par
+ * BlockHeroTrio / BlockHeroTrioLeft.
+ */
+export default function BlockColumnsHeroLeft({ settings = {}, ...props }) {
+  return <BlockColumns {...props} settings={{ ...settings, layout: 'heroIzquierda' }} />
+}

package/src/components/EditorOutput/EditorOutput.jsx

@@ -285,7 +285,12 @@ function Block({ block, cls, isAmp }) {
                   width={w || 1200}
                   height={h || 675}
                   layout="responsive"
-                />
+                >
+                  {/* AMP no permite JS para colapsar el hueco si la imagen
+                      falla; el `fallback` es lo válido: muestra un placeholder
+                      prolijo en lugar de un recuadro vacío. */}
+                  <div fallback="" className="eo-image-fallback">Imagen no disponible</div>
+                </amp-img>
               : <img
                   src={imgSrc}
                   alt={alt}

package/src/components/Footers/FooterSimple/FooterSimple.jsx

@@ -137,11 +137,73 @@ export default function FooterSimple({ isAmp = false }) {
   )
 
   if (isAmp) {
+    // Markup AMP dedicado con clases fijas `footer-simple__*` (las del partial
+    // SCSS compilado a amp-custom) y <amp-img> — NO clases de CSS module, que en
+    // AMP no existen. Misma estructura que el footer real: fila de 2 columnas
+    // (izq logo+slogan+legal / der categorías + redes+links) y barra inferior.
+    const catHref = (slug) => (slug ? (slug.startsWith('/') ? slug : `/${slug}`) : '#')
+    // Sin `style` inline: AMP lo prohíbe. Los colores del footer llegan por las
+    // vars globales --footer-bg/--footer-text/--footer-accent (ver _document.jsx).
     return (
-      <footer className="footer-simple" style={inlineStyle}>
-        {logoEl}{sloganEl}{socialEl}{navEl}
-        <hr className="footer-simple__divider" />
-        {legalEl}{staticLinksEl}{bottomEl}
+      <footer className="footer-simple">
+        <div className="footer-simple__main">
+
+          <div className="footer-simple__left">
+            {(logoUrl || iconUrl) && (
+              <div className="footer-simple__logo-wrap">
+                <a href="/" aria-label={`Ir a inicio - ${siteName ?? ''}`}>
+                  <amp-img src={logoUrl || iconUrl} alt={logoAlt || siteName} class="footer-simple__logo-img" layout="fixed-height" height="53" />
+                </a>
+              </div>
+            )}
+            {slogan && <p className="footer-simple__slogan">{slogan}</p>}
+            <div className="footer-simple__legal">
+              {legal.owner    && <p className="footer-simple__legal-row">Propietario: <strong>{legal.owner}</strong></p>}
+              {legal.director && <p className="footer-simple__legal-row">Director: <strong>{legal.director}</strong></p>}
+              {legal.edition  && <p className="footer-simple__legal-row">Edición: <strong>{legal.edition}</strong></p>}
+              <p className="footer-simple__legal-row">Fecha: <strong>{formatFecha()}</strong></p>
+              {legal.dnda     && <p className="footer-simple__legal-row">DNDA: <strong>{legal.dnda}</strong></p>}
+              {legal.address  && <p className="footer-simple__legal-row">Domicilio legal: <strong>{legal.address}</strong></p>}
+            </div>
+          </div>
+
+          <div className="footer-simple__right">
+            {categories.length > 0 && (
+              <nav className="footer-simple__nav">
+                <ul className="footer-simple__nav-list">
+                  {categories.map((cat) => (
+                    <li key={cat.id}>
+                      <a href={catHref(cat.slug)} className="footer-simple__nav-link">{cat.label}</a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            )}
+            <div className="footer-simple__social-row">
+              <div className="footer-simple__social">
+                {social.facebook  && <a href={social.facebook}  aria-label="Facebook"  className="footer-simple__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/facebook.svg"  alt="Facebook"  width="22" height="22" layout="fixed" /></a>}
+                {social.instagram && <a href={social.instagram} aria-label="Instagram" className="footer-simple__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/instagram.svg" alt="Instagram" width="22" height="22" layout="fixed" /></a>}
+                {social.tiktok    && <a href={social.tiktok}    aria-label="TikTok"    className="footer-simple__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/tiktok.svg"    alt="TikTok"    width="22" height="22" layout="fixed" /></a>}
+                {social.youtube   && <a href={social.youtube}   aria-label="YouTube"   className="footer-simple__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/youtube.svg"   alt="YouTube"   width="22" height="22" layout="fixed" /></a>}
+              </div>
+              {allLinks.length > 0 && (
+                <div className="footer-simple__links">
+                  {allLinks.map(({ label, href }, i) => (
+                    <span key={href} className="footer-simple__link-item">
+                      {i > 0 && <span className="footer-simple__link-sep">/</span>}
+                      <a href={href} className="footer-simple__link">{label}</a>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+        </div>
+
+        {bottomBarContent && (
+          <div className="footer-simple__bottom">{bottomBarContent}</div>
+        )}
       </footer>
     )
   }

package/src/components/Headers/HeaderSimple/HeaderSimpleAmp/HeaderSimpleAmp.jsx

@@ -19,17 +19,26 @@ export default function HeaderSimpleAmp({ settings = {} }) {
         <div className="header-simple__brand">
           {resolvedLogo ? (
             <a href="/" aria-label={`Ir a inicio - ${siteName}`}>
-              <amp-img src={resolvedLogo.src ?? resolvedLogo} alt={logoAlt || siteName} class="header-simple__logo-img" layout="fixed-height" height="30" />
+              <amp-img src={resolvedLogo.src ?? resolvedLogo} alt={logoAlt || siteName} class="header-simple__logo-img" layout="fixed-height" height="44" />
             </a>
           ) : logoUrl ? (
             <a href="/" aria-label={`Ir a inicio - ${siteName}`}>
-              <amp-img src={logoUrl} alt={logoAlt || siteName} class="header-simple__logo-img" layout="fixed-height" height="30" />
+              <amp-img src={logoUrl} alt={logoAlt || siteName} class="header-simple__logo-img" layout="fixed-height" height="44" />
             </a>
           ) : (
             <span className="header-simple__logo">{siteName}</span>
           )}
         </div>
 
+        {/* Desktop: redes a la derecha (en mobile se usa la hamburguesa). */}
+        <div className="header-simple__social-desktop">
+          {social.facebook  && <a href={social.facebook}  aria-label="Facebook"  target="_blank" rel="noopener noreferrer"><amp-img src="/icons/facebook.svg"  alt="Facebook"  width="22" height="22" layout="fixed" /></a>}
+          {social.twitter   && <a href={social.twitter}   aria-label="X"         target="_blank" rel="noopener noreferrer"><amp-img src="/icons/x.svg"         alt="X"         width="22" height="22" layout="fixed" /></a>}
+          {social.instagram && <a href={social.instagram} aria-label="Instagram" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/instagram.svg" alt="Instagram" width="22" height="22" layout="fixed" /></a>}
+          {social.tiktok    && <a href={social.tiktok}    aria-label="TikTok"    target="_blank" rel="noopener noreferrer"><amp-img src="/icons/tiktok.svg"    alt="TikTok"    width="22" height="22" layout="fixed" /></a>}
+          {social.youtube   && <a href={social.youtube}   aria-label="YouTube"   target="_blank" rel="noopener noreferrer"><amp-img src="/icons/youtube.svg"   alt="YouTube"   width="22" height="22" layout="fixed" /></a>}
+        </div>
+
         <button
           className="header-simple__burger"
           on="tap:amp-nav-sidebar.toggle"
@@ -40,56 +49,77 @@ export default function HeaderSimpleAmp({ settings = {} }) {
           </svg>
         </button>
 
-        <amp-sidebar id="amp-nav-sidebar" layout="nodisplay" side="left">
-          <div className="amp-sidebar__header">
-            <button on="tap:amp-nav-sidebar.close" className="amp-sidebar__close" aria-label="Cerrar menú">✕</button>
-          </div>
+      </div>
 
-          {searchEnabled && (
-            <div className="amp-sidebar__search">
-              <input type="search" placeholder="Buscar..." className="amp-sidebar__search-input" />
-            </div>
-          )}
+      {/* Desktop: barra de categorías horizontal — mismo look que CategoriesBar
+          del portal (links en mayúscula separados por puntos), pero SIN el
+          carrusel con flechas (AMP no permite el JS de scroll). */}
+      {categories.length > 0 && (
+        <nav className="header-simple__cats" aria-label="Categorías">
+          <ul className="header-simple__cats-list">
+            {categories.map((cat) => (
+              <li key={cat.id} className="header-simple__cats-item">
+                <a
+                  href={cat.slug ? (cat.slug.startsWith('/') ? cat.slug : `/${cat.slug}`) : '#'}
+                  className="header-simple__cats-link"
+                >
+                  {(cat.label ?? '').toUpperCase()}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )}
 
-          <nav>
-            <ul className="amp-sidebar__nav">
-              {categories.map((cat) => (
-                <li key={cat.id} className="amp-sidebar__nav-item">
-                  {cat.subcategories?.length ? (
-                    <details className="amp-sidebar__sub-menu">
-                      <summary className="amp-sidebar__nav-link-summary">
-                        {cat.label}
-                        <span className="amp-sidebar__arrow">›</span>
-                      </summary>
-                      <ul className="amp-sidebar__sub-list">
-                        {cat.subcategories.map((sub) => (
-                          <li key={sub.id}>
-                            <a href={sub.slug ? (sub.slug.startsWith('/') ? sub.slug : `/${sub.slug}`) : '#'} className="amp-sidebar__sub-link">{sub.label}</a>
-                          </li>
-                        ))}
-                      </ul>
-                    </details>
-                  ) : (
-                    <a href={cat.slug ? (cat.slug.startsWith('/') ? cat.slug : `/${cat.slug}`) : '#'} className="amp-sidebar__nav-link">{cat.label}</a>
-                  )}
-                </li>
-              ))}
-            </ul>
-          </nav>
+      <amp-sidebar id="amp-nav-sidebar" layout="nodisplay" side="left">
+        <div className="amp-sidebar__header">
+          <button on="tap:amp-nav-sidebar.close" className="amp-sidebar__close" aria-label="Cerrar menú">✕</button>
+        </div>
 
-          <div className="amp-sidebar__social">
-            <span className="amp-sidebar__social-label">Seguinos en:</span>
-            <div className="amp-sidebar__social-icons">
-              {social.facebook  && <a href={social.facebook}  aria-label="Facebook"  className="amp-sidebar__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/facebook.svg"  alt="Facebook"  width="24" height="24" layout="fixed" /></a>}
-              {social.twitter   && <a href={social.twitter}   aria-label="X"         className="amp-sidebar__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/x.svg"         alt="X"         width="24" height="24" layout="fixed" /></a>}
-              {social.instagram && <a href={social.instagram} aria-label="Instagram" className="amp-sidebar__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/instagram.svg" alt="Instagram" width="24" height="24" layout="fixed" /></a>}
-              {social.youtube   && <a href={social.youtube}   aria-label="YouTube"   className="amp-sidebar__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/youtube.svg"   alt="YouTube"   width="24" height="24" layout="fixed" /></a>}
-              {social.tiktok    && <a href={social.tiktok}    aria-label="TikTok"    className="amp-sidebar__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/tiktok.svg"    alt="TikTok"    width="24" height="24" layout="fixed" /></a>}
-            </div>
+        {searchEnabled && (
+          <div className="amp-sidebar__search">
+            <input type="search" placeholder="Buscar..." className="amp-sidebar__search-input" />
           </div>
-        </amp-sidebar>
+        )}
+
+        <nav>
+          <ul className="amp-sidebar__nav">
+            {categories.map((cat) => (
+              <li key={cat.id} className="amp-sidebar__nav-item">
+                {cat.subcategories?.length ? (
+                  <details className="amp-sidebar__sub-menu">
+                    <summary className="amp-sidebar__nav-link-summary">
+                      {cat.label}
+                      <span className="amp-sidebar__arrow">›</span>
+                    </summary>
+                    <ul className="amp-sidebar__sub-list">
+                      {cat.subcategories.map((sub) => (
+                        <li key={sub.id}>
+                          <a href={sub.slug ? (sub.slug.startsWith('/') ? sub.slug : `/${sub.slug}`) : '#'} className="amp-sidebar__sub-link">{sub.label}</a>
+                        </li>
+                      ))}
+                    </ul>
+                  </details>
+                ) : (
+                  <a href={cat.slug ? (cat.slug.startsWith('/') ? cat.slug : `/${cat.slug}`) : '#'} className="amp-sidebar__nav-link">{cat.label}</a>
+                )}
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        <div className="amp-sidebar__social">
+          <span className="amp-sidebar__social-label">Seguinos en:</span>
+          <div className="amp-sidebar__social-icons">
+            {social.facebook  && <a href={social.facebook}  aria-label="Facebook"  className="amp-sidebar__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/facebook.svg"  alt="Facebook"  width="24" height="24" layout="fixed" /></a>}
+            {social.twitter   && <a href={social.twitter}   aria-label="X"         className="amp-sidebar__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/x.svg"         alt="X"         width="24" height="24" layout="fixed" /></a>}
+            {social.instagram && <a href={social.instagram} aria-label="Instagram" className="amp-sidebar__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/instagram.svg" alt="Instagram" width="24" height="24" layout="fixed" /></a>}
+            {social.youtube   && <a href={social.youtube}   aria-label="YouTube"   className="amp-sidebar__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/youtube.svg"   alt="YouTube"   width="24" height="24" layout="fixed" /></a>}
+            {social.tiktok    && <a href={social.tiktok}    aria-label="TikTok"    className="amp-sidebar__social-link" target="_blank" rel="noopener noreferrer"><amp-img src="/icons/tiktok.svg"    alt="TikTok"    width="24" height="24" layout="fixed" /></a>}
+          </div>
+        </div>
+      </amp-sidebar>
 
-      </div>
     </header>
   )
 }

package/src/index.js

@@ -74,6 +74,7 @@ export { default as FooterSimple } from './components/Footers/FooterSimple/Foote
 
 // === Blocks (containers que iteran widgets via registry) ===
 export { default as BlockColumns }        from './components/Blocks/BlockColumns/BlockColumns.jsx'
+export { default as BlockColumnsHeroLeft } from './components/Blocks/BlockColumnsHeroLeft/BlockColumnsHeroLeft.jsx'
 export { default as BlockColumnsBajada }  from './components/Blocks/BlockColumnsBajada/BlockColumnsBajada.jsx'
 export { default as BlockMain }           from './components/Blocks/BlockMain/BlockMain.jsx'
 export { default as BlockMainNarrow }     from './components/Blocks/BlockMainNarrow/BlockMainNarrow.jsx'

package/src/utils/sanitizeHtml.js

@@ -122,16 +122,32 @@ function sanitizeUrl(value, attrName) {
     .toLowerCase()
 
   if (!normalized) return null
-  if (normalized.startsWith('#')) return trimmed
-  if (normalized.startsWith('//')) return trimmed
-  if (/^(\/|\.\.?\/|\?)/.test(normalized)) return trimmed
+
+  // URL devuelta SIN espacios, caracteres de control ni invisibles Unicode
+  // (zero-width U+200B–U+200D, word-joiner U+2060, BOM U+FEFF). El editor a
+  // veces los pega al final de la URL: la validación de protocolo ya los ignora,
+  // pero si se devolvían tal cual rompían la carga del recurso —p. ej. <amp-img>
+  // tiraba "Failed to load: …png". Una URL válida no lleva whitespace, así que
+  // quitarlo es seguro y no altera la ruta real.
+  const safe = Array.from(trimmed).filter((ch) => {
+    const c = ch.codePointAt(0)
+    if (c <= 0x1f || c === 0x7f) return false           // control
+    if (c === 0x200b || c === 0x200c || c === 0x200d) return false // zero-width
+    if (c === 0x2060 || c === 0xfeff) return false       // word-joiner, BOM
+    return !/\s/.test(ch)                                // cualquier whitespace
+  }).join('')
+  if (!safe) return null
+
+  if (normalized.startsWith('#')) return safe
+  if (normalized.startsWith('//')) return safe
+  if (/^(\/|\.\.?\/|\?)/.test(normalized)) return safe
 
   const protocolMatch = normalized.match(/^([a-z][a-z0-9+.-]*:)/)
-  if (!protocolMatch) return trimmed
+  if (!protocolMatch) return safe
   if (!SAFE_PROTOCOLS.has(protocolMatch[1])) return null
   if (attrName === 'src' && !/^https?:/.test(protocolMatch[1])) return null
 
-  return trimmed
+  return safe
 }
 
 function sanitizeNumeric(value) {