jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-23 11:54:18 -05:00
Code Issues Projects Releases Wiki Activity

Enable hover preview cards for all docsets (#36078)

Browse Source 
Co-authored-by: Robert Sese <734194+rsese@users.noreply.github.com>
This commit is contained in:
Peter Bengtsson
2023-04-13 13:21:39 -04:00
committed by GitHub
parent 2606cafce4
commit 218c866805
3 changed files with 15 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/LinkPreviewPopover.tsx
View File

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

42
components/article/ArticlePage.tsx
View File

@@ -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 && (

19
lib/render-content/plugins/rewrite-local-links.js
View File

@@ -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/enterprise-server@3.8/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,10 +53,8 @@ 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) {
if (AUTOTITLE.test(child.value)) {