feat: add external link to articles

src/components/HeroCard.astro

@@ -15,7 +15,7 @@ interface Props {
 }
 
 const {
-  data: { title, cover, icon, date, rating },
+  data: { title, cover, icon, date, rating, author },
   collection,
   body,
   id,
@@ -32,7 +32,12 @@ const link = translatePath(`/${collection}/${id.split("/")[0]}`);
   <Card.Content classes="px-8 py-7 order-last xs:order-first">
     {
       (date || body || rating !== undefined) && (
-      <Card.Metadata date={date} readDuration={readDuration(body)} rating={rating} />
+        <Card.Metadata
+          date={date}
+          readDuration={readDuration(body)}
+          rating={rating}
+          author={author}
+        />
       )
     }
     <Card.Title classes="text-4xl flex items-center gap-2">

src/components/card/Metadata.svelte

@@ -2,6 +2,7 @@
   export let date: string | Date;
   export let readDuration: number | undefined;
   export let rating: string | number | undefined;
+  export let author: string | undefined;
 
   const toDate = (d: string | Date) =>
     typeof d === "string" ? new Date(d) : d;
@@ -33,19 +34,28 @@
   };
 </script>
 
-<div class="flex gap-5">
+<div class="flex gap-3 wrapper">
+  {#if rating}
+    <div class="text-sm bg-light">{formatRating(rating)}</div>
+  {/if}
   {#if date}
-    <time class="text-sm text-neutral" datetime={iso(date)}
+    <time class="text-sm bg-light" datetime={iso(date)}
       >{formatDate(date)}</time>
   {/if}
-
-  {#if typeof readDuration === "number"}
-    {#if readDuration > 1}
-      <div class="text-sm text-neutral">{readDuration} mins read</div>
-    {/if}
+  {#if readDuration > 1}
+    <div class="text-sm bg-light">{readDuration} mins read</div>
   {/if}
-
-  {#if rating}
-    <div class="text-sm text-neutral">{formatRating(rating)}</div>
+  {#if author}
+    <div class="text-sm bg-light">{author}</div>
   {/if}
 </div>
+
+
+<style>
+  .wrapper > * {
+    padding: 2px 11px;
+    border-radius: 14px;
+    font-size: 11px;
+    opacity: 0.7;
+  }
+</style>