open external links in new tab in mdx and md, with plugin rehype-external-links

Author: nemanjam

astro.config.ts

@@ -6,6 +6,7 @@ import icon from 'astro-icon';
 import { defineConfig } from 'astro/config';
 
 // must use relative imports, and their entire import subtrees
+import { rehypeExternalLinks } from './plugins/rehype-external-links';
 import { remarkReadingTime } from './plugins/remark-reading-time.mjs';
 //
 // all relative imports in subtree
@@ -15,7 +16,9 @@ import { expressiveCodeIntegration } from './src/libs/integrations/expressive-co
 import { sitemapIntegration } from './src/libs/integrations/sitemap';
 
 const { SITE_URL } = PROCESS_ENV;
+
 const remarkPlugins = [remarkReadingTime];
+const rehypePlugins = [rehypeExternalLinks];
 
 export default defineConfig({
   site: SITE_URL,
@@ -29,15 +32,15 @@ export default defineConfig({
     expressiveCodeIntegration(),
     sitemapIntegration(),
     react(),
-    mdx(),
+    mdx({ rehypePlugins }),
     // applyBaseStyles: false prevents double loading of tailwind
     tailwind({ applyBaseStyles: false }),
     icon({ iconDir: 'src/assets/icons' }),
     partytown({
       config: { forward: ['dataLayer.push'] },
     }),
   ],
-  markdown: { remarkPlugins },
+  markdown: { remarkPlugins, rehypePlugins },
   vite: {
     build: {
       sourcemap: false,

package.json

@@ -58,6 +58,7 @@
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
     "reading-time": "^1.5.0",
+    "rehype-external-links": "^3.0.0",
     "sharp": "0.34.1",
     "tailwind-clip-path": "^1.0.0",
     "tailwind-merge": "^2.6.0",

plugins/rehype-external-links.ts

@@ -0,0 +1,9 @@
+import rehypeExternalLinksPlugin from 'rehype-external-links';
+
+import type { Plugin } from 'unified';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const rehypeExternalLinks: [Plugin<any[], any>, any] = [
+  rehypeExternalLinksPlugin,
+  { target: '_blank', rel: ['noopener', 'noreferrer'] },
+];

yarn.lock

@@ -3827,6 +3827,11 @@ iron-webcrypto@^1.2.1:
   resolved "https://registry.yarnpkg.com/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz#aa60ff2aa10550630f4c0b11fd2442becdb35a6f"
   integrity sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==
 
+is-absolute-url@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-4.0.1.tgz#16e4d487d4fded05cfe0685e53ec86804a5e94dc"
+  integrity sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==
+
 is-alphabetical@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b"
@@ -5748,6 +5753,18 @@ rehype-expressive-code@^0.41.2:
   dependencies:
     expressive-code "^0.41.2"
 
+rehype-external-links@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-external-links/-/rehype-external-links-3.0.0.tgz#2b28b5cda1932f83f045b6f80a3e1b15f168c6f6"
+  integrity sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    "@ungap/structured-clone" "^1.0.0"
+    hast-util-is-element "^3.0.0"
+    is-absolute-url "^4.0.0"
+    space-separated-tokens "^2.0.0"
+    unist-util-visit "^5.0.0"
+
 rehype-parse@^9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-9.0.1.tgz#9993bda129acc64c417a9d3654a7be38b2a94c20"