Initial commit - but way too late.

site/src/components/ContentCard.astro

@@ -0,0 +1,58 @@
+---
+import type { ContentItem } from "../lib/content/types";
+
+type Props = {
+  item: ContentItem;
+  placement: string;
+};
+
+const { item, placement } = Astro.props;
+const d = new Date(item.publishedAt);
+const dateLabel = Number.isFinite(d.valueOf())
+  ? d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })
+  : "";
+
+const targetId = `card.${placement}.${item.source}.${item.id}`;
+let domain = "";
+try {
+  domain = new URL(item.url).hostname;
+} catch {
+  domain = "";
+}
+---
+
+<a
+  class="card"
+  href={item.url}
+  target="_blank"
+  rel="noopener noreferrer"
+  data-umami-event="outbound_click"
+  data-umami-event-target_id={targetId}
+  data-umami-event-placement={placement}
+  data-umami-event-target_url={item.url}
+  data-umami-event-domain={domain || "unknown"}
+  data-umami-event-source={item.source}
+  data-umami-event-ui_placement="content_card"
+>
+  <div class="card-media">
+    {
+      item.thumbnailUrl ? (
+        <img src={item.thumbnailUrl} alt="" loading="lazy" />
+      ) : (
+        <div class="card-placeholder" />
+      )
+    }
+  </div>
+  <div class="card-body">
+    <div class="card-meta">
+      <span class={`pill pill-${item.source}`}>{item.source}</span>
+      {dateLabel ? <span class="muted">{dateLabel}</span> : null}
+      {
+        item.metrics?.views !== undefined ? (
+          <span class="muted">{item.metrics.views.toLocaleString()} views</span>
+        ) : null
+      }
+    </div>
+    <h3 class="card-title">{item.title}</h3>
+  </div>
+</a>

site/src/components/CtaLink.astro

@@ -0,0 +1,50 @@
+---
+import { withUtm } from "../lib/url";
+
+type Platform = "youtube" | "instagram" | "podcast";
+
+type Props = {
+  platform: Platform;
+  placement: string;
+  url: string;
+  label: string;
+  id?: string;
+  campaign?: string;
+  class?: string;
+};
+
+const { platform, placement, url, label, id, campaign, class: className } = Astro.props;
+
+const trackedUrl = withUtm(url, {
+  utm_source: "website",
+  utm_medium: "cta",
+  utm_campaign: campaign || "social-acquisition",
+  utm_content: `${platform}:${placement}`,
+});
+
+function slugify(input: string) {
+  return input
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 40);
+}
+
+const fallbackId = `cta.${placement}.${platform}.${slugify(label) || "action"}`;
+const targetId = id || fallbackId;
+---
+
+<a
+  class={`cta ${className || ""}`}
+  href={trackedUrl}
+  rel="me noopener noreferrer"
+  target="_blank"
+  data-umami-event="cta_click"
+  data-umami-event-target_id={targetId}
+  data-umami-event-placement={placement}
+  data-umami-event-target_url={url}
+  data-umami-event-platform={platform}
+  data-umami-event-target={url}
+>
+  {label}
+</a>

site/src/components/InstagramEmbed.astro

@@ -0,0 +1,33 @@
+---
+type Props = {
+  url: string;
+  placement?: string;
+};
+
+const { url, placement } = Astro.props;
+const p = placement || "instagram_embed";
+const targetId = `ig.${p}.${url}`;
+let domain = "";
+try {
+  domain = new URL(url).hostname;
+} catch {
+  domain = "";
+}
+---
+
+<blockquote class="instagram-media" data-instgrm-permalink={url} data-instgrm-version="14">
+  <a
+    href={url}
+    target="_blank"
+    rel="noopener noreferrer"
+    data-umami-event="outbound_click"
+    data-umami-event-target_id={targetId}
+    data-umami-event-placement={p}
+    data-umami-event-target_url={url}
+    data-umami-event-domain={domain || "unknown"}
+    data-umami-event-source="instagram"
+    data-umami-event-ui_placement="instagram_embed"
+  >
+    View on Instagram
+  </a>
+</blockquote>