feat: external relative link (#569)

* feat: external relative link

* chore: remove p tag outside link

* tweak: link ext

* tweak: Link

Author: shhdgit

src/components/Layout/MDXContent.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Link } from "gatsby";
 
 import { MDXProvider } from "@mdx-js/react";
 import { MDXRenderer } from "gatsby-plugin-mdx";
@@ -17,10 +16,7 @@ import { PathConfig, FrontMatter, BuildType } from "shared/interface";
 import { useTotalContributors } from "components/Contributors";
 import replaceInternalHref from "shared/utils/anchor";
 import { Pre } from "components/MDXComponents/Pre";
-import {
-  CustomContent,
-  useCustomContent,
-} from "components/MDXComponents/CustomContent";
+import { useCustomContent } from "components/MDXComponents/CustomContent";
 import { getPageType } from "shared/utils";
 
 export default function MDXContent(props: {
@@ -87,7 +83,6 @@ export default function MDXContent(props: {
         <MDXProvider
           components={{
             ...MDXComponents,
-            Link,
             pre: Pre,
             CustomContent: CustomContentWithPageType,
           }}

src/components/MDXComponents/Link.tsx

@@ -0,0 +1,62 @@
+import { Link } from "gatsby";
+
+export const TargetLink = (props: { to: string; [key: string]: any }) => {
+  const { to } = props;
+  const { pathWithHash, query } = parsePathWithQuery(to);
+  const newProps = { ...props };
+  const isTargetBlank = query["target"] === "_blank";
+
+  if (isTargetBlank) {
+    newProps.target = "_blank";
+    newProps.to = pathWithHash;
+    newProps.rel = "noopener noreferrer";
+  }
+
+  return (
+    <Link
+      {...newProps}
+      onClick={(e) => {
+        if (isTargetBlank) {
+          e.preventDefault();
+          window.open((e.target as HTMLAnchorElement).href, "_blank");
+        }
+      }}
+    />
+  );
+};
+
+const parsePathWithQuery = (path: string) => {
+  const result: { query: { [k: string]: string }; pathWithHash: string } = {
+    query: {},
+    pathWithHash: "",
+  };
+
+  const [pathPart, hashPart] = path.split("#");
+
+  let actualPath = pathPart;
+  let hash = "";
+  let queryPart = "";
+
+  if (hashPart && hashPart.includes("?")) {
+    const [actualHash, query] = hashPart.split("?");
+    hash = actualHash;
+    queryPart = query;
+  } else {
+    hash = hashPart || "";
+
+    const isQueryInPath = pathPart.includes("?");
+    actualPath = isQueryInPath ? pathPart.split("?")[0] : pathPart;
+    queryPart = isQueryInPath ? pathPart.split("?")[1] : "";
+  }
+
+  if (queryPart) {
+    const params = new URLSearchParams(queryPart);
+    for (const [key, value] of params.entries()) {
+      result.query[key] = value;
+    }
+  }
+
+  result.pathWithHash = actualPath + (hash ? `#${hash}` : "");
+
+  return result;
+};

src/components/MDXComponents/index.tsx

@@ -32,3 +32,5 @@ export {
   DevToolGroup,
   DevToolCard,
 } from "components/MDXComponents/developer";
+
+export { TargetLink as Link } from "./Link";