Dynamic CSS classes with Notion

So in this blog I generate CSS classes in Gatsby dynamically from my Notion tags, this helps automate the the front-end design and maintain consistency.

<div className="tags">
	{item.node.frontmatter.Tags.map((tag) => (
		<p className= {tag.name.replace(/ /g, '-')} >#{tag.name}</p>
		))
	}
</div>

Much like in my previous post, this is an excellent way to pass back-end information to the front-end and this specific case highlights how much control you have writing your blog using the Notion API and Gatsby, without having a traditional ‘back-end’.