Add Callout components

[jrubenoff]

Depends on #20. Closes #13.

Preview pages

• Callout

New components

This PR has four types of Callout components as 11ty shortcodes:

• Info (for the lightbulb sections in the Discovery Playbook)
• Warning (self-explanatory)
• Pep Talks (encouraging words for the reader when describing something challenging)
• Upcoming events related to the current passage

The last 3 types are suggestions for how Bloom might adapt this component to other use cases. Feel free to delete them if you'd like.

I also created a bootstrap-icons SVG sprite to handle icon management.

Notes

To keep merge conflicts to a minimum, I'm using the file structure that I noticed web.dev's 11ty instance using:

• Each shortcode's markup is in its own dedicated file in _includes.
• The common-tags package strips out whitespace, ensuring the component renders correctly.

I also moved markdown-it config to a separate file, markdown.js, so that we can properly render Markdown within shortcodes. (See this section of the 11ty docs for a description of the problem, and this blog post for more context around the solution here.)

[netlify[bot]]

✅ Deploy Preview for bloom-guides-template ready!

Name	Link
🔨 Latest commit	cc966d58c82ecc22387057ea6a2ac3ac63a468e6
🔍 Latest deploy log	https://app.netlify.com/sites/bloom-guides-template/deploys/64a854304c052000083dd1d2
😎 Deploy Preview	https://deploy-preview-31--bloom-guides-template.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jrubenoff]

@jeffmaher You asked:

What would it look like for a document author to add [a callout] into a Markdown file? Would it be the Nunjucks component or some other markup?

You can check out the example in this PR for an idea of what that might look like!