Issue 5691 - Create Breadcrumbs Component for help.eyeo.com

templates/article.tmpl

Index: templates/article.tmpl
===================================================================
--- a/templates/article.tmpl
+++ b/templates/article.tmpl
@@ -1,14 +1,30 @@
 {% extends "templates/minimal" %}
 
 {% set product = products[product_id] %}
 
 {% block body %}
-[Breadcrumbs]
+<nav aria-label="{{ "Breadcrumb" | translate("breadcrumb-label", "Label") }}" class="breadcrumb">
+  <ol class="container clearfix" itemscope itemtype="http://schema.org/BreadcrumbList">
+    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+      <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="{{ product.slug }}">
+        <img class="heading-icon" src="/img/png/logo-{{ product_id }}.png" srcset="/img/svg/logo-{{ product_id }}.svg 2x" alt="{{ product.full_name+" Logo" | translate(product_id+"-logo-alt", "Image alt text") }}">
+        <span itemprop="name">{{ product.full_name | translate(product_id+"-name", "Product name") }}</span>
+      </a>
+      <meta itemprop="position" content="1" />
+    </li>
+    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+      <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="{{ page }}" aria-current="page">
+        <span itemprop="name">{{ title | translate(get_page_name(page) + "-title", "Article title") }}</span>
+      </a>
+      <meta itemprop="position" content="2" />
+    </li>
+  </ol>
+</nav>
 
 <main id="main" class="container clearfix">
   <article class="article card {{ product_id }}-card section column two-thirds">
       <h1 class="article-heading">
         <img class="heading-icon" src="/img/png/logo-{{ product_id }}.png" srcset="/img/svg/logo-{{ product_id }}.svg 2x" alt="{{ product.full_name+" Logo" | translate( product_id+"-logo-alt", "Image alt text") }}">
 
         {{ title | translate( get_page_name(page) + "-title", "Article title") }}
       </h1>