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 %} + +
+

All {{ product.title }} docs

+ +
+ {% for category in product.categories %} + {% unless category[1].standalone %} +
+

{{ category[1].title }}

+ + {% if category[1].maptopics %} +
    + {% for maptopic in category[1].maptopics %} + {% unless maptopic[1].hidden %} + {% assign numArticles = maptopic[1].articles | obj_size %} +
  • + {{ maptopic[1].title }} + + {% if numArticles > maxArticles %} + + {% endif %} +
  • + {% endunless %} + {% endfor %} +
+ {% else %} +
    + {% assign numArticles = category[1].articles | obj_size %} + {% for article in category[1].articles %} +
  • {{ article[1].title }}
  • + {% endfor %} +
+ {% if numArticles > maxArticles %} + + {% endif %} + {% endif %} +
+ {% endunless %} + {% endfor %} +
+
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 @@

Guides

{% endif %} +
+ {% include all-articles %} +
+
{% include small-footer %}
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