💄 (link) underline external links.

src/hooks/useLinks.hook.ts

@@ -38,6 +38,22 @@ export const useLinks = (className: string, sha?: string) => {
     removeListeners()
     const elements = document.querySelectorAll(selector)
 
+    elements.forEach((element) => {
+      const href = element.getAttribute('href')
+
+      if (!href) {
+        return
+      }
+
+      const isExternalLink =
+        LINKS.some((link) => href.startsWith(link)) &&
+        !href.startsWith(location.origin)
+
+      if (isExternalLink) {
+        element.classList.add('external-link')
+      }
+    })
+
     elements.forEach((element) => {
       element.addEventListener('click', linkNote)
     })

src/styles/app.scss

@@ -39,3 +39,7 @@ body {
   height: 100vh;
   display: flex;
 }
+
+a.external-link {
+  text-decoration: underline;
+}