Replace hero image includes

[muffinresearch]

Update: See latest comments on this, this can potentially be even simpler than described here.

In order to wrap the hero image block, instead of this:

{% capture page_hero_banner_content %}
# Bring your extension to life

Get how-tos, resources, and information to successfully build and ship your extension for Firefox.
{% endcapture %}

{% include modules/overview-page-hero.liquid
    content: page_hero_banner_content
    background: "develop-overview-hero-bg.jpg"
%}

An special markdown container "fence" could be used like so:

::: hero develop-overview-hero-bg.jpg
# Bring your extension to life

Get how-tos, resources, and information to successfully build and ship your extension for Firefox.
:::

This will wrap the hero area in a block with that image used as a background.

The output would be the same as before (in other works refactoring the markup is not considered in scope):

<section class="overview-hero" style="background-image: url(/assets/img/develop-overview-hero-bg.jpg);">
    <div class="module">
        <article class="module-content grid-x grid-padding-x">
            <div class="cell small-12">
                <div class="overview-hero-description" markdown="1">
                    <h1>Bring your extension to life</h1>
                    <p>Get how-tos, resources, and information to successfully build and ship your extension for Firefox.</p>
                </div>
            </div>
        </article>
    </div>
</section>

Using markdown-it-container this could be added with something like:

    [
      require('markdown-it-container'),
      'hero',
      {
        validate: function (params) {
          return params.trim().match(/hero/);
        },
        render: function (tokens, idx) {
          const backgroundImage = tokens[idx].info
            .trim()
            .match(/hero\s+([A-Za-z0-9-_]*?\.(?:jpe?g|png))$/);
          const styleTag = backgroundImage
            ? ` style="background-image: url(${parser.utils.escapeHtml(
                backgroundImage[1]
              )});"`
            : '';

          if (tokens[idx].nesting === 1) {
            return `<section class="overview-hero"${styleTag}>
  <div class="module">
    <article class="module-content grid-x grid-padding-x">
      <div class="cell small-12">
        <div class="overview-hero-description" markdown="1">\n`;
          } else {
            // closing tag
            return `
        </div>
      </div>
    </article>
  </div>
</section>\n`;
          }
        },
      },
    ],

The aim here is to make it easier to add content without having to cross reference a bunch of templates.

[muffinresearch]

This might also be achievable with https://github.com/mozilla/markdown-it-heading-wrapper/ (assuming it's specific to an H1)

Doing this would probably mean we'd want to be able to use frontmatter as a mechanism for opting-out of this wrapping as well as passing data to the markup.

[muffinresearch]

Looking into this further, there's almost no differences between the two hero templates:

• overview-page-hero.liquid
• page-hero.liquid

The main differences are class names, whether or not a image is able to be used, and whether a topic is passed through to the page. Topic is not used that much, and in fact as a result of the migration it's not showing anywhere. This should be removed.

Here's a few concrete steps we can take:

• Unify the hero template to a single template:
  • This should allow for a background image on any hero (Ideally this will be driven via the frontmatter).
  • The Call to Action buttons are not used anywhere other than the master template, so I think these should be removed.
  • Remove topics, they're not used enough to be worth having.
• Once the navigation story is handled in #659 given there's minimal variance we should be able to use the plugin as noted in the preceding comment. This will clean-up another chunk of includes without needing "Fences".