Willamette Search ⌘K

Page Content

Markdown Features #

Willamette/Bridgetown’s Markdown parsing is provided by Kramdown, a superset of Markdown also enhanced with some GFM (GitHub-Flavored Markdown) functionality. There are also many customization options available, but most of the time the defaults are sufficient.

Here’s a Quick Reference for Markdown/Kramdown. A few additional notes:

Willamette provides two presentations of blockquotes (specified in Markdown using > at the start of lines).

The default blockquote variant looks like this.

and…

The “bleed” variant looks like this. You can specify it via a class specifier by adding {:.inline-bleed} on a line either right above or below the blockquote syntax.

You can add <mark> highlighting to any text by using double colons or equal signs. For example:

Here is ==highlighted text== and some ::more highlighted text::.

Here is highlighted text and some more highlighted text.

Web Awesome Features #

There are many components and styling options you can utilize from the Web Awesome framework upon which Willamette is built.

Icons Documentation #

Use the <wa-icon> web component to add icons to your pages. For example:

<wa-icon name="water" style="color: var(--wa-color-cyan-50)"></wa-icon>
<wa-icon name="rocket" style="color: var(--wa-color-orange-50)"></wa-icon>
<wa-icon name="screwdriver-wrench" style="color: var(--wa-color-purple-50)"></wa-icon>

would look like:

Icons can easily slot into the layouts of other components, such as buttons & callouts.

Buttons Documentation #

Use the <wa-button> component to add a button to your page. (For simple use cases, you might use the native <button class="wa-brand"> HTML tag instead, or the <a href="..." class="wa-button wa-brand"> tag for a “link button”.)

The “Documentation” button above was created with the following HTML:

<wa-button href="https://webawesome.com/docs/components/icon/" target="_blank" variant="warning" size="xs">
  Documentation
  <wa-icon name="web-awesome" family="brands" slot="start"></wa-icon><wa-icon name="arrow-up-right-from-square" slot="end"></wa-icon>
</wa-button>

There are many visual options, for example a hollow button using appearance="outlined":

View Cart

Callouts Documentation #

These components are particularly helpful for technical documentation. You can use icons and visual options in much the same way as buttons:

<wa-callout variant="brand" markdown="block">
  <wa-icon slot="icon" name="circle-info"></wa-icon>

  Please read this _very_ important information which is **very important**.
</wa-callout>

Please read this very important information which is very important.

Wikilinks & Other Content Enhancements #

A new feature introduced in Bridgetown 2.2 is support for [[wikilinks]] syntax. It’s not enabled by default, so you’d need to update your config/initializers.rb file:

init :wikilinks

Now you’ll be able to type [[The name of another page]] and it will automatically locate and link to a resource with that title in the front matter. There are additional features available which you can read about in the Bridgetown documentation.

Builder-based enhancements, Wikilinks, etc.
Skip to content Close