Make external links open in a new tab by default (#193)

* Make external links open in a new tab by default

* Fix regression

* Fixes

* Comment

* Run Prettier

* Simplify code

* Better

Author: benface

components/Link.tsx

@@ -23,43 +23,39 @@ export const Link = ({
   ...props
 }: LinkProps) => {
   const { locale: currentLocale, extractLocaleFromPath } = useI18n()
-  const rel = target === '_blank' ? 'noopener' : undefined
 
-  // If `href` is undefined or links to an anchor on the same page, bypass `NextLink`
-  if (href === undefined || (typeof href === 'string' && href.startsWith('#'))) {
+  let finalHref = typeof href === 'object' ? href.href ?? undefined : href
+
+  // If `finalHref` is `undefined`, or if it points to an anchor on the same page, bypass `NextLink`
+  if (finalHref === undefined || finalHref.startsWith('#')) {
     return (
-      <a href={href} target={target} rel={rel} {...props}>
+      <a href={finalHref} target={target} {...props}>
         {children}
       </a>
     )
   }
 
-  const isInternal =
-    (typeof href === 'string' && href.startsWith('/')) ||
-    (typeof href === 'object' && !href.host && href.pathname?.startsWith('/'))
+  const isInternal = finalHref.startsWith('/')
 
-  // If the URL is internal, automatically prepend the locale
+  // If the link is internal, automatically prepend the locale to it
   if (isInternal) {
-    const path = typeof href === 'object' ? href.pathname ?? '' : href
-    const { locale: pathLocale, pathWithoutLocale } = extractLocaleFromPath(path)
-    const pathWithLocale = `/${linkLocale ?? pathLocale ?? currentLocale}${pathWithoutLocale}`
-    if (typeof href === 'object') {
-      href.pathname = pathWithLocale
-    } else {
-      href = pathWithLocale
-    }
+    const { locale: pathLocale, pathWithoutLocale } = extractLocaleFromPath(finalHref)
+    finalHref = `/${linkLocale ?? pathLocale ?? currentLocale}${pathWithoutLocale}`
   }
 
+  // If the link is external, default the target to `_blank`
+  const finalTarget = target ?? (!isInternal ? '_blank' : undefined)
+
   const nextLinkProps = {
-    href,
+    href: finalHref,
     replace,
     scroll,
     shallow,
     prefetch,
   }
   return (
     <NextLink {...nextLinkProps} passHref>
-      <a target={target} rel={rel} {...props}>
+      <a target={finalTarget} rel={finalTarget === '_blank' ? 'noopener' : undefined} {...props}>
         {children}
       </a>
     </NextLink>

pages/en/deploying/deploying-a-subgraph-to-hosted.mdx

@@ -37,7 +37,6 @@ The following networks are supported in beta on the Hosted Service:
 - `boba`
 - `harmony`
 
-
 > Ropsten, Rinkeby and Kovan are being deprecated, and are no longer supported by the Hosted Service. Read more on the [Ethereum Foundation Blog](https://blog.ethereum.org/2022/06/21/testnet-deprecation). Goerli will be maintained by client developers post-merge, and is also supported by the Hosted Service. Developers who currently use Ropsten, Rinkeby or Kovan as their staging/testing environment are encouraged to migrate to Goerli.
 
 > Note that if an EVM compatible chain is not supported on the Hosted Service, you can run your own [graph-node](https://github.com/graphprotocol/graph-node) to index it.

pages/en/deploying/hosted-service.mdx

@@ -2,7 +2,7 @@
 title: What is the Hosted Service?
 ---
 
-> Please note, the Hosted Service will begin sunsetting in Q1 2023, but it will remain available to chains that are not supported on the decentralized network. Developers are encouraged to [migrate their subgraphs](https://thegraph.com/blog/how-to-migrate-ethereum-subgraph) as more chains are supported. Each chain will have their hosted service equivalents gradually sunset to ensure developers have enough time to migrate subgraphs to the decentralized network. Read more about the sunsetting of the Hosted Service [here](https://thegraph.com/blog/sunsetting-hosted-service). 
+> Please note, the Hosted Service will begin sunsetting in Q1 2023, but it will remain available to chains that are not supported on the decentralized network. Developers are encouraged to [migrate their subgraphs](https://thegraph.com/blog/how-to-migrate-ethereum-subgraph) as more chains are supported. Each chain will have their hosted service equivalents gradually sunset to ensure developers have enough time to migrate subgraphs to the decentralized network. Read more about the sunsetting of the Hosted Service [here](https://thegraph.com/blog/sunsetting-hosted-service).
 
 This section will walk you through deploying a subgraph to the [Hosted Service](https://thegraph.com/hosted-service/).
 

pages/en/developing/creating-a-subgraph.mdx

@@ -710,7 +710,7 @@ While events provide an effective way to collect relevant changes to the state o
 
 Call handlers will only trigger in one of two cases: when the function specified is called by an account other than the contract itself or when it is marked as external in Solidity and called as part of another function in the same contract.
 
-> **Note:** Call handlers currently depend on the Parity tracing API. Certain networks, such as BNB chain and Arbitrum, does not support this API. If a subgraph indexing one of these networks contain one or more call handlers, it will not start syncing. Subgraph developers should instead use event handlers. These are far more performant than call handlers, and are supported on every evm network.  
+> **Note:** Call handlers currently depend on the Parity tracing API. Certain networks, such as BNB chain and Arbitrum, does not support this API. If a subgraph indexing one of these networks contain one or more call handlers, it will not start syncing. Subgraph developers should instead use event handlers. These are far more performant than call handlers, and are supported on every evm network.
 
 ### Defining a Call Handler