18 |
19 |
20 | {card?.name} | {card?.title}
21 |
22 |
23 |
24 |
26 | )
27 | }
28 |
29 | export default Slug
30 |
--------------------------------------------------------------------------------
/src/env/server.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | /**
3 | * This file is included in `/next.config.mjs` which ensures the app isn't built with invalid env vars.
4 | * It has to be a `.mjs`-file to be imported there.
5 | */
6 | import { serverSchema } from "./schema.mjs";
7 | import { env as clientEnv, formatErrors } from "./client.mjs";
8 |
9 | const _serverEnv = serverSchema.safeParse(process.env);
10 |
11 | if (!_serverEnv.success) {
12 | console.error(
13 | "❌ Invalid environment variables:\n",
14 | ...formatErrors(_serverEnv.error.format()),
15 | );
16 | throw new Error("Invalid environment variables");
17 | }
18 |
19 | for (let key of Object.keys(_serverEnv.data)) {
20 | if (key.startsWith("NEXT_PUBLIC_")) {
21 | console.warn("❌ You are exposing a server-side env-variable:", key);
22 |
23 | throw new Error("You are exposing a server-side env-variable");
24 | }
25 | }
26 |
27 | export const env = { ..._serverEnv.data, ...clientEnv };
28 |
--------------------------------------------------------------------------------
/src/pages/api/auth/[...nextauth].ts:
--------------------------------------------------------------------------------
1 | import NextAuth, { type NextAuthOptions } from 'next-auth'
2 | import GoogleProvider from 'next-auth/providers/google'
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 | GoogleProvider({
23 | clientId: env.GOOGLE_CLIENT_ID,
24 | clientSecret: env.GOOGLE_CLIENT_SECRET,
25 | }),
26 | ],
27 | }
28 |
29 | export default NextAuth(authOptions)
30 |
--------------------------------------------------------------------------------
/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
20 |
32 | ),
33 | {
34 | width: 480,
35 | height: 240,
36 |
37 | // do not cache image
38 | headers: {
39 | 'Cache-Control': 'no-cache',
40 | },
41 | }
42 | )
43 | }
44 |
45 | export default og
46 |
--------------------------------------------------------------------------------
/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
21 | 
26 |
31 |
27 |
30 | {username}
28 |{title}
29 |
40 |
97 | )
98 | }
99 |
100 | export default BusinessCard
101 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { type NextPage } from 'next'
2 | import { signIn, signOut, useSession } from 'next-auth/react'
3 | import Head from 'next/head'
4 | import { useRouter } from 'next/router'
5 | import { useState } from 'react'
6 | import BusinessCard from '../components/BusinessCard/BusinessCard'
7 | import { trpc } from '../utils/trpc'
8 |
9 | const Home: NextPage = () => {
10 | const { data: sessionData } = useSession()
11 | const router = useRouter()
12 |
13 | const [inputs, setInputs] = useState({
14 | title: '',
15 | website: '',
16 | })
17 |
18 | const { mutate } = trpc.card.publishCard.useMutation({
19 | onSuccess(card) {
20 | router.push(`/c/${card.slug}`)
21 | },
22 | })
23 |
24 | const publish = () => mutate(inputs)
25 |
26 | return (
27 | <>
28 |
29 |
41 |
93 |
42 |
52 | 1
43 | 2
44 | 3
45 | 4
46 | 5
47 | 6
48 | 7
49 | 8
50 | 9
51 |
53 | const
54 | aboutMe
55 | =
56 | {'{'}
57 |
58 | {' '}
59 | name
60 | :
61 | '{card ? card.name : sessionData?.user?.name}'
62 | ,
63 |
64 |
65 | {' '}
66 | title
67 | :
68 | '{card ? card.title : inputs?.title}'
69 | ,
70 |
71 |
72 | {' '}
73 | contact
74 | :
75 | {'{'}
76 |
77 | {' '}
78 | email
79 | :
80 | '{card ? card.email : sessionData?.user?.email}'
81 | ,
82 |
83 |
84 | website
85 | :
86 | '{card ? card.website : inputs?.website}'
87 |
88 | {'}'}
89 |
90 | {'}'}
91 |
92 |
94 | 
95 |
96 |
35 | {!sessionData && (
36 |
41 | )}
42 |
43 | {/* Tell us about yourself inputs */}
44 | {sessionData && (
45 | <>
46 |
102 |
103 | )
104 | }
105 |
106 | export default Home
107 |
--------------------------------------------------------------------------------
/src/components/shared/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import { FC, Fragment } from 'react'
2 | import { Disclosure, Menu, Transition } from '@headlessui/react'
3 | import { HiBookOpen, HiX } from 'react-icons/hi'
4 | import { signOut, useSession } from 'next-auth/react'
5 |
6 | interface NavbarProps {}
7 |
8 | function classNames(...classes: string[]) {
9 | return classes.filter(Boolean).join(' ')
10 | }
11 |
12 | const Navbar: FC
47 |
84 |
85 | {/* main business card */}
86 | Tell us about yourself
48 |
49 | {/* Input field 1 */}
50 |
83 |
51 |
54 |
65 |
66 | {/* Input field 2 */}
67 |
55 | setInputs((prev) => ({ ...prev, title: e.target.value }))}
58 | type='text'
59 | name='title'
60 | className='block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
61 | placeholder='Software Engineer'
62 | />
63 |
64 |
68 |
71 |
82 |
72 | setInputs((prev) => ({ ...prev, website: e.target.value }))}
75 | type='text'
76 | name='website'
77 | className='block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
78 | placeholder='yoursite.com'
79 | />
80 |
81 |
87 |
89 |
90 | {/* Publish Button */}
91 |
92 |
98 |
99 |
100 | )}
101 |
20 |
109 |
110 | )}
111 |
21 |
108 |
22 | {/* Mobile menu button*/}
23 |
24 | Open main menu
25 | {open ? (
26 |
27 | ) : (
28 |
29 | )}
30 |
31 |
32 |
33 |
46 |
34 | 
39 |
44 |
45 |
39 |
44 |
47 | {/* Profile dropdown */}
48 | {sessionData && (
49 |
105 | )}
106 |
107 |