add LinkWithLabel component

nemanjam · nemanjam · commit 3619c4fe15fe · 2025-03-15T09:22:19.000+01:00
diff --git a/src/components/Link.astro b/src/components/Link.astro
@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import type { HTMLAttributes } from 'astro/types';
 import type { VariantProps } from 'class-variance-authority';
 
-const linkVariants = cva('link-default', {
+const linkVariants = cva('link-default truncate', {
   variants: {
     variant: {
       link: 'link',
diff --git a/src/components/LinkWithLabel.astro b/src/components/LinkWithLabel.astro
@@ -0,0 +1,21 @@
+---
+import Link from '@/components/Link.astro';
+import { cn } from '@/utils/styles';
+
+import type { Props as LinkProps } from '@/components/Link.astro';
+
+export interface Props extends LinkProps {
+  label: string;
+}
+
+const { class: className, label, variant = 'markdown', target = '_blank', ...props } = Astro.props;
+---
+
+<p class={cn('my-2 flex flex-col xs:flex-row xs:gap-1', className)}>
+  <strong>{label}:</strong>
+  <Link {...props} {variant} {target}>
+    <slot>
+      {props.href}
+    </slot>
+  </Link>
+</p>
diff --git a/src/content/project/2019/09-29-redux-ecommerce/index.mdx b/src/content/project/2019/09-29-redux-ecommerce/index.mdx
@@ -8,6 +8,7 @@ publishDate: 2019-09-29
 
 import { Image } from 'astro:assets';
 import Link from '../../../../components/Link.astro';
+import LinkWithLabel from '../../../../components/LinkWithLabel.astro';
 import { IMAGE_SIZES } from '../../../../constants/image';
 import ReduxEcommerceImage from '../../../../content/project/2019/09-29-redux-ecommerce/_images/redux-ecommerce.png';
 
@@ -45,7 +46,8 @@ For more implementation details see the <Link href="https://github.com/nemanjam/
 
 ## Links
 
-- **Demo:** <Link href="https://nemanjam.github.io/redux-ecommerce" variant="markdown" target="_blank" title="Redux ecommerce demo" />
-- **Repository:** <Link href="https://github.com/nemanjam/redux-ecommerce" variant="markdown" target="_blank" title="Redux ecommerce repository" />
+
+- <LinkWithLabel label="Demo" href="https://nemanjam.github.io/redux-ecommerce" title="Redux ecommerce demo" />
+- <LinkWithLabel label="Repository" href="https://github.com/nemanjam/redux-ecommerce" title="Redux ecommerce repository" />
 
 
diff --git a/src/content/project/2019/10-23-rn-chat/index.mdx b/src/content/project/2019/10-23-rn-chat/index.mdx
@@ -8,6 +8,7 @@ publishDate: 2019-10-23
 
 import { Image } from 'astro:assets';
 import Link from '../../../../components/Link.astro';
+import LinkWithLabel from '../../../../components/LinkWithLabel.astro';
 import { IMAGE_SIZES } from '../../../../constants/image';
 import RnChatImage from '../../../../content/project/2019/10-23-rn-chat/_images/rn-chat.png';
 
@@ -49,6 +50,6 @@ You can find more implementation details in the <Link href="https://github.com/n
 
 ## Links
 
-- **Repository:** <Link href="https://github.com/nemanjam/rn-chat" variant="markdown" target="_blank" title="React Native chat app" />
+- <LinkWithLabel label="Repository" href="https://github.com/nemanjam/rn-chat" title="React Native chat repository" />
 
 
diff --git a/src/content/project/2020/02-16-audio-twitter/index.mdx b/src/content/project/2020/02-16-audio-twitter/index.mdx
@@ -8,6 +8,7 @@ publishDate: 2020-02-16
 
 import { Image } from 'astro:assets';
 import Link from '../../../../components/Link.astro';
+import LinkWithLabel from '../../../../components/LinkWithLabel.astro';
 import { IMAGE_SIZES } from '../../../../constants/image';
 import AudioTwitterImage from '../../../../content/project/2020/02-16-audio-twitter/_images/audio-twitter.png';
 
@@ -49,6 +50,6 @@ For more implementation details check the <Link href="https://github.com/nemanja
 
 ## Links
 
-- **Repository:** <Link href="https://github.com/nemanjam/audio-twitter" variant="markdown" target="_blank" title="Audio Twitter repository" />
+- <LinkWithLabel label="Repository" href="https://github.com/nemanjam/audio-twitter" title="Audio Twitter repository" />
 
 
diff --git a/src/content/project/2020/04-12-mern-boilerplate/index.mdx b/src/content/project/2020/04-12-mern-boilerplate/index.mdx
@@ -8,6 +8,7 @@ publishDate: 2020-04-12
 
 import { Image } from 'astro:assets';
 import Link from '../../../../components/Link.astro';
+import LinkWithLabel from '../../../../components/LinkWithLabel.astro';
 import { IMAGE_SIZES } from '../../../../constants/image';
 import MernBoilerplateImage from '../../../../content/project/2020/04-12-mern-boilerplate/_images/mern-boilerplate.png';
 
@@ -47,7 +48,5 @@ You can find more implementation details in the <Link href="https://github.com/n
 
 ## Links
 
-- **Demo:** <Link href="https://mern-boilerplate.arm1.nemanjamitic.com" variant="markdown" target="_blank" title="MERN boilerplate demo" />
-- **Repository:** <Link href="https://github.com/nemanjam/mern-boilerplate" variant="markdown" target="_blank" title="MERN boilerplate repository" />
-
-
+- <LinkWithLabel label="Demo" href="https://mern-boilerplate.arm1.nemanjamitic.com" title="MERN boilerplate demo" />
+- <LinkWithLabel label="Repository" href="https://github.com/nemanjam/mern-boilerplate" title="MERN boilerplate repository" />
diff --git a/src/content/project/2022/07-17-nextjs-prisma-boilerplate/index.mdx b/src/content/project/2022/07-17-nextjs-prisma-boilerplate/index.mdx
@@ -8,6 +8,7 @@ publishDate: 2022-07-17
 
 import { Image } from 'astro:assets';
 import Link from '../../../../components/Link.astro';
+import LinkWithLabel from '../../../../components/LinkWithLabel.astro';
 import { IMAGE_SIZES } from '../../../../constants/image';
 import NextjsPrismaBoilerplateImage from '../../../../content/project/2022/07-17-nextjs-prisma-boilerplate/_images/nextjs-prisma-boilerplate.png';
 
@@ -55,7 +56,6 @@ You can find more implementation details in the <Link href="https://github.com/n
 
 ## Links
 
-- **Demo:** <Link href="https://nextjs-prisma-boilerplate.arm1.nemanjamitic.com" variant="markdown" target="_blank" title="Nextjs Prisma boilerplate demo" />
-- **Repository:** <Link href="https://github.com/nemanjam/nextjs-prisma-boilerplate" variant="markdown" target="_blank" title="Nextjs Prisma boilerplate repository" />
-
 
+- <LinkWithLabel label="Demo" href="https://nextjs-prisma-boilerplate.arm1.nemanjamitic.com" title="Nextjs Prisma boilerplate demo" />
+- <LinkWithLabel label="Repository" href="https://github.com/nemanjam/nextjs-prisma-boilerplate" title="Nextjs Prisma boilerplate repository" />
diff --git a/src/content/project/2024/05-06-reddit-unread-comments/index.mdx b/src/content/project/2024/05-06-reddit-unread-comments/index.mdx
@@ -8,6 +8,7 @@ publishDate: 2024-05-06
 
 import { Image } from 'astro:assets';
 import Link from '../../../../components/Link.astro';
+import LinkWithLabel from '../../../../components/LinkWithLabel.astro';
 import { IMAGE_SIZES } from '../../../../constants/image';
 import RedditUnreadCommentsImage from '../../../../content/project/2024/05-06-reddit-unread-comments/_images/reddit-unread-comments.png';
 
@@ -55,7 +56,8 @@ You can find more implementation details in the <Link href="https://github.com/n
 
 ## Links
 
-- **Demo video:** <Link href="https://www.youtube.com/watch?v=dHw0pM3ZzqY" variant="markdown" target="_blank" title="Extension demo video" />
-- **Repository:** <Link href="https://github.com/nemanjam/reddit-unread-comments" variant="markdown" target="_blank" title="Extension repository" />
+
+- <LinkWithLabel label="Demo video" href="https://www.youtube.com/watch?v=dHw0pM3ZzqY" title="Extension demo video" />
+- <LinkWithLabel label="Repository" href="https://github.com/nemanjam/reddit-unread-comments" title="Extension repository" />
 
 
diff --git a/src/content/project/2024/09-30-developer-blog/index.mdx b/src/content/project/2024/09-30-developer-blog/index.mdx
@@ -8,6 +8,7 @@ publishDate: 2024-09-30
 
 import { Image } from 'astro:assets';
 import Link from '../../../../components/Link.astro';
+import LinkWithLabel from '../../../../components/LinkWithLabel.astro';
 import { IMAGE_SIZES } from '../../../../constants/image';
 import DeveloperBlogImage from '../../../../content/project/2024/09-30-developer-blog/_images/developer-blog.png';
 
@@ -54,7 +55,8 @@ There is a lot more to be said, such as embeds for code and YouTube, RSS feeds,
 
 ## Links
 
-- **Demo:** <Link href="https://nemanjamitic.com" variant="markdown" target="_blank" title="Developer blog demo" />
-- **Repository:** <Link href="https://github.com/nemanjam/nemanjam.github.io" variant="markdown" target="_blank" title="Developer blog repository" />
+- <LinkWithLabel label="Demo" href="https://nemanjamitic.com" title="Developer blog demo" />
+- <LinkWithLabel label="Repository" href="https://github.com/nemanjam/nemanjam.github.io" title="Developer blog repository" />
+
 
 
diff --git a/src/content/project/2024/12-09-hackernews-new-jobs/index.mdx b/src/content/project/2024/12-09-hackernews-new-jobs/index.mdx
@@ -8,6 +8,7 @@ publishDate: 2024-12-09
 
 import { Image } from 'astro:assets';
 import Link from '../../../../components/Link.astro';
+import LinkWithLabel from '../../../../components/LinkWithLabel.astro';
 import { IMAGE_SIZES } from '../../../../constants/image';
 import HackerNewsNewJobsImage from '../../../../content/project/2024/12-09-hackernews-new-jobs/_images/hackernews-new-jobs.png';
 
@@ -56,9 +57,9 @@ You can find more implementation details in the <Link href="https://github.com/n
 
 ## Links
 
+- <LinkWithLabel label="HackerNews" href="https://news.ycombinator.com/item?id=42373936" title="HackerNews ShowHN thread" />
+- <LinkWithLabel label="Demo" href="https://hackernews-new-jobs.arm1.nemanjamitic.com" title="HackerNews new jobs demo" />
+- <LinkWithLabel label="Repository" href="https://github.com/nemanjam/hn-new-jobs" 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" />
 
 
diff --git a/src/pages/about.mdx b/src/pages/about.mdx
@@ -8,7 +8,7 @@ import { Image } from 'astro:assets';
 
 import { CONFIG_CLIENT } from '../config/client';
 import { IMAGE_SIZES, TW_SCREENS } from '../constants/image';
-import Link from '../components/Link.astro';
+import LinkWithLabel from '../components/LinkWithLabel.astro';
 import Electronics1Image from '../assets/images/all-images/electronics1.jpg';
 
 
@@ -30,20 +30,9 @@ My hobbies are fishing, lure building, bicycling, playing guitar, composing in F
 
 If you want to contact me about coding, or if you need a companion for fishing or jamming, use the links below.
 
-<p class="my-2 flex gap-1 flex-col xs:flex-row">
-  <label class="font-bold">GitHub:</label>
-  <Link href={AUTHOR_GITHUB} target="_blank">{AUTHOR_GITHUB}</Link>
-</p>
-<p class="my-2 flex gap-1 flex-col xs:flex-row">
-  <label class="font-bold">LinkedIn:</label>
-  <Link href={AUTHOR_LINKEDIN} target="_blank">{AUTHOR_LINKEDIN}</Link>
-</p>
-<p class="my-2 flex gap-1 flex-col xs:flex-row">
-  <label class="font-bold">Twitter:</label>
-  <Link href={AUTHOR_TWITTER} target="_blank">{AUTHOR_TWITTER}</Link>
-</p>
-<p class="my-2 flex gap-1 flex-col xs:flex-row">
-  <label class="font-bold">YouTube:</label>
-  <Link href={AUTHOR_YOUTUBE} target="_blank">{AUTHOR_YOUTUBE}</Link>
-</p>
+<LinkWithLabel label="GitHub" href={AUTHOR_GITHUB} title="Author GitHub profile" variant="link" />
+<LinkWithLabel label="LinkedIn" href={AUTHOR_LINKEDIN} title="Author LinkedIn profile" variant="link" />
+<LinkWithLabel label="Twitter" href={AUTHOR_TWITTER} title="Author Twitter profile" variant="link" />
+<LinkWithLabel label="YouTube" href={AUTHOR_YOUTUBE} title="Author YouTube profile" variant="link" />
+
 
