Add bootstrap and blog post tags

Bootstrap

Today I added some features into the site:

  1. Added tag pills at the bottom of blog post layout.
  2. Added Bootstrap CSS for styling.

Tag Pills

  1. First I update the blog schema in src/content.config.ts, adding the tags field.
tags: z.array(z.string()).optional(),
  1. Then in BlogPost.astro, add tags new props:
const { ..., heroImage, tags } = Astro.props;
  1. Finally adding the markup:
<div style="display: flex;">
{tags && tags.map((tag: string) => 
    <div><span class="badge text-bg-secondary">#{tag}</span>&nbsp;</div>
)}
</div>

Adding Bootstrap CSS

  1. Install Bootstrap:
yarn add bootstrap
  1. Import the bootstrap CSS into BaseHead.astro:
import 'bootstrap/dist/css/bootstrap.min.css';

That’s it. I can use the color classes now! :rocket: