Skip to content

Commit

Permalink
Merge pull request #51 from Noctember/fix/full-url
Browse files Browse the repository at this point in the history
fix(og): use fqdn for og:image
  • Loading branch information
stijnvdkolk authored Apr 11, 2024
2 parents b0f4d36 + 5a13deb commit 9a34fe6
Show file tree
Hide file tree
Showing 7 changed files with 34 additions and 37 deletions.
10 changes: 2 additions & 8 deletions src/components/OpenGraph/Artist/OpenGraphDefaultArtist.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable jsx-a11y/alt-text */
import { Logo } from '@/components/Logo';
import formatter from '@/utils/formatter';
import { getOrigin } from '@/utils/ssrUtils';
import type { Artist } from '@/utils/statsfm';
import type Api from '@statsfm/statsfm.js';
import type { NextApiRequest } from 'next';
Expand All @@ -11,14 +12,7 @@ export function OpenGraphDefaultArtist(
_: Api,
artist: Artist,
): ReactElement<JSXElementConstructor<any>> {
const protocol =
process.env.NODE_ENV === 'development'
? 'http'
: req.headers['x-forwarded-proto'] ?? 'https';

const { host } = req.headers;

const origin = `${protocol}://${host}`;
const origin = getOrigin(req);

return (
<div tw="flex flex-col flex-1 w-full h-full bg-[#18181c]">
Expand Down
10 changes: 2 additions & 8 deletions src/components/OpenGraph/User/OpenGraphDefaultUser.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable jsx-a11y/alt-text */
import { Logo } from '@/components/Logo';
import { PlusBadgePrefilled } from '@/components/User/PlusBadge';
import { getOrigin } from '@/utils/ssrUtils';
import { splitStringAtLength } from '@/utils/string';
import type { UserPublic } from '@statsfm/statsfm.js';
import type Api from '@statsfm/statsfm.js';
Expand All @@ -12,14 +13,7 @@ export function OpenGraphDefaultUser(
_: Api,
user: UserPublic,
): ReactElement<JSXElementConstructor<any>> {
const protocol =
process.env.NODE_ENV === 'development'
? 'http'
: req.headers['x-forwarded-proto'] ?? 'https';

const { host } = req.headers;

const origin = `${protocol}://${host}`;
const origin = getOrigin(req);

const customId = user.customId ?? user.id;

Expand Down
12 changes: 4 additions & 8 deletions src/pages/api/auth/apple.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
import { getOrigin } from '@/utils/ssrUtils';
import type { NextApiRequest, NextApiResponse } from 'next';

const handler = (req: NextApiRequest, res: NextApiResponse) => {
let protocol = req.headers['x-forwarded-proto'] ?? 'https';
if (process.env.NODE_ENV === 'development') protocol = 'http';
let origin = getOrigin(req);

let { host } = req.headers;

if (host?.includes('spotistats.app')) {
host = host.replace('spotistats.app', 'stats.fm');
if (origin.includes('spotistats.app')) {
origin = origin.replace('spotistats.app', 'stats.fm');
}

const origin = `${protocol}://${host}`;

// remove the extra httpOnly cookie which is no longer in use
const cookies = [
'identityToken=; Path=/; Domain=.stats.fm; HttpOnly=false; Expires=Thu, 01 Jan 1970 00:00:00 GMT',
Expand Down
12 changes: 4 additions & 8 deletions src/pages/api/auth/spotify.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
import { getOrigin } from '@/utils/ssrUtils';
import type { NextApiRequest, NextApiResponse } from 'next';

const handler = (req: NextApiRequest, res: NextApiResponse) => {
let protocol = req.headers['x-forwarded-proto'] ?? 'https';
if (process.env.NODE_ENV === 'development') protocol = 'http';
let origin = getOrigin(req);

let { host } = req.headers;

if (host?.includes('spotistats.app')) {
host = host.replace('spotistats.app', 'stats.fm');
if (origin.includes('spotistats.app')) {
origin = origin.replace('spotistats.app', 'stats.fm');
}

const origin = `${protocol}://${host}`;

// remove the extra httpOnly cookie which is no longer in use
const cookies = [
'identityToken=; Path=/; Domain=.stats.fm; HttpOnly=false; Expires=Thu, 01 Jan 1970 00:00:00 GMT',
Expand Down
11 changes: 8 additions & 3 deletions src/pages/artist/[id].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { StatsCardContainer } from '@/components/Stats';
import { useScrollPercentage } from '@/hooks/use-scroll-percentage';
import { event } from 'nextjs-google-analytics';
import type { SSRProps } from '@/utils/ssrUtils';
import { fetchUser, getApiInstance } from '@/utils/ssrUtils';
import { fetchUser, getApiInstance, getOrigin } from '@/utils/ssrUtils';
import formatter from '@/utils/formatter';
import { SpotifyLink, AppleMusicLink } from '@/components/SocialLink';
import dayjs from 'dayjs';
Expand All @@ -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) => {
Expand All @@ -64,11 +65,12 @@ export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
props: {
artist,
user,
origin: getOrigin(ctx.req),
},
};
};

const Artist: NextPage<Props> = ({ artist }) => {
const Artist: NextPage<Props> = ({ artist, origin }) => {
const api = useApi();
const { user } = useAuth();

Expand Down Expand Up @@ -169,7 +171,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`}
Expand Down
7 changes: 5 additions & 2 deletions src/pages/user/[id]/[[...deeplink]].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import Head from 'next/head';
import { Button } from '@/components/Button';
import clsx from 'clsx';
import type { SSRProps } from '@/utils/ssrUtils';
import { getApiInstance, fetchUser } from '@/utils/ssrUtils';
import { getApiInstance, fetchUser, getOrigin } from '@/utils/ssrUtils';
import { FriendStatus } from '@/utils/statsfm';
import { event } from 'nextjs-google-analytics';
import { useScrollPercentage } from '@/hooks/use-scroll-percentage';
Expand Down Expand Up @@ -65,6 +65,7 @@ type Props = SSRProps & {
range: BetterRange | null;
year: number | null;
};
origin: string;
};

function activeScrollIntoViewFromDeepLink(
Expand Down Expand Up @@ -141,6 +142,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
range: range && range.toUpperCase() in BetterRange ? range : null,
year: year != null ? parseInt(year, 10) : null,
},
origin: getOrigin(ctx.req),
},
};
};
Expand All @@ -151,6 +153,7 @@ const User: NextPage<Props> = ({
friendCount,
scrollIntoView,
selectedTimeframe: { range, year },
origin,
}) => {
const api = useApi();
const router = useRouter();
Expand Down Expand Up @@ -353,7 +356,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"
Expand Down
9 changes: 9 additions & 0 deletions src/utils/ssrUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,12 @@ export const fetchUser = async (ctx: any): Promise<UserPrivate | null> => {

return user;
};

export const getOrigin = (req: any): string => {
let protocol = req.headers['x-forwarded-proto'] ?? 'https';
if (process.env.NODE_ENV === 'development') protocol = 'http';

const { host } = req.headers;

return `${protocol}://${host}` ?? 'https://stats.fm';
};

0 comments on commit 9a34fe6

Please sign in to comment.