feat: define nofollow rules for external links, related to #62

hunghvu · Jan 6, 2024 · 5fd3230 · 5fd3230
1 parent 0cbe348
commit 5fd3230
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/apps/web/app/_components/header/index.tsx b/apps/web/app/_components/header/index.tsx
@@ -29,10 +29,24 @@ const Header: React.FunctionComponent = () => {
       aria-label='Navigation menu'
       end={
         <nav className='flex flex-row gap-4'>
-          <Link aria-label='LinkedIn' className='flex flex-row items-center' href='https://www.linkedin.com/in/hunghvu/' prefetch={false}>
+          <Link
+            aria-label='LinkedIn'
+            className='flex flex-row items-center'
+            href='https://www.linkedin.com/in/hunghvu/'
+            prefetch={false}
+            rel='nofollow noopener noreferrer'
+            target='_blank'
+          >
             <Image alt={`Navigate to Hung's LinkedIn.`} height={24} src='/linkedin.svg' width={24} />
           </Link>
-          <Link aria-label='GitHub' className='flex flex-row items-center' href='https://github.com/hunghvu/hungvu.tech' prefetch={false}>
+          <Link
+            aria-label='GitHub'
+            className='flex flex-row items-center'
+            href='https://github.com/hunghvu/hungvu.tech'
+            prefetch={false}
+            rel='nofollow noopener noreferrer'
+            target='_blank'
+          >
             <Image alt='Navigate to hungvu.tech GitHub repository.' height={24} src='/github.svg' width={24} />
           </Link>
         </nav>

diff --git a/apps/web/app/_components/richtext/index.tsx b/apps/web/app/_components/richtext/index.tsx
@@ -158,8 +158,8 @@ export const RichText = ({ nodes }: RichTextProps): JSX.Element => {
                   className='text-base md:text-lg text-sky-200 underline underline-offset-4 decoration-2 font-semibold hover:decoration-4'
                   href={node.fields.url ?? '/'}
                   key={index}
-                  prefetch={false}
-                  rel='nofollow noopener noreferrer'
+                  prefetch={node.fields.url.includes('hungvu.tech')}
+                  rel={node.fields.url.includes('hungvu.tech') ? undefined : 'nofollow noopener noreferrer'}
                   target={node.fields.newTab ? '_blank' : undefined}
                 >
                   {serializedChildren}
@@ -171,8 +171,7 @@ export const RichText = ({ nodes }: RichTextProps): JSX.Element => {
                 className='text-base md:text-lg text-sky-200 underline underline-offset-4 decoration-2 font-semibold hover:decoration-4'
                 href={node.fields.doc.value.settings.slug ?? '/'}
                 key={index}
-                rel='dofollow'
-                target={node.newTab ? 'target="_blank"' : undefined}
+                target={node.newTab ? '_blank' : undefined}
               >
                 {serializedChildren}
               </Link>

diff --git a/apps/web/app/error.tsx b/apps/web/app/error.tsx
@@ -34,6 +34,8 @@ const Error = ({ error }: { error: Error & { digest?: string }; reset: () => voi
             className='text-lg md:text-xl hover:font-semibold bg-emerald-950 py-1 w-[10rem] md:w-[12rem] rounded-md text-center'
             href='https://github.com/hunghvu/hungvu.tech/issues'
             prefetch={false}
+            target='_blank'
+            rel='nofollow noopener noreferrer'
           >
             Report on GitHub
           </Link>

diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
@@ -32,6 +32,8 @@ const NotFound = (): React.ReactNode => {
             className='text-lg md:text-xl hover:font-semibold bg-emerald-950 py-1 w-[10rem] md:w-[12rem] rounded-md text-center'
             href='https://github.com/hunghvu/hungvu.tech/issues'
             prefetch={false}
+            target='_blank'
+            rel='nofollow noopener noreferrer'
           >
             Report on GitHub
           </Link>