ngn/libremdb
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Activity

feat: add "og:image" property for social media embeds

Browse Source
This commit is contained in:
httpjamesm 2022-10-30 19:18:12 -04:00
parent 478b45977d
commit a2fc2322a3
1 changed files with 39 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/pages/title/[titleId]/index.tsx
View File

@ -1,33 +1,34 @@
// external // external
import { GetServerSideProps, GetStaticProps, GetStaticPaths } from 'next'; import { GetServerSideProps, GetStaticProps, GetStaticPaths } from 'next'
import { useRouter } from 'next/router'; import { useRouter } from 'next/router'
// local // local
import Meta from '../../../components/Meta/Meta'; import Meta from '../../../components/Meta/Meta'
import Layout from '../../../layouts/Layout'; import Layout from '../../../layouts/Layout'
import title from '../../../utils/fetchers/title'; import title from '../../../utils/fetchers/title'
// components // components
import ErrorInfo from '../../../components/Error/ErrorInfo'; import ErrorInfo from '../../../components/Error/ErrorInfo'
import Basic from '../../../components/title/Basic'; import Basic from '../../../components/title/Basic'
import Media from '../../../components/title/Media'; import Media from '../../../components/title/Media'
import Cast from '../../../components/title/Cast'; import Cast from '../../../components/title/Cast'
import DidYouKnow from '../../../components/title/DidYouKnow'; import DidYouKnow from '../../../components/title/DidYouKnow'
import Info from '../../../components/title/Info'; import Info from '../../../components/title/Info'
import Reviews from '../../../components/title/Reviews'; import Reviews from '../../../components/title/Reviews'
import MoreLikeThis from '../../../components/title/MoreLikeThis'; import MoreLikeThis from '../../../components/title/MoreLikeThis'
// misc // misc
import Title from '../../../interfaces/shared/title'; import Title from '../../../interfaces/shared/title'
import { AppError } from '../../../interfaces/shared/error'; import { AppError } from '../../../interfaces/shared/error'
// styles // styles
import styles from '../../../styles/modules/pages/title/title.module.scss'; import styles from '../../../styles/modules/pages/title/title.module.scss'
import Head from 'next/head'
type Props = { data: Title; error: null } | { error: AppError; data: null }; type Props = { data: Title; error: null } | { error: AppError; data: null }
// TO-DO: make a wrapper page component to display errors, if present in props // TO-DO: make a wrapper page component to display errors, if present in props
const TitleInfo = ({ data, error }: Props) => { const TitleInfo = ({ data, error }: Props) => {
const router = useRouter(); const router = useRouter()
if (error) if (error)
return <ErrorInfo message={error.message} statusCode={error.statusCode} />; return <ErrorInfo message={error.message} statusCode={error.statusCode} />
const info = { const info = {
meta: data.meta, meta: data.meta,
@ -36,7 +37,7 @@ const TitleInfo = ({ data, error }: Props) => {
boxOffice: data.boxOffice, boxOffice: data.boxOffice,
technicalSpecs: data.technicalSpecs, technicalSpecs: data.technicalSpecs,
accolades: data.accolades, accolades: data.accolades,
}; }
return ( return (
<> <>
@ -46,7 +47,12 @@ const TitleInfo = ({ data, error }: Props) => {
})`} })`}
description={data.basic.plot || undefined} description={data.basic.plot || undefined}
/> />
<Head>
<meta
title="og:image"
content={data.media.images.images[0].url || '/icon-512.png'}
/>
</Head>
<Layout className={styles.title}> <Layout className={styles.title}>
<Basic data={data.basic} className={styles.basic} /> <Basic data={data.basic} className={styles.basic} />
<Media className={styles.media} media={data.media} router={router} /> <Media className={styles.media} media={data.media} router={router} />
@ -59,27 +65,27 @@ const TitleInfo = ({ data, error }: Props) => {
<MoreLikeThis className={styles.related} data={data.moreLikeThis} /> <MoreLikeThis className={styles.related} data={data.moreLikeThis} />
</Layout> </Layout>
</> </>
); )
}; }
// TO-DO: make a getServerSideProps wrapper for handling errors // TO-DO: make a getServerSideProps wrapper for handling errors
export const getServerSideProps: GetServerSideProps = async ctx => { export const getServerSideProps: GetServerSideProps = async (ctx) => {
const titleId = ctx.params!.titleId as string; const titleId = ctx.params!.titleId as string
try { try {
const data = await title(titleId); const data = await title(titleId)
return { props: { data, error: null } }; return { props: { data, error: null } }
} catch (error: any) { } catch (error: any) {
const { message, statusCode } = error; const { message, statusCode } = error
ctx.res.statusCode = statusCode; ctx.res.statusCode = statusCode
ctx.res.statusMessage = message; ctx.res.statusMessage = message
return { props: { error: { message, statusCode }, data: null } }; return { props: { error: { message, statusCode }, data: null } }
} }
}; }
export default TitleInfo; export default TitleInfo
// could've used getStaticProps instead of getServerSideProps, but meh. // could've used getStaticProps instead of getServerSideProps, but meh.
/* /*