fix(og): use fqdn for og:image

statsfm · Apr 11, 2024 · f60a64e · f60a64e
1 parent b0f4d36
commit f60a64e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/pages/artist/[id].tsx b/src/pages/artist/[id].tsx
@@ -41,6 +41,7 @@ const Genres: FC<Pick<statsfm.Artist, 'genres'>> = ({ genres }) => (
 
 type Props = SSRProps & {
   artist: statsfm.Artist;
+  origin: string;
 };
 
 export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
@@ -60,15 +61,21 @@ export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
 
   const user = await fetchUser(ctx);
 
+  let protocol = ctx.req.headers['x-forwarded-proto'] ?? 'https';
+  if (process.env.NODE_ENV === 'development') protocol = 'http';
+
+  const { host } = ctx.req.headers;
+
   return {
     props: {
       artist,
       user,
+      origin: `${protocol}://${host}` ?? 'https://stats.fm',
     },
   };
 };
 
-const Artist: NextPage<Props> = ({ artist }) => {
+const Artist: NextPage<Props> = ({ artist, origin }) => {
   const api = useApi();
   const { user } = useAuth();
 
@@ -169,7 +176,10 @@ const Artist: NextPage<Props> = ({ artist }) => {
     <>
       <Title>{`${artist.name} music, stats and more`}</Title>
       <Head>
-        <meta property="og:image" content={`/api/og/artist/${artist.id}`} />
+        <meta
+          property="og:image"
+          content={`${origin}/api/og/artist/${artist.id}`}
+        />
         <meta
           property="og:image:alt"
           content={`${artist.name}'s artist stats`}

diff --git a/src/pages/user/[id]/[[...deeplink]].tsx b/src/pages/user/[id]/[[...deeplink]].tsx
@@ -65,6 +65,7 @@ type Props = SSRProps & {
     range: BetterRange | null;
     year: number | null;
   };
+  origin: string;
 };
 
 function activeScrollIntoViewFromDeepLink(
@@ -130,6 +131,11 @@ export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
     `<https://api.stats.fm/api/v1/oembed?url=${oembedUrl}&format=json>; rel="alternate"; type="application/json+oembed"; title=""`,
   );
 
+  let protocol = ctx.req.headers['x-forwarded-proto'] ?? 'https';
+  if (process.env.NODE_ENV === 'development') protocol = 'http';
+
+  const { host } = ctx.req.headers;
+
   return {
     props: {
       userProfile,
@@ -141,6 +147,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
         range: range && range.toUpperCase() in BetterRange ? range : null,
         year: year != null ? parseInt(year, 10) : null,
       },
+      origin: `${protocol}://${host}` ?? 'https://stats.fm',
     },
   };
 };
@@ -151,6 +158,7 @@ const User: NextPage<Props> = ({
   friendCount,
   scrollIntoView,
   selectedTimeframe: { range, year },
+  origin,
 }) => {
   const api = useApi();
   const router = useRouter();
@@ -353,7 +361,7 @@ const User: NextPage<Props> = ({
       <Head>
         <meta
           property="og:image"
-          content={`/api/og/user/${user.customId ?? user.id}`}
+          content={`${origin}/api/og/user/${user.customId ?? user.id}`}
         />
         <meta
           property="og:image:alt"