I spent Friday evening and some of Saturday trying to understand why my site’s CI/CD build pipeline was failing. I introduced a new component for displaying Venn diagrams. This can be used anywhere, including MDX files I use for articles. Everything worked locally but failed on GitHub Actions, Netlify, and Cloudflare pages.

I tried everything I could think of, eventually going as far as creating a new component with a new name in a new directory under the suspicion Git was somehow to blame. It worked.

Even more perplexed by this, I wrapped my component in a try/catch in case the usage of happy-dom was causing a rendering failure in Astro that was somehow being interpreted as the file not existing. I use happy-dom to emulate the DOM for the sake of Venn.js - a solution I’m not happy with generally and want to replace with a more elegant and robust solution.

It was then I realised the problem! Changes I made in the Venn diagram component were not even being tracked!

One deep breath later I checked my .gitignore, and sure enough, any directory called astro was being ignored. The component was at /src/components/experiments/astro/VennDiagram.astro. The reason this was in my .gitignore was because in February, for some reason, I added two entries instead of one:

coverage
astro

Problem solved! 😐 Here is an example Venn diagram.

<VennDiagram
    size="medium"
    sets={[
        { sets: ['A'], size: 20 },
        { sets: ['B'], size: 10 },
        { sets: ['C'], size: 5 },
        { sets: ['A', 'B'], size: 2 },
        { sets: ['A', 'C'], size: 2 },
        { sets: ['B', 'C'], size: 4 },
    ]} />