From 7b31c08e162c357f90d2655a18be09a7a8539f2e Mon Sep 17 00:00:00 2001
From: Jason Etcovitch <jasonetco@github.com>
Date: Thu, 12 Nov 2020 12:57:30 -0500
Subject: [PATCH] "All articles" component of Actions landing page (#16318)

* Spike out all-articles.html

* Use it somewhere

* Do the thing

* Use 3 columns

* Increase space between links

* Hide standalone categories

* Move all-articles to bottom of product-landing

* Add obj_size filter

* Add buttons if numArticles > 10

* Add click event to show

* Add a chevron ^

* Assign maxArticles for some DRY fun

* Add some comments
---
 includes/all-articles.html   | 47 ++++++++++++++++++++++++++++++++++++
 javascripts/all-articles.js  | 18 ++++++++++++++
 javascripts/index.js         |  2 ++
 layouts/product-landing.html |  4 +++
 lib/render-content.js        | 11 +++++++++
 5 files changed, 82 insertions(+)
 create mode 100644 includes/all-articles.html
 create mode 100644 javascripts/all-articles.js

diff --git a/includes/all-articles.html b/includes/all-articles.html
new file mode 100644
index 000000000000..5267da011e92
--- /dev/null
+++ b/includes/all-articles.html
@@ -0,0 +1,47 @@
+{% assign product = siteTree[currentLanguage][currentVersion].products[currentProduct] %}
+{% assign maxArticles = 10 %}
+
+<div class="py-6">
+  <h2 class="font-mktg mb-4">All {{ product.title }} docs</h2>
+
+  <div class="d-flex gutter flex-wrap">
+    {% for category in product.categories %}
+      {% unless category[1].standalone %}
+        <div class="col-12 col-lg-4 mb-6 height-full">
+          <h4 class="mb-3"><a href="/{{ currentLanguage }}{{ category[1].href }}">{{ category[1].title }}</a></h4>
+
+          {% if category[1].maptopics %}
+            <ul class="list-style-none">
+              {% for maptopic in category[1].maptopics %}
+                {% unless maptopic[1].hidden %}
+                  {% assign numArticles = maptopic[1].articles | obj_size %}
+                  <li>
+                    <a class="text-gray-dark" href="/{{ currentLanguage }}{{ maptopic[1].href }}">{{ maptopic[1].title }}</a>
+                    <ul class="sidebar-articles my-2">
+                      {% for article in maptopic[1].articles %}
+                        <li class="mb-3 {% if forloop.index > maxArticles %}d-none{% endif %}"><a href="/{{ currentLanguage }}{{ article[1].href }}">{{ article[1].title }}</a></li>
+                      {% endfor %}
+                    </ul>
+                    {% if numArticles > maxArticles %}
+                      <button class="js-all-articles-show-more btn-link link-gray">Show {{ numArticles | minus: maxArticles }} more {% octicon "chevron-up" class="v-align-text-bottom" %}</button>
+                    {% endif %}
+                  </li>
+                {% endunless %}
+              {% endfor %}
+            </ul>
+          {% else %}
+            <ul class="list-style-none">
+              {% assign numArticles = category[1].articles | obj_size %}
+              {% for article in category[1].articles %}
+                <li class="mb-3 {% if forloop.index > maxArticles %}d-none{% endif %}"><a href="/{{ currentLanguage }}{{ article[1].href }}">{{ article[1].title }}</a></li>
+              {% endfor %}
+            </ul>
+            {% if numArticles > maxArticles %}
+              <button class="js-all-articles-show-more btn-link link-gray">Show {{ numArticles | minus: maxArticles }} more {% octicon "chevron-up" class="v-align-text-bottom" %}</button>
+            {% endif %}
+          {% endif %}
+        </div>
+      {% endunless %}
+    {% endfor %}
+  </div>
+</div>
diff --git a/javascripts/all-articles.js b/javascripts/all-articles.js
new file mode 100644
index 000000000000..45fddf6605b6
--- /dev/null
+++ b/javascripts/all-articles.js
@@ -0,0 +1,18 @@
+/**
+ * Handles the client-side events for `includes/all-articles.html`.
+ */
+export default function allArticles () {
+  const buttons = document.querySelectorAll('button.js-all-articles-show-more')
+
+  for (const btn of buttons) {
+    btn.addEventListener('click', evt => {
+      // Show all hidden links
+      const hiddenLinks = evt.currentTarget.parentElement.querySelectorAll('li.d-none')
+      for (const link of hiddenLinks) {
+        link.classList.remove('d-none')
+      }
+      // Remove the button, since we don't need it anymore
+      evt.currentTarget.parentElement.removeChild(evt.currentTarget)
+    })
+  }
+}
diff --git a/javascripts/index.js b/javascripts/index.js
index a6d6f4649ebf..803d7a155380 100644
--- a/javascripts/index.js
+++ b/javascripts/index.js
@@ -16,6 +16,7 @@ import copyCode from './copy-code'
 import { fillCsrf } from './get-csrf'
 import initializeEvents from './events'
 import filterCodeExamples from './filter-code-examples'
+import allArticles from './all-articles'
 
 document.addEventListener('DOMContentLoaded', async () => {
   displayPlatformSpecificContent()
@@ -34,4 +35,5 @@ document.addEventListener('DOMContentLoaded', async () => {
   copyCode()
   initializeEvents()
   filterCodeExamples()
+  allArticles()
 })
diff --git a/layouts/product-landing.html b/layouts/product-landing.html
index 4ffcedfc368d..b1f258f67c73 100644
--- a/layouts/product-landing.html
+++ b/layouts/product-landing.html
@@ -98,6 +98,10 @@ <h2 class="font-mktg h1 mb-2">Guides</h2>
         </div>
       {% endif %}
 
+      <div class="container-xl px-3 px-md-6 mt-6">
+        {% include all-articles %}
+      </div>
+
       <div class="border-top">
         {% include small-footer %}
       </div>
diff --git a/lib/render-content.js b/lib/render-content.js
index a9a482811e8e..ff18773c5d41 100644
--- a/lib/render-content.js
+++ b/lib/render-content.js
@@ -18,4 +18,15 @@ for (const tag in tags) {
   renderContent.liquid.registerTag(tag, ExtendedMarkdown)
 }
 
+renderContent.liquid.registerFilters({
+  /**
+   * Like the `size` filter, but specifically for
+   * getting the number of keys in an object
+   */
+  obj_size: (input) => {
+    if (!input) return 0
+    return Object.keys(input).length
+  }
+})
+
 module.exports = renderContent