Skip to content

Technical articles layout

For technical articles, we add the author metadata to a note at the beginning:

Screen_Shot_2018-01-19_at_15.20.37

We want to move this info from the frontmatter and include it in the default layout, to have something like:

Screen_Shot_2018-01-19_at_15.22.20

When we try to add a new element to the <div class="main class">, the ToC moves to the top of the document, as you can see here: !131 (closed).

To fix that, I think we need to dismember <%= yield %>, and put things separately there:

    <div class=wrapper>
      <div id="doc-nav" class="doc-nav">
      </div>
      <aside>TOC</aside>
      <div class="main class">
        <div id="breadcrumbs"></div>
          <% if @item[:author] %>
            <div class="article-metadata"></div>
          <% end%>
        <div class="content">
          <%= yield %>
        </div>

To try to hack the CSS, I managed to do like !182 (merged), making <div class="main class"> set to display: flex, then added the article metadata below the main div, and re-ordered it with the display: flex propriety order.

So far so good, but on mobile the toc appears above the breadcrumbs, and we can't reorder it because the toc element is not a chield of the main class.

We need help from FE to:

  • Dismember the ToC, the breadcrumbs, and the title, make them act independently
  • Add the article layout with a conditional statement to the default layout
Edited by Marcia Ramos