differentiate between title and shortTitle in siteTree

Author: sarahs

includes/sidebar-specific-product.html

@@ -19,13 +19,14 @@
   {% capture fullPathToCategory %}{{category[1].href}}{% endcapture %}
 
   <li class="sidebar-category py-1 {% if breadcrumbs.category.href == category[1].href %}active {% if currentPath == fullPathToCategory %}is-current-page {% endif %}{% endif %}{% if category[1].standalone %}standalone-category{% endif %}">
+    {% if category[1].shortTitle %}{% assign categoryTitle = category[1].shortTitle %}{% else %}{% assign categoryTitle = category[1].title %}{% endif %}
     {% if category[1].standalone %}
-    <a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ category[1].title }}</a>
+    <a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ categoryTitle }}</a>
     {% else %}
     <details class="dropdown-withArrow details details-reset" {% if breadcrumbs.category.href == category[1].href or forloop.index < 4 %}open{% endif %}>
       <summary>
         <div class="d-flex flex-justify-between">
-          <a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ category[1].title }}</a>
+          <a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ categoryTitle }}</a>
           {% if breadcrumbs.category.href == category[1].href or 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,16 +40,18 @@
         {% for maptopic in category[1].maptopics %}
           {% unless maptopic[1].hidden %}
             {% capture fullPathToMaptopic %}{{maptopic[1].href}}{% endcapture %}
+            {% if maptopic[1].shortTitle %}{% assign maptopicTitle = maptopic[1].shortTitle %}{% else %}{% assign maptopicTitle = maptopic[1].title %}{% endif %}
 
             <li class="sidebar-maptopic {% if breadcrumbs.maptopic.href == maptopic[1].href %}active {% if currentPath == fullPathToMaptopic %}is-current-page{% endif %}{% endif %}">
-              <a href="{{fullPathToMaptopic}}" class="pl-4 pr-5 py-2">{{ maptopic[1].title }}</a>
+              <a href="{{fullPathToMaptopic}}" class="pl-4 pr-5 py-2">{{ maptopicTitle }}</a>
               <ul class="sidebar-articles my-2">
                 {% for article in maptopic[1].articles %}
                 {% unless article[1].hidden %}
                 {% capture fullPathToArticle %}{{article[1].href}}{% endcapture %}
+                {% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}
 
                 <li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
-                  <a href="{{fullPathToArticle}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ article[1].title }}</a>
+                  <a href="{{fullPathToArticle}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ articleTitle }}</a>
                 </li>
                 {% endunless %}
                 {% endfor %}
@@ -63,8 +66,9 @@
         {% for article in category[1].articles %}
         {% unless article[1].hidden %}
         {% capture fullPathToArticle %}{{article[1].href}}{% endcapture %}
+        {% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}
         <li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
-          <a href="{{fullPathToArticle}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ article[1].title }}</a>
+          <a href="{{fullPathToArticle}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ articleTitle }}</a>
         </li>
         {% endunless %}
         {% endfor %}

lib/site-tree-titles.js

@@ -2,18 +2,19 @@ const flat = require('flat')
 const renderContent = require('./render-content')
 const delimiter = '#'
 
-// render localized and product-version-aware page title
-// note this only supports titles with liquid, not short titles
+// render localized and product-version-aware page title or shortTitle
 
 module.exports = async function siteTreeTitles (siteTree, siteData) {
   // use a non-period delimiter because versions contain periods (like 2.19)
   const flatTree = flat(siteTree, { delimiter: delimiter })
 
   const titlesWithLiquid = Object.entries(flatTree)
-    .filter(([path, title]) => path.endsWith('title') && title.includes('{'))
+    .filter(([path, shortOrLongTitle]) => path.endsWith('itle') && shortOrLongTitle && shortOrLongTitle.includes('{'))
 
-  await Promise.all(titlesWithLiquid.map(async ([path, title]) => {
-    path = path.replace(`${delimiter}title`, '') // ignore the `title` path part for now
+  await Promise.all(titlesWithLiquid.map(async ([path, shortOrLongTitle]) => {
+    const isShortTitle = /shortTitle$/.test(path)
+
+    path = path.replace(`${delimiter}(shortT|t)itle`, '') // ignore the `title` path part for now
 
     // derive values from path parts
     const [
@@ -31,29 +32,39 @@ module.exports = async function siteTreeTitles (siteTree, siteData) {
 
     // create context object for rendering of dynamic liquid data in page titles
     const ctx = {
-      page: { version },
+      currentVersion: version,
       site: siteData[languageCode].site
     }
 
-    const renderedTitle = await renderContent(title, ctx, { textOnly: true })
+    const renderedShortOrLongTitle = await renderContent(shortOrLongTitle, ctx, { textOnly: true })
 
     // no product titles have liquid because we get them from lib/all-products.js
     // so we can assume all titles processed here will be either a category, maptopic, or article
     // we can also assume a category value will exist for any of these
     const currentCategory = siteTree[languageCode][version][products][product][categories][category]
 
-    if (!maptopic) currentCategory.title = renderedTitle
+    if (!maptopic) {
+      isShortTitle
+        ? currentCategory.shortTitle = renderedShortOrLongTitle
+        : currentCategory.title = renderedShortOrLongTitle
+    }
 
     let currentMaptopic
     if (maptopic) {
       currentMaptopic = currentCategory[maptopics][maptopic]
-      if (!article) currentMaptopic.title = renderedTitle
+      if (!article) {
+        isShortTitle
+          ? currentMaptopic.shortTitle = renderedShortOrLongTitle
+          : currentMaptopic.title = renderedShortOrLongTitle
+      }
     }
 
     let currentArticle
     if (article) {
       currentArticle = currentMaptopic[articles][article]
-      currentArticle.title = renderedTitle
+      isShortTitle
+        ? currentArticle.shortTitle = renderedShortOrLongTitle
+        : currentArticle.title = renderedShortOrLongTitle
     }
   }))
 }

lib/site-tree.js

@@ -78,7 +78,8 @@ function buildCategoriesTree (tocItems, versionedProductHref, pageMap, redirects
     if (!page) return
     if (!getApplicableVersions(page.versions).includes(version)) return
 
-    category.title = page.shortTitle || page.title
+    category.title = page.title
+    category.shortTitle = page.shortTitle
 
     // support standalone pages at the category level, like actions/quickstart.md
     if (!page.tocItems) {
@@ -157,7 +158,8 @@ function buildArticlesTree (tocItems, versionedCategoryHref, pageMap, redirects,
     if (!page) return
     if (!getApplicableVersions(page.versions).includes(version)) return
 
-    article.title = page.shortTitle || page.title
+    article.title = page.title
+    article.shortTitle = page.shortTitle
     article.hidden = page.hidden
 
     articleTree[article.href] = article