Skip to content

Commit c104db9

Browse files
DexterStoreyDexterStorey
committed
rollback OG image modifications
1 parent 1010a89 commit c104db9

2 files changed

Lines changed: 37 additions & 103 deletions

File tree

‎src/app/(rest)/blog/[slug]/opengraph-image.tsx‎

Lines changed: 18 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { readFile } from 'node:fs/promises'
22
import path from 'node:path'
33
import { ImageResponse } from 'next/og'
44
import { getPost, getPostSlugs } from '~/lib/utils/posts'
5-
import { getBaseUrl } from '~/lib/utils'
65
import { Rubric } from '~/ui/logos/rubric'
76

87
export const runtime = 'nodejs'
@@ -16,7 +15,6 @@ export const size = {
1615

1716
const fontDataPromise = readFile(path.join(process.cwd(), 'src/app/fonts/matter-regular.woff'))
1817
const bannerSrcCache = new Map<string, string>()
19-
const ABSOLUTE_URL_PATTERN = /^https?:\/\//i
2018

2119
export async function generateStaticParams() {
2220
const slugs = await getPostSlugs()
@@ -98,68 +96,39 @@ export const Component = ({
9896
// Builds a cached data URI for banner images; input '/images/primitives.png' -> output 'data:image/png;base64,...'.
9997
const getBannerSrc = async (bannerImageUrl: string) => {
10098
const cached = bannerSrcCache.get(bannerImageUrl)
101-
if (cached !== undefined) return cached
99+
if (cached) return cached
102100

103101
const bannerPath = bannerImageUrl.replace(/^\//, '')
104102
const extension = path.extname(bannerPath).toLowerCase()
105-
const fallbackMimeType =
103+
const mimeType =
106104
extension === '.png'
107105
? 'image/png'
108106
: extension === '.jpg' || extension === '.jpeg'
109107
? 'image/jpeg'
110108
: extension === '.webp'
111109
? 'image/webp'
112110
: 'image/png'
113-
114-
try {
115-
const bannerData = await readFile(path.join(process.cwd(), 'public', bannerPath), 'base64')
116-
const bannerSrc = `data:${fallbackMimeType};base64,${bannerData}`
117-
bannerSrcCache.set(bannerImageUrl, bannerSrc)
118-
return bannerSrc
119-
} catch {
120-
// Local assets may not exist in every environment. Try HTTP as a fallback.
121-
}
122-
123-
const bannerUrl = ABSOLUTE_URL_PATTERN.test(bannerImageUrl)
124-
? bannerImageUrl
125-
: new URL(bannerImageUrl, getBaseUrl()).toString()
126-
127-
try {
128-
const response = await fetch(bannerUrl, { next: { revalidate } })
129-
if (!response.ok) throw new Error('Failed to fetch banner image')
130-
const contentType = response.headers.get('content-type')?.split(';')[0] || fallbackMimeType
131-
const bannerData = Buffer.from(await response.arrayBuffer()).toString('base64')
132-
const bannerSrc = `data:${contentType};base64,${bannerData}`
133-
bannerSrcCache.set(bannerImageUrl, bannerSrc)
134-
return bannerSrc
135-
} catch {
136-
// Keep image generation resilient even if banner lookup fails.
137-
bannerSrcCache.set(bannerImageUrl, '')
138-
return ''
139-
}
111+
const bannerData = await readFile(path.join(process.cwd(), 'public', bannerPath), 'base64')
112+
const bannerSrc = `data:${mimeType};base64,${bannerData}`
113+
bannerSrcCache.set(bannerImageUrl, bannerSrc)
114+
return bannerSrc
140115
}
141116

142117
export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
143118
const { slug } = await params
144119

145-
const [{ metadata }, localFont] = await Promise.all([
146-
getPost(slug),
147-
fontDataPromise
148-
])
120+
const [{ metadata }, localFont] = await Promise.all([getPost(slug), fontDataPromise])
149121
const bannerSrc = await getBannerSrc(metadata.bannerImageUrl)
150122

151-
return new ImageResponse(
152-
<Component title={metadata.title} backgroundImageUrl={bannerSrc} />,
153-
{
154-
...size,
155-
fonts: [
156-
{
157-
data: localFont,
158-
name: 'Matter',
159-
style: 'normal',
160-
weight: 400
161-
}
162-
]
163-
}
164-
)
123+
return new ImageResponse(<Component title={metadata.title} backgroundImageUrl={bannerSrc} />, {
124+
...size,
125+
fonts: [
126+
{
127+
data: localFont,
128+
name: 'Matter',
129+
style: 'normal',
130+
weight: 400
131+
}
132+
]
133+
})
165134
}

‎src/app/(rest)/blog/[slug]/twitter-image.tsx‎

Lines changed: 19 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { readFile } from 'node:fs/promises'
22
import path from 'node:path'
33
import { ImageResponse } from 'next/og'
44
import { getPost, getPostSlugs } from '~/lib/utils/posts'
5-
import { getBaseUrl } from '~/lib/utils'
65
import { Rubric } from '~/ui/logos/rubric'
76

87
export const runtime = 'nodejs'
@@ -15,7 +14,6 @@ export const size = {
1514

1615
const fontDataPromise = readFile(path.join(process.cwd(), 'src/app/fonts/matter-regular.woff'))
1716
const bannerSrcCache = new Map<string, string>()
18-
const ABSOLUTE_URL_PATTERN = /^https?:\/\//i
1917

2018
export async function generateStaticParams() {
2119
const slugs = await getPostSlugs()
@@ -97,72 +95,39 @@ export const Component = ({
9795
// Builds a cached data URI for banner images; input '/images/primitives.png' -> output 'data:image/png;base64,...'.
9896
const getBannerSrc = async (bannerImageUrl: string) => {
9997
const cached = bannerSrcCache.get(bannerImageUrl)
100-
if (cached !== undefined) return cached
98+
if (cached) return cached
10199

102100
const bannerPath = bannerImageUrl.replace(/^\//, '')
103101
const extension = path.extname(bannerPath).toLowerCase()
104-
const fallbackMimeType =
102+
const mimeType =
105103
extension === '.png'
106104
? 'image/png'
107105
: extension === '.jpg' || extension === '.jpeg'
108106
? 'image/jpeg'
109107
: extension === '.webp'
110108
? 'image/webp'
111109
: 'image/png'
112-
113-
try {
114-
const bannerData = await readFile(path.join(process.cwd(), 'public', bannerPath), 'base64')
115-
const bannerSrc = `data:${fallbackMimeType};base64,${bannerData}`
116-
bannerSrcCache.set(bannerImageUrl, bannerSrc)
117-
return bannerSrc
118-
} catch {
119-
// Local assets may not exist in every environment. Try HTTP as a fallback.
120-
}
121-
122-
const bannerUrl = ABSOLUTE_URL_PATTERN.test(bannerImageUrl)
123-
? bannerImageUrl
124-
: new URL(bannerImageUrl, getBaseUrl()).toString()
125-
126-
try {
127-
const response = await fetch(bannerUrl, { next: { revalidate } })
128-
if (!response.ok) throw new Error('Failed to fetch banner image')
129-
const contentType = response.headers.get('content-type')?.split(';')[0] || fallbackMimeType
130-
const bannerData = Buffer.from(await response.arrayBuffer()).toString('base64')
131-
const bannerSrc = `data:${contentType};base64,${bannerData}`
132-
bannerSrcCache.set(bannerImageUrl, bannerSrc)
133-
return bannerSrc
134-
} catch {
135-
// Keep image generation resilient even if banner lookup fails.
136-
bannerSrcCache.set(bannerImageUrl, '')
137-
return ''
138-
}
110+
const bannerData = await readFile(path.join(process.cwd(), 'public', bannerPath), 'base64')
111+
const bannerSrc = `data:${mimeType};base64,${bannerData}`
112+
bannerSrcCache.set(bannerImageUrl, bannerSrc)
113+
return bannerSrc
139114
}
140115

141-
export default async function Response({
142-
params
143-
}: {
144-
params: Promise<{ slug: string }>
145-
}) {
116+
export default async function Response({ params }: { params: Promise<{ slug: string }> }) {
146117
const { slug } = await params
147118

148-
const [{ metadata }, localFont] = await Promise.all([
149-
getPost(slug),
150-
fontDataPromise
151-
])
119+
const [{ metadata }, localFont] = await Promise.all([getPost(slug), fontDataPromise])
152120
const bannerSrc = await getBannerSrc(metadata.bannerImageUrl)
153121

154-
return new ImageResponse(
155-
<Component title={metadata.title} backgroundImageUrl={bannerSrc} />,
156-
{
157-
...size,
158-
fonts: [
159-
{
160-
data: localFont,
161-
name: 'Matter',
162-
style: 'normal',
163-
weight: 400
164-
}
165-
]
166-
}
167-
)
122+
return new ImageResponse(<Component title={metadata.title} backgroundImageUrl={bannerSrc} />, {
123+
...size,
124+
fonts: [
125+
{
126+
data: localFont,
127+
name: 'Matter',
128+
style: 'normal',
129+
weight: 400
130+
}
131+
]
132+
})
168133
}

0 commit comments

Comments
 (0)