Preview hover cards (#34702)

Co-authored-by: Grace Park <gracepark@github.com>
Co-authored-by: Joe Oak <41307427+joeoak@users.noreply.github.com>

lib/render-content/plugins/rewrite-local-links.js

@@ -22,6 +22,20 @@ const AUTOTITLE = /^\s*AUTOTITLE\s*$/
 // which we use to know that we need to fall back to English.
 export class TitleFromAutotitleError extends Error {}
 
+// E.g. `/en/pages/foo` or `/pt/pages/any/thing`
+// But not `/en/pages` because that's not an article page anyway.
+const ENABLED_PATHS_REGEX = /^\/\w{2}\/pages\//
+
+// Return true if we should bother setting data attributes.
+// This becomes our feature-flag switch for enabling/disabling the
+// hover preview cards.
+// If you're on a page where we don't want hover preview cards, we
+// can just omit these data attributes then the client-side will
+// simply not be able to display them because the data isn't there.
+function setDataAttributesOnCurrentPath(path) {
+  return ENABLED_PATHS_REGEX.test(path)
+}
+
 // Matches any <a> tags with an href that starts with `/`
 const matcher = (node) =>
   node.type === 'element' &&
@@ -33,7 +47,7 @@ const matcher = (node) =>
 // Content authors write links like `/some/article/path`, but they need to be
 // rewritten on the fly to match the current language and page version
 export default function rewriteLocalLinks(context) {
-  const { currentLanguage, currentVersion } = context
+  const { currentLanguage, currentVersion, currentPath } = context
   // There's no languageCode or version passed, so nothing to do
   if (!currentLanguage || !currentVersion) return
 
@@ -44,6 +58,9 @@ export default function rewriteLocalLinks(context) {
       const newHref = getNewHref(node, currentLanguage, currentVersion)
       if (newHref) {
         node.properties.href = newHref
+        if (setDataAttributesOnCurrentPath(currentPath)) {
+          promises.push(dataAttributesSetter(node, context))
+        }
       }
       for (const child of node.children) {
         if (child.value) {
@@ -73,6 +90,43 @@ export default function rewriteLocalLinks(context) {
   }
 }
 
+async function dataAttributesSetter(node, context) {
+  const href = node.properties.href
+  const page = findPage(href, context.pages, context.redirects)
+  if (!page) {
+    // If this happens, it's a link that might be broken or links to
+    // something that might not actually be an internal link to a
+    // existing page such as link to archived enterprise version.
+    return
+  }
+  let productPage = null
+  for (const permalink of page.permalinks) {
+    const rootHref = permalink.href
+      .split('/')
+      .slice(0, permalink.pageVersion === 'free-pro-team@latest' ? 3 : 4)
+      .join('/')
+    const rootPage = context.pages[rootHref]
+    if (rootPage) {
+      productPage = rootPage
+      break
+    }
+  }
+
+  if (productPage) {
+    let productTitle = await productPage.renderProp('shortTitle', context, {
+      textOnly: true,
+    })
+    if (!productTitle) {
+      productTitle = await productPage.renderProp('title', context, {
+        textOnly: true,
+      })
+    }
+    node.properties['data-product-title'] = productTitle
+  }
+  node.properties['data-title'] = await page.renderProp('title', context, { textOnly: true })
+  node.properties['data-intro'] = await page.renderProp('intro', context, { textOnly: true })
+}
+
 async function getNewTitleSetter(child, href, context) {
   child.value = await getNewTitle(href, context)
 }