link-markdown in new tab

Author: nemanjam

docs/working-notes/todo4.md

@@ -51,6 +51,8 @@ semantic release, conventional commits
 
 // tailwind 4
 git checkout feat/tailwind4-v2
+----------
+    astro markdown link in new tab
 ```
 
 

src/components/Link.astro

@@ -11,6 +11,7 @@ const linkVariants = cva('link-default', {
       'no-underline': 'link-no-underline',
       'link-heading': 'link-heading',
       'link-nav': 'link-nav',
+      'link-markdown': 'link-markdown',
     },
     disabled: { true: 'link-disabled' },
   },
@@ -27,5 +28,7 @@ const Element = disabled ? 'span' : 'a';
 ---
 
 <Element class={linkVariants({ variant, disabled, className })} {...props}>
-  <slot />
+  <slot>
+    {props.href}
+  </slot>
 </Element>

src/content/project/2024/12-09-hackernews-new-jobs/index.mdx

@@ -7,6 +7,7 @@ publishDate: 2024-12-09
 ---
 
 import { Image } from 'astro:assets';
+import Link from '../../../../components/Link.astro';
 import { IMAGE_SIZES } from '../../../../constants/image';
 import HackerNewsNewJobsImage from '../../../../content/project/2024/12-09-hackernews-new-jobs/_images/hackernews-new-jobs.png';
 
@@ -26,6 +27,6 @@ Amet tempor ut incididunt in fugiat nisi aute pariatur adipisicing ipsum eiusmod
 
 ## Links
 
-- Demo: https://hackernews-new-jobs.arm1.nemanjamitic.com
-- Repository: https://github.com/nemanjam/hn-new-jobs
+- Demo: <Link href="https://hackernews-new-jobs.arm1.nemanjamitic.com" variant="link-markdown" target="_blank" title="HackerNews new jobs demo" />
+- Repository: <Link href="https://github.com/nemanjam/hn-new-jobs" variant="link-markdown" target="_blank" title="HackerNews new jobs repository" />
 

src/styles/components/link.css

@@ -4,6 +4,10 @@
     @apply text-links no-underline;
   }
 
+  .link-markdown {
+    @apply text-headings underline;
+  }
+
   .link {
     @apply hover:text-links-hover hover:underline;
     @apply focus:text-links-hover focus:underline;