-
Notifications
You must be signed in to change notification settings - Fork 505
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
OG image: automatically generate image on container start (#2496)
* make script to generate OG image at container start * add prod service URL * remove og_image.png * update path to file * [skip ci] remove app url from payload
- Loading branch information
Showing
11 changed files
with
93 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /* eslint-disable no-console */ | ||
| import fs from 'fs'; | ||
| import path from 'path'; | ||
|
|
||
| console.log('🎨 Generating OG image...'); | ||
|
|
||
| const targetFile = path.resolve(process.cwd(), 'public/static/og_image.png'); | ||
|
|
||
| function copyPlaceholderImage() { | ||
| const sourceFile = path.resolve(process.cwd(), 'public/static/og_placeholder.png'); | ||
| fs.copyFileSync(sourceFile, targetFile); | ||
| } | ||
|
|
||
| if (process.env.NEXT_PUBLIC_OG_IMAGE_URL) { | ||
| console.log('⏩ NEXT_PUBLIC_OG_IMAGE_URL is set. Skipping OG image generation...'); | ||
| } else if (!process.env.NEXT_PUBLIC_NETWORK_NAME) { | ||
| console.log('⏩ NEXT_PUBLIC_NETWORK_NAME is not set. Copying placeholder image...'); | ||
| copyPlaceholderImage(); | ||
| } else if (!process.env.NEXT_PUBLIC_NETWORK_LOGO && !process.env.NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG) { | ||
| console.log('⏩ Neither NEXT_PUBLIC_NETWORK_LOGO nor NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG is set. Copying placeholder image...'); | ||
| copyPlaceholderImage(); | ||
| } else { | ||
| try { | ||
| const bannerConfig = JSON.parse(process.env.NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG?.replaceAll('\'', '"') || '{}'); | ||
| const data = { | ||
| title: `${ process.env.NEXT_PUBLIC_NETWORK_NAME } explorer`, | ||
| logo_url: process.env.NEXT_PUBLIC_NETWORK_LOGO_DARK ?? process.env.NEXT_PUBLIC_NETWORK_LOGO, | ||
| background: bannerConfig.background?.[0], | ||
| title_color: bannerConfig.text_color?.[0], | ||
| invert_logo: !process.env.NEXT_PUBLIC_NETWORK_LOGO_DARK, | ||
| }; | ||
|
|
||
| console.log('⏳ Making request to OG image generator service...'); | ||
|
|
||
| const response = await fetch('https://bigs.services.blockscout.com/generate/og', { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify(data), | ||
| }); | ||
|
|
||
| if (response.ok) { | ||
| console.log('⬇️ Downloading the image...'); | ||
| const buffer = await response.arrayBuffer(); | ||
| const imageBuffer = Buffer.from(buffer); | ||
| fs.writeFileSync(targetFile, imageBuffer); | ||
| } else { | ||
| const payload = response.headers.get('Content-type')?.includes('application/json') ? await response.json() : await response.text(); | ||
| console.error('🛑 Failed to generate OG image. Response:', payload); | ||
| console.log('Copying placeholder image...'); | ||
| copyPlaceholderImage(); | ||
| } | ||
| } catch (error) { | ||
| console.error('🛑 Failed to generate OG image. Error:', error?.message); | ||
| console.log('Copying placeholder image...'); | ||
| copyPlaceholderImage(); | ||
| } | ||
| } | ||
|
|
||
| console.log('✅ Done.'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| #!/bin/bash | ||
|
|
||
| # use this script for testing the og image generator | ||
|
|
||
| config_file="./configs/envs/.env.zkevm" | ||
|
|
||
| dotenv \ | ||
| -e $config_file \ | ||
| -- bash -c 'node ./deploy/scripts/og_image_generator.js' |