feat: polishing

src/components/BlogCard.astro

@@ -16,7 +16,7 @@ const { entry } = Astro.props as {
 
 const formattedDate = formatDate(entry.data.date)
 const readTime = readingTime(entry.body)
-const authors = await parseAuthors(entry.data.author ?? [])
+const authors = await parseAuthors(entry.data.authors ?? [])
 ---
 
 <div

src/components/Link.astro

@@ -7,6 +7,7 @@ type Props = {
   class?: string
   underline?: boolean
   'data-heading'?: string
+  [key: string]: any
 }
 
 const {

src/components/PostNavigation.astro

@@ -19,7 +19,7 @@ const { prevPost, nextPost } = Astro.props
   >
     <div class="mr-2 flex-shrink-0">
       <ArrowLeft
-        className="h-4 w-4 transition-transform group-hover:-translate-x-1"
+        className="size-4 transition-transform group-hover:-translate-x-1"
       />
     </div>
     <div class="flex flex-col items-start overflow-hidden">
@@ -46,7 +46,7 @@ const { prevPost, nextPost } = Astro.props
     </div>
     <div class="ml-2 flex-shrink-0">
       <ArrowRight
-        className="h-4 w-4 transition-transform group-hover:translate-x-1"
+        className="size-4 transition-transform group-hover:translate-x-1"
       />
     </div>
   </Link>

src/components/SocialIcons.astro

@@ -1,37 +1,59 @@
 ---
 import { Twitter, Github, Linkedin, Mail, Rss } from 'lucide-react'
 import { SITE } from '@consts'
+import { buttonVariants } from '@/components/ui/button'
+import Link from '@components/Link.astro'
 ---
 
 <ul class="not-prose flex flex-wrap gap-2" role="list">
   <li>
-    <a href="#" class="inline-block" aria-label="Twitter" title="Twitter">
-      <Twitter />
-    </a>
+    <Link
+      href="#"
+      aria-label="Twitter"
+      title="Twitter"
+      class={buttonVariants({ variant: 'outline', size: 'icon' })}
+    >
+      <Twitter className="size-4" />
+    </Link>
   </li>
   <li>
-    <a href="#" class="inline-block" aria-label="GitHub" title="GitHub">
-      <Github />
-    </a>
+    <Link
+      href="#"
+      aria-label="GitHub"
+      title="GitHub"
+      class={buttonVariants({ variant: 'outline', size: 'icon' })}
+    >
+      <Github className="size-4" />
+    </Link>
   </li>
   <li>
-    <a href="#" class="inline-block" aria-label="LinkedIn" title="LinkedIn">
-      <Linkedin />
-    </a>
+    <Link
+      href="#"
+      aria-label="LinkedIn"
+      title="LinkedIn"
+      class={buttonVariants({ variant: 'outline', size: 'icon' })}
+    >
+      <Linkedin className="size-4" />
+    </Link>
   </li>
   <li>
-    <a href="#" class="inline-block" aria-label="Email" title="Email">
-      <Mail />
-    </a>
+    <Link
+      href="#"
+      aria-label="Email"
+      title="Email"
+      class={buttonVariants({ variant: 'outline', size: 'icon' })}
+    >
+      <Mail className="size-4" />
+    </Link>
   </li>
   <li>
-    <a
+    <Link
       href={`${SITE.SITEURL}/rss.xml`}
-      class="inline-block"
       aria-label="RSS feed"
       title="RSS feed"
+      class={buttonVariants({ variant: 'outline', size: 'icon' })}
     >
-      <Rss />
-    </a>
+      <Rss className="size-4" />
+    </Link>
   </li>
 </ul>

src/components/ui/badge.tsx

@@ -31,7 +31,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props}>
-      <Hash className="mr-0.5 h-3 w-3" />
+      <Hash className="size-3 -translate-x-0.5" />
       {props.children}
     </div>
   )

src/components/ui/breadcrumb.tsx

@@ -98,7 +98,7 @@ const BreadcrumbEllipsis = ({
     className={cn('flex h-9 w-9 items-center justify-center', className)}
     {...props}
   >
-    <DotsHorizontalIcon className="h-4 w-4" />
+    <DotsHorizontalIcon className="size-4" />
     <span className="sr-only">More</span>
   </span>
 )

src/components/ui/dropdown-menu.tsx

@@ -36,7 +36,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto size-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -110,7 +110,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -133,7 +133,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <DotFilledIcon className="size-4 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

src/components/ui/mode-toggle.tsx

@@ -1,4 +1,4 @@
-import { Moon, Sun } from 'lucide-react'
+import { Laptop, Moon, Sun } from 'lucide-react'
 import * as React from 'react'
 
 import { Button } from '@/components/ui/button'
@@ -30,21 +30,29 @@ export function ModeToggle() {
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <Button
+          variant="outline"
+          size="icon"
+          className="group"
+          title="Toggle theme"
+        >
+          <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => setThemeState('theme-light')}>
-          Light
+          <Sun className="mr-2 size-4" />
+          <span>Light</span>
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setThemeState('dark')}>
-          Dark
+          <Moon className="mr-2 size-4" />
+          <span>Dark</span>
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setThemeState('system')}>
-          System
+          <Laptop className="mr-2 size-4" />
+          <span>System</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>