fix: external links

astro.config.ts

@@ -10,6 +10,7 @@ import {
 } from '@shikijs/transformers'
 import { defineConfig } from 'astro/config'
 import rehypeKatex from 'rehype-katex'
+import rehypeExternalLinks from 'rehype-external-links'
 import rehypePrettyCode from 'rehype-pretty-code'
 import remarkEmoji from 'remark-emoji'
 import remarkMath from 'remark-math'
@@ -33,6 +34,13 @@ export default defineConfig({
   markdown: {
     syntaxHighlight: false,
     rehypePlugins: [
+      [
+        rehypeExternalLinks,
+        {
+          target: '_blank',
+          rel: ['nofollow', 'noreferrer', 'noopener'],
+        },
+      ],
       rehypeHeadingIds,
       rehypeKatex,
       // @ts-expect-error

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "astro-erudite",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "astro-erudite",
-      "version": "1.1.6",
+      "version": "1.1.7",
       "dependencies": {
         "@astrojs/check": "^0.7.0",
         "@astrojs/markdown-remark": "^5.2.0",
@@ -35,6 +35,7 @@
         "lucide-react": "^0.441.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "rehype-external-links": "^3.0.0",
         "rehype-katex": "^7.0.0",
         "rehype-pretty-code": "^0.14.0",
         "remark-emoji": "^5.0.1",
@@ -5918,6 +5919,17 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/is-absolute-url": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-4.0.1.tgz",
+      "integrity": "sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -8900,6 +8912,23 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-external-links": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-external-links/-/rehype-external-links-3.0.0.tgz",
+      "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"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rehype-katex": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-erudite",
   "type": "module",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -39,6 +39,7 @@
     "lucide-react": "^0.441.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "rehype-external-links": "^3.0.0",
     "rehype-katex": "^7.0.0",
     "rehype-pretty-code": "^0.14.0",
     "remark-emoji": "^5.0.1",

src/pages/tags/[...slug].astro

@@ -46,7 +46,7 @@ export async function getStaticPaths() {
     <div class="flex flex-wrap items-center gap-2">
       <h1 class="text-3xl font-semibold">Posts tagged with</h1>
       <span
-        class="flex items-center gap-x-1 rounded-full bg-secondary px-4 py-2 text-2xl font-bold"
+        class="flex items-center gap-x-1 rounded-full bg-secondary px-4 py-2 text-2xl font-semibold"
       >
         <Icon name="lucide:hash" class="size-6 -translate-x-0.5" />{tag}
       </span>

src/styles/global.css

@@ -83,7 +83,7 @@
 
 @layer components {
   article {
-    @apply prose-headings:scroll-mt-20 prose-headings:break-words prose-p:break-words prose-a:!break-words prose-a:!decoration-muted-foreground prose-a:underline-offset-[3px] prose-a:transition-colors hover:prose-a:!decoration-foreground prose-pre:!px-0 prose-img:mx-auto;
+    @apply prose-headings:scroll-mt-20 prose-headings:break-words first:prose-headings:mt-0 prose-p:break-words prose-a:!break-words prose-a:!decoration-muted-foreground prose-a:underline-offset-[3px] prose-a:transition-colors hover:prose-a:!decoration-foreground prose-pre:!px-0 prose-img:mx-auto;
 
     .katex-display {
       @apply overflow-x-auto overflow-y-hidden py-4;