add custom popular heading to landing pages (#19147)

Author: rachmari

content/README.md

@@ -155,6 +155,8 @@ For a layout named `layouts/article.html`, the value would be `article`.
 - Type: `Object`.
 - Optional.
 
+The list of popular links are the links displayed on the landing page under the title "Popular." Alternately, you can customize the title "Popular" by setting the `featuredLinks.popularHeading` property to a new string.
+
 Example:
 
 ```yaml
@@ -163,6 +165,10 @@ featuredLinks:
     - /path/to/page
   guides:
     - /guides/example
+  popular:
+    - /path/to/popular/article1
+    - /path/to/popular/article2
+  popularHeading: An alternate heading to Popular
 ```
 
 ### `showMiniToc`

includes/code-examples.html

@@ -9,7 +9,9 @@ <h2 class="mb-2 font-mktg h1" id="code-examples"><a href="#code-examples">{% dat
     {% render code-example-card for productCodeExamples as example %}
   </div>
 
-  <button class="js-filter-card-show-more btn btn-outline float-right" data-js-filter-card-max="6">{% data ui.product_landing.show_more %} {% octicon "arrow-right" %}</button>
+  {% if productCodeExamples.length > 6 %}
+    <button class="js-filter-card-show-more btn btn-outline float-right" data-js-filter-card-max="6">{% data ui.product_landing.show_more %} {% octicon "arrow-right" %}</button>
+  {% endif %}
 
   <div class="js-filter-card-no-results d-none py-4 text-center color-text-secondary font-mktg">
     <div class="mb-3">{% octicon "search" width="24" %}</div>

layouts/product-landing.html

@@ -71,9 +71,10 @@ <h4 class="link-with-intro-title mb-1">{{ link.title }}<span class="Bump-link-sy
             </ul>
           </div>
 
+          {% if featuredLinks.popular %}
           <div class="col-12 col-lg-{% if page.changelog %}4{% else %}6{% endif %} mb-4 mb-lg-0">
             <div class="featured-links-heading mb-4 d-flex flex-items-baseline">
-              <h3 class="f4 text-normal text-mono text-uppercase color-text-secondary" id="popular"><a href="#popular">{% data ui.toc.popular_articles %}</a></h3>
+              <h3 class="f4 text-normal text-mono text-uppercase color-text-secondary" id="popular"><a href="#popular">{% if page.featuredLinks.popularHeading %}{{ page.featuredLinks.popularHeading }}{% else %}{% data ui.toc.popular_articles %}{% endif %}</a></h3>
             </div>
             <ul class="list-style-none">
               {% for link in featuredLinks.popular %}
@@ -85,6 +86,7 @@ <h2 class="link-with-intro-title f5">{{ link.title }}<span class="Bump-link-symb
               {% endfor %}
             </ul>
           </div>
+          {% endif %}
 
           {% if page.changelog %}
             <div class="col-12 col-lg-4 mb-4 mb-lg-0">

lib/frontmatter.js

@@ -74,11 +74,26 @@ const schema = {
     },
     featuredLinks: {
       type: 'object',
-      additionalProperties: false,
-      patternProperties: {
-        '^[a-zA-Z-_]+$': {
+      properties: {
+        gettingStarted: {
+          type: 'array',
+          items: { type: 'string' }
+        },
+        guides: {
           type: 'array',
           items: { type: 'string' }
+        },
+        guideCards: {
+          type: 'array',
+          items: { type: 'string' }
+        },
+        popular: {
+          type: 'array',
+          items: { type: 'string' }
+        },
+        // allows you to use an alternate heading for the popular column
+        popularHeading: {
+          type: 'string'
         }
       }
     },