refactor: major nitpicks

- refactor: change default import alias
- feat: add icons to breadcrumbs
- fix: add `site_name` og tag
- feat: hover on feedback for `Link`s and `TableofContentsHeadings`
- fix: add `external` to `SocialIcons`

src/components/AuthorCard.astro

@@ -1,8 +1,8 @@
 ---
+import Link from '@/components/Link.astro'
 import AvatarComponent from '@/components/ui/avatar'
+import type { Link as SocialLink } from '@/consts'
 import { cn } from '@/lib/utils'
-import Link from '@components/Link.astro'
-import type { Link as SocialLink } from '@consts'
 import type { CollectionEntry } from 'astro:content'
 import SocialIcons from './SocialIcons.astro'
 

src/components/BlogCard.astro

@@ -2,7 +2,7 @@
 import AvatarComponent from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
-import { formatDate, parseAuthors, readingTime } from '@lib/utils'
+import { formatDate, parseAuthors, readingTime } from '@/lib/utils'
 import { Image } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
 import Link from './Link.astro'
@@ -29,12 +29,12 @@ const authors = await parseAuthors(entry.data.authors ?? [])
   >
     {
       entry.data.image && (
-        <div class="sm:flex-shrink-0">
+        <div class="max-w-[200px] sm:flex-shrink-0">
           <Image
             src={entry.data.image}
             alt={entry.data.title}
-            width={200}
-            height={200}
+            width={1200}
+            height={630}
             class="object-cover"
           />
         </div>

src/components/Breadcrumbs.astro

@@ -36,13 +36,17 @@ const { items } = Astro.props
           <BreadcrumbItem>
             {index === items.length - 1 ? (
               <BreadcrumbPage>
-                {item.icon && <Icon name={item.icon} class="mr-1 size-4" />}
-                {item.label}
+                <span class="flex items-center gap-x-2">
+                  {item.icon && <Icon name={item.icon} class="size-4" />}
+                  {item.label}
+                </span>
               </BreadcrumbPage>
             ) : (
               <BreadcrumbLink href={item.href}>
-                {item.icon && <Icon name={item.icon} class="mr-1 size-4" />}
-                {item.label}
+                <span class="flex items-center gap-x-2">
+                  {item.icon && <Icon name={item.icon} class="size-4" />}
+                  {item.label}
+                </span>
               </BreadcrumbLink>
             )}
           </BreadcrumbItem>

src/components/Footer.astro

@@ -1,6 +1,6 @@
 ---
-import Container from '@components/Container.astro'
-import { SOCIAL_LINKS } from '@consts'
+import Container from '@/components/Container.astro'
+import { SOCIAL_LINKS } from '@/consts'
 import SocialIcons from './SocialIcons.astro'
 ---
 

src/components/Head.astro

@@ -2,6 +2,7 @@
 import '../styles/global.css'
 import '../styles/katex.css'
 
+import { SITE } from '@/consts'
 import { ViewTransitions } from 'astro:transitions'
 
 interface Props {
@@ -36,6 +37,7 @@ const { title, description, image = '/static/twitter-card.png' } = Astro.props
 
 <meta property="og:type" content="website" />
 <meta property="og:url" content={Astro.url} />
+<meta property="og:site_name" content={SITE.TITLE} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:image" content={new URL(image, Astro.url)} />

src/components/Header.astro

@@ -1,9 +1,9 @@
 ---
+import Container from '@/components/Container.astro'
+import Link from '@/components/Link.astro'
+import MobileMenu from '@/components/ui/mobile-menu'
 import { ModeToggle } from '@/components/ui/mode-toggle'
-import Container from '@components/Container.astro'
-import Link from '@components/Link.astro'
-import MobileMenu from '@components/ui/mobile-menu'
-import { NAV_LINKS, SITE } from '@consts'
+import { NAV_LINKS, SITE } from '@/consts'
 import { Image } from 'astro:assets'
 import logo from '../../public/static/logo.svg'
 ---

src/components/Link.astro

@@ -1,23 +1,15 @@
 ---
-import { cn } from '@lib/utils'
+import { cn } from '@/lib/utils'
 
 type Props = {
   href: string
   external?: boolean
   class?: string
   underline?: boolean
-  'data-heading'?: string
   [key: string]: any
 }
 
-const {
-  href,
-  external,
-  class: className,
-  underline,
-  'data-heading': dataHeading,
-  ...rest
-} = Astro.props
+const { href, external, class: className, underline, ...rest } = Astro.props
 ---
 
 <a
@@ -25,10 +17,10 @@ const {
   target={external ? '_blank' : '_self'}
   class={cn(
     'inline-block transition-colors duration-300 ease-in-out',
-    underline && 'underline underline-offset-[3px]',
+    underline &&
+      'underline decoration-muted-foreground underline-offset-[3px] hover:decoration-foreground',
     className,
   )}
-  data-heading={dataHeading}
   {...rest}
 >
   <slot />

src/components/PostNavigation.astro

@@ -1,7 +1,7 @@
 ---
+import Link from '@/components/Link.astro'
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
-import Link from '@components/Link.astro'
 import { Icon } from 'astro-icon/components'
 
 const { prevPost, nextPost } = Astro.props

src/components/ProjectCard.astro

@@ -1,6 +1,6 @@
 ---
+import Link from '@/components/Link.astro'
 import { Badge } from '@/components/ui/badge'
-import Link from '@components/Link.astro'
 import { Image } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
 
@@ -14,7 +14,7 @@ const { project } = Astro.props
 <div
   class="overflow-hidden rounded-xl border transition-colors duration-300 ease-in-out hover:bg-secondary/50"
 >
-  <Link href={project.data.link} class="block">
+  <Link href={project.data.link} class="block" external>
     <Image
       src={project.data.image}
       alt={project.data.name}

src/components/SocialIcons.astro

@@ -1,8 +1,8 @@
 ---
+import Link from '@/components/Link.astro'
 import { buttonVariants } from '@/components/ui/button'
+import type { Link as SocialLink } from '@/consts'
 import { cn } from '@/lib/utils'
-import Link from '@components/Link.astro'
-import type { Link as SocialLink } from '@consts'
 import { Icon } from 'astro-icon/components'
 
 interface Props {
@@ -40,6 +40,7 @@ const getSocialLink = ({ href, label }: SocialLink) => ({
             aria-label={ariaLabel}
             title={ariaLabel}
             class={buttonVariants({ variant: 'outline', size: 'icon' })}
+            external
           >
             <Icon name={iconName} class="size-4" />
           </Link>

src/components/TableOfContentsHeading.astro

@@ -10,7 +10,7 @@ const { heading } = Astro.props
 >
   <Link
     href={'#' + heading.slug}
-    class="toc-link transition-colors duration-200 hover:underline"
+    class="toc-link underline decoration-transparent underline-offset-[3px] transition-colors duration-200 hover:decoration-inherit"
   >
     {heading.text}
   </Link>

src/components/ui/mobile-menu.tsx

@@ -6,7 +6,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { NAV_LINKS } from '@consts'
+import { NAV_LINKS } from '@/consts'
 import { Menu } from 'lucide-react'
 
 const MobileMenu = () => {