--- import HtmlEmbed from "../components/HtmlEmbed.astro"; import Seo from "../components/Seo.astro"; import ThemeToggle from "../components/ThemeToggle.astro"; import { loadEmbedsFromMDX } from "../utils/extract-embeds.mjs"; import * as ArticleMod from "../content/article.mdx"; import "katex/dist/katex.min.css"; import "../styles/global.css"; // Import article metadata const articleFM = (ArticleMod as any).frontmatter ?? {}; const stripHtml = (text: string) => String(text || "").replace(/<[^>]*>/g, ""); const articleTitle = stripHtml(articleFM?.title ?? "Article") .replace(/\\n/g, " ") .replace(/\n/g, " ") .replace(/\s+/g, " ") .trim(); const articleDesc = articleFM?.description ?? ""; // Page metadata const pageTitle = articleTitle; const pageDesc = articleDesc; // Load all embeds from the content const contentEmbeds = loadEmbedsFromMDX(); // Add banner as first embed (wide) const bannerEmbed = { src: "banner.html", wide: true, frameless: false, skipGallery: false, title: undefined, desc: undefined, data: undefined, config: undefined, }; // Combine banner + content embeds const allEmbeds = [bannerEmbed, ...contentEmbeds]; // No need to split - we'll use CSS Grid masonry layout ---

{pageTitle}

All {allEmbeds.length} interactive visualizations from this article

{ allEmbeds.length > 0 ? ( ) : (

No embeds found in the content.

) }