;
13 |
14 | /**
15 | * Returns a element wrapped in a tooltip. The tooltip will only be visible when the
element doesn't have enough
16 | * space (e.g. it has an ellipsis).
17 | */
18 | export function OverflowText(props: OverflowTextProps) {
19 | const {center, className, placement, style, title, ...rest} = props;
20 | const [isOpen, setIsOpen] = useState(false);
21 | const {ref} = useResizeObserver();
22 |
23 | const resizeCallback = useCallback((el: HTMLParagraphElement) => {
24 | if (!el) {
25 | return;
26 | }
27 | // scrollWidth doesn't include margin, so add margin to the child to see if it overflows the
28 | // parent.
29 | const {marginLeft, marginRight} = window.getComputedStyle(el);
30 | const outerChildWidth = el.scrollWidth + parseInt(marginLeft, 10) + parseInt(marginRight, 10);
31 | setIsOpen(!!el.parentElement && outerChildWidth >= el.parentElement.clientWidth);
32 | }, [setIsOpen]);
33 |
34 | // We wrap the Typography in a div to ensure that no other child interferes with the width of the
35 | // parent container.
36 | // TODO(acorn1010): Replace center prop with a better solution for centering text.
37 | const centerStyle: CSSProperties = center ? {display: 'flex', justifyContent: 'center'} : {};
38 | return (
39 |
40 |
41 |
{
45 | ref(e);
46 | resizeCallback(e);
47 | }}>
48 | {title}
49 |
50 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | );
37 | };
38 |
39 | export default trpc.withTRPC(MyApp);
40 |
--------------------------------------------------------------------------------
/src/pages/api/auth/[...nextauth].ts:
--------------------------------------------------------------------------------
1 | import NextAuth, { type NextAuthOptions } from "next-auth";
2 | import TwitchProvider from "next-auth/providers/twitch";
3 | // Prisma adapter for NextAuth, optional and can be removed
4 | import { PrismaAdapter } from "@next-auth/prisma-adapter";
5 |
6 | import { env } from "../../../env/server.mjs";
7 | import { prisma } from "../../../server/db/client";
8 |
9 | export const authOptions: NextAuthOptions = {
10 | // Include user.id on session
11 | callbacks: {
12 | session({ session, user }) {
13 | if (session.user) {
14 | session.user.id = user.id;
15 | }
16 | return session;
17 | },
18 | },
19 | // Configure one or more authentication providers
20 | adapter: PrismaAdapter(prisma),
21 | providers: [
22 | TwitchProvider({
23 | clientId: env.TWITCH_CLIENT_ID,
24 | clientSecret: env.TWITCH_CLIENT_SECRET,
25 | }),
26 | ],
27 | };
28 |
29 | export default NextAuth(authOptions);
30 |
--------------------------------------------------------------------------------
/src/pages/api/restricted.ts:
--------------------------------------------------------------------------------
1 | import { type NextApiRequest, type NextApiResponse } from "next";
2 |
3 | import { getServerAuthSession } from "../../server/common/get-server-auth-session";
4 |
5 | const restricted = async (req: NextApiRequest, res: NextApiResponse) => {
6 | const session = await getServerAuthSession({ req, res });
7 |
8 | if (session) {
9 | res.send({
10 | content:
11 | "This is protected content. You can access this content because you are signed in.",
12 | });
13 | } else {
14 | res.send({
15 | error:
16 | "You must be signed in to view the protected content on this page.",
17 | });
18 | }
19 | };
20 |
21 | export default restricted;
22 |
--------------------------------------------------------------------------------
/src/pages/api/trpc/[trpc].ts:
--------------------------------------------------------------------------------
1 | import { createNextApiHandler } from "@trpc/server/adapters/next";
2 |
3 | import { env } from "../../../env/server.mjs";
4 | import { createContext } from "../../../server/trpc/context";
5 | import { appRouter } from "../../../server/trpc/router/_app";
6 |
7 | // export API handler
8 | export default createNextApiHandler({
9 | router: appRouter,
10 | createContext,
11 | onError:
12 | env.NODE_ENV === "development"
13 | ? ({ path, error }) => {
14 | console.error(`❌ tRPC failed on ${path}: ${error}`);
15 | }
16 | : undefined,
17 | });
18 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { Container } from "@mui/material";
2 | import Head from "next/head";
3 | import {TwitchClipsGrid} from "../client/clips/TwitchClipsGrid";
4 | import {useEffect, useState} from "react";
5 |
6 | export default function Home() {
7 | return (
8 | <>
9 |
10 | Acorn1010
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
23 | /** Displays the Kick livestream if currently live. */
24 | function KickStream() {
25 | const livestream = useKickLivestream('acorn1010');
26 |
27 | if (!livestream) {
28 | return null;
29 | }
30 |
31 | const src = 'https://kick.com/acorn1010';
32 | return (
33 |
40 | );
41 | }
42 |
43 | type KickResponse = {
44 | livestream?: {
45 | /** Suffix for the livestream (e.g. "4654a-foony") */
46 | slug: string,
47 | /** Time when this was created (e.g. "2023-06-20 20:06:31") */
48 | created_at: string,
49 | /** Title of the livestream. */
50 | session_title: string,
51 | /** True if the stream is currently live. */
52 | is_live: boolean,
53 | /** Number of viewers currently watching. */
54 | viewer_count: number,
55 | },
56 | };
57 |
58 | function useKickLivestream(slug: string) {
59 | const [response, setResponse] = useState();
60 | useEffect(() => {
61 | const callback = async () => {
62 | const response = await fetch(`https://kick.com/api/v1/channels/${slug}`);
63 | const json: KickResponse = await response.json();
64 | if (json) {
65 | setResponse(json);
66 | }
67 | };
68 | callback().catch(() => {});
69 | const interval = setInterval(callback, 10_000);
70 | return () => {
71 | clearInterval(interval);
72 | }
73 | }, [slug]);
74 |
75 | return response === undefined ? undefined : (response?.livestream ?? null);
76 | }
77 |
--------------------------------------------------------------------------------
/src/server/common/get-server-auth-session.ts:
--------------------------------------------------------------------------------
1 | import { type GetServerSidePropsContext } from "next";
2 | import { unstable_getServerSession } from "next-auth";
3 | import { authOptions } from "../../pages/api/auth/[...nextauth]";
4 |
5 | /**
6 | * Wrapper for unstable_getServerSession https://next-auth.js.org/configuration/nextjs
7 | * See example usage in trpc createContext or the restricted API route
8 | */
9 | export const getServerAuthSession = async (ctx: {
10 | req: GetServerSidePropsContext["req"];
11 | res: GetServerSidePropsContext["res"];
12 | }) => {
13 | return await unstable_getServerSession(ctx.req, ctx.res, authOptions);
14 | };
15 |
--------------------------------------------------------------------------------
/src/server/common/third_party/twitch/TwitchGraphApi.ts:
--------------------------------------------------------------------------------
1 | import {env} from "../../../../env/server.mjs";
2 | import {Redis} from "@upstash/redis";
3 | import {queryTwitch} from "./TwitchQueryer";
4 |
5 | export type TwitchClip = {
6 | /** ID of the Twitch clip. */
7 | id: string,
8 |
9 | /** URL of the clip (e.g. "https://clips.twitch.tv/{slug}") */
10 | url: string,
11 |
12 | /** Numeric id of the broadcaster's channel that this clip is of. */
13 | broadcaster_id: string,
14 |
15 | /** Username of the broadcaster (e.g. "Acorn1010"). */
16 | broadcaster_name: string,
17 |
18 | created_at: string,
19 |
20 | /** Numeric id of the person who took the clip. */
21 | creator_id: string,
22 |
23 | /** Username of the person who took the clip (e.g. "TwitchChatMember"). */
24 | creator_name: string,
25 |
26 | /** Numeric id of the VOD this clip is of. */
27 | video_id: string,
28 |
29 | /** Numeric id of the game category the clip is from. */
30 | game_id: string,
31 |
32 | /** Lowercase language code (e.g. "en") */
33 | language: string,
34 |
35 | /** Title of the Twitch clip (e.g. "Acorn loses her mind"). */
36 | title: string,
37 |
38 | /** Number of views in this VOD. */
39 | view_count: number,
40 |
41 | /** Offset into the VOD in seconds. */
42 | vod_offset: number,
43 |
44 | /** URL of the Twitch clip to download (e.g. "https://clips-media-assets2.twitch.tv/foo/foo.mp4"). */
45 | download_url: string,
46 |
47 | /** URL of the Twitch clip thumbnail (e.g. "https://clips-media-assets2.twitch.tv/foo/foo-480x272.jpg") */
48 | thumbnail_url: string,
49 |
50 | /** Duration of the clip in seconds (floating point). */
51 | duration: number,
52 | };
53 |
54 | /** Number of results to include (up to 100). */
55 | const MAX_CLIPS = 100;
56 |
57 | const redis = new Redis({
58 | url: env.UPSTASH_REDIS_REST_URL,
59 | token: env.UPSTASH_REDIS_REST_TOKEN,
60 | });
61 |
62 | async function queryTwitchClips(username: string, durationMs?: number): Promise {
63 | const key = `queryTwitchClips|${durationMs || 0}|${username}`;
64 | const cachedResult = await redis.get(key);
65 | if (cachedResult) {
66 | return cachedResult;
67 | }
68 |
69 | const criteria = durationMs ? {
70 | startAt: new Date(Date.now() - durationMs).toISOString(),
71 | endAt: new Date().toISOString(),
72 | } : {filter: 'ALL_TIME'} as const;
73 | const response = await queryTwitch('ClipsCards__User', {login: username, limit: MAX_CLIPS, criteria});
74 |
75 | const result: TwitchClip[] = [];
76 | for (const clip of response.data.user.clips.edges) {
77 | const {url, curator, broadcaster, id, title, viewCount, thumbnailURL, language, game, createdAt, embedUrl, durationSeconds} = clip.node;
78 | result.push({
79 | url,
80 | broadcaster_id: broadcaster.id,
81 | broadcaster_name: broadcaster.login,
82 | created_at: createdAt ?? (new Date()).toISOString(),
83 | creator_id: curator.id,
84 | creator_name: curator.displayName,
85 | duration: durationSeconds ?? 0,
86 | game_id: game?.id ?? '',
87 | vod_offset: 0,
88 | view_count: viewCount,
89 | video_id: '',
90 | download_url: getDownloadLink(thumbnailURL),
91 | thumbnail_url: resizeThumbnail(thumbnailURL),
92 | title,
93 | language: language?.toLowerCase() ?? 'en',
94 | id,
95 | });
96 | }
97 |
98 | // Store result for 5 minutes
99 | redis.set(key, result, {ex: 5 * 60}).then(() => {});
100 | return result;
101 | }
102 |
103 | /** Resizes small thumbnails to their larger size. */
104 | function resizeThumbnail(url: string) {
105 | // "https://clips-media-assets2.twitch.tv/8O7vVeUQOcaifBskrccD7g/AT-cm%7C8O7vVeUQOcaifBskrccD7g-preview-260x147.jpg"
106 | const m = url.match(/^(.*)-preview-\d+x\d+.(.+)$/);
107 | if (m) {
108 | const [, base, extension] = m;
109 | return `${base}-preview-${480}x${272}.${extension}`;
110 | }
111 | return url;
112 | }
113 |
114 | /** Given a `thumbnailURL`, returns a link to download the clip. */
115 | function getDownloadLink(url: string) {
116 | const m = url.match(/^(.*)-preview-\d+x\d+\..+$/);
117 | return m ? `${m[1]}.mp4` : '';
118 | }
119 |
120 | type TwitchClipResult = {
121 | data: TwitchClip[],
122 | };
123 |
124 | export type TwitchApiContext = {
125 | accessToken: string,
126 |
127 | /** The user's Twitch ID. */
128 | broadcasterId: string,
129 |
130 | /** The user's Twitch numeric ID. */
131 | providerAccountId: string,
132 |
133 | /** The (lowercase) username of the Twitch user. */
134 | username: string,
135 | };
136 |
137 | async function queryTwitchClipsOfficial(context: TwitchApiContext, durationMs?: number): Promise {
138 | const {accessToken, providerAccountId} = context;
139 | // https://player.twitch.tv/?video=v{videoId}&parent=localhost
140 |
141 | const params = new URLSearchParams({
142 | broadcaster_id: providerAccountId,
143 | first: '' + MAX_CLIPS,
144 | ...(durationMs ? {
145 | ended_at: durationMs ? new Date().toISOString() : undefined,
146 | started_at: durationMs ? new Date(Date.now() - durationMs).toISOString() : undefined,
147 | } : {}),
148 | });
149 | const response = await fetch(`https://api.twitch.tv/helix/clips?${params.toString()}`, {
150 | headers: {
151 | 'Authorization': `Bearer ${accessToken}`,
152 | 'Client-Id': env.TWITCH_CLIENT_ID,
153 | },
154 | });
155 |
156 | const result = await response.json();
157 | console.log('official result', {params, result});
158 | return result.data;
159 | }
160 |
161 | async function downloadClip(slug: string) {
162 | // https://github.dev/yt-dlp/yt-dlp
163 | }
164 |
165 | export const TwitchApi = {
166 | queryClips: queryTwitchClips,
167 | downloadClip,
168 | } as const;
169 |
--------------------------------------------------------------------------------
/src/server/common/third_party/twitch/TwitchQueryer.ts:
--------------------------------------------------------------------------------
1 | function makeOperationQueries(operations: T) {
2 | return operations as T;
3 | }
4 |
5 | const OPERATION_QUERIES = makeOperationQueries({
6 | ClipsCards__User: {
7 | arguments: {
8 | criteria: {filter: 'ALL_TIME'} as ({filter: 'ALL_TIME'} | {startAt: string, endAt: string}),
9 | limit: 0 as number, // Works up to 100?
10 | /** Username of the Twitch account (e.g. "acorn1010") */
11 | login: '' as string,
12 | },
13 | hash: 'b73ad2bfaecfd30a9e6c28fada15bd97032c83ec77a0440766a56fe0bd632777',
14 | returnType: {} as DashboardTopClipsResponse,
15 | },
16 | Dashboard_TopClips: {
17 | arguments: {
18 | criteria: {filter: 'ALL_TIME'} as ({filter: 'ALL_TIME'} | {startAt: string, endAt: string}),
19 | limit: 0 as number, // Works up to 100?
20 | /** Username of the Twitch account (e.g. "acorn1010") */
21 | login: '' as string,
22 | },
23 | hash: 'c3bb2d9b6e2ee266952cdf6825ec1ac9d38f4d12011721e874cf1d37364f240c',
24 | returnType: {} as DashboardTopClipsResponse,
25 | },
26 | });
27 |
28 | const TWITCH_GRAPHQL_URL = 'https://gql.twitch.tv/gql';
29 |
30 | type OperationQueryType = typeof OPERATION_QUERIES;
31 | type OperationName = keyof OperationQueryType;
32 | export async function queryTwitch(
33 | operationName: T,
34 | variables: OperationQueryType[T]['arguments']): Promise {
35 | const query = OPERATION_QUERIES[operationName];
36 | const response = await fetch(TWITCH_GRAPHQL_URL, {
37 | headers: {
38 | 'Accept-Language': 'en-US',
39 | 'Client-Id': 'kimne78kx3ncx6brgo4mv6wki5h1ko',
40 | 'Content-Type': 'application/json; charset=UTF-8',
41 | 'Host': 'gql.twitch.tv',
42 | },
43 | body: JSON.stringify([{
44 | extensions: {
45 | persistedQuery: {
46 | sha256Hash: query.hash,
47 | version: 1,
48 | },
49 | operationName,
50 | },
51 | variables,
52 | }]),
53 | method: 'POST',
54 | });
55 |
56 | const [json]: [DashboardTopClipsResponse] = await response.json();
57 | if (!json.data) {
58 | console.error('Failed to query Twitch GraphQL', {operationName, variables, json});
59 | throw new Error('Failed to query Twitch GraphQL for Dashboard_TopClips');
60 | }
61 | return json;
62 | }
63 |
64 | type GqlPick> =
65 | {[K in keyof T as K extends U | '__typename' | 'id' ? K : never]-?: NonNullable};
66 |
67 | type Clip = {
68 | __typename: 'Clip',
69 | /** Numeric id of the clip */
70 | id: string,
71 | /** Clip title (e.g. "Acorn exposes how she measures performance") */
72 | title: string,
73 | /** Number of times this clip was viewed */
74 | viewCount: number,
75 | language?: 'EN',
76 | /** URL of the clip (e.g. "https://clips.twitch.tv/{slug}") */
77 | url: string,
78 | /** Embed URL (e.g. "https://clips.twitch.tv/embed?clip={slug}") */
79 | embedUrl?: string,
80 | curator: GqlPick & Partial>,
81 | game?: Game,
82 | /**
83 | * NOTE: The image resolution can be replaced by 480x272.
84 | * e.g. "https://clips-media-assets2.twitch.tv/8O7vVeUQOcaifBskrccD7g/AT-cm%7C8O7vVeUQOcaifBskrccD7g-preview-260x147.jpg"
85 | */
86 | thumbnailURL: string,
87 | slug: string,
88 | /** User that this is a clip of */
89 | broadcaster: GqlPick,
90 | /** Time when this clip was created in ISO 8601 */
91 | createdAt?: string,
92 | /** Amount of time that this clip is in seconds. */
93 | durationSeconds?: number,
94 | };
95 |
96 | type ClipEdge = {
97 | __typename: 'ClipEdge',
98 | cursor?: null,
99 | node: Clip,
100 | };
101 |
102 | type Game = {
103 | __typename: 'Game',
104 | id: string,
105 | /** Name of the game (e.g. "Software and Game Development") */
106 | name: string,
107 | /** e.g. "https://static-cdn.jtvnw.net/ttv-boxart/1469308723-52x72.jpg" */
108 | boxArtURL: string,
109 | };
110 |
111 | type PageInfo = {
112 | __typename: 'PageInfo',
113 | hasNextPage: true,
114 | };
115 |
116 | type ClipConnection = {
117 | __typename: 'ClipConnection',
118 | edges: ClipEdge[],
119 | pageInfo?: PageInfo,
120 | };
121 |
122 | type User = {
123 | __typename: 'User',
124 | /** Numeric user id. */
125 | id: string,
126 | /** Name of the user (e.g. "Acorn1010") */
127 | displayName?: string,
128 | /** Username of the user (e.g. "acorn1010") */
129 | login?: string,
130 | clips?: ClipConnection,
131 | /** (e.g. "https://static-cdn.jtvnw.net/jtv_user_pictures/a9d579b2-c612-4544-b1e9-21fa6e6fae8e-profile_image-50x50.jpeg") */
132 | profileImageURL?: string,
133 | };
134 |
135 | type DashboardTopClipsResponse = {
136 | data: {user: Omit & {clips: NonNullable}},
137 | };
138 |
--------------------------------------------------------------------------------
/src/server/db/client.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from "@prisma/client";
2 |
3 | import { env } from "../../env/server.mjs";
4 |
5 | declare global {
6 | // eslint-disable-next-line no-var
7 | var prisma: PrismaClient | undefined;
8 | }
9 |
10 | export const prisma =
11 | global.prisma ||
12 | new PrismaClient({
13 | log:
14 | env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
15 | });
16 |
17 | if (env.NODE_ENV !== "production") {
18 | global.prisma = prisma;
19 | }
20 |
--------------------------------------------------------------------------------
/src/server/trpc/context.ts:
--------------------------------------------------------------------------------
1 | import { type inferAsyncReturnType } from "@trpc/server";
2 | import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
3 | import { type Session } from "next-auth";
4 |
5 | import { getServerAuthSession } from "../common/get-server-auth-session";
6 | import { prisma } from "../db/client";
7 |
8 | type CreateContextOptions = {
9 | session: Session | null;
10 | };
11 |
12 | /** Use this helper for:
13 | * - testing, so we dont have to mock Next.js' req/res
14 | * - trpc's `createSSGHelpers` where we don't have req/res
15 | * @see https://create.t3.gg/en/usage/trpc#-servertrpccontextts
16 | **/
17 | export const createContextInner = async (opts: CreateContextOptions) => {
18 | return {
19 | session: opts.session,
20 | prisma,
21 | };
22 | };
23 |
24 | /**
25 | * This is the actual context you'll use in your router
26 | * @link https://trpc.io/docs/context
27 | **/
28 | export const createContext = async (opts: CreateNextContextOptions) => {
29 | const { req, res } = opts;
30 |
31 | // Get the session from the server using the unstable_getServerSession wrapper function
32 | const session = await getServerAuthSession({ req, res });
33 |
34 | return await createContextInner({
35 | session,
36 | });
37 | };
38 |
39 | export type Context = inferAsyncReturnType;
40 |
--------------------------------------------------------------------------------
/src/server/trpc/router/_app.ts:
--------------------------------------------------------------------------------
1 | import { router } from "../trpc";
2 | import { authRouter } from "./auth";
3 | import {clipsRouter} from "./clips";
4 |
5 | export const appRouter = router({
6 | auth: authRouter,
7 | clips: clipsRouter,
8 | });
9 |
10 | // export type definition of API
11 | export type AppRouter = typeof appRouter;
12 |
--------------------------------------------------------------------------------
/src/server/trpc/router/auth.ts:
--------------------------------------------------------------------------------
1 | import { router, publicProcedure } from "../trpc";
2 |
3 | export const authRouter = router({
4 | getSession: publicProcedure.query(({ ctx }) => {
5 | return ctx.session;
6 | }),
7 | });
8 |
--------------------------------------------------------------------------------
/src/server/trpc/router/clips.ts:
--------------------------------------------------------------------------------
1 | import {publicProcedure, router} from "../trpc";
2 | import {z} from "zod";
3 | import {TwitchApi} from "../../common/third_party/twitch/TwitchGraphApi";
4 |
5 | const DATE_RANGE_TO_DURATION = {
6 | '7days': 7 * 24 * 60 * 60_000,
7 | '30days': 30 * 24 * 60 * 60_000,
8 | 'allTime': undefined,
9 | } as const;
10 |
11 | export const clipsRouter = router({
12 | hello: publicProcedure
13 | .input(z.object({ text: z.string().nullish() }).nullish())
14 | .query(({ input }) => {
15 | return {
16 | greeting: `Hello ${input?.text ?? "world"}`,
17 | };
18 | }),
19 | getAll: publicProcedure
20 | .input(z.object({dateRange: z.enum(['7days', '30days', 'allTime'])}))
21 | .query(async ({input}) => {
22 | const {dateRange} = input;
23 | return TwitchApi.queryClips('acorn1010', DATE_RANGE_TO_DURATION[dateRange]);
24 | })
25 | });
26 |
--------------------------------------------------------------------------------
/src/server/trpc/trpc.ts:
--------------------------------------------------------------------------------
1 | import { initTRPC, TRPCError } from "@trpc/server";
2 | import superjson from "superjson";
3 |
4 | import { type Context } from "./context";
5 |
6 | const t = initTRPC.context().create({
7 | transformer: superjson,
8 | errorFormatter({ shape }) {
9 | return shape;
10 | },
11 | });
12 |
13 | export const router = t.router;
14 |
15 | /**
16 | * Unprotected procedure
17 | **/
18 | export const publicProcedure = t.procedure;
19 |
20 | /**
21 | * Reusable middleware to ensure
22 | * users are logged in
23 | */
24 | const isAuthed = t.middleware(({ ctx, next }) => {
25 | if (!ctx.session || !ctx.session.user) {
26 | throw new TRPCError({ code: "UNAUTHORIZED" });
27 | }
28 | return next({
29 | ctx: {
30 | // infers the `session` as non-nullable
31 | session: { ...ctx.session, user: ctx.session.user },
32 | },
33 | });
34 | });
35 |
36 | /**
37 | * Protected procedure
38 | **/
39 | export const protectedProcedure = t.procedure.use(isAuthed);
40 |
--------------------------------------------------------------------------------
/src/types/next-auth.d.ts:
--------------------------------------------------------------------------------
1 | import { type DefaultSession } from "next-auth";
2 |
3 | declare module "next-auth" {
4 | /**
5 | * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
6 | */
7 | interface Session {
8 | user?: {
9 | id: string;
10 | } & DefaultSession["user"];
11 |
12 | /** The userId of the provider. The Twitch provider account id is used to query Twitch's GraphQL. */
13 | providerAccountId: string;
14 |
15 | error?: 'RefreshAccessTokenError';
16 | }
17 | }
18 |
19 | declare module "next-auth/jwt" {
20 | interface JWT {
21 | accessToken: string | undefined;
22 |
23 | /** The token expiration timestamp in milliseconds since Unix Epoch. */
24 | accessTokenExpires: number;
25 |
26 | error?: 'RefreshAccessTokenError';
27 |
28 | /** The userId of the provider. The Twitch provider account id is used to query Twitch's GraphQL. */
29 | providerAccountId: string;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/utils/trpc.ts:
--------------------------------------------------------------------------------
1 | import { httpBatchLink, loggerLink } from "@trpc/client";
2 | import { createTRPCNext } from "@trpc/next";
3 | import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
4 | import superjson from "superjson";
5 |
6 | import { type AppRouter } from "../server/trpc/router/_app";
7 |
8 | const getBaseUrl = () => {
9 | if (typeof window !== "undefined") return ""; // browser should use relative url
10 | if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
11 | return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
12 | };
13 |
14 | export const trpc = createTRPCNext({
15 | config() {
16 | return {
17 | transformer: superjson,
18 | links: [
19 | loggerLink({
20 | enabled: (opts) =>
21 | process.env.NODE_ENV === "development" ||
22 | (opts.direction === "down" && opts.result instanceof Error),
23 | }),
24 | httpBatchLink({
25 | url: `${getBaseUrl()}/api/trpc`,
26 | }),
27 | ],
28 | };
29 | },
30 | ssr: false,
31 | });
32 |
33 | /**
34 | * Inference helper for inputs
35 | * @example type HelloInput = RouterInputs['example']['hello']
36 | **/
37 | export type RouterInputs = inferRouterInputs;
38 | /**
39 | * Inference helper for outputs
40 | * @example type HelloOutput = RouterOutputs['example']['hello']
41 | **/
42 | export type RouterOutputs = inferRouterOutputs;
43 |
--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ['./src/**/*.{js,ts,jsx,tsx}'],
4 | theme: {
5 | extend: {
6 | colors: {
7 | lighten: 'rgba(255, 255, 255, .05)',
8 | darken: 'rgba(0, 0, 0, .05)',
9 | },
10 | },
11 | },
12 | plugins: [],
13 | /** Makes sure that Tailwind classes are more specific than MUI */
14 | important: true,
15 | }
16 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2017",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "noUncheckedIndexedAccess": true
18 | },
19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------