content: new post

README.md

@@ -11,5 +11,5 @@ npm run devhost
 <br /><br />
 
 <p align="center">
-  <img height="100" src="public/duck.png">
+  <img height="100" src="public/img/duck.png">
 </p>

src/content/blog/astro-plugin-open-external-links-in-new-tab.md

@@ -0,0 +1,72 @@
+---
+issue: 12
+
+author: Daniele Salvagni
+title: 'An Astro plugin to open external links in a new tab'
+pubDate: 'Jul 11, 2024'
+emoji: 🛠️
+
+description: >
+  Creating a simple Rehype plugin to automatically add target="_blank" to all
+  external links in Astro.
+---
+
+By default, when writing markdown content in [Astro](https://astro.build/), all
+links are rendered to `<a>` tags that open in the same tab. This is not ideal
+for external links, as you might want to keep the user on your site.
+
+The solution is pretty simple, and it does involve writing a simple rehype
+plugin.
+
+## Writing the Rehype plugin
+
+To put it simply, a [rehype](https://github.com/rehypejs/rehype) plugin is just
+a function that takes the AST (Abstract Syntax Tree) of the HTML as input and
+modifies it in some way.
+
+The following [visits](https://github.com/syntax-tree/unist-util-visit) all the
+elements in the tree while adding `target="_blank"` to external links:
+
+```ts
+// src/plugins/targetBlank.ts
+
+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);
+```
+
+### Enabling the plugin
+
+To enable the plugin, update `astro.config.ts` with the following:
+
+```ts
+// astro.config.ts
+
+import { targetBlank } from './src/plugins/targetBlank';
+
+export default defineConfig({
+  // ...
+  markdown: {
+    rehypePlugins: [[targetBlank, { domain: 'yourdomain.com' }]],
+  },
+});
+```
+
+And that's it! Now all external links will open in a new tab.

src/content/blog/aws-sam-and-typescript-building-functions-and-layers.md

@@ -1,6 +1,4 @@
 ---
-# layout: '../../layouts/BlogPost.astro'
-# collection: blog
 issue: 7
 
 author: Daniele Salvagni

src/content/blog/aws-sam-rest-api-from-swagger-file.md

@@ -1,6 +1,4 @@
 ---
-# layout: '../../layouts/BlogPost.astro'
-# collection: blog
 issue: 8
 
 author: Daniele Salvagni

src/content/blog/building-custom-effects-inside-a-1590a-enclosure.md

@@ -1,6 +1,4 @@
 ---
-# layout: '../../layouts/BlogPost.astro'
-# collection: blog
 issue: 10
 
 author: Daniele Salvagni

src/content/blog/embedded-telegram-bot-for-wake-on-lan-pc.md

@@ -1,6 +1,4 @@
 ---
-# layout: '../../layouts/BlogPost.astro'
-# collection: blog
 issue: 6
 
 author: Daniele Salvagni

src/content/blog/fixing-zsh-slowdown-caused-by-nvm.md

@@ -1,6 +1,4 @@
 ---
-# layout: '../../layouts/BlogPost.astro'
-# collection: blog
 issue: 9
 
 author: Daniele Salvagni

src/content/blog/hosting-comments-on-github-for-static-websites.md

@@ -1,6 +1,4 @@
 ---
-# layout: '../../layouts/BlogPost.astro'
-# collection: blog
 issue: 3
 
 author: Daniele Salvagni

src/content/blog/paginators-in-the-aws-sdk-for-javascript-v3.md

@@ -1,6 +1,4 @@
 ---
-# layout: '../../layouts/BlogPost.astro'
-# collection: blog
 issue: 11
 
 author: Daniele Salvagni

src/content/blog/the-planck-an-ortholinear-keyboard.md

@@ -1,6 +1,4 @@
 ---
-# layout: '../../layouts/BlogPost.astro'
-# collection: blog
 issue: 5
 
 author: Daniele Salvagni

src/content/blog/unfair-gamers-com-a-community-10-years-later.md

@@ -1,6 +1,4 @@
 ---
-# layout: '../../layouts/BlogPost.astro'
-# collection: blog
 issue: 4
 
 author: Daniele Salvagni