Add related content

Author: gsmet

_layouts/guides.html

@@ -7,9 +7,10 @@
 {% else %}
   {% assign docversion = 'latest' %}
 {% endif %}
+{% assign docversion_index = docversion | replace: '.', '-' %}
+{% assign relations = site.data.versioned[docversion_index].index.relations %}
 {% assign guide_url = page.url | replace_regex: '^/version/[^/]+(/.*)', '\1' %}
 
-
 <section class="full-width-version-bg flexfilterbar guides">
   <div class="guideflexcontainer">
     <div class="docslink">
@@ -47,12 +48,55 @@
   </div>
 </section>
 
-<div class="grid-wrapper guide">
-  <div class="grid__item width-8-12 width-12-12-m">
-    <h1 class="text-caps">{{page.title}} {{page.docversion}}</h1>
-    {{ content }}
+<div class="guide">
+  <div class="grid-wrapper">
+    <div class="grid__item width-8-12 width-12-12-m">
+      <h1 class="text-caps">{{page.title}} {{page.docversion}}</h1>
+      {{ content }}
+    </div>
+    <div class="grid__item width-4-12 width-12-12-m tocwrapper">
+      <div class="hide-mobile toc">{{ page.document | tocify_asciidoc: 2 }}</div>
+    </div>
   </div>
-  <div class="grid__item width-4-12 width-12-12-m tocwrapper">
-    <div class="hide-mobile toc">{{ page.document | tocify_asciidoc: 2 }}</div>
+  {% if relations and relations[guide_url] -%}
+  <h2>Related content</h2>
+  <div class="grid-wrapper relations">
+    {% if relations[guide_url].sameExtensions -%}
+    <div class="grid__item width-6-12 width-12-12-m">
+      <h3>On the same extensions</h3>
+      <ul class="related-content">
+      {% for guide in relations[guide_url].sameExtensions -%}
+        {% assign is_external_guide = guide.url | startswith: 'http' %}
+        {% if is_external_guide %}
+          {% assign related_guide_url = include.url %}
+        {% elsif docversion == 'latest' %}
+          {% assign related_guide_url = site.baseurl | append: guide.url %}
+        {% else %}
+          {% assign related_guide_url = site.baseurl | append: '/version/' | append: docversion | append: guide.url %}
+        {% endif %}
+        <li class="{{ guide.type }}"><a href="{{ related_guide_url }}">{{ guide.title }}</a></li>
+      {% endfor -%}
+      </ul>
+    </div>
+    {% endif -%}
+    {% if relations[guide_url].sameTopics -%}
+    <div class="grid__item width-6-12 width-12-12-m">
+      <h3>On the same topics</h3>
+      <ul class="related-content">
+      {% for guide in relations[guide_url].sameTopics limit:10 -%}
+        {% assign is_external_guide = guide.url | startswith: 'http' %}
+        {% if is_external_guide %}
+          {% assign related_guide_url = include.url %}
+        {% elsif docversion == 'latest' %}
+          {% assign related_guide_url = site.baseurl | append: guide.url %}
+        {% else %}
+          {% assign related_guide_url = site.baseurl | append: '/version/' | append: docversion | append: guide.url %}
+        {% endif %}
+        <li class="{{ guide.type }}"><a href="{{ related_guide_url }}">{{ guide.title }}</a></li>
+      {% endfor -%}
+      </ul>
+    </div>
+    {% endif -%}
   </div>
-</div>
+  {% endif -%}
+</div>

_sass/layouts/guide.scss

@@ -23,7 +23,7 @@ body.guides-configuration-reference div.guides-configuration-reference {
   .tocwrapper {
   display: flex;
   }
-  
+
   .toc {
     position: sticky;
     top: 1rem;
@@ -55,4 +55,44 @@ body.guides-configuration-reference div.guides-configuration-reference {
   hr {
     border:solid $grey-2;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0
   }
+
+  .relations {
+    h3 {
+      margin-top: 0.5rem;
+    }
+  }
+
+  ul.related-content li {
+    list-style-type: none;
+
+    &:before {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      height: 25px;
+      width: 25px;
+      margin-left: -35px;
+      margin-right: 0.7rem;
+
+      &.tutorial {
+        background: url($baseurl + '/assets/images/documentation/docsicon-tutorials.svg') no-repeat;
+      }
+
+      &.guide {
+        background: url($baseurl + '/assets/images/documentation/docsicon-guides.svg') no-repeat;
+      }
+
+      &.concept {
+        background: url($baseurl + '/assets/images/documentation/docsicon-concepts.svg') no-repeat;
+      }
+
+      &.pdf {
+        background: url($baseurl + '/assets/images/documentation/docsicon-pdf.svg') no-repeat;
+      }
+
+      &.reference {
+        background: url($baseurl + '/assets/images/documentation/docsicon-referencedocs.svg') no-repeat;
+      }
+    }
+  }
 }