https://uselinkshot.com/assets/blog-Cy7u1zKt.js

1import{t as e}from"./jsx-runtime-BnxRlLMJ.js";import{t}from"./link-CQiF561E.js";import{t as n}from"./logo-BqNzRioP.js";import{t as r}from"./ArrowLeftIcon-CKHUKvCn.js";import{t as i}from"./ArrowRightIcon-XsL0pmDW.js";var a=e(),o=[{slug:`what-is-an-og-image`,title:`What is an OG image (and why your links look broken without one)`,description:`Open Graph images are the preview cards that appear when you share a link on X, Slack, or iMessage. Here's what they are, how they work, and why most sites get them wrong.`,tag:`Basics`,published:!0},{slug:`dynamic-og-images-nextjs`,title:`Dynamic OG images in Next.js — a practical guide`,description:`How to generate a unique OG image for every page in your Next.js app, with real HTML and CSS instead of JSX templates.`,tag:`Next.js`,published:!0},{slug:`dynamic-og-images-astro`,title:`Dynamic OG images in Astro`,description:`Astro makes static and server-rendered sites fast — here's how to add per-page OG images without maintaining separate templates.`,tag:`Astro`,published:!1},{slug:`dynamic-og-images-remix`,title:`Dynamic OG images in Remix`,description:`Use Remix resource routes to serve a unique OG image for every URL on your site.`,tag:`Remix`,published:!1},{slug:`satori-limitations`,title:`What Satori can't do (and when to reach for a real browser)`,description:`Satori is great for simple cards, but it has a hard ceiling. CSS Grid, complex layouts, arbitrary Tailwind values, and font loading all hit it fast.`,tag:`Deep Dive`,published:!1},{slug:`fix-link-preview-not-showing`,title:`Why your link preview isn't showing — and how to fix it`,description:`Debugging missing og:image tags, wrong image dimensions, cache issues, and every other reason your link looks blank when shared.`,tag:`Debugging`,published:!0}];function s(){let e=o.filter(e=>e.published),i=o.filter(e=>!e.published);return(0,a.jsxs)(`div`,{className:`bg-background min-h-screen`,children:[(0,a.jsx)(`header`,{className:`border-border/40 border-b px-6 py-4`,children:(0,a.jsxs)(`div`,{className:`mx-auto flex max-w-4xl items-center justify-between`,children:[(0,a.jsx)(t,{to:`/`,children:(0,a.jsx)(n,{})}),(0,a.jsxs)(t,{to:`/`,className:`text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm transition-colors`,children:[(0,a.jsx)(r,{className:`size-3.5`}),`Back to home`]})]})}),(0,a.jsxs)(`main`,{className:`mx-auto max-w-4xl px-6 py-16 sm:py-20`,children:[(0,a.jsx)(`p`,{className:`text-muted-foreground mb-4 font-mono text-xs tracking-wide uppercase`,children:`// blog`}),(0,a.jsx)(`h1`,{className:`text-foreground mb-3 text-3xl font-extrabold tracking-tight sm:text-5xl`,children:`Guides & Tutorials`}),(0,a.jsx)(`p`,{className:`text-muted-foreground mb-12 text-base sm:text-lg`,children:`Everything you need to know about OG images, Open Graph, and dynamic social previews.`}),e.length>0&&(0,a.jsx)(`div`,{className:`mb-16 flex flex-col gap-5`,children:e.map(e=>(0,a.jsx)(c,{post:e},e.slug))}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-muted-foreground mb-5 font-mono text-xs tracking-wide uppercase`,children:`// coming soon`}),(0,a.jsx)(`div`,{className:`flex flex-col gap-5`,children:i.map(e=>(0,a.jsx)(c,{post:e,comingSoon:!0},e.slug))})]})]}),(0,a.jsx)(`footer`,{className:`border-border/40 border-t px-6 py-8`,children:(0,a.jsxs)(`div`,{className:`mx-auto flex max-w-4xl items-center justify-between text-xs text-gray-400`,children:[(0,a.jsxs)(`span`,{children:[`© `,new Date().getFullYear(),` Linkshot. All rights reserved.`]}),(0,a.jsx)(t,{to:`/`,className:`hover:text-foreground transition-colors`,children:`uselinkshot.com`})]})})]})}function c({post:e,comingSoon:n}){let r=(0,a.jsxs)(`div`,{className:`border-border group flex items-start justify-between gap-4 rounded-xl border px-5 py-5 transition-colors ${n?`opacity-60`:`hover:border-foreground

1/20 hover:bg-muted/30 cursor-pointer`}`,children:[(0,a.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,a.jsxs)(`div`,{className:`mb-2 flex items-center gap-2`,children:[(0,a.jsx)(`span`,{className:`bg-muted text-muted-foreground rounded-full px-2.5 py-0.5 font-mono text-[10px] font-medium tracking-wide`,children:e.tag}),n&&(0,a.jsx)(`span`,{className:`border-border rounded-full border px-2.5 py-0.5 font-mono text-[10px] tracking-wide`,children:`coming soon`})]}),(0,a.jsx)(`h2`,{className:`text-foreground mb-1.5 text-base leading-snug font-semibold`,children:e.title}),(0,a.jsx)(`p`,{className:`text-muted-foreground text-sm leading-relaxed`,children:e.description})]}),!n&&(0,a.jsx)(i,{className:`text-muted-foreground group-hover:text-foreground mt-1 size-4 shrink-0 transition-colors`})]});return n?(0,a.jsx)(`div`,{children:r},e.slug):(0,a.jsx)(t,{to:`/blog/${e.slug}`,children:r},e.slug)}export{s as component};