Podcast · Debate

Las Cosas Por Su NombreEvery debate episode turned into a page that answers the question in its title

Site for Jorge Cassis's debate podcast: 34 episodes with a short answer, key points linked to the exact minute of the video, and an FAQ.

Technologies

  • Astro 7
  • React 19
  • TypeScript
  • MDX
  • Tailwind CSS v4
  • GSAP
  • Fontsource
  • YouTube (youtube-nocookie)
  • Node.js
  • Docker
  • Google Analytics 4
  • Microsoft Clarity
Home page of the Las Cosas Por Su Nombre site, a debate podcast hosted by Jorge Cassis, in black and red
  • 34

    episodes

  • 403

    key points linked to the minute

  • 139

    FAQ answers

My role

Design and development of the site at Azirgo SAS: the Next.js to Astro migration, the episode content model, performance, and SEO for search engines and answer engines.

The problem

The project started as a pitch landing page for the show, with sections built to sell the format and its sponsorships. But the podcast's titles are questions - “Why do you keep falling for pyramid schemes?” - and people searching for them want the answer, not a pitch. It needed an archive where each episode answered its own question in text, could be browsed by topic, and led to the exact minute of the video where each point is discussed.

What I built

  • An archive of 34 episodes at /episodios, with a topic index, a count of episodes and guests, and a mosaic made of thumbnails from the whole catalogue.
  • An episode page that opens with “En corto” (in short), a 40-to-60-word answer to the question in the title, placed right under the H1 and before the player.
  • Timestamped key points that link to the exact minute of the video on YouTube, plus a summary and a chapter-by-chapter write-up; five episodes also show the first part of their transcript.
  • An FAQ on every episode, visible at the foot of the page and published as FAQPage.
  • An author page for Jorge Cassis: what makes the show different, how he argues, the topics that keep coming back and what he has told in the first person.
  • An editorial home page in blocks - the opportunity, the solution, the values, the host, four pillars with an example episode each - and two curated selections: “What nobody wants to talk about” and “When the system leaves you alone”.
  • A contact form and a sponsorship bubble that open WhatsApp with the details already written.

How it's structured

Astro with server output and the Node adapter in standalone mode, packaged with Docker. All content lives in a single MDX collection: there is no database and no external API call involved in building the pages.

  • Public routes: home, /episodios, 34 pages at /episodios/<slug>, /autor/jorge-cassis, /contacto and a custom 404, plus sitemap.xml, robots.txt and llms.txt generated as endpoints.
  • Each episode declares number, title, YouTube ID, date, duration, guests, topics, short answer, summary, key points and questions; the short search title and description are optional and length-capped.
  • Page order: breadcrumbs, title, “En corto”, player, summary, key points, chapter write-up, FAQ, three recommended episodes and a contact form.
  • Structured data: Organization and WebSite from the layout; PodcastEpisode with VideoObject, BreadcrumbList and FAQPage on every episode; ProfilePage, Person and FAQPage on the author page; ContactPage, LocalBusiness and FAQPage on contact.
  • llms.txt lists every episode with its number, its standfirst and its guests, and robots.txt explicitly welcomes AI search engines.
  • Two-step middleware: first the subdomain routing, which serves two internal prototype dashboards kept out of the sitemap and set to noindex, then the security headers with an enforced CSP.

Visual identity

Black, white and a single red. Uppercase Anton for headlines, Inter for labels and Barlow for body text, with a layer of photographic grain over the whole page.

  • Episode thumbnails are used as texture: desaturated and darkened behind the headings, at just enough intensity for the text to always win.
  • Home page blocks are headed with inline icons rather than decorative numerals, because they are independent observations, not a sequence.
  • The hero uses a real photo of the studio as its background, served in four sizes and preloaded with the same srcset the image declares.

Inside the site

  • Las Cosas Por Su Nombre: Episode page that opens with the short answer to the question in its title
    Episode page that opens with the short answer to the question in its title.
  • Las Cosas Por Su Nombre: Host page for Jorge Cassis
    Host page for Jorge Cassis.

Technical decisions

  • No API and no CMS: each episode is an MDX file with validated frontmatter, and the thumbnail is not uploaded to the repository, it is derived from the YouTube ID. Publishing an episode means adding a file, and if a field is missing the build fails with the exact error.
  • The short answer goes at the very top because answer engines extract from the upper part of the page: the description says what the episode is about, while “En corto” answers the question and stands on its own, without the rest of the page in front of it.
  • Topics were written in each episode's own vocabulary, so most of them appeared only once and the recommendations ended up sorted by date alone. A synonym map groups them only to compute affinity; on screen they are still shown exactly as written.
  • Six home page sections moved from React islands to Astro components with CSS and a shared IntersectionObserver: according to PageSpeed they were carrying 129 KB of unused JavaScript. The only island left is the pillars section, which does have state.
  • The player is a facade - thumbnail and play button - and the youtube-nocookie iframe is only inserted on click. Fonts are self-hosted, with fallback fonts tuned to their metrics so the font swap does not shift the layout.

Challenges

  • Migrating from Next.js to Astro without breaking the subdomain routing the project already had: in Astro the rewrite had to be done without running the middleware again, because the host does not change and the request fell into a loop.
  • Condensing conversations of more than two hours, with several guests at the table, into a short answer, timestamped key points and an FAQ per episode.
  • Measuring with GA4 and Clarity without penalising the load: both libraries are downloaded after the load event, the visitor's first gesture or three seconds, whichever comes first, and the CSP declares every domain they use.

Result

The site is in production with the full archive, the host's page and a new episode every Wednesday. Each episode page works both as a page for search engines and as citable material: a short answer, timestamped points and an FAQ, all marked up with structured data.

Need something like this?

Tell me what you're building and I'll come back with scope, stack and a realistic timeline.