Enable hover preview cards for all docsets (github#36078)

Co-authored-by: Robert Sese <[email protected]>

Author: peterbe

Diff for: components/LinkPreviewPopover.tsx

@@ -112,19 +112,6 @@ function popoverWrap(element: HTMLLinkElement) {
   let anchor = ''
 
   if (!title) {
-    // TEMPORARY
-    // We're currently only activating this functionalty on a subset of pages.
-    // In fact, only on /$locale/pages/
-    // On the server-side, we decide this by setting or not setting the
-    // data attributes on the tags. But for in-page anchor links we don't
-    // rely on the server.
-    // We can remove this if statement once preview hover cards are
-    // enabled everywhere.
-    const pathnameSplit = new URL(element.href).pathname.split('/')
-    // Check for both when you're on free-pro-team@latest and any
-    // other version too.
-    if (!(pathnameSplit[2] === 'pages' || pathnameSplit[3] === 'pages')) return
-
     // But, is it an in-page anchor link? If so, get the title, intro
     // and product from within the DOM. But only if we can use the anchor
     // destination to find a DOM node that has text.
@@ -307,14 +294,21 @@ function popoverHide() {
 }
 
 function testTarget(target: HTMLLinkElement) {
-  // Return true if the element is an A tag, whose `href` starts with
-  // a `/`, is contained in either the article-contents (the meat of the article)
-  // or the article-intro (which contain product callouts), and it's not one of
-  // those permalink ones next to headings (with the chain looking icon).
+  // Return true if:
+  //
+  // * the element is an A tag
+  // * whose `href` starts with a `/`
+  // * is contained in either the article-contents (the meat of the article)
+  //   or the article-intro (which contain product callouts)
+  // * the window width is > 767px, hovercards are less useful at the smaller
+  //   widths
+  // * it's not one of those permalink ones next to headings (with the chain
+  //   looking icon).
   return (
     target.tagName === 'A' &&
     target.href.startsWith(window.location.origin) &&
     target.closest('#article-contents, #article-intro') &&
+    window.innerWidth > 767 &&
     !target.classList.contains('doctocat-link')
   )
 }

Diff for: components/article/ArticlePage.tsx

@@ -1,8 +1,7 @@
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 import cx from 'classnames'
-import { Box, Flash } from '@primer/react'
-import { LinkExternalIcon, BeakerIcon } from '@primer/octicons-react'
+import { LinkExternalIcon } from '@primer/octicons-react'
 
 import { Callout } from 'components/ui/Callout'
 import { DefaultLayout } from 'components/DefaultLayout'
@@ -64,44 +63,7 @@ export const ArticlePage = () => {
           <Breadcrumbs />
         </div>
         <ArticleGridLayout
-          topper={
-            <>
-              {/* This is a temporary thing for the duration of the
-              feature-flagged release of hover preview cards on /$local/pages/
-              articles.
-              Delete this whole thing when hover preview cards is
-              available on all articles independent of path.
-               */}
-              {router.query.productId === 'pages' && (
-                <Flash variant="default" className="mb-3">
-                  <Box sx={{ display: 'flex' }}>
-                    <Box
-                      sx={{
-                        p: 1,
-                        textAlign: 'center',
-                      }}
-                    >
-                      <BeakerIcon className="mr-2 color-fg-muted" />
-                    </Box>
-                    <Box
-                      sx={{
-                        flexGrow: 1,
-                        p: 0,
-                      }}
-                    >
-                      <p>
-                        Hover over a link to another article to get more details. If you have ideas
-                        for how we can improve this page, let us know in the{' '}
-                        <a href="https://github.com/github/docs/discussions/24591">discussion</a>.
-                      </p>
-                    </Box>
-                  </Box>
-                </Flash>
-              )}
-
-              <ArticleTitle>{title}</ArticleTitle>
-            </>
-          }
+          topper={<ArticleTitle>{title}</ArticleTitle>}
           intro={
             <>
               {intro && (

Diff for: lib/render-content/plugins/rewrite-local-links.js

@@ -24,21 +24,6 @@ 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` or
-// `/en/[email protected]/pages/foo`.
-// But not `/en/pages` because that's not an article page anyway.
-const ENABLED_PATHS_REGEX = /^\/\w{2}\/pages\/|^\/\w{2}\/[\w-]+@[\w.]+\/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 matcherInternalLinks = (node) =>
   node.type === 'element' &&
@@ -57,7 +42,7 @@ const matcherAnchorLinks = (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, currentPath } = context
+  const { currentLanguage, currentVersion } = context
   // There's no languageCode or version passed, so nothing to do
   if (!currentLanguage || !currentVersion) return
 
@@ -68,9 +53,7 @@ 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))
-        }
+        promises.push(dataAttributesSetter(node, context))
       }
       for (const child of node.children) {
         if (child.value) {