feat: open external links in a new tab

astro.config.mjs

@@ -1,4 +1,5 @@
 import { defineConfig } from 'astro/config';
+import { targetBlank } from './src/plugins/targetBlank';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
 import theme from 'shiki/themes/github-light.json';
@@ -25,6 +26,7 @@ export default defineConfig({
       // Enable word wrap to prevent horizontal scrolling
       wrap: false,
     },
+    rehypePlugins: [[targetBlank, { domain: 'dan.salvagni.io' }]],
   },
   site: 'https://dan.salvagni.io',
   integrations: [mdx(), sitemap(), alpinejs()],

src/plugins/targetBlank.ts

@@ -0,0 +1,20 @@
+import type { RehypePlugin } from '@astrojs/markdown-remark';
+import { visit } from 'unist-util-visit';
+import type { Element } from 'hast';
+
+export const targetBlank: RehypePlugin = ({ domain = '' } = {}) => {
+  return (tree) => {
+    visit(tree, 'element', (e: Element) => {
+      if (
+        e.tagName === 'a' &&
+        e.properties?.href &&
+        isExternal(e.properties.href.toString(), domain)
+      ) {
+        e.properties!['target'] = '_blank';
+      }
+    });
+  };
+};
+
+const isExternal = (url: string, domain: string) =>
+  url.startsWith('http') && !url.includes(domain);