parse Liquid in titles in siteTree and use full titles in generic TOC but short titles in sidebar

Author: sarahs

includes/sidebar-product.html

@@ -10,7 +10,7 @@
 
 {% unless currentProductTree.page.hidden %}
 
-{% 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 %}
 
 <li title="" class="sidebar-product mb-2">
   <a href="{{currentProductTree.href}}" class="pl-4 pr-5 pb-1 f4">{{ productTitle }}</a>
@@ -20,14 +20,14 @@
   {% for childPage in currentProductTree.childPages %}
   {% if childPage.page.documentType == "article" %}{% assign standaloneCategory = true %}{% else %}{% assign standaloneCategory = false %}{% endif %}
   <li class="sidebar-category py-1 {% if currentPath contains childPage.href %}active {% if currentPath == childPage.href %}is-current-page {% endif %}{% endif %}{% if standaloneCategory %}standalone-category{% endif %}">
-    {% if childPage.page.shortTitle and childPage.page.shortTitle != '' %}{% assign categoryTitle = childPage.page.shortTitle %}{% else %}{% assign categoryTitle = childPage.page.title %}{% endif %}
+    {% if childPage.renderedShortTitle %}{% assign childTitle = childPage.renderedShortTitle %}{% else %}{% assign childTitle = childPage.renderedFullTitle %}{% endif %}
     {% if standaloneCategory %}
-    <a href="{{childPage.href}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ categoryTitle }}</a>
+    <a href="{{childPage.href}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ childTitle }}</a>
     {% else %}
     <details class="dropdown-withArrow details details-reset" {% if currentPath contains childPage.href or forloop.index < 4 %}open{% endif %}>
       <summary>
         <div class="d-flex flex-justify-between">
-          <a href="{{childPage.href}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ categoryTitle }}</a>
+          <a href="{{childPage.href}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ childTitle }}</a>
           {% if forloop.index < 4 %}
           <svg xmlns="http://www.w3.org/2000/svg" class="octicon flex-shrink-0 arrow mr-3" style="margin-top:7px" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></svg>
           {% endif %}
@@ -39,12 +39,14 @@
       {% if childPage.childPages[0].page.documentType == "mapTopic" %}
       <ul class="sidebar-topics list-style-none position-relative">
         {% for grandchildPage in childPage.childPages %}
+        {% if grandchildPage.renderedShortTitle %}{% assign grandchildTitle = grandchildPage.renderedShortTitle %}{% else %}{% assign grandchildTitle = grandchildPage.renderedFullTitle %}{% endif %}
             <li class="sidebar-maptopic {% if currentPath contains grandchildPage.href %}active {% if currentPath == grandchildPage.href %}is-current-page{% endif %}{% endif %}">
-              <a href="{{grandchildPage.href}}" class="pl-4 pr-5 py-2">{{ grandchildPage.page.title }} </a>
+              <a href="{{grandchildPage.href}}" class="pl-4 pr-5 py-2">{{ grandchildTitle }} </a>
               <ul class="sidebar-articles my-2">
                 {% for greatgrandchildPage in grandchildPage.childPages %}
+                {% if greatgrandchildPage.renderedShortTitle %}{% assign greatgrandchildTitle = greatgrandchildPage.renderedShortTitle %}{% else %}{% assign greatgrandchildTitle = greatgrandchildPage.renderedFullTitle %}{% endif %}
                 <li class="sidebar-article {% if currentPath contains greatgrandchildPage.href %}active {% if currentPath == greatgrandchildPage.href %}is-current-page{% endif %}{% endif %}">
-                  <a href="{{greatgrandchildPage.href}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ greatgrandchildPage.page.title }}</a>
+                  <a href="{{greatgrandchildPage.href}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ greatgrandchildTitle }}</a>
                 </li>
                 {% endfor %}
               </ul>
@@ -55,8 +57,9 @@
       {% elsif childPage.childPages[0].page.documentType == "article" %}
       <ul class="sidebar-articles list-style-none">
         {% for grandchildPage in childPage.childPages %}
+        {% if grandchildPage.renderedShortTitle %}{% assign grandchildTitle = grandchildPage.renderedShortTitle %}{% else %}{% assign grandchildTitle = grandchildPage.renderedFullTitle %}{% endif %}
         <li class="sidebar-article {% if currentPath contains grandchildPage.href %}active {% if currentPath == grandchildPage.href %}is-current-page{% endif %}{% endif %}">
-          <a href="{{grandchildPage.href}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ grandchildPage.page.title }}</a>
+          <a href="{{grandchildPage.href}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ grandchildTitle }}</a>
         </li>
         {% endfor %}
       </ul>

middleware/contextualizers/generic-toc.js

@@ -39,7 +39,8 @@ async function getUnsortedTocItems (pageArray, context) {
     }
 
     const fullPath = childPage.href
-    const title = await childPage.page.renderTitle(context, { textOnly: true, encodeEntities: true })
+    // Titles are already rendered by middleware/contextualizers/render-tree-titles.js.
+    const title = childPage.renderedFullTitle
     const intro = await childPage.page.renderProp('intro', context, { unwrap: true })
 
     if (!childPage.childPages) {

middleware/contextualizers/render-tree-titles.js

@@ -0,0 +1,33 @@
+const { sortBy } = require('lodash')
+const renderOpts = { textOnly: true, encodeEntities: true }
+
+module.exports = async function renderTreeTitles (req, res, next) {
+  if (!req.context.page) return next()
+  if (req.context.page.documentType === 'homepage') return next()
+
+  await renderLiquidInTitles(req.context.siteTree[req.context.currentLanguage][req.context.currentVersion], req.context)
+
+  return next()
+}
+
+// Add new props to each siteTree page here...
+async function renderLiquidInTitles (pageInTree, context) {
+  // We _only_ need to render the titles and shortTitles that contain Liquid.
+  pageInTree.renderedFullTitle = pageInTree.page.title.includes('{')
+    ? await pageInTree.page.renderProp('title', context, renderOpts)
+    : pageInTree.page.title
+
+  if (pageInTree.page.shortTitle) {
+    pageInTree.renderedShortTitle = pageInTree.page.shortTitle.includes('{')
+      ? await pageInTree.page.renderProp('shortTitle', context, renderOpts)
+      : pageInTree.page.shortTitle
+  }
+
+  if (!pageInTree.childPages) return
+
+  pageInTree.page.childPages = sortBy(
+    await Promise.all(pageInTree.childPages.map(async (childPage) => await renderLiquidInTitles(childPage, context))),
+    // Sort by the ordered array of `children` in the frontmatter.
+    pageInTree.page.children
+  )
+}

middleware/index.js

@@ -118,6 +118,7 @@ module.exports = function (app) {
   }
 
   if (process.env.FEATURE_NEW_SITETREE) {
+    app.use(asyncMiddleware(instrument('./contextualizers/render-tree-titles')))
     app.use(instrument('./contextualizers/current-product-tree'))
     app.use(asyncMiddleware(instrument('./contextualizers/generic-toc')))
     app.use(asyncMiddleware(instrument('./contextualizers/breadcrumbs')))