Replace useExternalLinkAsNewTab() with remark-external-links (#543)

https://github.com/remarkjs/remark-external-links

package.json

@@ -42,6 +42,7 @@
     "postcss-loader": "^6.1.0",
     "postcss-nesting": "^8.0.1",
     "remark-autolink-headings": "^6.0.1",
+    "remark-external-links": "^8.0.0",
     "remark-footnotes": "^3.0.0",
     "remark-gfm": "^1.0.0",
     "remark-highlight.js": "^6.0.0",

src/pages/BlogPost.jsx

@@ -1,6 +1,6 @@
 import { useRef, useEffect } from "react";
 import { Link } from "../Link";
-import { Breadcrumb, Time, useTitle, useExternalLinkAsNewTab } from "../utils";
+import { Breadcrumb, Time, useTitle } from "../utils";
 import s from "./BlogPost.module.css";
 
 /**
@@ -36,7 +36,6 @@ const generateTOC = (content, toc) => {
 // eslint-disable-next-line max-lines-per-function
 export const BlogPost = ({ title, published, lastUpdated, tags, content, prev, next }) => {
   useTitle(title, "Blog");
-  useExternalLinkAsNewTab();
 
   /** @type {React.MutableRefObject<HTMLElement | null>} */
   const contentElement = useRef(null);

webpack.config.js

@@ -8,6 +8,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 // @ts-expect-error -- TS7016
 const remarkAutolinkHeadings = require("remark-autolink-headings");
+const remarkExternalLinks = require("remark-external-links");
 const remarkFootnotes = require("remark-footnotes");
 const remarkGFM = require("remark-gfm");
 // @ts-expect-error -- TS7016
@@ -65,6 +66,7 @@ module.exports = {
                   remarkGFM,
                   remarkSlug,
                   [remarkAutolinkHeadings, { behavior: "append" }],
+                  remarkExternalLinks,
                   remarkFootnotes,
                   remarkHighlight,
                   remarkHTML,