// PepLab Co — Article detail page (/article/:slug) // Renders one full article based on slug from URL query string const { useState: useStateA, useEffect: useEffectA } = React; // Read slug from URL: /article/:slug rewrites to /article.html?slug=:slug const getSlugFromUrl = () => { try { const params = new URLSearchParams(window.location.search); const fromQuery = params.get("slug"); if (fromQuery) return fromQuery; // Fallback: parse path /article/xxx const m = window.location.pathname.match(/\/article\/([^/?#]+)/); return m ? m[1] : null; } catch (e) { return null; } }; // Render a single content block const ArticleBlock = ({ block, idx }) => { switch (block.type) { case "h2": return (

{block.text}

); case "h3": return (

{block.text}

); case "p": return (

{block.text}

); case "list": return ( ); case "callout": return ( ); case "quote": return (

"{block.text}"

); default: return null; } }; // Hero of article page const ArticleHero = ({ article }) => (
← Volver a la guía
{article.tag} · Lectura {article.read}

{article.title}

{article.subtitle}

{article.author} — {article.date}
); // Featured image slot const ArticleImage = ({ article }) => { if (!article.image) return null; return (
{article.title}
); }; // Body with sidebar TOC const ArticleBody = ({ article }) => { const headings = article.body .map((b, idx) => ({ ...b, idx })) .filter((b) => b.type === "h2"); return (
{/* Sidebar TOC */} {/* Body */}
{article.body.map((block, idx) => ( ))}
); }; // Related products card row const RelatedProducts = ({ slugs, onSelect }) => { if (!slugs || slugs.length === 0) return null; const products = (window.PEPLAB_PRODUCTS || []).filter((p) => slugs.includes(p.slug) ); if (products.length === 0) return null; return (
Productos mencionados

Lo que aplica a este artículo.

{products.map((p) => ( ))}
); }; // Related articles const RelatedArticles = ({ slugs }) => { if (!slugs || slugs.length === 0) return null; const articles = slugs .map((s) => window.PEPLAB_ARTICLES[s]) .filter(Boolean); if (articles.length === 0) return null; return (
Sigue leyendo

Más sobre el tema.

{articles.map((a) => ( { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 18px 40px rgba(11,37,69,0.10)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }} >
{a.image ? ( {a.title} ) : (
EDITORIAL · {a.tag.toUpperCase()}
)}
{a.tag} · {a.read}

{a.title}

Leer
))}
); }; // Article CTA at end const ArticleCTA = () => (

¿Te quedaron dudas?

Escríbenos por WhatsApp y resolvemos cualquier consulta antes de tu pedido.

Conversemos por WhatsApp
); // 404 article const ArticleNotFound = () => (
Error 404

Artículo no encontrado.

El artículo que buscas no existe o fue movido. Volvé al hub editorial para ver los disponibles.

Ver todos los artículos
); // Main App for /article route function ArticleApp() { const [tweaks, setTweak] = useTweaks( /*EDITMODE-BEGIN*/ { aesthetic: "editorial", showAgeGate: true, motion: "high" } /*EDITMODE-END*/ ); const [scrolled, setScrolled] = useStateA(false); const [ageOk, setAgeOk] = useStateA(!tweaks.showAgeGate || ageVerified()); const [activeProduct, setActiveProduct] = useStateA(null); const [cartOpen, setCartOpen] = useStateA(false); useEffectA(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); useEffectA(() => { document.body.classList.toggle("reduce-motion", tweaks.motion === "low"); }, [tweaks.motion]); // Restore aesthetic from localStorage const aestheticInitRef = React.useRef(false); useEffectA(() => { if (aestheticInitRef.current) return; aestheticInitRef.current = true; try { const saved = localStorage.getItem("peplab-aesthetic"); if (saved && saved !== tweaks.aesthetic) setTweak("aesthetic", saved); } catch (e) {} }, []); useEffectA(() => { if (window.applyAesthetic) window.applyAesthetic(tweaks.aesthetic); try { localStorage.setItem("peplab-aesthetic", tweaks.aesthetic); } catch (e) {} }, [tweaks.aesthetic]); const slug = getSlugFromUrl(); const article = slug ? window.PEPLAB_ARTICLES[slug] : null; // Update document title and meta dynamically useEffectA(() => { if (article) { document.title = `${article.title} · PepLab Co`; const desc = document.querySelector('meta[name="description"]'); if (desc) desc.setAttribute("content", article.subtitle); } }, [article]); return (
setCartOpen(true)} />
{article ? ( <> ) : ( )}
setTweak("aesthetic", v)} /> {!ageOk && { markAgeVerified(); setAgeOk(true); }} />} setActiveProduct(null)} /> setCartOpen(false)} /> setCartOpen(true)} />
); } ReactDOM.createRoot(document.getElementById("root")).render();