refactor: update site metadata structure

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 type { SocialLink } from '@/types'
 import type { CollectionEntry } from 'astro:content'
 import SocialIcons from './SocialIcons.astro'
 

src/components/Head.astro

@@ -30,7 +30,7 @@ const { title, description, image = '/static/twitter-card.png' } = Astro.props
 <title>{title}</title>
 <meta name="title" content={title} />
 <meta name="description" content={description} />
-<meta name="author" content={SITE.TITLE} />
+<meta name="author" content={SITE.title} />
 
 <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -44,7 +44,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: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

@@ -19,7 +19,7 @@ import logo from '../../public/static/logo.svg'
         class="hover:text-primary flex shrink-0 items-center gap-2 text-xl font-medium transition-colors duration-300"
       >
         <Image src={logo} alt="Logo" class="size-8" />
-        {SITE.TITLE}
+        {SITE.title}
       </Link>
       <div class="flex items-center gap-2 md:gap-4">
         <nav class="hidden items-center gap-4 text-sm sm:gap-6 md:flex">

src/components/SocialIcons.astro

@@ -1,51 +1,37 @@
 ---
 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 { ICON_MAP } from '@/consts'
+import type { SocialLink } from '@/types'
 import { Icon } from 'astro-icon/components'
 
 interface Props {
   links: SocialLink[]
-  className?: string
 }
 
-const { links, className } = Astro.props
-
-const iconMap = {
-  Website: 'lucide:globe',
-  GitHub: 'lucide:github',
-  LinkedIn: 'lucide:linkedin',
-  Twitter: 'lucide:twitter',
-  Email: 'lucide:mail',
-  RSS: 'lucide:rss',
-}
-
-const getSocialLink = ({ href, label }: SocialLink) => ({
-  href: label === 'Email' ? `mailto:${href}` : href,
-  ariaLabel: label,
-  iconName:
-    iconMap[label as keyof typeof iconMap] || 'lucide:message-circle-question',
-})
+const { links } = Astro.props
 ---
 
-<ul class={cn('flex flex-wrap gap-2', className)} role="list">
+<ul class="flex flex-wrap gap-2" role="list">
   {
-    links.map((link) => {
-      const { href, ariaLabel, iconName } = getSocialLink(link)
-      return (
-        <li>
-          <Link
-            href={href}
-            aria-label={ariaLabel}
-            title={ariaLabel}
-            class={buttonVariants({ variant: 'outline', size: 'icon' })}
-            external
-          >
-            <Icon name={iconName} class="size-4" />
-          </Link>
-        </li>
-      )
-    })
+    links.map(({ href, label }) => (
+      <li>
+        <Link
+          href={href}
+          aria-label={label}
+          title={label}
+          class={buttonVariants({ variant: 'outline', size: 'icon' })}
+          external
+        >
+          <Icon
+            name={
+              ICON_MAP[label as keyof typeof ICON_MAP] ||
+              'lucide:message-circle-question'
+            }
+            class="size-4"
+          />
+        </Link>
+      </li>
+    ))
   }
 </ul>