4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:Tb24,"use client"; import { useMemo } from "react"; import { ImageOff } from "lucide-react"; import { cn } from "@/lib/utils"; import { OgCategorySection } from "./og-category-section"; interface OgRoute { path: string; title?: string; ogImageUrl: string; category?: string; } interface OgImageExplorerProps { routes: OgRoute[]; maxPerCategory?: number; showPath?: boolean; showTitle?: boolean; className?: string; } function getCategoryFromPath(path: string): string { const segments = path.split("/").filter(Boolean); return segments[0] || "root"; } export function OgImageExplorer({ routes, maxPerCategory = 8, showPath = true, showTitle = true, className, }: OgImageExplorerProps) { const groupedRoutes = useMemo(() => { const groups = new Map(); for (const route of routes) { const category = route.category || getCategoryFromPath(route.path); const existing = groups.get(category) || []; groups.set(category, [...existing, route]); } const sortedCategories = Array.from(groups.entries()).sort(([a], [b]) => { if (a === "root") return -1; if (b === "root") return 1; return a.localeCompare(b); }); return sortedCategories; }, [routes]); if (routes.length === 0) { return (

No routes configured

Add routes to explore your OG images

); } return (

OG Image Explorer

{routes.length} route{routes.length !== 1 ? "s" : ""} across{" "} {groupedRoutes.length} categor {groupedRoutes.length !== 1 ? "ies" : "y"}

{groupedRoutes.map(([category, categoryRoutes]) => ( ))}

); } 52:Ta55,"use client"; import { useState } from "react"; import { ChevronDown, ChevronUp } from "lucide-react"; import { cn } from "@/lib/utils"; import { OgImageCard } from "./og-image-card"; interface OgRoute { path: string; title?: string; ogImageUrl: string; category?: string; } interface OgCategorySectionProps { category: string; routes: OgRoute[]; maxItems?: number; showPath?: boolean; showTitle?: boolean; className?: string; } export function OgCategorySection({ category, routes, maxItems = 8, showPath = true, showTitle = true, className, }: OgCategorySectionProps) { const [expanded, setExpanded] = useState(false); const hasMore = routes.length > maxItems; const visibleRoutes = expanded ? routes : routes.slice(0, maxItems); const hiddenCount = routes.length - maxItems; const formatCategoryName = (cat: string) => { if (cat === "root") return "Root"; return cat.charAt(0).toUpperCase() + cat.slice(1); }; return (

{formatCategoryName(category)}

{routes.length}

{hasMore && ( )}

{visibleRoutes.map((route) => ( ))}

); } 53:Taa9,"use client"; import { useState } from "react"; import { ExternalLink, ImageOff } from "lucide-react"; import { cn } from "@/lib/utils"; type ImageStatus = "loading" | "loaded" | "error"; interface OgImageCardProps { path: string; title?: string; ogImageUrl: string; showPath?: boolean; showTitle?: boolean; className?: string; } export function OgImageCard({ path, title, ogImageUrl, showPath = true, showTitle = true, className, }: OgImageCardProps) { const [status, setStatus] = useState("loading"); const handleClick = () => { window.open(ogImageUrl, "_blank", "noopener,noreferrer"); }; const statusBorderColor = { loading: "border-muted-foreground/30", loaded: "border-green-500/50", error: "border-red-500/50", }; return (

{showTitle && title && ( {title} )} {showPath && ( {path} )}

); } 54:Tb7e,// Auto-generated by scripts/generate-og-routes.ts // Run: bun run scripts/generate-og-routes.ts import { OgImageExplorer } from "../../components/elements/og-image-explorer"; const BASE_URL = "https://tryelements.dev"; const ROUTES = [ // Pages (root-level) { path: "/", title: "Home", category: "pages" }, { path: "/contributors", title: "Contributors", category: "pages" }, { path: "/sponsor", title: "Sponsor", category: "pages" }, // Providers { path: "/docs", title: "Documentation", category: "providers" }, { path: "/docs/clerk", title: "Clerk", category: "providers" }, { path: "/docs/devtools", title: "Dev Tools", category: "providers" }, { path: "/docs/github", title: "GitHub", category: "providers" }, { path: "/docs/logos", title: "Brand Logos", category: "providers" }, { path: "/docs/polar", title: "Polar", category: "providers" }, { path: "/docs/theme", title: "Theme", category: "providers" }, { path: "/docs/tinte", title: "Tinte", category: "providers" }, { path: "/docs/uploadthing", title: "UploadThing", category: "providers" }, // Components - Dev Tools { path: "/docs/devtools/og-image-explorer", title: "OG Image Explorer", category: "devtools", }, // Components - GitHub { path: "/docs/github/github-contributions", title: "GitHub Contributions", category: "github", }, { path: "/docs/github/github-stars", title: "GitHub Stars", category: "github", }, // Components - Polar { path: "/docs/polar/polar-sponsorship", title: "Polar Sponsorship", category: "polar", }, // Components - Theme { path: "/docs/theme/theme-switcher-button", title: "Theme Switcher Button", category: "theme", }, { path: "/docs/theme/theme-switcher-classic", title: "Theme Switcher Classic", category: "theme", }, { path: "/docs/theme/theme-switcher-dropdown", title: "Theme Switcher Dropdown", category: "theme", }, { path: "/docs/theme/theme-switcher-multi-button", title: "Theme Switcher Multi Button", category: "theme", }, { path: "/docs/theme/theme-switcher-switch", title: "Theme Switcher Switch", category: "theme", }, { path: "/docs/theme/theme-switcher-toggle", title: "Theme Switcher Toggle", category: "theme", }, // Components - Tinte { path: "/docs/tinte/tinte-editor", title: "Tinte Theme Editor", category: "tinte", }, // Components - UploadThing { path: "/docs/uploadthing/uploadthing-button", title: "UploadThing Button", category: "uploadthing", }, { path: "/docs/uploadthing/uploadthing-dropzone", title: "UploadThing Dropzone", category: "uploadthing", }, ].map((route) => ({ ...route, ogImageUrl: `${BASE_URL}${route.path}/opengraph-image`, })); export default function OgImageExplorerPage() { return ; } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.tryelements.dev/r/og-image-explorer.json","proxyUrl":"https://shadcnregistry.com/r/elements/og-image-explorer","itemId":"@elements/og-image-explorer"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/default/blocks/media/og-image-explorer/components/elements/og-image-explorer.tsx","content":"$51","type":"registry:component"},{"path":"registry/default/blocks/media/og-image-explorer/components/elements/og-category-section.tsx","content":"$52","type":"registry:component"},{"path":"registry/default/blocks/media/og-image-explorer/components/elements/og-image-card.tsx","content":"$53","type":"registry:component"},{"path":"registry/default/blocks/media/og-image-explorer/routes/layout.tsx","content":"export default function OgImageExplorerLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n

{children}

\n );\n}\n","type":"registry:page","target":"app/og-explorer/layout.tsx"},{"path":"registry/default/blocks/media/og-image-explorer/routes/page.tsx","content":"$54","type":"registry:page","target":"app/og-explorer/page.tsx"}]}]]}],"$L55"]}]

OG Image Explorer

Installation

Files

components

app

Styles