From c7ac98304a829fc455a0baff34b093935ee0a3d0 Mon Sep 17 00:00:00 2001
From: Rachael Sewell <rachmari@github.com>
Date: Wed, 25 Aug 2021 12:31:16 -0700
Subject: [PATCH] allow use of full titles on landing page (#20327)

---
 components/context/ProductLandingContext.tsx |  3 +++
 components/landing/ArticleList.tsx           |  6 +++++-
 lib/get-link-data.js                         | 11 ++++++++++-
 lib/page.js                                  |  4 ++--
 middleware/featured-links.js                 |  3 ++-
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/components/context/ProductLandingContext.tsx b/components/context/ProductLandingContext.tsx
index d4a8c43161..08a02cfea5 100644
--- a/components/context/ProductLandingContext.tsx
+++ b/components/context/ProductLandingContext.tsx
@@ -17,6 +17,7 @@ export type FeaturedLink = {
   authors?: Array<string>
   hideIntro?: boolean
   date?: string
+  fullTitle?: string
 }
 export type CodeExample = {
   title: string
@@ -88,6 +89,7 @@ export const getFeaturedLinksFromReq = (req: any): Record<string, Array<Featured
           title: entry.title,
           intro: entry.intro,
           authors: entry.page.authors || [],
+          fullTitle: entry.fullTitle,
         })),
       ]
     })
@@ -158,6 +160,7 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
               title: link.title,
               intro: link.intro,
               authors: link.page.authors || [],
+              fullTitle: link.fullTitle,
             }
           }),
         }
diff --git a/components/landing/ArticleList.tsx b/components/landing/ArticleList.tsx
index 642ace831e..a8448a4f0c 100644
--- a/components/landing/ArticleList.tsx
+++ b/components/landing/ArticleList.tsx
@@ -52,7 +52,11 @@ export const ArticleList = ({
                 className="py-3"
                 title={
                   <h4 data-testid="link-with-intro-title">
-                    <span dangerouslySetInnerHTML={{ __html: link.title }} />
+                    <span
+                      dangerouslySetInnerHTML={
+                        link.fullTitle ? { __html: link.fullTitle } : { __html: link.title }
+                      }
+                    />
                   </h4>
                 }
               >
diff --git a/lib/get-link-data.js b/lib/get-link-data.js
index 7975af68ac..230d480bd5 100644
--- a/lib/get-link-data.js
+++ b/lib/get-link-data.js
@@ -6,7 +6,11 @@ import renderContent from './render-content/index.js'
 
 // rawLinks is an array of paths: [ '/foo' ]
 // we need to convert it to an array of localized objects: [ { href: '/en/foo', title: 'Foo', intro: 'Description here' } ]
-export default async (rawLinks, context, option = { title: true, intro: true }) => {
+export default async (
+  rawLinks,
+  context,
+  option = { title: true, intro: true, fullTitle: false }
+) => {
   if (!rawLinks) return
 
   if (typeof rawLinks === 'string') {
@@ -46,6 +50,11 @@ const processLink = async (link, context, option) => {
     result.title = await linkedPage.renderTitle(context, opts)
   }
 
+  if (option.fullTitle) {
+    opts.preferShort = false
+    result.fullTitle = await linkedPage.renderTitle(context, opts)
+  }
+
   if (option.intro) {
     result.intro = await linkedPage.renderProp('intro', context, opts)
   }
diff --git a/lib/page.js b/lib/page.js
index a6287239eb..966f854e6f 100644
--- a/lib/page.js
+++ b/lib/page.js
@@ -154,8 +154,8 @@ class Page {
     return productMap[this.parentProductId]
   }
 
-  async renderTitle(context, opts = {}) {
-    return this.shortTitle
+  async renderTitle(context, opts = { preferShort: true }) {
+    return opts.preferShort && this.shortTitle
       ? this.renderProp('shortTitle', context, opts)
       : this.renderProp('title', context, opts)
   }
diff --git a/middleware/featured-links.js b/middleware/featured-links.js
index 9846046226..4d8c8690fa 100644
--- a/middleware/featured-links.js
+++ b/middleware/featured-links.js
@@ -18,7 +18,8 @@ export default async function featuredLinks(req, res, next) {
   for (const key in req.context.page.featuredLinks) {
     req.context.featuredLinks[key] = await getLinkData(
       req.context.page.featuredLinks[key],
-      req.context
+      req.context,
+      { title: true, intro: true, fullTitle: true }
     )
   }