1import { ImageResponse } from 'workers-og'
2
3export async function onRequest(context) {
4  try {
5    const url = new URL(context.request.url)
6
7    const title = url.searchParams.get('title') || 'Default Title'
8    const html = `
9      <div style="height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: black; font-family: 'Open Sans', sans-serif; background-repeat: no-repeat; background-size: cover;">
10      <div style="display: flex; flex-direction: column; height: 100%; width: 100%; background-image: url('${url.protocol}//${url.host}/img/bg-articles.png'); background-size: 100% 100%;">
11        <div style="display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center;">
12        <div style="display: flex; width: 100%;">
13          <div style="display: flex; flex-direction: column; width: 100%; justify-content: space-between;">
14          <h2 style="font-family: 'Open Sans', sans-serif; font-size: 72px; font-weight: bold; letter-spacing: -0.05em; color: white; text-align: left; margin-left: 12%; width: 70%;">
15            ${title}
16          </h2>
17          </div>
18        </div>
19        </div>
20      </div>
21      </div>
22    `
23
24    return new ImageResponse(html, {
25      // 3200 x 1800 - bg dimensions (16 x 9)
26      // 1200 x 675 - recommended OG dimensions (16 x 9)
27      width: 1200,
28      height: 675,
29      fonts: [
30        {
31          name: 'Open Sans',
32          data: await loadGoogleFont('Open Sans', title),
33          style: 'bold'
34        }
35      ]
36    })
37  } catch (error) {
38    console.error('Error generating image:', error)
39    return new Response('Error generating image', { status: 500 })
40  }
41}
42
43async function loadGoogleFont(font, text) {
44  const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}`
45  const css = await (await fetch(url)).text()
46  const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)
47
48  if (resource) {
49    const response = await fetch(resource[1])
50    if (response.status == 200) {
51      return await response.arrayBuffer()
52    }
53  }
54
55  throw new Error('failed to load font data')
56}
57

1import { ImageResponse } from 'workers-og'
2
3export async function onRequest(context) {
4  try {
5    const url = new URL(context.request.url)
6
7    const title = url.searchParams.get('title') || 'Default Title'
8    const html = `
9      <div style="height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: black; font-family: 'Open Sans', sans-serif; background-repeat: no-repeat; background-size: cover;">
10      <div style="display: flex; flex-direction: column; height: 100%; width: 100%; background-image: url('${url.protocol}//${url.host}/img/bg-articles.png'); background-size: 100% 100%;">
11        <div style="display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center;">
12        <div style="display: flex; width: 100%;">
13          <div style="display: flex; flex-direction: column; width: 100%; justify-content: space-between;">
14          <h2 style="font-family: 'Open Sans', sans-serif; font-size: 72px; font-weight: bold; letter-spacing: -0.05em; color: white; text-align: left; margin-left: 12%; width: 70%;">
15            ${title}
16          </h2>
17          </div>
18        </div>
19        </div>
20      </div>
21      </div>
22    `
23
24    return new ImageResponse(html, {
25      // 3200 x 1800 - bg dimensions (16 x 9)
26      // 1200 x 675 - recommended OG dimensions (16 x 9)
27      width: 1200,
28      height: 675,
29      fonts: [
30        {
31          name: 'Open Sans',
32          data: await loadGoogleFont('Open Sans', title),
33          style: 'bold'
34        }
35      ]
36    })
37  } catch (error) {
38    console.error('Error generating image:', error)
39    return new Response('Error generating image', { status: 500 })
40  }
41}
42
43async function loadGoogleFont(font, text) {
44  const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}`
45  const css = await (await fetch(url)).text()
46  const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)
47
48  if (resource) {
49    const response = await fetch(resource[1])
50    if (response.status == 200) {
51      return await response.arrayBuffer()
52    }
53  }
54
55  throw new Error('failed to load font data')
56}
57