Open guide/challenge links in new tab (#324)

Author: Pabl0cks

packages/nextjs/app/challenge/[challengeId]/page.tsx

@@ -1,3 +1,5 @@
+import { createElement } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 import { notFound } from "next/navigation";
 import { ChallengeHeader } from "./_components/ChallengeHeader";
 import { ConnectAndRegisterBanner } from "./_components/ConnectAndRegisterBanner";
@@ -76,6 +78,10 @@ export default async function ChallengePage(props: { params: Promise<{ challenge
           <div className="prose dark:prose-invert max-w-fit break-words lg:max-w-[850px]">
             <MDXRemote
               source={restMdx}
+              components={{
+                a: (props: ComponentPropsWithoutRef<"a">) =>
+                  createElement("a", { ...props, target: "_blank", rel: "noopener" }),
+              }}
               options={{
                 mdxOptions: {
                   rehypePlugins: [rehypeRaw],

packages/nextjs/services/guides.ts

@@ -1,4 +1,5 @@
-import { ReactElement } from "react";
+import { ReactElement, createElement } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 import fs from "fs";
 import { compileMDX } from "next-mdx-remote/rsc";
 import path from "path";
@@ -33,7 +34,13 @@ export async function getGuideBySlug(slug: string): Promise<Guide | null> {
     const fileContents = fs.readFileSync(fullPath, "utf8");
     const { frontmatter, content } = await compileMDX<GuideMetadata>({
       source: fileContents,
-      options: { parseFrontmatter: true },
+      options: {
+        parseFrontmatter: true,
+      },
+      components: {
+        a: (props: ComponentPropsWithoutRef<"a">) =>
+          createElement("a", { ...props, target: "_blank", rel: "noopener" }),
+      },
     });
 
     return {