Improve visual hint of external links

Die-KoMa · Mar 1, 2024 · 345d75d · 345d75d
1 parent 562ce3e
commit 345d75d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -20,7 +20,7 @@ function rehypeExternalLinksPlugin() {
     properties: (element) => ({
       className: twMerge(
         element.properties.className?.toString(),
-        'after:ml-1 after:mask-externalLink after:[mask-position:center] after:[mask-repeat:no-repeat] after:size-[1em] after:align-text-top after:inline-block after:bg-current',
+        'after:external-link after:ml-1',
       ),
     }),
   })

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -2,7 +2,7 @@
 
 import plugin from 'tailwindcss/plugin'
 
-const tailwindPlugin = plugin(({ theme, matchUtilities }) => {
+const tailwindPlugin = plugin(({ theme, matchUtilities, addComponents }) => {
   matchUtilities(
     {
       mask: (value) => ({
@@ -16,6 +16,21 @@ const tailwindPlugin = plugin(({ theme, matchUtilities }) => {
       },
     },
   )
+  addComponents({
+    '.external-link': {
+      '--size': '1em',
+      mask: theme('backgroundImage.externalLink'),
+      maskSize: 'contain',
+      maskRepeat: 'no-repeat',
+      maskPosition: 'center',
+      backgroundColor: 'currentcolor',
+      height: 'var(--size)',
+      width: 'var(--size)',
+      display: 'inline-block',
+      verticalAlign: 'baseline',
+      marginBottom: 'calc(-.15 * var(--size))',
+    },
+  })
 })
 
 export default {