granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More work on image embeds (#423)

Browse source 
* Writes redirect for preview images so we're not embedding the API URL
in user-facing pages
* Adds the NextJs API page that actually serves the image
* Use a more straightforward URL construction method
* Add the og:image:width and og:image:height
This commit is contained in:
Justin Edmund 2025-01-20 03:51:21 -08:00 committed by GitHub
parent 2628d1745b
commit eff96e5a37
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 42 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/party/PartyHead/index.tsx
View file

@ -19,7 +19,9 @@ const PartyHead = ({ party, meta }: Props) => {
const router = useRouter()
const locale =
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
const previewUrl = api.previewUrl(party.id)
const previewUrl = `${
process.env.NEXT_PUBLIC_SITE_URL || 'https://granblue.team'
}/preview/${party.shortcode}`
return (
<Head>
@ -55,6 +57,8 @@ const PartyHead = ({ party, meta }: Props) => {
/>
<meta property="og:type" content="website" />
<meta property="og:image" content={previewUrl} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" />

4
next.config.js
View file

@ -35,6 +35,10 @@ module.exports = {
source: '/roadmap',
destination: '/about',
},
{
source: '/p/:shortcode/preview',
destination: '/api/preview/:shortcode',
},
{
source: '/p/:shortcode/characters',
destination: '/p/:shortcode',

33
pages/api/preview/[shortcode].ts Normal file
View file

@ -0,0 +1,33 @@
import type { NextApiRequest, NextApiResponse } from 'next'
import axios from 'axios'
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const { shortcode } = req.query
if (!shortcode || Array.isArray(shortcode)) {
return res.status(400).json({ error: 'Invalid shortcode' })
}
try {
const response = await axios({
method: 'GET',
url: `${process.env.API_URL}/api/v1/parties/${shortcode}/preview`,
responseType: 'arraybuffer',
headers: {
Accept: 'image/png',
},
})
// Set correct content type and caching headers
res.setHeader('Content-Type', 'image/png')
res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
return res.send(response.data)
} catch (error) {
console.error('Error fetching preview:', error)
return res.status(500).json({ error: 'Failed to fetch preview' })
}
}