Adds og:image for showing the page preview (#421)

This commit is contained in:
Justin Edmund 2025-01-18 09:08:11 -08:00 committed by GitHub
parent 4a30dbbf9f
commit 0dc03d44f3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 8 additions and 0 deletions

View file

@ -2,6 +2,7 @@ import React from 'react'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import api from '~utils/api'
import generateTitle from '~utils/generateTitle'
@ -18,6 +19,7 @@ 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.shortcode)
return (
<Head>
@ -52,6 +54,7 @@ const PartyHead = ({ party, meta }: Props) => {
content={`https://app.granblue.team/p/${party.shortcode}`}
/>
<meta property="og:type" content="website" />
<meta property="og:image" content={previewUrl} />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" />
@ -67,6 +70,7 @@ const PartyHead = ({ party, meta }: Props) => {
raidName: party.raid ? party.raid.name[locale] : '',
})}
/>
<meta name="twitter:image" content={previewUrl} />
</Head>
)
}

View file

@ -139,6 +139,10 @@ class Api {
return axios.get(resourceUrl, params)
}
previewUrl(shortcode: string): string {
return `${this.url}/parties/${shortcode}/preview`
}
raidGroups(params?: {}) {
const resourceUrl = `${this.url}/raids/groups`
return axios.get(resourceUrl, params)