beenull/libremdb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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
import { GetServerSideProps, GetStaticProps, GetStaticPaths } from 'next';
import { useRouter } from 'next/router';
import { GetServerSideProps, GetStaticProps, GetStaticPaths } from 'next'
import { useRouter } from 'next/router'
// local
import Meta from '../../../components/Meta/Meta';
import Layout from '../../../layouts/Layout';
import title from '../../../utils/fetchers/title';
import Meta from '../../../components/Meta/Meta'
import Layout from '../../../layouts/Layout'
import title from '../../../utils/fetchers/title'
// components
import ErrorInfo from '../../../components/Error/ErrorInfo';
import Basic from '../../../components/title/Basic';
import Media from '../../../components/title/Media';
import Cast from '../../../components/title/Cast';
import DidYouKnow from '../../../components/title/DidYouKnow';
import Info from '../../../components/title/Info';
import Reviews from '../../../components/title/Reviews';
import MoreLikeThis from '../../../components/title/MoreLikeThis';
import ErrorInfo from '../../../components/Error/ErrorInfo'
import Basic from '../../../components/title/Basic'
import Media from '../../../components/title/Media'
import Cast from '../../../components/title/Cast'
import DidYouKnow from '../../../components/title/DidYouKnow'
import Info from '../../../components/title/Info'
import Reviews from '../../../components/title/Reviews'
import MoreLikeThis from '../../../components/title/MoreLikeThis'
// misc
import Title from '../../../interfaces/shared/title';
import { AppError } from '../../../interfaces/shared/error';
import Title from '../../../interfaces/shared/title'
import { AppError } from '../../../interfaces/shared/error'
// 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
const TitleInfo = ({ data, error }: Props) => {
const router = useRouter();
const router = useRouter()
if (error)
return <ErrorInfo message={error.message} statusCode={error.statusCode} />;
return <ErrorInfo message={error.message} statusCode={error.statusCode} />
const info = {
meta: data.meta,
@ -36,7 +37,7 @@ const TitleInfo = ({ data, error }: Props) => {
boxOffice: data.boxOffice,
technicalSpecs: data.technicalSpecs,
accolades: data.accolades,
};
}
return (
<>
@ -46,7 +47,12 @@ const TitleInfo = ({ data, error }: Props) => {
})`}
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}>
<Basic data={data.basic} className={styles.basic} />
<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} />
</Layout>
</>
);
};
)
}
// TO-DO: make a getServerSideProps wrapper for handling errors
export const getServerSideProps: GetServerSideProps = async ctx => {
const titleId = ctx.params!.titleId as string;
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const titleId = ctx.params!.titleId as string
try {
const data = await title(titleId);
const data = await title(titleId)
return { props: { data, error: null } };
return { props: { data, error: null } }
} catch (error: any) {
const { message, statusCode } = error;
ctx.res.statusCode = statusCode;
ctx.res.statusMessage = message;
const { message, statusCode } = error
ctx.res.statusCode = statusCode
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.
/*