From 2511a4bc7b142d7c5431243ed9d212b57c392d36 Mon Sep 17 00:00:00 2001
From: globalstar01 <laizacamargo1128@gmail.com>
Date: Tue, 19 Mar 2024 20:26:38 -0400
Subject: [PATCH] All outbound links in blog posts open in new tab

Fixes https://github.com/UnsignedArduino/Awesome-Arcade/issues/88
---
 src/pages/blog/[filename].tsx       | 11 ++++++++++-
 src/pages/blog/authors/[author].tsx | 11 ++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/pages/blog/[filename].tsx b/src/pages/blog/[filename].tsx
index d32a408..f6e42ff 100644
--- a/src/pages/blog/[filename].tsx
+++ b/src/pages/blog/[filename].tsx
@@ -7,6 +7,8 @@ import { PostQuery } from "../../../tina/__generated__/types";
 import React from "react";
 import { createBreadCrumbSegment } from "@/components/Layout/layout";
 import BlogPost from "@/components/Blog/Post/Post";
+import getElement from "@/scripts/Utils/Element";
+import { forceOutboundLinksToNewPage } from "@/scripts/Utils/PageUtils";
 
 type BlogProps = {
   variables: { relativePath: string };
@@ -27,6 +29,11 @@ export default function BlogPage(props: BlogProps) {
 
   const pageName = `${data.post.title} | Blog`;
 
+  React.useEffect(() => {
+    const div = getElement(`blogPost${data.post.title}`) as HTMLDivElement;
+    forceOutboundLinksToNewPage(div);
+  }, [data.post.title]);
+
   return (
     <Layout
       title={pageName}
@@ -40,7 +47,9 @@ export default function BlogPage(props: BlogProps) {
       ]}
     >
       {/*<code>{JSON.stringify(data, null, 2)}</code>*/}
-      <BlogPost data={data} />
+      <div id={`blogPost${data.post.title}`}>
+        <BlogPost data={data} />
+      </div>
     </Layout>
   );
 }
diff --git a/src/pages/blog/authors/[author].tsx b/src/pages/blog/authors/[author].tsx
index c9c9417..fda2c72 100644
--- a/src/pages/blog/authors/[author].tsx
+++ b/src/pages/blog/authors/[author].tsx
@@ -7,6 +7,8 @@ import { AuthorsQuery } from "../../../../tina/__generated__/types";
 import React from "react";
 import { createBreadCrumbSegment } from "@/components/Layout/layout";
 import BlogAuthor from "@/components/Blog/Author/Author";
+import { forceOutboundLinksToNewPage } from "@/scripts/Utils/PageUtils";
+import getElement from "@/scripts/Utils/Element";
 
 type BlogAuthorProps = {
   variables: { relativePath: string };
@@ -27,6 +29,11 @@ export default function BlogAuthorPage(props: BlogAuthorProps) {
 
   const pageName = `${data.authors.name} | Blog`;
 
+  React.useEffect(() => {
+    const div = getElement(`blogAuthor${data.authors.name}`) as HTMLDivElement;
+    forceOutboundLinksToNewPage(div);
+  }, [data.authors.name]);
+
   return (
     <Layout
       title={pageName}
@@ -44,7 +51,9 @@ export default function BlogAuthorPage(props: BlogAuthorProps) {
       ]}
     >
       {/*<code>{JSON.stringify(data, null, 2)}</code>*/}
-      <BlogAuthor data={data} />
+      <div id={`blogAuthor${data.authors.name}`}>
+        <BlogAuthor data={data} />
+      </div>
     </Layout>
   );
 }