Note boxes on the website

[neboat]

Can we add note boxes to pages on the website? If so, how do we do that?

For examples of note boxes, see here. There are also examples of note boxes in the Eleventy documentation, such as in the "Warning" and "Info" boxes here.

There are several pages on the website that contain text annotated with some variant of Note:. I think those pieces of text would be well suited for a note box of some kind. In addition, the note boxes would add some visual diversity to these pages. I'm wondering if others agree and, if so, if there's a way to make an note box to a page that's better than adding raw html to the markdown source.

Edit: Sorry, I meant note boxes, not alert boxes.

[ailiop]

I think that's a great idea. I do not know how to enable that, but let me add two thoughts:

1. One option could be to render Markdown quote blocks (paragraphs whose lines are prefixed with >) as note boxes.
2. For more flexibility (e.g., if we decide we need multiple kinds of boxes, etc), one way around having to write raw HTML to the Markdown source could be to use shortcode macros instead.

[behoppe]

Thank you, @neboat, I am all for this, and I agree with @ailiop that shortcode macros are a promising approach.

I think this might also be a way to provide the "NEW" attention-grabbing formatting that @dcurtisatmit has requested?

In general, I do want to boost the visual appeal of the site, bringing average pages closer to the home page. This issue would be one step in that direction, along with #13.

I will assign myself to this one and flag it as part of version 1.0

[behoppe]

Hi @neboat, just to add more about "how do we do this" and build on the suggestion from @ailiop, I envision implementing one or more paired shortcodes. In markdown, perhaps it would look something like this

{% notebox style %} Stuff that gets rendered inside a note box with the appropriate style. {% endnotebox %}

[behoppe]

fc0acb54e47c8fc9a601e39a24736f14026ebc56 implements note boxes as Bootstrap 5 alerts. See About us for an example. The syntax is

{% alert "style" %} blah blah **blah** blah {% endalert %}

The content inside the paired shortcodes is rendered as markdown. There are 9 styles defined by Bootstrap5. If there is no "style" then the default is "primary". The style must be enclosed in quotes, or it will be ignored.

The alert styling is currently defined by Bootstrap 5 without being customized to our own colors. So we probably want to work on that, but I hope this addresses the major part of implementing note boxes.