remove link- from Link variants

Author: nemanjam

src/components/Footer.astro

@@ -48,7 +48,7 @@ const trimmedMessage = limitString(message, messageLength);
             rel="me noreferrer noopener"
             title="@nemanjam on Github"
             class="flex items-center gap-2 text-base xs:text-lg"
-            variant="link-nav"
+            variant="nav"
           >
             <Icon name="mdi:github" class="h-6 w-6 fill-current" />
             <span>Github</span>
@@ -61,7 +61,7 @@ const trimmedMessage = limitString(message, messageLength);
             rel="me noreferrer noopener"
             title="Nemanja on LinkedIn"
             class="flex items-center gap-2 text-base xs:text-lg"
-            variant="link-nav"
+            variant="nav"
           >
             <Icon name="mdi:linkedin" class="h-6 w-6 fill-current" />
             <span>LinkedIn</span>
@@ -72,7 +72,7 @@ const trimmedMessage = limitString(message, messageLength);
             href={ROUTES.API.FEED_RSS}
             title={`RSS feed for ${domain}`}
             class="flex items-center gap-2 text-base xs:text-lg"
-            variant="link-nav"
+            variant="nav"
           >
             <Icon name="mdi:rss" class="h-6 w-6 fill-current" />
             <span>RSS Feed</span>

src/components/HeaderLink.astro

@@ -10,6 +10,6 @@ export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {
 const { slot, isActive = false, class: className, ...props } = Astro.props as Props;
 ---
 
-<Link {...props} variant="link-nav" class={cn({ 'underline text-links': isActive }, className)}>
+<Link {...props} variant="nav" class={cn({ 'underline text-links': isActive }, className)}>
   <slot />
 </Link>

src/components/Link.astro

@@ -9,9 +9,9 @@ const linkVariants = cva('link-default', {
     variant: {
       link: 'link',
       'no-underline': 'link-no-underline',
-      'link-heading': 'link-heading',
-      'link-nav': 'link-nav',
-      'link-markdown': 'link-markdown',
+      heading: 'link-heading',
+      nav: 'link-nav',
+      markdown: 'link link-markdown',
     },
     disabled: { true: 'link-disabled' },
   },

src/components/PostCard.astro

@@ -103,7 +103,7 @@ const getTransitionNameFromElementId = setTransitionSlug({ pageSlug: slug });
         elementId: TRANSITION_ELEMENT_IDS.POST_CARD.TITLE,
       })}
     >
-      <Link href={`${ROUTES.BLOG}${slug}`} variant="link-heading">
+      <Link href={`${ROUTES.BLOG}${slug}`} variant="heading">
         {title}
         {draft && <sup class="text-sm text-red-500 ml-1">{DRAFT_TEXT}</sup>}
       </Link>

src/components/PostCardMore.astro

@@ -25,7 +25,7 @@ const { title, heroImage, heroAlt, description, draft } = data;
     class="max-h-40 object-cover rounded-t-box"
   />
   <h4 class="b-h4 break-words line-clamp-2 mt-3 mb-2">
-    <Link variant="link-heading" href={`${ROUTES.BLOG}${slug}`}>
+    <Link variant="heading" href={`${ROUTES.BLOG}${slug}`}>
       {title}
       {draft && <sup class="text-sm text-red-500 ml-1">{DRAFT_TEXT}</sup>}
     </Link>

src/components/PostCardSmall.astro

@@ -54,7 +54,7 @@ const getTransitionNameFromElementId = setTransitionSlug({ pageSlug: slug });
         elementId: TRANSITION_ELEMENT_IDS.POST_CARD.TITLE,
       })}
     >
-      <Link variant="link-heading" href={`${ROUTES.BLOG}${slug}`}>
+      <Link variant="heading" href={`${ROUTES.BLOG}${slug}`}>
         {draft && <sup class="text-sm text-red-500 mr-1">{DRAFT_TEXT}</sup>}
         {title}
       </Link>

src/components/ProjectCard.astro

@@ -34,7 +34,7 @@ const { lastAccessDate, isUpdatedDate } = getPublishedOrUpdatedDate({
   />
 
   <h4 class="b-h4 break-words line-clamp-2 mb-0">
-    <Link href={`${ROUTES.PROJECTS}${slug}`} variant="link-heading">
+    <Link href={`${ROUTES.PROJECTS}${slug}`} variant="heading">
       {title}
     </Link>
   </h4>

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

@@ -45,7 +45,7 @@ This is a Next.js server side rendered app with default ShadcnUI components. Alg
 
 The app requires zero maintenance, the only insert query to parse a new month is automated using a `node-cron` scheduled task. The app is packed as a Docker image, either in Github Actions or locally, and is available for both `linux/amd64` and `linux/arm64` platforms. It also has Winston logger and Plausible analytics.
 
-You can find more implementation details in the <Link href="https://github.com/nemanjam/hn-new-jobs/tree/main#implementation-details" variant="link-markdown" target="_blank" title="README.md file">README.md</Link> file on Github.
+You can find more implementation details in the <Link href="https://github.com/nemanjam/hn-new-jobs/tree/main#implementation-details" variant="markdown" target="_blank" title="README.md file">README.md</Link> file on Github.
 
 ## Lessons learned 
 
@@ -57,8 +57,8 @@ You can find more implementation details in the <Link href="https://github.com/n
 ## Links
 
 
-- **HackerNews:** <Link href="https://news.ycombinator.com/item?id=42373936" variant="link-markdown" target="_blank" title="HackerNews ShowHN thread" />
-- **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" />
+- **HackerNews:** <Link href="https://news.ycombinator.com/item?id=42373936" variant="markdown" target="_blank" title="HackerNews ShowHN thread" />
+- **Demo:** <Link href="https://hackernews-new-jobs.arm1.nemanjamitic.com" variant="markdown" target="_blank" title="HackerNews new jobs demo" />
+- **Repository:** <Link href="https://github.com/nemanjam/hn-new-jobs" variant="markdown" target="_blank" title="HackerNews new jobs repository" />
 
 

src/pages/design/buttons.mdx

@@ -59,8 +59,9 @@ export const links = {
   variant: [
     { variant: 'link' },
     { variant: 'no-underline' },
-    { variant: 'link-heading' },
-    { variant: 'link-nav' },
+    { variant: 'heading' },
+    { variant: 'nav' },
+    { variant: 'markdown' },
   ],
   disabled: [{ disabled: true }, { disabled: false }],
 };
@@ -74,7 +75,7 @@ export const links = {
     {values.map((props) => {
       const text = `${Object.values(props)[0]}`;
 
-      return <Link {...props}>{text}</Link>;
+      return <Link {...props} href="#">{text}</Link>;
     })}
 
   </div>