allow use of full titles on landing page (github#20327)

Author: rachmari

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,
             }
           }),
         }

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>
                 }
               >

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)
   }

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)
   }

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 }
     )
   }