Circulars: Open Automatically Formatted Hyperlinks in New Tab (#2383)

nasa-gcn · Jun 28, 2024 · 44ed41a · 44ed41a
1 parent 995552e
commit 44ed41a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/app/components/nested-checkboxes/NestedCheckboxes.tsx b/app/components/nested-checkboxes/NestedCheckboxes.tsx
@@ -47,7 +47,7 @@ function NestedCheckboxNode({
     nodes.map((node) => node.defaultChecked || false)
   )
 
-  const isExternal = link && isExternalLink(link)
+  const external = link && isExternalLink(link)
 
   function updateParent() {
     if (topLevelRef.current) {
@@ -85,7 +85,7 @@ function NestedCheckboxNode({
                 className="usa-link"
                 to={link}
                 target="_blank"
-                rel={isExternal ? 'noopener' : undefined}
+                rel={external ? 'noopener' : undefined}
                 onClick={(e) => {
                   e.stopPropagation()
                 }}

diff --git a/app/routes/circulars.$circularId.($version)/AstroData.components.tsx b/app/routes/circulars.$circularId.($version)/AstroData.components.tsx
@@ -54,6 +54,7 @@ export function Arxiv({ children, value }: JSX.IntrinsicElements['data']) {
   return (
     <AstroDataLinkWithTooltip
       to={`https://arxiv.org/abs/${value}`}
+      external
       fetch={() => fetchTooltipData<typeof arxivTooltipLoader>('arxiv', value)}
       label={({ title, year, authors }) => (
         <>
@@ -74,6 +75,7 @@ export function Doi({ children, value }: JSX.IntrinsicElements['data']) {
   return (
     <AstroDataLinkWithTooltip
       to={`https://doi.org/${value}`}
+      external
       fetch={() => fetchTooltipData<typeof doiTooltipLoader>('doi', value)}
       label={({ authors, pub, year, title }) => (
         <>
@@ -94,6 +96,7 @@ export function Tns({ children, value }: JSX.IntrinsicElements['data']) {
   return (
     <AstroDataLinkWithTooltip
       to={`https://www.wis-tns.org/object/${value}`}
+      external
       fetch={() => fetchTooltipData<typeof tnsTooltipLoader>('tns', value)}
       label={({ ra, dec, names }) => (
         <>

diff --git a/app/routes/circulars.$circularId.($version)/AstroDataContext.tsx b/app/routes/circulars.$circularId.($version)/AstroDataContext.tsx
@@ -31,16 +31,26 @@ export const AstroDataContext = createContext<AstroDataContextProps>({})
  */
 export const AstroDataLink = forwardRef(
   (
-    { children, className, rel: origRel, ...props }: Omit<LinkProps, 'target'>,
+    {
+      children,
+      className,
+      rel: origRel,
+      external,
+      ...props
+    }: Omit<LinkProps, 'target'> & { external?: boolean },
     ref: Ref<HTMLAnchorElement>
   ) => {
     const context = useContext(AstroDataContext)
-    const rel = [origRel, context.rel].filter(Boolean).join(' ') || undefined
+    const target = external ? '_blank' : context.target
+    const rel =
+      [origRel, context.rel, external ? 'external noopener' : '']
+        .filter(Boolean)
+        .join(' ') || undefined
 
     return (
       <Link
         className={classNames('usa-link', className)}
-        target={context.target}
+        target={target}
         rel={rel}
         ref={ref}
         {...props}
@@ -67,6 +77,7 @@ export function AstroDataLinkWithTooltip<T>({
 }: Omit<Parameters<typeof AstroDataLink>[0], 'ref'> & {
   fetch: () => T
   label: (resolved: Awaited<T>) => ReactNode
+  external?: boolean
 }) {
   return (
     <Tooltip
@@ -98,6 +109,7 @@ export function AstroDataLinkWithTooltip<T>({
         </div>
       }
       asCustom={AstroDataLink}
+      external={Boolean(external)}
     >
       {children}
     </Tooltip>

diff --git a/app/routes/circulars.$circularId.($version)/rehypeAutolinkLiteral.ts b/app/routes/circulars.$circularId.($version)/rehypeAutolinkLiteral.ts
@@ -20,7 +20,11 @@ const regexp = new RegExp(
 function autolinkLiteral(tree: Parameters<typeof findAndReplace>[0]) {
   findAndReplace(
     tree,
-    [regexp, (href: string) => h('a', { rel: 'external', href }, href)],
+    [
+      regexp,
+      (href: string) =>
+        h('a', { rel: 'external noopener', href, target: '_blank' }, href),
+    ],
     { ignore: ['data'] }
   )
   return tree