@m13v/seo-components 0.34.0 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "scripts": {
     "build:css": "tailwind -i src/_build.css -o dist/styles.css --minify",
     "lint:mobile-spans": "node scripts/lint-mobile-spans.mjs",

package/registry.json

@@ -290,6 +290,12 @@
       "quotaTags": ["visual-rich-mandatory"]
     },
 
+    {
+      "name": "NewsStrip",
+      "group": "cta",
+      "signature": "(href, lead, wedge, pillText?, ctaLabel?, tone?: \"amber\" | \"teal\" | \"rose\" | \"indigo\", site?, section?, datePublished?)",
+      "description": "Pinned, pill-anchored announcement strip that sits ABOVE the hero on the homepage and routes existing organic clickthroughs to a freshly minted /t/ analysis. Pattern: a viral post on Twitter/Reddit drives baseline traffic to '/'. Once a dedicated /t/ page ships, every subsequent visitor needs a one-click path from '/' to the deep page. Render at top of homepage, target the new /t/ slug. Tone defaults to amber for breaking news. The seo_top_posts pipeline mounts this automatically when it ships a page from a viral post."
+    },
     {
       "name": "InlineCta",
       "group": "cta",

package/src/components/NewsStrip.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import { useCapture } from "../lib/analytics-context";
+
+export interface NewsStripProps {
+  /** Required: link target. Internal /t/ slugs go to the freshly minted page. */
+  href: string;
+  /** Required: short eyebrow text displayed in the pill (e.g. "MAY 6"). Defaults to "NEW". */
+  pillText?: string;
+  /** Required: lead phrase rendered in bold inside the body (e.g. "Anthropic doubled limits."). */
+  lead: string;
+  /** Required: the wedge / hook explaining why the user should click through. */
+  wedge: string;
+  /** CTA label pinned right. Defaults to "Read the breakdown". */
+  ctaLabel?: string;
+  /** Color theme. Defaults to amber for breaking news. */
+  tone?: "amber" | "teal" | "rose" | "indigo";
+  /** Site slug for analytics events. */
+  site?: string;
+  /** Section label for analytics events. */
+  section?: string;
+  /** When true, the pill animates with a pulsing dot. Defaults to true. */
+  showDot?: boolean;
+  /** Optional ISO date the news lands; surfaced as <time> for SEO/aria. */
+  datePublished?: string;
+}
+
+const TONES: Record<NonNullable<NewsStripProps["tone"]>, {
+  bg: string;
+  border: string;
+  borderHover: string;
+  text: string;
+  textStrong: string;
+  textWedge: string;
+  pillBg: string;
+  pillText: string;
+  arrow: string;
+  shadowRgb: string;
+}> = {
+  amber: {
+    bg: "linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%)",
+    border: "#fde68a",
+    borderHover: "#f59e0b",
+    text: "#92400e",
+    textStrong: "#78350f",
+    textWedge: "#b45309",
+    pillBg: "#d97706",
+    pillText: "#ffffff",
+    arrow: "#b45309",
+    shadowRgb: "180, 83, 9",
+  },
+  teal: {
+    bg: "linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%)",
+    border: "#99f6e4",
+    borderHover: "#14b8a6",
+    text: "#115e59",
+    textStrong: "#134e4a",
+    textWedge: "#0f766e",
+    pillBg: "#0d9488",
+    pillText: "#ffffff",
+    arrow: "#0f766e",
+    shadowRgb: "13, 148, 136",
+  },
+  rose: {
+    bg: "linear-gradient(135deg, #fff1f2 0%, #fef2f2 100%)",
+    border: "#fecdd3",
+    borderHover: "#f43f5e",
+    text: "#9f1239",
+    textStrong: "#881337",
+    textWedge: "#be123c",
+    pillBg: "#e11d48",
+    pillText: "#ffffff",
+    arrow: "#be123c",
+    shadowRgb: "225, 29, 72",
+  },
+  indigo: {
+    bg: "linear-gradient(135deg, #eef2ff 0%, #eff6ff 100%)",
+    border: "#c7d2fe",
+    borderHover: "#6366f1",
+    text: "#3730a3",
+    textStrong: "#312e81",
+    textWedge: "#4338ca",
+    pillBg: "#4f46e5",
+    pillText: "#ffffff",
+    arrow: "#4338ca",
+    shadowRgb: "79, 70, 229",
+  },
+};
+
+/**
+ * <NewsStrip /> — a pinned, pill-anchored, dismiss-free news bar that sits
+ * above the hero on a marketing homepage and routes existing organic
+ * clickthroughs (e.g. tweets pointing at "/") to a freshly minted dedicated
+ * page on a current event.
+ *
+ * Pattern this component encodes (battle-tested on claude-meter.com on
+ * 2026-05-07): a viral post on Twitter/Reddit drives baseline traffic to the
+ * homepage. Once a dedicated /t/ analysis ships, every subsequent visitor
+ * needs a one-click path from "/" to the deep page. NewsStrip is that path.
+ *
+ * Renders a single horizontal flex link with three slots:
+ *   [pill]  [lead + wedge]  [arrow + cta]
+ * Tone is configurable per launch (amber for breaking news, teal/indigo/rose
+ * for softer announcements). Wraps gracefully on mobile.
+ *
+ * Analytics: fires `news_strip_click` via the consumer's PostHog instance
+ * (no-op if the page doesn't mount <SeoAnalyticsProvider>).
+ */
+export function NewsStrip({
+  href,
+  pillText = "NEW",
+  lead,
+  wedge,
+  ctaLabel = "Read the breakdown",
+  tone = "amber",
+  site,
+  section = "homepage",
+  showDot = true,
+  datePublished,
+}: NewsStripProps) {
+  const t = TONES[tone];
+  const capture = useCapture();
+
+  const onClick = () => {
+    try {
+      capture?.("news_strip_click", {
+        destination: href,
+        site,
+        section,
+        pill_text: pillText,
+        lead,
+        tone,
+        component: "NewsStrip",
+      });
+    } catch {
+      /* analytics failures must never block navigation */
+    }
+  };
+
+  return (
+    <a
+      href={href}
+      onClick={onClick}
+      aria-label={`${pillText}: ${lead} ${wedge} ${ctaLabel}`}
+      style={{
+        position: "relative",
+        zIndex: 3,
+        display: "flex",
+        alignItems: "center",
+        gap: 14,
+        maxWidth: 1240,
+        margin: "16px auto 0",
+        padding: "12px 22px",
+        borderRadius: 999,
+        background: t.bg,
+        border: `1px solid ${t.border}`,
+        boxShadow: `0 1px 0 rgba(${t.shadowRgb}, 0.04), 0 6px 24px -12px rgba(${t.shadowRgb}, 0.18)`,
+        textDecoration: "none",
+        color: t.text,
+        fontSize: 14,
+        lineHeight: 1.4,
+        transition: "transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease",
+      }}
+      className="news-strip"
+      data-tone={tone}
+      onMouseOver={(e) => {
+        const el = e.currentTarget as HTMLAnchorElement;
+        el.style.transform = "translateY(-1px)";
+        el.style.borderColor = t.borderHover;
+        el.style.boxShadow = `0 1px 0 rgba(${t.shadowRgb}, 0.08), 0 12px 32px -10px rgba(${t.shadowRgb}, 0.28)`;
+      }}
+      onMouseOut={(e) => {
+        const el = e.currentTarget as HTMLAnchorElement;
+        el.style.transform = "";
+        el.style.borderColor = t.border;
+        el.style.boxShadow = `0 1px 0 rgba(${t.shadowRgb}, 0.04), 0 6px 24px -12px rgba(${t.shadowRgb}, 0.18)`;
+      }}
+    >
+      <span
+        aria-hidden
+        style={{
+          flex: "none",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "4px 10px",
+          borderRadius: 999,
+          background: t.pillBg,
+          color: t.pillText,
+          fontFamily:
+            "var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace",
+          fontSize: 11,
+          fontWeight: 700,
+          letterSpacing: "0.08em",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {showDot && (
+          <span
+            aria-hidden
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: "#ffffff",
+              animation: "newsStripPulse 2s infinite",
+            }}
+          />
+        )}
+        {pillText}
+      </span>
+
+      <span style={{ flex: "1 1 auto", minWidth: 0 }}>
+        <strong style={{ color: t.textStrong, fontWeight: 700 }}>{lead}</strong>{" "}
+        <span style={{ color: t.textWedge }}>{wedge}</span>
+        {datePublished && (
+          <time
+            dateTime={datePublished}
+            style={{ display: "none" }}
+            aria-hidden
+          >
+            {datePublished}
+          </time>
+        )}
+      </span>
+
+      <span
+        aria-hidden
+        style={{
+          flex: "none",
+          fontFamily:
+            "var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace",
+          fontSize: 12,
+          fontWeight: 600,
+          color: t.arrow,
+          letterSpacing: "0.02em",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {ctaLabel} &rarr;
+      </span>
+
+      <style>{`
+        @keyframes newsStripPulse {
+          0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
+          50%      { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); }
+        }
+        @media (max-width: 720px) {
+          a.news-strip {
+            margin: 12px 18px 0 !important;
+            padding: 10px 14px !important;
+            border-radius: 14px !important;
+            flex-wrap: wrap;
+            font-size: 13px !important;
+          }
+        }
+      `}</style>
+    </a>
+  );
+}

package/src/index.ts

@@ -37,6 +37,10 @@ export { AnimatedSection } from "./components/AnimatedSection";
 export { AnimatedMetric } from "./components/AnimatedMetric";
 export { MetricsRow } from "./components/MetricsRow";
 
+// News bar (announcement strip linking to a freshly minted /t/ analysis)
+export { NewsStrip } from "./components/NewsStrip";
+export type { NewsStripProps } from "./components/NewsStrip";
+
 // CTA components
 export { InlineCta } from "./components/InlineCta";
 export { StickyBottomCta } from "./components/StickyBottomCta";

package/src/lib/dm-short-link-redirect.ts

@@ -16,6 +16,20 @@ export interface DmShortLinkRedirectConfig {
   posthogHostEnv?: string;
 }
 
+/**
+ * Bot User-Agent regex. Bots (Twitter card prefetch, LinkedIn unfurl,
+ * Slack/Discord/Telegram/WhatsApp link-preview crawlers, generic Google/Bing
+ * bots) hammer /r/<code> within seconds of mint to fetch link previews. They
+ * inflated the legacy `clicks` counter by ~20x. When this regex matches, the
+ * resolver:
+ *   1. Skips the counter increment (passes `?bot=1` so the server side
+ *      records the hit in post_link_clicks / dm_link_clicks with is_bot=true
+ *      but does NOT bump post_links.clicks / dm_links.clicks).
+ *   2. Skips the PostHog `*_short_link_clicked` event (no fake conversions).
+ *   3. Still 302s to target_url so previews render.
+ */
+const BOT_UA_RE = /bot|crawler|spider|Twitterbot|LinkedInBot|Slackbot|facebookexternalhit|Discordbot|TelegramBot|WhatsApp|Applebot|Googlebot|Bingbot|YandexBot|DuckDuckBot|redditbot|Pinterest|Embedly|Snapchat/i;
+
 /**
  * Factory for `GET /r/[code]`.
  *
@@ -34,12 +48,17 @@ export interface DmShortLinkRedirectConfig {
  *
  * Behavior:
  *   1. Read `code` from the route param. Reject non-alphanumeric / wrong-length.
- *   2. Hit `<resolverBase>/api/short-links/<code>`. The resolver increments the
- *      click counter and stamps first/last click timestamps.
- *   3. For post rail links: inject UTM params into the target URL.
- *   4. Fire the appropriate PostHog event (dm_short_link_clicked or
- *      post_short_link_clicked) fire-and-forget, non-blocking.
- *   5. 302 to the resolved target_url. On miss/error, 302 to "/".
+ *   2. Read User-Agent. If it matches BOT_UA_RE, pass `?bot=1` to the resolver
+ *      so it logs the hit but does NOT bump the human-facing counter, and
+ *      skip the PostHog event.
+ *   3. Hit `<resolverBase>/api/short-links/<code>?bot=<0|1>`. The resolver
+ *      always appends a row to post_link_clicks / dm_link_clicks (with
+ *      is_bot stamped accordingly). It only increments the legacy clicks
+ *      counter and stamps first/last click timestamps when is_bot=false.
+ *   4. For post rail links: inject UTM params into the target URL.
+ *   5. Fire the appropriate PostHog event (dm_short_link_clicked or
+ *      post_short_link_clicked) fire-and-forget, non-blocking; skipped for bots.
+ *   6. 302 to the resolved target_url. On miss/error, 302 to "/".
  */
 export function createDmShortLinkRedirectHandler(config: DmShortLinkRedirectConfig) {
   const {
@@ -62,6 +81,14 @@ export function createDmShortLinkRedirectHandler(config: DmShortLinkRedirectConf
       return Response.redirect(homeUrl, 302);
     }
 
+    // Bot detection lives at the edge so the server side can split humans vs
+    // bots in post_link_clicks / dm_link_clicks. Every UTF-8 string the user
+    // agent presents passes through this; matched UAs do NOT count as a real
+    // click and do NOT fire PostHog events.
+    const ua = req.headers.get("user-agent") || "";
+    const isBot = BOT_UA_RE.test(ua);
+    const referrer = req.headers.get("referer") || "";
+
     let target: string | null = null;
     let dmId: number | null = null;
     let postId: number | null = null;
@@ -70,7 +97,19 @@ export function createDmShortLinkRedirectHandler(config: DmShortLinkRedirectConf
     let platform: string | null = null;
 
     try {
-      const resp = await fetch(`${RESOLVER}/api/short-links/${encodeURIComponent(code)}`, {
+      const params = new URLSearchParams();
+      if (isBot) params.set("bot", "1");
+      // Forward UA + referrer so the server can persist them in
+      // *_link_clicks. We pass them through query params (not headers)
+      // because Next.js fetch normalizes some headers and the resolver
+      // is a separate origin. Truncate to keep the URL manageable.
+      if (ua) params.set("ua", ua.slice(0, 500));
+      if (referrer) params.set("ref", referrer.slice(0, 500));
+      const qs = params.toString();
+      const resolverUrl =
+        `${RESOLVER}/api/short-links/${encodeURIComponent(code)}` +
+        (qs ? `?${qs}` : "");
+      const resp = await fetch(resolverUrl, {
         cache: "no-store",
         signal: AbortSignal.timeout(4000),
       });
@@ -118,8 +157,10 @@ export function createDmShortLinkRedirectHandler(config: DmShortLinkRedirectConf
     const posthogKey = process.env[posthogKeyEnv];
     const posthogHost = (process.env[posthogHostEnv] || "https://us.i.posthog.com").replace(/\/+$/, "");
 
+    // Skip both PostHog events for bots: they do not represent intent, and
+    // counting them as `*_short_link_clicked` would taint funnel stats.
     // DM rail event
-    if (target && posthogKey && dmId != null) {
+    if (!isBot && target && posthogKey && dmId != null) {
       fetch(`${posthogHost}/i/v0/e/`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -136,7 +177,7 @@ export function createDmShortLinkRedirectHandler(config: DmShortLinkRedirectConf
     }
 
     // Post rail event
-    if (target && posthogKey && (postId != null || replyId != null)) {
+    if (!isBot && target && posthogKey && (postId != null || replyId != null)) {
       fetch(`${posthogHost}/i/v0/e/`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },