Issue 5511 - Create Product Help Home Template for help.eyeo.com

templates/product-home.tmpl

Index: templates/product-home.tmpl
===================================================================
new file mode 100644
--- /dev/null
+++ b/templates/product-home.tmpl
@@ -0,0 +1,58 @@
+{% extends "templates/default" %}
+
+{% block body %}
+<main class="main wrapper">
+  <h1 class="h1 section ta-center">

[juliandoucette, 2017/08/24 11:14:01]

NIT: It seems confusing that an <h1> is a .section?

[ire, 2017/08/28 14:54:49]

I see what you mean, but if I move the class to a container that may seem to be
unnecessary markup

[juliandoucette, 2017/09/12 13:21:54]

See my comment in the latest Patchset.

+    <img class="heading-icon" src="/img/png/logo-{{product_id}}.png" srcset="/img/svg/logo-{{product_id}}.svg 2x" alt="{{ products[product_id].full_name+" Logo" | translate( product_id+"-logo-alt", "Image alt text") }}">
+
+    {{ products[product_id].full_name + " Help Center" | translate(product_id+"-help-home-title", "Page title") }}
+  </h1>
+
+  {% set popular_topics = get_pages_metadata({ "product_id": product_id, "template": "article", "popular": "true" }) %}
+  {% if popular_topics %}
+  <section class="card {{product_id}}-card section">

[ire, 2017/08/15 15:09:22]

I could make this a macro if it's easier to read/understand. Same with the help
categories below. 

+    <h2 class="h4 card-heading">
+      <img class="heading-icon" src="/img/png/popular-icon.png" srcset="/img/svg/popular-icon.svg 2x" alt="{{ "Popular Icon" | translate("popular-icon-alt", "Image alt text") }}">
+
+      {{ "Popular Topics" | translate("popular-topics-title", "Section title") }}
+    </h2>
+
+    <ul class="underlined-list row">
+      {% for article in popular_topics %}
+      <li class="column one-half">
+        <a href="{{article["page"]}}">
+          {{ article.title | translate( get_page_slug( article["page"]) + "-title", "Article title") }}
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% endif %}
+
+  <div class="row">
+    {% for category in products[product_id].help_categories %}
+    {% set articles = get_pages_metadata({ "product_id": product_id, "template": "article", "category": category.name }) %}
+    {% if articles and category.name != 'Popular Topics' %}
+    <section class="section column one-half">
+      <h2 class="h4">
+        <img class="heading-icon" src="/img/png/{{category.icon}}.png" srcset="/img/svg/{{category.icon}}.svg 2x" alt="{{ category.name+" Icon" | translate(category.icon+"-alt", "Image alt text") }}">
+
+        {{category.name | translate( category.slug + "-category-title", "Category title")}}
+      </h2>
+
+      <ul class="underlined-list">
+        {% for article in articles %}
+        <li>
+          <a href="{{article["page"]}}">
+            {{ article.title | translate( get_page_slug( article["page"]) + "-title", "Article title") }}
+          </a>
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endif %}
+    {% endfor %}
+  </div>
+
+</main>
+{% endblock %}