Skip to content

fix OG images loading by API proxy with cache #2139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Simek wants to merge 3 commits into from
Closed

fix OG images loading by API proxy with cache #2139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
23494f9
fix OG images loading by API proxy with cache
Simek Jan 19, 2026
9e8c2d5
fix typing
Simek Jan 19, 2026
8c209f6
temporary code for PR preview
Simek Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 4 additions & 9 deletions components/PageMeta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
import Head from 'next/head';

const site = {
title: 'React Native Directory',
description: 'An interactive directory to find packages for your React Native apps.',
};

const BASE_OG_URL = 'https://og.expo.dev/?theme=rnd';
import { BASE_META } from '~/util/Constants';

type PageMetaProps = {
title?: string;
Expand All @@ -18,15 +13,15 @@ export default function PageMeta({
title,
searchQuery,
path,
description = site.description,
description = BASE_META.description,
}: PageMetaProps) {
const pageTitle = `${title ? title + ' • ' : ''}${site.title}`;
const pageTitle = `${title ? title + ' • ' : ''}${BASE_META.title}`;
const parsedSearchQuery = Array.isArray(searchQuery) ? searchQuery[0] : searchQuery;
const finalDescription = parsedSearchQuery
? `Search results for keyword: '${parsedSearchQuery}'`
: description;

const socialImage = `${BASE_OG_URL}&title=${encodeURIComponent(pageTitle)}&description=${encodeURIComponent(finalDescription)}`;
const socialImage = `https://${window.location.host}/api/proxy/og?title=${encodeURIComponent(pageTitle)}&description=${encodeURIComponent(finalDescription)}`;

return (
<Head>
Expand Down
39 changes: 39 additions & 0 deletions pages/api/proxy/og.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { type NextApiRequest, type NextApiResponse } from 'next';

import { BASE_META, NEXT_1H_CACHE_HEADER } from '~/util/Constants';
import { parseQueryParams } from '~/util/parseQueryParams';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { title, description } = parseQueryParams(req.query);

const ogTitle = title ? title.toString().trim() : BASE_META.title;
const ogDescription = description ? description.toString().trim() : BASE_META.description;

res.setHeader('Cache-Control', 'public, s-maxage=600, stale-while-revalidate=300');

const result = await fetch(
`https://og.expo.dev/?theme=rnd&title=${encodeURIComponent(ogTitle)}&description=${encodeURIComponent(ogDescription)}`,
NEXT_1H_CACHE_HEADER
);

if (!result.ok) {
res.setHeader('Content-Type', 'application/json');
res.statusCode = 502;
return res.json({ error: `Failed to fetch OG image.` });
}

const upstreamContentType = result.headers.get('content-type') ?? 'image/png';
const upstreamContentLength = result.headers.get('content-length');

if (upstreamContentLength) {
res.setHeader('Content-Length', upstreamContentLength);
}

res.setHeader('Content-Type', upstreamContentType);
res.statusCode = 200;

const arrayBuffer = await result.arrayBuffer();
const buffer = Buffer.from(arrayBuffer);

return res.send(buffer);
}
5 changes: 5 additions & 0 deletions util/Constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { TimeRange } from '~/util/datetime';

export const BASE_META = {
title: 'React Native Directory',
description: 'An interactive directory to find packages for your React Native apps.',
};

export const NUM_PER_PAGE = 30;

export const EMPTY_PACKAGE_DATA = {
Expand Down