initial commit

src/components/blog/PreviewCardView.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  /** The link preview a server attaches to a status. */
+  import type { PreviewCard } from '$lib/api/types'
+
+  interface Props {
+    card: PreviewCard
+  }
+
+  let { card }: Props = $props()
+
+  const host = $derived.by(() => {
+    try {
+      return new URL(card.url).hostname.replace(/^www\./, '')
+    } catch {
+      return card.provider_name ?? ''
+    }
+  })
+</script>
+
+<a class="preview-card" href={card.url} target="_blank" rel="noopener noreferrer" data-card-type={card.type}>
+  {#if card.image}
+    <img class="preview-card-image" src={card.image} alt="" loading="lazy" decoding="async" />
+  {/if}
+  <span class="preview-card-body">
+    <span class="preview-card-title">{card.title}</span>
+    {#if card.description}
+      <span class="preview-card-description">{card.description}</span>
+    {/if}
+    <span class="preview-card-host">{host}</span>
+  </span>
+</a>