@m13v/seo-components 0.34.1 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.34.1",
+  "version": "0.36.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

@@ -27,8 +27,20 @@ export interface DmShortLinkRedirectConfig {
  *      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.
+ *
+ * 2026-05-07: extended after live measurement found ~71% of "human" hits in
+ * the last 24h were actually generic HTTP libs and stripped-header scrapers
+ * that the original "self-identifying bot" regex missed. New buckets:
+ *   - Generic HTTP libs (axios, python-requests, python-urllib, node-fetch,
+ *     bare "node"). No real browser ever sends these.
+ *   - Specific scraper UAs caught in the wild: dataminr (Twitter intel),
+ *     Anthill (content scanner).
+ *   - Spoofed/empty fingerprints: bare "Mozilla/5.0" (no real browser sends
+ *     just this), Chrome/70.x (2018 release, only seen from headless fleets).
+ *   - Empty UA is also treated as bot in the caller (see isBot computation
+ *     below) since real browsers always send a UA.
  */
-const BOT_UA_RE = /bot|crawler|spider|Twitterbot|LinkedInBot|Slackbot|facebookexternalhit|Discordbot|TelegramBot|WhatsApp|Applebot|Googlebot|Bingbot|YandexBot|DuckDuckBot|redditbot|Pinterest|Embedly|Snapchat/i;
+const BOT_UA_RE = /bot|crawler|spider|Twitterbot|LinkedInBot|Slackbot|facebookexternalhit|Discordbot|TelegramBot|WhatsApp|Applebot|Googlebot|Bingbot|YandexBot|DuckDuckBot|redditbot|Pinterest|Embedly|Snapchat|axios\/|python-requests|python-urllib|node-fetch|^node$|dataminr|Anthill|^Mozilla\/5\.0$|Chrome\/70\./i;
 
 /**
  * Factory for `GET /r/[code]`.
@@ -86,7 +98,10 @@ export function createDmShortLinkRedirectHandler(config: DmShortLinkRedirectConf
     // 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);
+    // Empty UA is treated as bot: real browsers always send one. Stripped-
+    // header scrapers were ~6% of "human" hits in the 24h post 2026-05-07
+    // measurement.
+    const isBot = !ua || BOT_UA_RE.test(ua);
     const referrer = req.headers.get("referer") || "";
 
     let target: string | null = null;