// Página /blog// — composante générique d'article // Charge /blog//article.md via fetch, le parse avec marked et le rend. // Génère une TOC à partir des H2. Expose window.BlogArticle. const slugify = (text) => text .toLowerCase() .normalize('NFD').replace(/[̀-ͯ]/g, '') .replace(/[^a-z0-9\s-]/g, '') .trim() .replace(/\s+/g, '-'); const BlogArticleHero = ({ article }) => { const heroCtx = (typeof useCountry === 'function') ? useCountry() : null; const heroCountry = (heroCtx && heroCtx.country) || 'co'; return (
{article.categoryLabel} {article.dateLabel} {article.readTime}

{article.title}

Por{' '} {article.authorUrl ? ( {article.author} ) : ( {article.author} )}
{article.authorBio && (
{article.authorBio}
)} {article.updatedDateLabel && article.updatedDateLabel !== article.dateLabel && (
Última actualización: {article.updatedDateLabel}
)}
); }; const BlogArticleCover = ({ article }) => (
); const BlogToc = ({ items }) => { if (!items.length) return null; return ( ); }; const BlogInlineCta = () => { const ctaCtx = (typeof useCountry === 'function') ? useCountry() : null; const ctaCountry = (ctaCtx && ctaCtx.country) || 'co'; return (
Empieza con CloserBroker
Estructura tu agencia con un{' '} CRM diseñado para LATAM.
Pipeline visual, automatizaciones, bolsa inmobiliaria, portal Ogarom y más — todo desde el mismo lugar, sin sorpresas en la factura.
Ver precios
); }; const BlogRelated = ({ articles }) => { const relCtx = (typeof useCountry === 'function') ? useCountry() : null; const relCountry = (relCtx && relCtx.country) || 'co'; if (!articles.length) return null; return (
Sigue leyendo

Otros artículos que{' '} te pueden interesar.

{articles.map(a => (
{a.categoryLabel} {a.dateLabel}

{a.title}

))}
); }; const BlogArticle = ({ slug }) => { const ctx = (typeof useCountry === 'function') ? useCountry() : null; const country = (ctx && ctx.country) || 'co'; // Pour la lookup individuelle on utilise la liste COMPLETE (incluant articles programmés) // pour que l'URL directe d'un article futur reste accessible (preview, partage, Google). const articlesAll = (typeof getAllBlogArticles === 'function') ? getAllBlogArticles(country) : ((typeof getBlogArticles === 'function') ? getBlogArticles(country) : BLOG_ARTICLES); const article = articlesAll.find(a => a.slug === slug); const [html, setHtml] = React.useState(''); const [error, setError] = React.useState(null); const [toc, setToc] = React.useState([]); const proseRef = React.useRef(null); React.useEffect(() => { if (!article) return; if (!window.marked) { setError('marked-not-loaded'); return; } fetch(`/${country}/blog/${slug}/article.md`, { cache: 'no-cache' }) .then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.text(); }) .then(md => { const parsed = window.marked.parse(md); setHtml(parsed); }) .catch(e => setError(String(e))); }, [slug, country]); React.useEffect(() => { if (!html || !proseRef.current) return; const h2s = proseRef.current.querySelectorAll('h2'); const items = []; h2s.forEach((h, i) => { const text = h.textContent || ''; const baseId = slugify(text) || `section-${i}`; h.id = baseId; items.push({ id: baseId, text }); }); setToc(items); const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.1, rootMargin: '0px 0px -10% 0px' }); proseRef.current.querySelectorAll('.reveal, h2, h3, p, ul, ol, blockquote').forEach(el => { el.classList.add('reveal'); obs.observe(el); }); return () => obs.disconnect(); }, [html]); React.useEffect(() => { const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.1, rootMargin: '0px 0px -10% 0px' }); document.querySelectorAll('.reveal').forEach(el => obs.observe(el)); return () => obs.disconnect(); }, []); if (!article) { return ( <>