All outbound links in blog posts open in new tab

Fixes #88
UnsignedArduino · Mar 20, 2024 · b55baa3 · b55baa3
1 parent 4a68127
commit b55baa3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git 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
@@ -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>
   );
 }