feat: multi-author support, back to top

src/components/BlogCard.astro

@@ -1,11 +1,10 @@
 ---
 import type { CollectionEntry } from 'astro:content'
-import { formatDate, readingTime } from '@lib/utils'
+import { formatDate, readingTime, parseAuthors } from '@lib/utils'
 import { Image } from 'astro:assets'
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
 import Link from './Link.astro'
-import { getEntry } from 'astro:content'
 
 type Props = {
   entry: CollectionEntry<'blog'>
@@ -17,22 +16,7 @@ const { entry } = Astro.props as {
 
 const formattedDate = formatDate(entry.data.date)
 const readTime = readingTime(entry.body)
-
-let author = null
-if (
-  entry.data.author &&
-  typeof entry.data.author === 'object' &&
-  'collection' in entry.data.author
-) {
-  author = await getEntry(entry.data.author)
-} else if (typeof entry.data.author === 'string') {
-  author = {
-    data: {
-      name: entry.data.author,
-      avatar: '/favicons/android-chrome-512x512.png',
-    },
-  }
-}
+const authors = await parseAuthors(entry.data.author ?? [])
 ---
 
 <div
@@ -66,18 +50,20 @@ if (
         class="mb-2 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground"
       >
         {
-          author && (
+          authors.length > 0 && (
             <>
-              <div class="flex items-center gap-1.5">
-                <Image
-                  src={author.data.avatar}
-                  alt={author.data.name}
-                  width={18}
-                  height={18}
-                  class="rounded-full"
-                />
-                <span>{author.data.name}</span>
-              </div>
+              {authors.map((author) => (
+                <div class="flex items-center gap-x-1.5">
+                  <Image
+                    src={author.avatar}
+                    alt={author.name}
+                    width={18}
+                    height={18}
+                    class="rounded-full"
+                  />
+                  <span>{author.name}</span>
+                </div>
+              ))}
               <Separator orientation="vertical" className="h-4" />
             </>
           )

src/components/TableOfContents.astro

@@ -27,7 +27,7 @@ function buildToc(headings: Heading[]) {
 }
 ---
 
-<details open class="group mb-8 block rounded-xl border p-3 xl:hidden">
+<details open class="group mb-8 block rounded-xl border p-4 xl:hidden">
   <summary
     class="flex cursor-pointer items-center justify-between text-xl font-semibold"
   >

src/components/ui/button.tsx

@@ -9,14 +9,13 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          'bg-destructive text-destructive-foreground over:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },

src/components/ui/card.tsx

@@ -8,10 +8,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      'rounded-xl border bg-card text-card-foreground shadow',
-      className,
-    )}
+    className={cn('rounded-xl border bg-card text-card-foreground', className)}
     {...props}
   />
 ))