Add support for videos to landing pages (#23801)

* Add new video properties frontmatter

* Handle video links in the middleware

* Video links don't have intros, authors, or full titles

* Make videos available from context

* Add default video heading

* Add basic tests for videos

* tmp videos test

* Remove stray test debugging

* more tmp videos testing

* Add videos test fixture

* Revert "more tmp videos testing"

This reverts commit 382946a5603ff217014797f77f37216bb8bb6c9c.

* Revert "tmp videos test"

This reverts commit 8767d0eaf08bd4ca04e2dacd12d476a2506c0367.

Author: rsese

components/context/ProductLandingContext.tsx

@@ -87,9 +87,9 @@ export const getFeaturedLinksFromReq = (req: any): Record<string, Array<Featured
         ((entries as Array<any>) || []).map((entry: any) => ({
           href: entry.href,
           title: entry.title,
-          intro: entry.intro,
-          authors: entry.page.authors || [],
-          fullTitle: entry.fullTitle,
+          intro: entry.intro || null,
+          authors: entry.page?.authors || [],
+          fullTitle: entry.fullTitle || null,
         })),
       ]
     })
@@ -141,13 +141,13 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
 
     featuredArticles: Object.entries(req.context.featuredLinks || [])
       .filter(([key]) => {
-        return key === 'guides' || key === 'popular'
+        return key === 'guides' || key === 'popular' || key === 'videos'
       })
       .map(([key, links]: any) => {
         return {
           label:
-            key === 'popular'
-              ? req.context.page.featuredLinks.popularHeading || req.context.site.data.ui.toc[key]
+            key === 'popular' || key === 'videos'
+              ? req.context.page.featuredLinks[key + 'Heading'] || req.context.site.data.ui.toc[key]
               : req.context.site.data.ui.toc[key],
           viewAllHref:
             key === 'guides' && !req.context.currentCategory && hasGuidesPage
@@ -158,9 +158,9 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
               hideIntro: key === 'popular',
               href: link.href,
               title: link.title,
-              intro: link.intro,
-              authors: link.page.authors || [],
-              fullTitle: link.fullTitle,
+              intro: link.intro || null,
+              authors: link.page?.authors || [],
+              fullTitle: link.fullTitle || null,
             }
           }),
         }

data/ui.yml

@@ -39,6 +39,7 @@ toc:
   popular: Popular
   guides: Guides
   whats_new: What's new
+  videos: Videos
 pages:
   article_version: 'Article version'
   miniToc: In this article

lib/frontmatter.js

@@ -118,6 +118,20 @@ export const schema = {
         popularHeading: {
           type: 'string',
         },
+        videos: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              title: 'string',
+              href: 'string',
+            },
+          },
+        },
+        // allows you to use an alternate heading for the videos column
+        videosHeading: {
+          type: 'string',
+        },
       },
     },
     // Shown in `product-landing.html` "What's new" section

middleware/featured-links.js

@@ -16,11 +16,17 @@ export default async function featuredLinks(req, res, next) {
 
   req.context.featuredLinks = {}
   for (const key in req.context.page.featuredLinks) {
-    req.context.featuredLinks[key] = await getLinkData(
-      req.context.page.featuredLinks[key],
-      req.context,
-      { title: true, intro: true, fullTitle: true }
-    )
+    if (key === 'videos') {
+      // Videos are external URLs so don't run through getLinkData, they're
+      // objects with title and href properties.
+      req.context.featuredLinks[key] = req.context.page.featuredLinks[key]
+    } else {
+      req.context.featuredLinks[key] = await getLinkData(
+        req.context.page.featuredLinks[key],
+        req.context,
+        { title: true, intro: true, fullTitle: true }
+      )
+    }
   }
 
   return next()

tests/fixtures/article-with-videos.md

@@ -0,0 +1,15 @@
+---
+title: Article with featuredLinks
+versions:
+  free-pro-team: '*'
+featuredLinks:
+  videos:
+    - title: codespaces
+      href: 'https://www.youtube-nocookie.com/embed/cP0I9w2coGU'
+    - title: more codespaces
+      href: 'https://www.youtube-nocookie.com/embed/cP0I9w2coGU'
+    - title: even more codespaces
+      href: 'https://www.youtube-nocookie.com/embed/cP0I9w2coGU'
+  videosHeading: Custom Videos heading
+layout: product-landing
+---

tests/unit/page.js

@@ -532,6 +532,37 @@ describe('Page class', () => {
     })
   })
 
+  describe('videos', () => {
+    let page
+
+    beforeEach(async () => {
+      page = await Page.init({
+        relativePath: 'article-with-videos.md',
+        basePath: path.join(__dirname, '../fixtures'),
+        languageCode: 'en',
+      })
+    })
+
+    it('includes videos specified in the featuredLinks frontmatter', async () => {
+      expect(page.featuredLinks.videos).toStrictEqual([
+        {
+          title: 'codespaces',
+          href: 'https://www.youtube-nocookie.com/embed/cP0I9w2coGU',
+        },
+        {
+          title: 'more codespaces',
+          href: 'https://www.youtube-nocookie.com/embed/cP0I9w2coGU',
+        },
+        {
+          title: 'even more codespaces',
+          href: 'https://www.youtube-nocookie.com/embed/cP0I9w2coGU',
+        },
+      ])
+
+      expect(page.featuredLinks.videosHeading).toBe('Custom Videos heading')
+    })
+  })
+
   describe('Page.parseFrontmatter()', () => {
     it('throws an error on bad input', () => {
       const markdown = null