Extending Redcarpet for Admonition Blocks

.admonition {
  padding: 1em;
  margin-top: 2em;

  background: transparentize($accent, 0.9);
  border-left: 1em solid $accent;
  border-radius: .25em;
}

.admonition.tldr {
  @media #{$desktop} {
    display: grid;

    grid-template-columns: auto auto;
    grid-column-gap: 1em;
    align-items: center;
  }

  &:before {
    content: 'tl;dr:';

    font-size: 2em;
    font-weight: 800;
  }

  > p {
    margin: 0;
  }
}

<%
    @git = `git log --follow --format='%H' #{file}`
    .split("\n")
    .map!{|sha|
      {
        date: `git show #{sha} --no-patch --format='format:%ai'`,
        title: `git show #{sha} --no-patch --format='format:%s'`,
        body: `git show #{sha} --no-patch --format='format:%b'`
      }
    }
  if @git.size > 1
%>
  <details class="blog__changes">
    <summary>Changelog</summary>
    <ul>
      <% @git.each do |commit| %>
        <li>
          <div class="blog__changes__date"><%= commit[:date] %></div>
          <div class="blog__changes__title"><%= commit[:title] %></div>
          <%= simple_format(commit[:body]) %>
        </li>
      <% end %>
    </ul>
  </details>
<% end %>

# Get our gems
require 'middleman-core/renderers/redcarpet'
require 'rouge/plugins/redcarpet'

# This is the same template from the previous blog post.
YOUTUBE_TEMPLATE = %(
<div class="youtube-container">
  <iframe
    width="100%%"
    height="100%%"
    src="https://www.youtube.com/embed/%s"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>
).strip

# This regex describes the `> [!name] content` Admonition block. We have to use
# it twice (I got really stuck trying to make it one call!)
CALLOUT = /^> \[!(?<name>\w+)\] (?<str>.*)$/.freeze

# Renderer: This is going to be our custom renderer. Gotta initialize it with
# some options enabled to make sure we keep our footnotes and TOC anchors.
class Renderer < Redcarpet::Render::HTML
  def initialize(extensions = {})
    super extensions.merge(
      footnotes: true,
      with_toc_data: true
    )
  end

  include Rouge::Plugins::Redcarpet

  # Here's the heart of the hack
  def preprocess(document)
    # Instantiate _another_ renderer inside this renderer to render while you
    # render. (Eat your heart out Xzibit.)
    markdown = Redcarpet::Markdown.new(self, {})

    # change every instance of the CALLOUT regex in place.
    document.gsub!(CALLOUT) do |match|
      # because `match` contains the matching string, not capture groups (and
      # `$~` didn't always return the last match, maybe thread-local?!) I'm
      # going to use CALLOUT again to grab the named captures.
      m = CALLOUT.match(match).named_captures
      if m['name'] == 'youtube'
        @video = URI.decode_www_form(URI(m['str']).query).to_h['v']
        format(YOUTUBE_TEMPLATE, @video)
      else
        # Render out our little component, with nested markdown render 🤷‍♂️
        "<div class='admonition  #{m['name']}'>#{markdown.render m['str']}</div>"
      end
    end

    document
  end
end

set :markdown_engine, :redcarpet
set :markdown,
    fenced_code_blocks: true,
    smartypants: true,
    with_toc_data: true,
    highlights: true,
    footnotes: true,
    renderer: Renderer