OG link previews & static fallbacks

The problem with plain URLs

Before this feature, any URL dropped into a Devit post rendered as raw text. Users posting GitHub repos, blog articles, or project demos had no way to give context at a glance. The feed felt flat compared to what developers expect from modern platforms — Discord, Slack, and Twitter/X all unfurl links automatically.

The challenge with building this ourselves was twofold: scraping external URLs is slow and unreliable, and several high-traffic domains actively block bots. We needed a fetch pipeline that was fast, cacheable, and had a graceful fallback story for the domains that would never cooperate.

The fetch pipeline

Link preview generation runs in a Supabase Edge Function rather than on the client. This keeps API secrets server-side, allows caching in the database, and avoids CORS issues when fetching third-party pages.

// Edge function: domain routing (simplified)
const STATIC_FALLBACKS = {
  'youtube.com': { type: 'youtube', title: 'YouTube' },
  'youtu.be':   { type: 'youtube', title: 'YouTube' },
  'twitter.com': { type: 'twitter', title: 'View on X' },
  'x.com':      { type: 'twitter', title: 'View on X' },
};

const domain = new URL(url).hostname.replace('www.', '');
if (STATIC_FALLBACKS[domain]) {
  return buildFallback(url, STATIC_FALLBACKS[domain]);
}

Rendering in the feed

On the frontend, posts with a saved preview payload render a LinkPreviewCard component below the post body. The card layout varies by preview type:

Description text is clamped to two lines with CSS -webkit-line-clamp. OG images that fail to load are hidden rather than showing a broken image placeholder.

YouTube inline embeds

YouTube links get special treatment: instead of a static card, they render directly as an embedded player. The video ID is extracted from both youtube.com/watch?v= and youtu.be/ URL formats, then dropped into a standard iframe with the youtube-nocookie.com embed domain to keep things privacy-clean.

// Extract YouTube video ID from either URL format
function getYouTubeId(url) {
  const patterns = [
    /youtube\.com\/watch\?v=([^&]+)/,
    /youtu\.be\/([^?]+)/,
  ];
  for (const re of patterns) {
    const m = url.match(re);
    if (m) return m[1];
  }
  return null;
}

Caching strategy

Fetching OG data on every page load would be slow and would hammer third-party servers. The link_previews table acts as a persistent cache keyed on the full URL. The 7-day TTL is a balance — fresh enough that OG tags that change (updated article titles, new thumbnails) eventually reflect, but old enough that the vast majority of requests are served from the database with zero latency.

Performance impact

Before the feature, post cards were simple text blocks — fast to render. The concern was that adding image fetches and iframes would slow the feed. In practice, the impact is minimal because:

• Cached previews are a single extra column on the posts query — no additional round trip once the cache is warm
• OG images are loaded lazily with loading="lazy" — they don't block the initial render
• YouTube iframes are only inserted when the post is scrolled into view, using an IntersectionObserver
• Failed fetches store a null payload so the same URL is never re-fetched within the TTL window

What's next

The current implementation handles one URL per post. A natural extension is multi-URL support — parsing all URLs in the body and letting the user pin the one they want to feature. GitHub repo cards are also planned: rather than a generic OG card, a GitHub URL would render a structured card showing stars, language, and last commit date pulled from the GitHub API.