use rendered titles instead of raw titles

includes/product-articles-list.html

@@ -1,6 +1,6 @@
 {% assign maxArticles = 10 %}
 
-{% if currentProductTree.page.shortTitle and currentProductTree.page.shortTitle != '' %}{% assign productTitle = currentProductTree.page.shortTitle %}{% else %}{% assign productTitle = currentProductTree.page.title %}{% endif %}
+{% if currentProductTree.renderedShortTitle %}{% assign productTitle = currentProductTree.renderedShortTitle %}{% else %}{% assign productTitle = currentProductTree.renderedFullTitle %}{% endif %}
 
 <div class="py-6 all-articles-list">
   <h2 class="font-mktg mb-4" id="all-docs"><a href="#all-docs">All {{ productTitle }} docs</a></h2>
@@ -10,7 +10,7 @@
     {% if childPage.page.documentType == "article" %}{% assign standaloneCategory = true %}{% else %}{% assign standaloneCategory = false %}{% endif %}
       {% unless standaloneCategory %}
         <div class="col-12 col-lg-4 mb-6 height-full">
-          <h4 class="mb-3"><a href="{{ childPage.href }}">{{ childPage.page.title }}</a></h4>
+          <h4 class="mb-3"><a href="{{ childPage.href }}">{{ childPage.renderedFullTitle }}</a></h4>
 
           {% if childPage.childPages and childPage.childPages[0].page.documentType == "mapTopic" %}
             <ul class="list-style-none">
@@ -19,7 +19,7 @@
                   {% assign numArticles = childPage.childPages | obj_size %}
                   <li class="mb-3 {% if forloop.index > maxArticles %}d-none{% endif %}">
                     <a href="{{ grandchildPage.href }}">
-                      {{ grandchildPage.page.title }}
+                      {{ grandchildPage.renderedFullTitle }}
                     </a>
                   </li>
                   {% if numArticles > maxArticles %}
@@ -32,7 +32,7 @@
             <ul class="list-style-none">
               {% assign numArticles = childPage.childPages | obj_size %}
               {% for grandchildPage in childPage.childPages %}
-                <li class="mb-3 {% if forloop.index > maxArticles %}d-none{% endif %}"><a href="{{ grandchildPage.href }}">{{ grandchildPage.page.title }}</a></li>
+                <li class="mb-3 {% if forloop.index > maxArticles %}d-none{% endif %}"><a href="{{ grandchildPage.href }}">{{ grandchildPage.renderedFullTitle }}</a></li>
               {% endfor %}
             </ul>
             {% if numArticles > maxArticles %}