update: external link icon

src/components/header.tsx

@@ -262,7 +262,7 @@ const MenuItem = ({ componentToShow, type, text, link }: MenuItemProps) => {
       {showExpanded && componentToShow}
     </>
   ) : (
-    <DarkNavLink to={link}>
+    <DarkNavLink href={link}>
       <div className="menu-item">
         {text}
         <ExternalLink />
@@ -314,7 +314,7 @@ const HeaderSec = ({ headerProps, wide }: HeaderViewProps) => {
 
             return (
               <DarkNavLink
-                to={item.to}
+                href={item.to}
                 state={{ bucketName: item.bucketName }}
                 activeClassName="active-item"
                 className={isCurrent ? 'active-item' : 'non-active'}
@@ -327,7 +327,7 @@ const HeaderSec = ({ headerProps, wide }: HeaderViewProps) => {
 
         {/* <div>
           {externalLinkItems.map((item) => (
-            <DarkNavLink className="link" to={item.to}>
+            <DarkNavLink className="link" href={item.to}>
               {item.text} &nbsp;&nbsp;
               <ExternalLink />
             </DarkNavLink>

src/components/link.tsx

@@ -3,27 +3,49 @@ import { Link as GatsbyLink } from 'gatsby'
 import isAbsoluteUrl from 'is-absolute-url'
 
 interface LinkProps {
-  to: string | null
+  href: string | null
   activeClassName?: string
   partiallyActive?: string
   getProps?: any
   wide?: boolean
 }
 
 const Link = ({
-  to,
+  href,
   activeClassName,
   partiallyActive,
   getProps,
   ...props
 }: LinkProps & React.ReactNode) =>
-  !to || isAbsoluteUrl(to) ? (
-    <a href={to} {...props}>
+  !href || isAbsoluteUrl(href) ? (
+    <a
+      href={href}
+      {...props}
+      target={!href?.includes('prisma.io') ? '_blank' : '_self'}
+      rel={!href?.includes('prisma.io') ? 'noopener' : ''}
+      style={{ display: 'inline-block' }}
+    >
       {props.children}
+      {href && isAbsoluteUrl(href) && !href.includes('prisma.io') && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          style={{ marginLeft: '4px' }}
+          height="12"
+          viewBox="0 0 12 12"
+          fill="currentColor"
+          color="inherit"
+        >
+          <path
+            fill="inherit"
+            d="M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"
+          />
+        </svg>
+      )}
     </a>
   ) : (
     <GatsbyLink
-      to={to}
+      to={href}
       activeClassName={activeClassName}
       partiallyActive={partiallyActive}
       getProps={getProps}

src/components/pageBottom.tsx

@@ -182,7 +182,7 @@ const PageBottom = ({ editDocsPath }: any) => {
         </Content>
       </Wrapper>
       {editDocsPath && (
-        <Link className="edit-git" to={`${editDocsPath}`}>
+        <Link className="edit-git" href={`${editDocsPath}`}>
           Edit this page on GitHub
         </Link>
       )}

src/components/parentTitleComp.tsx

@@ -39,7 +39,7 @@ const ParentTitle = ({ slug, nonLink }: ParentTitleProps) => {
       {parentTitle.map((part: any, index: number) => (
         <span key={index}>
           {part.link && !nonLink ? (
-            <Link to={part.link}>
+            <Link href={part.link}>
               <span className={`${part.codeStyle ? 'inline-code' : ''}`}>{part.title}</span>
             </Link>
           ) : (

src/components/search/hitComps.tsx

@@ -56,7 +56,7 @@ const HitComp = styled.div`
 const DocHit = ({ hit, selected }: any) =>
   hit._distinctSeqID == 0 ? (
     <HitComp style={{ background: selected ? '#F7FAFC' : 'white' }}>
-      <Link style={{ boxShadow: `none`, textDecoration: 'none' }} to={hit.path}>
+      <Link style={{ boxShadow: `none`, textDecoration: 'none' }} href={hit.path}>
         <ParentTitle slug={hit.slug} nonLink={true} />
         <h3>
           <Snippet hit={hit} attribute="title" tagName="mark" /> /{' '}

src/components/shortcodes/index.tsx

@@ -16,14 +16,15 @@ import Admonition from './admonition'
 import Quiz from './quiz'
 import Tip from './tip'
 import NavigationLinksContainer from './navigationLinksContainer'
+import Link from '../link'
 
 const shortcodes = {
   h1: () => <h1 style={{ display: 'none' }} />,
   h2: ({ id, ...props }: any) => <h2 id={id.replace(/inlinecode/g, '')} {...props} />,
   h3: ({ id, ...props }: any) => <h3 id={id.replace(/inlinecode/g, '')} {...props} />,
   h4: ({ id, ...props }: any) => <h4 id={id.replace(/inlinecode/g, '')} {...props} />,
   a: ({ href, ...props }: any) => (
-    <a href={href ? href.replace(/inlinecode/g, '') : ''} {...props} />
+    <Link href={href ? href.replace(/inlinecode/g, '') : ''} {...props} />
   ),
   p: (props: any) => <p className="paragraph" {...props} />,
   ul: (props: any) => <ul className="list" {...props} />,

src/components/shortcodes/subSections.tsx

@@ -76,7 +76,7 @@ const Subsections = ({ depth, rootPath }: SubsecProps) => {
       <ul className="list">
         {subs.map((sec: any, index: number) => (
           <li key={index}>
-            <Link to={sec.url}>
+            <Link href={sec.url}>
               <span className={`${sec.codeStyle ? 'inline-code' : ''}`}>{sec.title}</span>
             </Link>
             {dep > 1 && sec.items.length > 0 && list(sec.items, dep - 1)}

src/components/sidebar/treeNode.tsx

@@ -238,7 +238,7 @@ const TreeNode = ({
     <ListItem className={calculatedClassName}>
       {title && label !== 'index' && !hidePage && (
         <Link
-          to={staticLink || topLevel ? null : url}
+          href={staticLink || topLevel ? null : url}
           activeClassName="active-item"
           className={isCurrent ? 'active-item' : 'non-active'}
           id={withPrefix(url)}

src/pages/index.tsx

@@ -377,10 +377,10 @@ const Homepage = () => {
         <h1>Prisma Documentation</h1>
         <NormalPara>
           Choose one of our{' '}
-          <Link to={SummaryLinkData.gettingStarted}>getting started tutorials</Link> or explore the{' '}
-          <Link to={SummaryLinkData.readyToRun}>ready-to-run examples on GitHub</Link>. Join our
-          thriving community on <Link to={SummaryLinkData.slack}>Slack</Link> and{' '}
-          <Link to={SummaryLinkData.git}>GitHub</Link> for help and ideas.
+          <Link href={SummaryLinkData.gettingStarted}>getting started tutorials</Link> or explore
+          the <Link href={SummaryLinkData.readyToRun}>ready-to-run examples on GitHub</Link>. Join
+          our thriving community on <Link href={SummaryLinkData.slack}>Slack</Link> and{' '}
+          <Link href={SummaryLinkData.git}>GitHub</Link> for help and ideas.
         </NormalPara>
         <SummaryLinks>
           {SummaryLinkData.buttons.map((slink: any, index: number) =>
@@ -412,7 +412,7 @@ const Homepage = () => {
               <List>
                 {generalLink.links.map((link: any) => (
                   <li key={index}>
-                    <Link to={link.url}>
+                    <Link href={link.url}>
                       <span className={`${link.codeBlock ? 'inline-code' : ''}`}>{link.text}</span>
                     </Link>
                   </li>
@@ -427,7 +427,7 @@ const Homepage = () => {
         <GuideLinkRow>
           {GuideLinkData.map((gLinkData: any, index: number) => (
             <LinkCard
-              to={gLinkData.url}
+              href={gLinkData.url}
               key={index}
               maxWidth={gLinkData.small ? '274px' : '384px'}
               style={{
@@ -451,15 +451,15 @@ const Homepage = () => {
               <span className="icon">{icons[rLinkData.icon]}</span>
               <Space height={16} />
               <ListTitle>
-                <Link to={rLinkData.mainUrl}>
+                <Link href={rLinkData.mainUrl}>
                   {rLinkData.categoryName} &nbsp;
                   <ArrowRight color="#A0AEC0" />{' '}
                 </Link>
               </ListTitle>
               <List>
                 {rLinkData.links.map((link: any, index: number) => (
                   <li key={index}>
-                    <Link to={link.url}>
+                    <Link href={link.url}>
                       <span className={`${link.codeBlock ? 'inline-code' : ''}`}>{link.text}</span>
                     </Link>
                   </li>
@@ -474,7 +474,7 @@ const Homepage = () => {
           <MoreLinksList>
             {MoreUsefulLinks.map((uLink: any, index: number) => (
               <li key={index}>
-                <Link to={uLink.url}>
+                <Link href={uLink.url}>
                   <span className={`${uLink.codeBlock ? 'inline-code' : ''}`}>{uLink.text}</span>
                 </Link>
               </li>