(null);
31 | const [deleteModalOpen, setDeleteModalOpen] = useState(false);
32 |
33 | const tagsAvailable = tags.filter((t) => {
34 | const noteTagIds = note.tags.map((noteTag) => noteTag.id);
35 | return !noteTagIds.includes(t.id);
36 | });
37 |
38 | // trpc
39 | const renameMutation = api.notes.rename.useMutation();
40 | const addTagMutation = api.notes.addTag.useMutation();
41 | const removeTagMutation = api.notes.removeTag.useMutation();
42 | const utils = api.useContext();
43 |
44 | // TODO: implement this function
45 | function onClickRenameNote() {
46 | //
47 |
48 | if (!note) return;
49 |
50 | renameMutation.mutate(
51 | { id: note.id, newTitle: noteTitle },
52 | {
53 | onSuccess: (updatedNote, variables, context) => {
54 | utils.notes.getAll.setData(undefined, (oldNotes) =>
55 | oldNotes?.map((oldNote) =>
56 | oldNote.id === variables.id ? updatedNote : oldNote
57 | )
58 | );
59 | void utils.notes.invalidate();
60 | },
61 | }
62 | );
63 | }
64 |
65 | // TODO: implement this function
66 | function onClickAddTagToNote() {
67 | if (!note || !selectedTag) return;
68 |
69 | addTagMutation.mutate(
70 | { id: note.id, tagId: selectedTag.id },
71 | {
72 | onSuccess: (updatedNote, variables, context) => {
73 | utils.notes.getAll.setData(undefined, (oldNotes) =>
74 | oldNotes?.map((oldNote) =>
75 | oldNote.id === variables.id ? updatedNote : oldNote
76 | )
77 | );
78 | void utils.notes.invalidate();
79 | setSelectedTag(null);
80 | },
81 | }
82 | );
83 | }
84 |
85 | function onClickRemoveTag(tagId: string) {
86 | if (!note) return;
87 |
88 | removeTagMutation.mutate(
89 | { id: note.id, tagId },
90 | {
91 | onSuccess: (updatedNote, variables, context) => {
92 | utils.notes.getAll.setData(undefined, (oldNotes) =>
93 | oldNotes?.map((oldNote) =>
94 | oldNote.id === updatedNote.id ? updatedNote : oldNote
95 | )
96 | );
97 | void utils.notes.invalidate();
98 | },
99 | }
100 | );
101 | }
102 |
103 | if (note === null) return
;
104 |
105 | return (
106 |
107 | {/* Title & Description */}
108 |
109 | Note Options
110 |
111 |
112 | This dialog allows you to view and modify options for your note
113 |
114 |
115 | {/* Title */}
116 |
117 | Title
118 |
119 |
120 |
140 |
141 | {/* Tags */}
142 |
143 | Tags
144 |
145 |
146 | {note.tags.length !== 0 ? (
147 | note.tags.map((tag: Tag) => (
148 | onClickRemoveTag(tag.id)}
154 | loading={
155 | removeTagMutation.isLoading &&
156 | removeTagMutation.variables?.tagId === tag.id
157 | }
158 | />
159 | ))
160 | ) : (
161 | No tags - nothing to see here.
162 | )}
163 |
164 |
165 | {/* Add tags */}
166 | {tagsAvailable.length !== 0 && (
167 | <>
168 |
169 | Add tags
170 |
171 | {/* New tag color selector */}
172 |
173 |
179 | {/* Button */}
180 |
181 | {selectedTag ? (
182 | selectedTag.label
183 | ) : (
184 |
185 | Select a tag to add
186 |
187 | )}
188 |
190 |
191 | {/* Options */}
192 |
193 | {tagsAvailable.map((tag, index) => (
194 |
199 |
206 | ))}
207 |
208 |
209 |
210 |
223 |
224 | )}
225 |
226 | {/* Danger Zone */}
227 |
228 | Danger zone
229 |
230 | setDeleteModalOpen(true)}
237 | size="rectangle"
238 | />
239 |
240 | {/* Delete note modal */}
241 | {deleteModalOpen && (
242 |
250 | );
251 | }
252 |
253 | export default NoteOptionsModal;
254 |
--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | // React, Next, Zustand
2 | import React, { useState } from "react";
3 | import Link from "next/link";
4 | import { signIn, signOut, useSession } from "next-auth/react";
5 | import { Session } from "next-auth";
6 | import useThemeStore from "../stores/theme";
7 |
8 | // Components
9 | import { Listbox, Popover, Transition } from "@headlessui/react";
10 | import {
11 | BookBookmark,
12 | Gear,
13 | Info,
14 | Moon,
15 | Palette,
16 | SignOut,
17 | Sun,
18 | } from "phosphor-react";
19 | import CaretUpDownIcon from "./CaretUpDownIcon";
20 | import Button from "./Button";
21 | import Image from "next/image";
22 |
23 | function ThemeOption({ theme }: { theme: "light" | "dark" }) {
24 | return (
25 |
26 | {theme === "light" && {theme === "light" ? "Light" : "Dark"}
29 |
30 | );
31 | }
32 |
33 | function Slash() {
34 | return / ;
35 | }
36 |
37 | function DropdownLine({
38 | children,
39 | onClick,
40 | }: {
41 | children?: React.ReactNode;
42 | onClick?: (onClickProps: unknown) => void;
43 | }) {
44 | const className =
45 | "flex items-center gap-3 px-6 py-1.5 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700";
46 | return onClick ? (
47 |
48 | {children}
49 |
50 | ) : (
51 | {children}
52 | );
53 | }
54 |
55 | function Logo({ session }: { session?: Session }) {
56 | return (
57 |
60 |
62 | {/* App Name */}
63 | {/* {session && ( */}
64 |
65 | LuccaNotes
66 |
67 | {/* )} */}
68 |
69 | );
70 | }
71 |
72 | function ThemeSelector() {
73 | const { theme, setTheme } = useThemeStore();
74 | return (
75 |
81 | {/* Button */}
82 |
83 | {theme === "light" ? "Light" : "Dark"}
84 |
86 |
87 | {/* Options */}
88 |
89 | {/* Light option */}
90 |
94 |
96 | {/* Dark option */}
97 |
101 |
103 |
104 |
105 | );
106 | }
107 |
108 | function PfpDropdown({ session }: { session: Session }) {
109 | return (
110 |
111 | {/* PFP button */}
112 |
113 |
120 |
121 | {/* Dropdown menu */}
122 |
130 |
131 | {/* Account settings */}
132 | {/*
133 | Account settings
139 | */}
140 | {/* Theme Selector */}
141 |
142 | Theme
148 |
150 |
151 | {/* About/more info */}
152 | {/*
153 | About
159 | */}
160 | {/* Logout */}
161 | void signOut({ callbackUrl: "/" })}>
163 | Log out
169 |
170 |
171 |
172 |
173 | );
174 | }
175 |
176 | function Navbar({
177 | bgTransparent,
178 | noteTitle,
179 | session,
180 | }: {
181 | bgTransparent?: boolean;
182 | noteTitle?: string;
183 | session?: Session;
184 | }) {
185 | return (
186 |
192 |
197 |
201 | {session.user.name}
202 |
203 |
204 | {/* Note title */}
205 | {noteTitle && (
206 | <>
207 |
209 | {noteTitle}
210 |
211 |
212 | )}
213 |
214 |
215 | {/* Mobile */}
216 |
217 | {noteTitle ? (
218 | <>
219 |
221 | {noteTitle}
222 |
223 |
224 | ) : (
225 | <>
226 |
228 | {session.user.name}
229 |
230 |
231 | )}
232 |
233 |
234 | {/* Profile Picture */}
235 |
272 | );
273 | }
274 |
275 | export default Navbar;
276 |
--------------------------------------------------------------------------------
/src/components/NoteCard.tsx:
--------------------------------------------------------------------------------
1 | import { type Note, type Tag } from "@prisma/client";
2 | import { useRouter } from "next/router";
3 | import { useEffect, useState } from "react";
4 | import { NoteWithTags } from "..";
5 | import { formatDate } from "../utils/dates";
6 | import Button from "./Button";
7 | import NoteOptionsModal from "./Modals/NoteOptions";
8 | import TagPill from "./TagPill";
9 | import Tooltip from "./Tooltip";
10 |
11 | function HiddenTagPillContainer({
12 | hiddenTags,
13 | flipTags,
14 | }: {
15 | hiddenTags: Tag[];
16 | flipTags: boolean;
17 | }) {
18 | return (
19 | <>
20 | {/* Mobile */}
21 |
22 |
23 | {hiddenTags.length} more {hiddenTags.length === 1 ? "tag" : "tags"}
24 |
25 |
29 |
30 | {hiddenTags.map((tag, index) => (
31 |
34 |
35 |
38 |
39 | {hiddenTags.length} more {hiddenTags.length === 1 ? "tag" : "tags"}
40 |
41 |
42 |
43 | {hiddenTags.map((tag, index) => (
44 |
47 |
48 |
64 | {tags[0] && No tags for this note yet!
73 | )}
74 |
75 | {/* Desktop Tag container */}
76 |
77 | {tags[0] && No tags for this note yet!
87 | )}
88 |
89 |
90 | );
91 | }
92 |
93 | function NoteCard({
94 | note,
95 | flipTags = false,
96 | dateType = "lastUpdated",
97 | tags,
98 | }: {
99 | note: NoteWithTags;
100 | flipTags?: boolean;
101 | dateType?: "lastUpdated" | "createdAt";
102 | tags: Tag[];
103 | }) {
104 | const [modalOpen, setModalOpen] = useState(false);
105 | const [navLoading, setNavLoading] = useState(false);
106 |
107 | const router = useRouter();
108 |
109 | useEffect(() => {
110 | const handler = (url: string) => {
111 | if (url.includes(note.id)) {
112 | setNavLoading(true);
113 | }
114 | };
115 |
116 | router.events.on("routeChangeStart", handler);
117 |
118 | return () => {
119 | router.events.off("routeChangeStart", handler);
120 | };
121 | }, []);
122 |
123 | return (
124 |
125 |
126 | {/* Note title */}
127 |
128 | {note.title}
129 |
130 |
131 | {/* Date field */}
132 | {dateType === "lastUpdated" ? (
133 |
134 | Last edited {formatDate(note.lastUpdated)}
135 |
136 | ) : (
137 |
138 | Created {formatDate(note.createdAt)}
139 |
140 | )}
141 |
142 |
143 |
144 |
145 | {/* Buttons */}
146 |
147 | setModalOpen(true)}
167 | />
168 |
169 |
170 |
n.id === selectedNoteId) ?? null}
175 | note={note}
176 | tags={tags}
177 | />
178 |
30 |
31 | Sorting
32 |
33 |
34 | {/* Sort Field Selector */}
35 |
36 | {/* Label */}
37 | Sort by
38 |
44 | {/* Button */}
45 |
46 | {sortFieldLabels[sortField]}
47 |
49 |
50 | {/* Dropdown menu */}
51 |
52 | {Object.keys(sortFieldLabels).map((sortFieldOption, index) => (
53 |
58 |
65 | ))}
66 |
67 |
68 |
69 |
70 | {/* Sort Order Selector */}
71 |
77 | {/* Label */}
78 |
79 | Order
80 |
81 | {/* Options */}
82 | {sortField === "title" ? (
83 | // sorting by title
84 |
85 |
86 |
87 | A-z
88 |
89 |
90 |
91 |
92 | Z-a
93 |
94 |
95 |
96 | ) : (
97 | // sorting by 'createdAt' or 'lastUpdate'
98 |
99 |
100 |
106 |
107 |
113 |
116 |
117 |
128 |
129 | Filter by Tags{" "}
130 |
131 | Click tags to toggle filter
132 |
133 |
134 |
135 | {tags.map(({ id, label, color }) => (
136 |
toggleSelectedTag(id)}
140 | >
141 |
151 | ))}
152 |
153 |
) => {
167 | setInput(e.target.value);
168 | debouncedSetInput(e.target.value);
169 | };
170 |
171 | return (
172 |
173 |
174 |
181 |
182 |
183 |
184 | {({ open }) => (
185 | <>
186 | {/* Desktop */}
187 |
188 |
189 |
195 | {!open && (
196 |
197 | Sorting & Filtering
198 |
199 | )}
200 |
203 |
204 |
210 | {!open && (
211 |
212 | Sorting & Filtering
213 |
214 | )}
215 |
219 |
227 |
228 |
231 |
232 |
233 |
;
38 | export type TagColor = NonNullable;
39 | interface Props extends TagPillProps, TagPillVariantProps {}
40 |
41 | // type TagPillVariantProps = VariantProps;
42 | // export type TagColor = NonNullable;
43 | // type ProcessedVariantProps =
44 | // | Omit
45 | // | (Required & {
46 | // onClickDelete: (onClickDeleteProps: any) => void;
47 | // });
48 | // // interface Props extends TagPillProps, Omit {}
49 | // interface Props extends TagPillProps, ProcessedVariantProps {}
50 |
51 | export const tagColorNames: Record = {
52 | sky: "Sky",
53 | red: "Red",
54 | green: "Green",
55 | violet: "Violet",
56 | yellow: "Yellow",
57 | lightGray: "Light Gray",
58 | darkGray: "Dark Gray",
59 | } as const;
60 |
61 | function TagPill({
62 | label,
63 | color,
64 | deletable,
65 | onClickDelete,
66 | loading = false,
67 | destructive = false,
68 | dark,
69 | }: Props) {
70 | return (
71 |
72 |
{label}
73 | {deletable && (
74 |
75 |
80 | {loading ? (
81 |
94 | {!loading && (
95 |
96 | {destructive ? "Delete tag" : "Remove tag"}
97 |
98 | )}
99 |
100 | )}
101 |
>;
31 | export type TooltipPosition = TooltipVariantProps["tooltipPosition"];
32 | export type TooltipAlignment = TooltipVariantProps["alignment"];
33 |
34 | interface Props
35 | extends ToolTipProps,
36 | Required> {}
37 |
38 | const Tooltip = ({ tooltipPosition, children, alignment }: Props) => {
39 | return (
40 |
41 | {children}
42 |
43 | );
44 | };
45 |
46 | export default Tooltip;
47 |
--------------------------------------------------------------------------------
/src/env/client.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { clientEnv, clientSchema } from "./schema.mjs";
3 |
4 | const _clientEnv = clientSchema.safeParse(clientEnv);
5 |
6 | export const formatErrors = (
7 | /** @type {import('zod').ZodFormattedError,string>} */
8 | errors,
9 | ) =>
10 | Object.entries(errors)
11 | .map(([name, value]) => {
12 | if (value && "_errors" in value)
13 | return `${name}: ${value._errors.join(", ")}\n`;
14 | })
15 | .filter(Boolean);
16 |
17 | if (!_clientEnv.success) {
18 | console.error(
19 | "❌ Invalid environment variables:\n",
20 | ...formatErrors(_clientEnv.error.format()),
21 | );
22 | throw new Error("Invalid environment variables");
23 | }
24 |
25 | for (let key of Object.keys(_clientEnv.data)) {
26 | if (!key.startsWith("NEXT_PUBLIC_")) {
27 | console.warn(
28 | `❌ Invalid public environment variable name: ${key}. It must begin with 'NEXT_PUBLIC_'`,
29 | );
30 |
31 | throw new Error("Invalid public environment variable name");
32 | }
33 | }
34 |
35 | export const env = _clientEnv.data;
36 |
--------------------------------------------------------------------------------
/src/env/schema.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { z } from "zod";
3 |
4 | /**
5 | * Specify your server-side environment variables schema here.
6 | * This way you can ensure the app isn't built with invalid env vars.
7 | */
8 | export const serverSchema = z.object({
9 | DATABASE_URL: z.string().url(),
10 | NODE_ENV: z.enum(["development", "test", "production"]),
11 | NEXTAUTH_SECRET:
12 | process.env.NODE_ENV === "production"
13 | ? z.string().min(1)
14 | : z.string().min(1).optional(),
15 | NEXTAUTH_URL: z.preprocess(
16 | // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
17 | // Since NextAuth.js automatically uses the VERCEL_URL if present.
18 | (str) => process.env.VERCEL_URL ?? str,
19 | // VERCEL_URL doesn't include `https` so it cant be validated as a URL
20 | process.env.VERCEL ? z.string() : z.string().url()
21 | ),
22 | DISCORD_CLIENT_ID: z.string(),
23 | DISCORD_CLIENT_SECRET: z.string(),
24 | GOOGLE_CLIENT_ID: z.string(),
25 | GOOGLE_CLIENT_SECRET: z.string(),
26 | });
27 |
28 | /**
29 | * You can't destruct `process.env` as a regular object in the Next.js
30 | * middleware, so you have to do it manually here.
31 | * @type {{ [k in keyof z.input]: string | undefined }}
32 | */
33 | export const serverEnv = {
34 | DATABASE_URL: process.env.DATABASE_URL,
35 | NODE_ENV: process.env.NODE_ENV,
36 | NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
37 | NEXTAUTH_URL: process.env.NEXTAUTH_URL,
38 | DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
39 | DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
40 | GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
41 | GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
42 | };
43 |
44 | /**
45 | * Specify your client-side environment variables schema here.
46 | * This way you can ensure the app isn't built with invalid env vars.
47 | * To expose them to the client, prefix them with `NEXT_PUBLIC_`.
48 | */
49 | export const clientSchema = z.object({
50 | // NEXT_PUBLIC_CLIENTVAR: z.string(),
51 | });
52 |
53 | /**
54 | * You can't destruct `process.env` as a regular object, so you have to do
55 | * it manually here. This is because Next.js evaluates this at build time,
56 | * and only used environment variables are included in the build.
57 | * @type {{ [k in keyof z.input]: string | undefined }}
58 | */
59 | export const clientEnv = {
60 | // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
61 | };
62 |
--------------------------------------------------------------------------------
/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, serverEnv } from "./schema.mjs";
7 | import { env as clientEnv, formatErrors } from "./client.mjs";
8 |
9 | const _serverEnv = serverSchema.safeParse(serverEnv);
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/hooks/useHasHydrated.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const useHasHydrated = () => {
4 | const [hasHydrated, setHasHydrated] = useState(false);
5 |
6 | useEffect(() => {
7 | setHasHydrated(true);
8 | }, []);
9 |
10 | return hasHydrated;
11 | };
12 |
13 | export default useHasHydrated;
14 |
--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
1 | import { type Note, type Tag } from "@prisma/client";
2 |
3 | export type NoteWithTags = Omit & { tags: Tag[] };
4 |
--------------------------------------------------------------------------------
/src/pages/404.tsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 |
3 | export default function Custom404() {
4 | return (
5 |
6 |
7 |
LuccaNotes • Not Found
8 |
9 | 404 - Page Not Found
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import { type AppType } from "next/app";
2 | import { type Session } from "next-auth";
3 | import { SessionProvider } from "next-auth/react";
4 |
5 | import { api } from "../utils/api";
6 |
7 | import "../styles/globals.css";
8 |
9 | import { Inter } from "@next/font/google";
10 | import useThemeStore from "../stores/theme";
11 | // import useHasHydrated from "../hooks/useHasHydrated";
12 | import { useEffect } from "react";
13 | import { useRouter } from "next/router";
14 |
15 | const inter = Inter({
16 | subsets: ["latin"],
17 | });
18 |
19 | const MyApp: AppType<{ session: Session | null }> = ({
20 | Component,
21 | pageProps: { session, ...pageProps },
22 | // pageProps,
23 | }) => {
24 | const { theme } = useThemeStore();
25 |
26 | const { pathname } = useRouter();
27 |
28 | useEffect(() => {
29 | if (pathname === "/" || pathname.includes("auth")) return;
30 |
31 | theme === "dark"
32 | ? document.body.classList.add("dark")
33 | : document.body.classList.remove("dark");
34 | }, [theme, pathname]);
35 |
36 | return (
37 | <>
38 | {/* Inter font wrapper */}
39 |
44 |
45 |
47 |
48 | );
49 | };
50 |
51 | export default api.withTRPC(MyApp);
52 |
--------------------------------------------------------------------------------
/src/pages/api/auth/[...nextauth].ts:
--------------------------------------------------------------------------------
1 | import NextAuth from "next-auth";
2 | import { authOptions } from "../../../server/auth";
3 |
4 | export default NextAuth(authOptions);
5 |
--------------------------------------------------------------------------------
/src/pages/api/trpc/[trpc].ts:
--------------------------------------------------------------------------------
1 | import { createNextApiHandler } from "@trpc/server/adapters/next";
2 |
3 | import { env } from "../../../env/server.mjs";
4 | import { createTRPCContext } from "../../../server/api/trpc";
5 | import { appRouter } from "../../../server/api/root";
6 |
7 | // export API handler
8 | export default createNextApiHandler({
9 | router: appRouter,
10 | createContext: createTRPCContext,
11 | onError:
12 | env.NODE_ENV === "development"
13 | ? ({ path, error }) => {
14 | console.error(
15 | `❌ tRPC failed on ${path ?? ""}: ${error.message}`,
16 | );
17 | }
18 | : undefined,
19 | });
20 |
--------------------------------------------------------------------------------
/src/pages/auth/signin.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | faDiscord,
3 | faGithub,
4 | faGoogle,
5 | } from "@fortawesome/free-brands-svg-icons";
6 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7 | import {
8 | GetServerSideProps,
9 | GetServerSidePropsContext,
10 | InferGetServerSidePropsType,
11 | } from "next";
12 | import { getProviders, signIn } from "next-auth/react";
13 | import Link from "next/link";
14 | import { BookBookmark } from "phosphor-react";
15 | import React from "react";
16 | import Button from "../../components/Button";
17 | import PageLayout from "../../components/Layouts/Page";
18 | import { getServerAuthSession } from "../../server/auth";
19 |
20 | function Logo() {
21 | return (
22 |
25 |
27 | {/* App Name */}
28 | {/*
29 | LuccaNotes
30 | */}
31 |
32 | );
33 | }
34 |
35 | const iconProps = {
36 | className: "text-blue-600 text-xl group-hover:text-white",
37 | };
38 |
39 | function SignInPage({
40 | providers,
41 | }: InferGetServerSidePropsType) {
42 | return (
43 |
49 | {/* Logo */}
50 |
54 |
Sign in with
55 |
56 | {/* Login buttons container */}
57 |
58 | {Object.values(providers).map((provider) => (
59 | // Login button
60 |
void signIn(provider.id)}
64 | >
65 |
66 | {provider.id === "discord" && (
67 |
76 |
77 | {provider.name}
78 |
79 |
80 | ))}
81 |
82 |
84 | );
85 | }
86 |
87 | export const getServerSideProps = async (
88 | context: GetServerSidePropsContext
89 | ) => {
90 | const session = await getServerAuthSession(context);
91 |
92 | if (session) {
93 | return {
94 | redirect: { destination: "/notes" },
95 | };
96 | }
97 |
98 | const providers = await getProviders();
99 |
100 | return { props: { providers: providers ?? [] } };
101 | };
102 |
103 | export default SignInPage;
104 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { type GetServerSidePropsContext, type NextPage } from "next";
2 | import { type Session } from "next-auth";
3 | import { signIn } from "next-auth/react";
4 | import { getServerAuthSession } from "../server/auth";
5 |
6 | // Phosphor and FontAwesome icons
7 | import {
8 | BookBookmark,
9 | Eye,
10 | FloppyDisk,
11 | Keyboard,
12 | MagnifyingGlass,
13 | Tag,
14 | } from "phosphor-react";
15 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
16 | import { faMarkdown } from "@fortawesome/free-brands-svg-icons";
17 | import Button from "../components/Button";
18 | import Tooltip from "../components/Tooltip";
19 | import Navbar from "../components/Navbar";
20 | import Head from "next/head";
21 |
22 | export const getServerSideProps = async (
23 | context: GetServerSidePropsContext
24 | ) => {
25 | const session = await getServerAuthSession(context);
26 |
27 | if (session) {
28 | return {
29 | redirect: {
30 | destination: "/notes",
31 | permanent: false,
32 | },
33 | };
34 | }
35 |
36 | // Pass data to the page via props
37 | return { props: { session: null } };
38 | };
39 |
40 | const iconProps = {
41 | className:
42 | "rounded-tl-xl md:rounded-full bg-blue-600 h-16 md:h-14 w-16 md:w-14 p-3.5 md:p-3 text-white md:drop-shadow-md",
43 | weight: "bold",
44 | } as const;
45 |
46 | type Feature = {
47 | icon: JSX.Element;
48 | title: string;
49 | content: string;
50 | };
51 |
52 | const features: Feature[] = [
53 | {
54 | icon: (
55 |
56 |
58 | ),
59 | title: "GitHub Flavored Markdown",
60 | content:
61 | "The best flavor of Markdown! The GFM spec is supported by LuccaNotes' text editor and Markdown renderer for note previews.",
62 | },
63 | {
64 | icon:
98 | {/* Icon */}
99 |
100 | {f.icon}
101 |
102 | {/* Title */}
103 |
{f.title}
104 | {/* Content */}
105 |
{f.content}
106 |
125 |
126 |
{title}
127 |
128 | {heading}
129 |
130 |
{description}
131 | {children}
132 |
134 | );
135 | }
136 |
137 | function TechLogo({
138 | label,
139 | src,
140 | link,
141 | tooltipPosition = "bottom",
142 | rounded = false,
143 | }: {
144 | label: string;
145 | src: string;
146 | link: string;
147 | tooltipPosition?: "bottom" | "top";
148 | rounded?: boolean;
149 | }) {
150 | return (
151 |
170 | );
171 | }
172 |
173 | function Logo() {
174 | return (
175 |
176 |
177 |
179 |
180 | LuccaNotes
181 |
182 |
189 |
190 |
LuccaNotes • Note-taking app for Markdown lovers 💙
191 |
192 |
193 |
194 | {/* Hero section */}
195 |
202 | {/* Navbar with transparent background */}
203 |
207 |
208 | The open-source note-taking app for Markdown lovers 💙
209 |
210 |
211 | {/* Subtitle */}
212 |
213 | A no-frills web app for all your Markdown note-taking needs,
214 | laser-focused on productivity and unobtrusive UX, and powered by
215 | awesome open-source tech.
216 |
217 |
221 | void signIn(undefined, { callbackUrl: "/notes" })}
240 | shadow
241 | />
242 |
243 |
244 |
257 |
258 | {/* Features section */}
259 |
267 | {/* Feature cards */}
268 |
269 | {features.map((f, index) => (
270 |
273 |
274 |
275 | {/* Technologies section */}
276 |
284 | {/* Logos */}
285 |
286 |
378 |
379 |
380 | {/* CTA section */}
381 |
390 | {/* Sign in button */}
391 |
392 | void signIn(undefined, { callbackUrl: "/notes" })}
401 | shadow
402 | />
403 |
404 |
405 | {/* Editor preview image (desktop) */}
406 |
415 |
420 |
425 |
427 |
428 | {/* Footer */}
429 |
444 |
445 |
88 | {String(children).replace(/\n$/, "")}
89 |
90 | ) : (
91 |
92 | {children}
93 |
94 | );
95 | },
96 | }}
97 | >
98 | {editorContent}
99 |
100 | );
101 | };
102 |
103 | const MemoedMarkdownPreview = memo(MarkdownPreview);
104 |
105 | function TextEditor({
106 | initialContent,
107 | setEditorContent,
108 | debouncedAutoSave,
109 | }: {
110 | initialContent: string;
111 | setEditorContent: (newContent: string) => void;
112 | debouncedAutoSave: () => void;
113 | }) {
114 | const { theme } = useThemeStore();
115 |
116 | const onEditorChange = useCallback(
117 | (value: string, viewUpdate: ViewUpdate) => {
118 | setEditorContent(value);
119 | debouncedAutoSave();
120 | },
121 | []
122 | );
123 |
124 | return (
125 |
166 | {/* Top bar */}
167 |
168 | {/* Top bar title */}
169 |
170 | Editor
172 |
173 |
174 | {/* Top bar buttons */}
175 |
176 |
177 | Last edited {formatDate(note.lastUpdated)}
178 |
179 |
180 | saveNote()}
189 | loading={mutationLoading}
190 | />
191 | setModalOpen(true)}
200 | />
201 | {previewOpen ? (
202 | setPreviewOpen(false)}
211 | />
212 | ) : (
213 | setPreviewOpen(true)}
222 | />
223 | )}
224 |
225 |
226 |
234 | );
235 | }
236 |
237 | const MemoedEditorPanel = memo(EditorPanel);
238 |
239 | // React Markdown preview panel
240 | function PreviewPanel({
241 | debouncedEditorContent,
242 | }: {
243 | debouncedEditorContent: string;
244 | }) {
245 | const { theme } = useThemeStore();
246 |
247 | return (
248 |
249 | {/* Topbar */}
250 |
251 | Preview
253 |
254 | {/* Markdown Preview */}
255 |
256 |
261 |
262 | );
263 | }
264 |
265 | const NotePage = (
266 | props: InferGetServerSidePropsType
267 | ) => {
268 | // nextAuth
269 | const session = useSession().data as Session;
270 |
271 | // trpc
272 | const noteQuery = api.notes.getSingle.useQuery({ id: props.noteId });
273 | const noteContentMutation = api.notes.updateContent.useMutation();
274 | const tagsQuery = api.tags.getAll.useQuery();
275 | const note = noteQuery.data;
276 | const tags = tagsQuery.data;
277 | const utils = api.useContext();
278 |
279 | // diff-match-patch
280 | const dmp = useMemo(() => {
281 | return new DMP.diff_match_patch();
282 | }, []);
283 |
284 | // editor state
285 | const [prevEditorContent, setPrevEditorContent] = useState(props.content);
286 | const [editorContent, setEditorContent] = useState(props.content);
287 | const [debouncedEditorContent] = useDebounce(editorContent, 500);
288 | const [previewOpen, setPreviewOpen] = useState(true);
289 | const [modalOpen, setModalOpen] = useState(false);
290 |
291 | // auto-saving with input debouncing
292 | const debouncedAutoSave = useDebouncedCallback(() => {
293 | saveNote();
294 | }, 2000);
295 |
296 | // note saving function
297 | const saveNote = useCallback(() => {
298 | if (!note || !tags) return;
299 | const patches = dmp.patch_make(prevEditorContent, editorContent);
300 | noteContentMutation.mutate(
301 | { id: props.noteId, patches },
302 | {
303 | onSuccess: (updatedNote, variables, context) => {
304 | void utils.notes.getSingle.invalidate({ id: variables.id });
305 | setPrevEditorContent(editorContent);
306 | },
307 | }
308 | );
309 | }, [
310 | dmp,
311 | editorContent,
312 | note,
313 | noteContentMutation,
314 | prevEditorContent,
315 | props.noteId,
316 | tags,
317 | utils.notes.getSingle,
318 | ]);
319 |
320 | // shortcut handler
321 | useEffect(() => {
322 | const handler = (e: KeyboardEvent) => {
323 | if (e.ctrlKey && e.key === "s") {
324 | e.preventDefault();
325 | if (noteContentMutation.isLoading) return;
326 | saveNote();
327 | }
328 | };
329 |
330 | document.addEventListener("keydown", handler);
331 | return () => document.removeEventListener("keydown", handler);
332 | }, [noteContentMutation.isLoading, saveNote]);
333 |
334 | return (
335 |
336 |
337 |
338 | {note
339 | ? `LuccaNotes • ${note.title}`
340 | : `LuccaNotes • Loading note...`}
341 |
342 |
343 |
344 |
345 |
346 | {/* Desktop */}
347 |
348 | {!note || !tags ? (
349 | // Loading state
350 | <>
351 | {/* Editor */}
352 |
353 |
358 | {/* Markdown preview */}
359 |
360 |
365 |
366 | ) : (
367 | // Loaded
368 | <>
369 | {/* Editor Panel */}
370 |
381 |
382 | {/* Preview Panel */}
383 | {previewOpen && (
384 |
385 | )}
386 |
387 | )}
388 |
389 |
390 | {/* Mobile */}
391 |
392 |
393 |
394 | {/* Tabs */}
395 |
396 |
397 | Editor
398 |
399 |
400 |
401 | Preview
402 |
403 |
404 |
405 | {/* Buttons */}
406 | {note && tags && (
407 |
408 | saveNote()}
419 | loading={noteContentMutation.isLoading}
420 | />
421 | setModalOpen(true)}
430 | />
431 |
432 | )}
433 |
435 | {!note || !tags ? (
436 | // Loading state
437 | <>
438 | {/* Editor */}
439 |
440 |
445 |
446 | {/* Markdown preview */}
447 |
448 |
453 |
454 | ) : (
455 | <>
456 |
457 |
469 |
470 |
471 |
475 |
476 | )}
477 |
478 |
479 |
480 |
481 | {/* Modal */}
482 | {modalOpen && note && tags && (
483 |
489 | )}
490 |
70 | ) {
71 | // next auth
72 | const session = useSession().data as Session;
73 |
74 | // dummy data
75 | const fakeNote: NoteWithTags = {
76 | createdAt: new Date(),
77 | id: nanoid(),
78 | lastUpdated: new Date(),
79 | tags: [
80 | {
81 | color: "green",
82 | id: nanoid(),
83 | createdAt: new Date(),
84 | label: "test tag",
85 | userId: session.user.id,
86 | },
87 | {
88 | color: "green",
89 | id: nanoid(),
90 | createdAt: new Date(),
91 | label: "test tag",
92 | userId: session.user.id,
93 | },
94 | {
95 | color: "green",
96 | id: nanoid(),
97 | createdAt: new Date(),
98 | label: "test tag",
99 | userId: session.user.id,
100 | },
101 | ],
102 | title: "Fake Note",
103 | userId: session.user.id,
104 | };
105 |
106 | // trpc
107 | const tagsQuery = api.tags.getAll.useQuery(undefined, {});
108 | const notesQuery = api.notes.getAll.useQuery();
109 | const notes = useMemo(() => {
110 | return notesQuery.data ?? [];
111 | }, [notesQuery.data]);
112 | const tags = tagsQuery.data ?? [];
113 |
114 | // modals state
115 | const [tagModalOpen, setTagModalOpen] = useState(false);
116 | const [createNoteModalOpen, setCreateNoteModalOpen] = useState(false);
117 |
118 | // zustand
119 | const { searchInput, sortField, sortOrder, selectedTagIds } =
120 | useSearchStore();
121 |
122 | // compute visible notes
123 | const visibleNotes = useMemo(() => {
124 | // sort notes
125 | const sortedNotes = sortNotes(notes, sortField, sortOrder);
126 |
127 | return (
128 | sortedNotes
129 | // match selected tags
130 | .filter((note) => {
131 | // pass all notes if there are no selected tags
132 | if (selectedTagIds.length === 0) return true;
133 | // check if `selectedTagIds` is a subset of `noteTagIds`
134 | const noteTagIds = note.tags.map((t) => t.id);
135 | for (const selectedTagId of selectedTagIds) {
136 | if (!noteTagIds.includes(selectedTagId)) return false;
137 | }
138 | return true;
139 | })
140 | // match note title
141 | .filter((note) =>
142 | note.title.toLowerCase().includes(searchInput.toLowerCase())
143 | )
144 | );
145 | }, [searchInput, sortField, sortOrder, notes, selectedTagIds]);
146 | return (
147 |
148 |
149 | LuccaNotes • {session.user.name}'s notes
150 |
151 |
152 | {/* Top row */}
153 |
154 |
155 |
156 | setTagModalOpen(true)}
164 | iconOnly
165 | />
166 | setCreateNoteModalOpen(true)}
175 | />
176 |
177 |
182 |
189 | ) : visibleNotes.length ? (
190 |
191 | {visibleNotes.map((note, index) => (
192 | = 3
197 | }
198 | dateType={sortField === "createdAt" ? "createdAt" : "lastUpdated"}
199 | tags={tags}
200 | />
201 | ))}
202 |
203 | ) : selectedTagIds.length === 0 && !searchInput ? (
204 |
205 | No notes to see here.
206 | New note to
209 | create one!
210 |
211 | ) : (
212 |
213 | No notes match these filters.
214 | New note to
217 | create one!
218 |
219 | )}
220 |
221 | {/* Mobile button container */}
222 |
223 | setTagModalOpen(true)}
233 | iconOnly
234 | />
235 | setCreateNoteModalOpen(true)}
246 | />
247 |
248 | {/* Modals */}
249 | {tagModalOpen && (
250 | setSelectedNoteId(null)}
260 | // setSelectedNoteId={setSelectedNoteId}
261 | // selectedNote={notes?.find((n) => n.id === selectedNoteId) ?? null}
262 | tags={tags}
263 | />
264 | )} */}
265 | {createNoteModalOpen && (
266 |
273 | );
274 | }
275 |
276 | export const getServerSideProps = async (
277 | context: GetServerSidePropsContext
278 | ) => {
279 | const session = await getServerAuthSession(context);
280 |
281 | if (!session) {
282 | return {
283 | redirect: {
284 | destination: "/",
285 | permanent: false,
286 | },
287 | };
288 | }
289 |
290 | // Pass data to the page via props
291 | return { props: { session } };
292 | };
293 |
294 | export default NotesPage;
295 |
--------------------------------------------------------------------------------
/src/prisma-testing.ts:
--------------------------------------------------------------------------------
1 | import { prisma } from "./server/db";
2 | import { Prisma } from "@prisma/client";
3 |
4 | // local Postgres
5 | const userId = "clef30pju0000wgem8fl2rm6u";
6 |
7 | // supabase
8 | // const userId = "clehia9kk0000wg764sxumbfz";
9 |
10 | // railway
11 | // const userId = "clekgk5pq0000wgnbm6xere11";
12 |
13 | const tags: Prisma.TagCreateManyArgs["data"] = [
14 | {
15 | label: "Coding",
16 | color: "red",
17 | userId,
18 | },
19 | {
20 | label: "Music",
21 | color: "sky",
22 | userId,
23 | },
24 | {
25 | label: "School",
26 | color: "yellow",
27 | userId,
28 | },
29 | {
30 | label: "General",
31 | color: "lightGray",
32 | userId,
33 | },
34 | {
35 | label: "Tasks",
36 | color: "violet",
37 | userId,
38 | },
39 | {
40 | label: "Work",
41 | color: "green",
42 | userId,
43 | },
44 | {
45 | label: "Reading",
46 | color: "darkGray",
47 | userId,
48 | },
49 | ];
50 |
51 | // const notesList: Note[] = [
52 | // {
53 | // id: nanoid(),
54 | // title: "My First Note",
55 | // lastUpdated: subtractSeconds(defaultDate, 20),
56 | // createdAt: subtractSeconds(defaultDate, 30),
57 | // tags: [tags.coding, tags.music, tags.work, tags.general],
58 | // },
59 | // {
60 | // id: nanoid(),
61 | // title: "Second Note",
62 | // lastUpdated: subtractSeconds(defaultDate, 30),
63 | // createdAt: subtractSeconds(defaultDate, 20),
64 | // tags: [tags.work, tags.general, tags.coding, tags.music],
65 | // },
66 | // {
67 | // id: nanoid(),
68 | // title: "Note Number 3",
69 | // lastUpdated: defaultDate,
70 | // createdAt: subtractSeconds(defaultDate, 10),
71 | // tags: [tags.school, tags.tasks, tags.work, tags.general, tags.coding],
72 | // },
73 | // {
74 | // id: nanoid(),
75 | // title: "The 4th Note",
76 | // lastUpdated: subtractSeconds(defaultDate, 10),
77 | // createdAt: defaultDate,
78 | // tags: [
79 | // tags.coding,
80 | // tags.tasks,
81 | // tags.work,
82 | // tags.general,
83 | // tags.music,
84 | // tags.school,
85 | // ],
86 | // },
87 | // ];
88 |
89 | const notes: Prisma.NoteCreateArgs["data"][] = [
90 | // {
91 | // }
92 | ];
93 |
94 | // {
95 | // label: "Coding",
96 | // color: "RED",
97 | // userId,
98 | // },
99 |
100 | async function getUsers() {
101 | const users = await prisma.user.findMany();
102 | console.log(`Got ${users.length} users:`, users);
103 | }
104 |
105 | // async function deleteTags() {
106 | // const deletedTags = await prisma.tag.deleteMany();
107 | // console.log(`Deleted ${deletedTags.count} tags.`);
108 | // }
109 |
110 | async function seedTags() {
111 | const createdTags = await prisma.tag.createMany({ data: tags });
112 | // console.log(`Created tag:`, createdTag);
113 | console.log(`Created ${createdTags.count} tags`);
114 | }
115 |
116 | async function getTags() {
117 | const tags = await prisma.tag.findMany();
118 | console.log(`Got ${tags.length} tags:`, tags);
119 | }
120 |
121 | async function deleteTags() {
122 | const deletedTags = await prisma.tag.deleteMany();
123 | console.log(`Deleted ${deletedTags.count} tags.`);
124 | }
125 |
126 | async function seedNotes() {
127 | const notes: Prisma.NoteCreateManyArgs["data"] = [];
128 |
129 | for (let i = 1; i <= 10; i++) {
130 | const note: Prisma.NoteCreateManyInput = {
131 | title: `Auto Note #${i}`,
132 | userId,
133 | };
134 | notes.push(note);
135 | }
136 |
137 | const createdNotes = await prisma.note.createMany({ data: notes });
138 | console.log(`Created ${createdNotes.count} notes`);
139 | }
140 |
141 | async function getNotes() {
142 | const notes = await prisma.note.findMany();
143 | console.log(`Got ${notes.length} notes:`, notes);
144 | }
145 |
146 | async function deleteNotes() {
147 | const deletedNotes = await prisma.note.deleteMany({
148 | where: {
149 | title: { contains: "Auto Note" },
150 | },
151 | });
152 | console.log(`Deleted ${deletedNotes.count} Notes.`);
153 | }
154 |
155 | async function main() {
156 | // users
157 | // void (await getUsers());
158 | // tags
159 | // void (await seedTags());
160 | // void (await getTags());
161 | // void (await deleteTags());
162 | // notes
163 | void (await seedNotes());
164 | // void (await getNotes());
165 | // void (await deleteNotes());
166 | }
167 |
168 | void main();
169 |
--------------------------------------------------------------------------------
/src/server/api/root.ts:
--------------------------------------------------------------------------------
1 | import { createTRPCRouter } from "./trpc";
2 |
3 | // router imports
4 | import { exampleRouter } from "./routers/example";
5 | import { notesRouter } from "./routers/notes";
6 | import { tagsRouter } from "./routers/tags";
7 |
8 | /**
9 | * This is the primary router for your server.
10 | *
11 | * All routers added in /api/routers should be manually added here
12 | */
13 | export const appRouter = createTRPCRouter({
14 | example: exampleRouter,
15 | notes: notesRouter,
16 | tags: tagsRouter,
17 | });
18 |
19 | // export type definition of API
20 | export type AppRouter = typeof appRouter;
21 |
--------------------------------------------------------------------------------
/src/server/api/routers/example.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | import { createTRPCRouter, publicProcedure, protectedProcedure } from "../trpc";
4 |
5 | export const exampleRouter = createTRPCRouter({
6 | hello: publicProcedure
7 | .input(z.object({ text: z.string() }))
8 | .query(({ input }) => {
9 | return {
10 | greeting: `Hello ${input.text}`,
11 | };
12 | }),
13 |
14 | getAll: publicProcedure.query(({ ctx }) => {
15 | return ctx.prisma.example.findMany();
16 | }),
17 |
18 | getSecretMessage: protectedProcedure.query(() => {
19 | return "you can now see this secret message!";
20 | }),
21 | });
22 |
--------------------------------------------------------------------------------
/src/server/api/routers/notes.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | import { createTRPCRouter, protectedProcedure } from "../trpc";
3 | import DMP from "diff-match-patch";
4 | import { TRPCError } from "@trpc/server";
5 | import { Prisma, PrismaClient } from "@prisma/client";
6 | import { Session } from "next-auth";
7 |
8 | const diffSchema = z.tuple([z.number(), z.string()]);
9 | const patchesSchema: z.ZodType<(new () => DMP.patch_obj)[]> = z.any();
10 |
11 | // get current note content, check ownership
12 | async function getFullNote(
13 | prisma: PrismaClient,
14 | session: Session,
15 | noteId: string
16 | ) {
17 | const note = await prisma.note.findFirst({
18 | where: { id: noteId, userId: session.user.id },
19 | include: { tags: true },
20 | });
21 | if (!note) return null;
22 | return note;
23 | }
24 |
25 | export const notesRouter = createTRPCRouter({
26 | getSingle: protectedProcedure
27 | .input(z.object({ id: z.string().cuid() }))
28 | .query(({ ctx, input }) => {
29 | return ctx.prisma.note.findFirst({
30 | where: { id: input.id, userId: ctx.session.user.id },
31 | select: {
32 | id: true,
33 | createdAt: true,
34 | lastUpdated: true,
35 | title: true,
36 | userId: true,
37 | tags: { orderBy: { createdAt: "asc" } },
38 | },
39 | });
40 | }),
41 |
42 | getSingleContent: protectedProcedure
43 | .input(z.object({ id: z.string().cuid() }))
44 | .query(async ({ ctx, input }) => {
45 | return ctx.prisma.note.findFirst({
46 | where: { id: input.id, userId: ctx.session.user.id },
47 | select: { content: true, userId: true },
48 | });
49 | }),
50 |
51 | getAll: protectedProcedure.query(({ ctx }) => {
52 | return ctx.prisma.note.findMany({
53 | where: { userId: ctx.session.user.id },
54 | select: {
55 | id: true,
56 | createdAt: true,
57 | lastUpdated: true,
58 | title: true,
59 | userId: true,
60 | tags: { orderBy: { createdAt: "asc" } },
61 | },
62 | });
63 | }),
64 |
65 | create: protectedProcedure
66 | .input(z.object({ title: z.string(), tagIds: z.string().cuid().array() }))
67 | .mutation(async ({ ctx, input }) => {
68 | return ctx.prisma.note.create({
69 | data: {
70 | title: input.title,
71 | tags: {
72 | connect: input.tagIds.map((tagId) => ({ id: tagId })),
73 | },
74 | userId: ctx.session.user.id,
75 | },
76 | select: {
77 | id: true,
78 | createdAt: true,
79 | lastUpdated: true,
80 | title: true,
81 | userId: true,
82 | tags: { orderBy: { createdAt: "asc" } },
83 | },
84 | });
85 | }),
86 |
87 | delete: protectedProcedure
88 | .input(z.object({ id: z.string().cuid() }))
89 | .mutation(async ({ ctx, input }) => {
90 | const note = await ctx.prisma.note.findFirst({
91 | where: { id: input.id, userId: ctx.session.user.id },
92 | });
93 |
94 | if (!note) throw new TRPCError({ code: "NOT_FOUND" });
95 |
96 | return await ctx.prisma.note.delete({
97 | where: { id: input.id },
98 | select: {
99 | id: true,
100 | createdAt: true,
101 | lastUpdated: true,
102 | title: true,
103 | userId: true,
104 | tags: { orderBy: { createdAt: "asc" } },
105 | },
106 | });
107 | }),
108 |
109 | rename: protectedProcedure
110 | .input(z.object({ id: z.string().cuid(), newTitle: z.string() }))
111 | .mutation(async ({ ctx, input }) => {
112 | const note = await ctx.prisma.note.findFirst({
113 | where: { id: input.id, userId: ctx.session.user.id },
114 | });
115 |
116 | if (!note) throw new TRPCError({ code: "NOT_FOUND" });
117 |
118 | return ctx.prisma.note.update({
119 | where: { id: input.id },
120 | data: { title: input.newTitle },
121 | select: {
122 | id: true,
123 | createdAt: true,
124 | lastUpdated: true,
125 | title: true,
126 | userId: true,
127 | tags: { orderBy: { createdAt: "asc" } },
128 | },
129 | });
130 | }),
131 |
132 | addTag: protectedProcedure
133 | .input(z.object({ id: z.string().cuid(), tagId: z.string().cuid() }))
134 | .mutation(async ({ ctx, input }) => {
135 | const note = await ctx.prisma.note.findFirst({
136 | where: { id: input.id, userId: ctx.session.user.id },
137 | });
138 |
139 | if (!note) throw new TRPCError({ code: "NOT_FOUND" });
140 |
141 | return ctx.prisma.note.update({
142 | where: { id: input.id },
143 | data: {
144 | tags: { connect: { id: input.tagId } },
145 | },
146 | select: {
147 | id: true,
148 | createdAt: true,
149 | lastUpdated: true,
150 | title: true,
151 | userId: true,
152 | tags: { orderBy: { createdAt: "asc" } },
153 | },
154 | });
155 | }),
156 |
157 | removeTag: protectedProcedure
158 | .input(z.object({ id: z.string().cuid(), tagId: z.string().cuid() }))
159 | .mutation(async ({ ctx, input }) => {
160 | const note = await ctx.prisma.note.findFirst({
161 | where: { id: input.id, userId: ctx.session.user.id },
162 | });
163 |
164 | if (!note) throw new TRPCError({ code: "NOT_FOUND" });
165 |
166 | return ctx.prisma.note.update({
167 | where: { id: input.id },
168 | data: {
169 | tags: { disconnect: { id: input.tagId } },
170 | },
171 | select: {
172 | id: true,
173 | createdAt: true,
174 | lastUpdated: true,
175 | title: true,
176 | userId: true,
177 | tags: { orderBy: { createdAt: "asc" } },
178 | },
179 | });
180 | }),
181 |
182 | updateContent: protectedProcedure
183 | .input(
184 | z.object({
185 | id: z.string().cuid(),
186 | patches: patchesSchema,
187 | })
188 | )
189 | .mutation(async ({ ctx, input }) => {
190 | console.log("Got patches:", input.patches);
191 |
192 | const note = await getFullNote(ctx.prisma, ctx.session, input.id);
193 | if (!note) throw new TRPCError({ code: "NOT_FOUND" });
194 |
195 | // compute and apply text patches
196 | const dmp = new DMP.diff_match_patch();
197 |
198 | const [newContent, results] = dmp.patch_apply(
199 | input.patches,
200 | note.content
201 | );
202 |
203 | // update note with new text content
204 | const updatedNote = await ctx.prisma.note.update({
205 | where: { id: input.id },
206 | data: { content: newContent, lastUpdated: new Date() },
207 | include: { tags: true },
208 | });
209 | return;
210 | }),
211 | });
212 |
--------------------------------------------------------------------------------
/src/server/api/routers/tags.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | import { createTRPCRouter, protectedProcedure } from "../trpc";
3 | import { Color } from "@prisma/client";
4 |
5 | export const tagsRouter = createTRPCRouter({
6 | getAll: protectedProcedure.query(({ ctx }) => {
7 | return ctx.prisma.tag.findMany({
8 | where: { userId: ctx.session.user.id },
9 | orderBy: { createdAt: "asc" },
10 | });
11 | }),
12 | create: protectedProcedure
13 | .input(z.object({ label: z.string(), color: z.nativeEnum(Color) }))
14 | .mutation(({ ctx, input }) => {
15 | console.log("Got mutation!", input);
16 | return ctx.prisma.tag.create({
17 | data: {
18 | label: input.label,
19 | color: input.color,
20 | userId: ctx.session.user.id,
21 | },
22 | });
23 | }),
24 | delete: protectedProcedure
25 | .input(z.object({ id: z.string().cuid() }))
26 | .mutation(({ ctx, input }) => {
27 | return ctx.prisma.tag.delete({ where: { id: input.id } });
28 | }),
29 | });
30 |
--------------------------------------------------------------------------------
/src/server/api/trpc.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS:
3 | * 1. You want to modify request context (see Part 1).
4 | * 2. You want to create a new middleware or type of procedure (see Part 3).
5 | *
6 | * tl;dr - This is where all the tRPC server stuff is created and plugged in.
7 | * The pieces you will need to use are documented accordingly near the end.
8 | */
9 |
10 | /**
11 | * 1. CONTEXT
12 | *
13 | * This section defines the "contexts" that are available in the backend API.
14 | *
15 | * These allow you to access things when processing a request, like the
16 | * database, the session, etc.
17 | */
18 | import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
19 | import { type Session } from "next-auth";
20 |
21 | import { getServerAuthSession } from "../auth";
22 | import { prisma } from "../db";
23 |
24 | type CreateContextOptions = {
25 | session: Session | null;
26 | };
27 |
28 | /**
29 | * This helper generates the "internals" for a tRPC context. If you need to use
30 | * it, you can export it from here.
31 | *
32 | * Examples of things you may need it for:
33 | * - testing, so we don't have to mock Next.js' req/res
34 | * - tRPC's `createSSGHelpers`, where we don't have req/res
35 | *
36 | * @see https://create.t3.gg/en/usage/trpc#-servertrpccontextts
37 | */
38 | const createInnerTRPCContext = (opts: CreateContextOptions) => {
39 | return {
40 | session: opts.session,
41 | prisma,
42 | };
43 | };
44 |
45 | /**
46 | * This is the actual context you will use in your router. It will be used to
47 | * process every request that goes through your tRPC endpoint.
48 | *
49 | * @see https://trpc.io/docs/context
50 | */
51 | export const createTRPCContext = async (opts: CreateNextContextOptions) => {
52 | const { req, res } = opts;
53 |
54 | // Get the session from the server using the getServerSession wrapper function
55 | const session = await getServerAuthSession({ req, res });
56 |
57 | return createInnerTRPCContext({
58 | session,
59 | });
60 | };
61 |
62 | /**
63 | * 2. INITIALIZATION
64 | *
65 | * This is where the tRPC API is initialized, connecting the context and
66 | * transformer.
67 | */
68 | import { initTRPC, TRPCError } from "@trpc/server";
69 | import superjson from "superjson";
70 |
71 | const t = initTRPC.context().create({
72 | transformer: superjson,
73 | errorFormatter({ shape }) {
74 | return shape;
75 | },
76 | });
77 |
78 | /**
79 | * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
80 | *
81 | * These are the pieces you use to build your tRPC API. You should import these
82 | * a lot in the "/src/server/api/routers" directory.
83 | */
84 |
85 | /**
86 | * This is how you create new routers and sub-routers in your tRPC API.
87 | *
88 | * @see https://trpc.io/docs/router
89 | */
90 | export const createTRPCRouter = t.router;
91 |
92 | /**
93 | * Public (unauthenticated) procedure
94 | *
95 | * This is the base piece you use to build new queries and mutations on your
96 | * tRPC API. It does not guarantee that a user querying is authorized, but you
97 | * can still access user session data if they are logged in.
98 | */
99 | export const publicProcedure = t.procedure;
100 |
101 | /**
102 | * Reusable middleware that enforces users are logged in before running the
103 | * procedure.
104 | */
105 | const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
106 | if (!ctx.session || !ctx.session.user) {
107 | throw new TRPCError({ code: "UNAUTHORIZED" });
108 | }
109 | return next({
110 | ctx: {
111 | // infers the `session` as non-nullable
112 | session: { ...ctx.session, user: ctx.session.user },
113 | },
114 | });
115 | });
116 |
117 | /**
118 | * Protected (authenticated) procedure
119 | *
120 | * If you want a query or mutation to ONLY be accessible to logged in users, use
121 | * this. It verifies the session is valid and guarantees `ctx.session.user` is
122 | * not null.
123 | *
124 | * @see https://trpc.io/docs/procedures
125 | */
126 | export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);
127 |
--------------------------------------------------------------------------------
/src/server/auth.ts:
--------------------------------------------------------------------------------
1 | import type { GetServerSidePropsContext } from "next";
2 | import {
3 | getServerSession,
4 | type NextAuthOptions,
5 | type DefaultSession,
6 | } from "next-auth";
7 | import DiscordProvider from "next-auth/providers/discord";
8 | import GoogleProvider from "next-auth/providers/google";
9 | import { PrismaAdapter } from "@next-auth/prisma-adapter";
10 | import { env } from "../env/server.mjs";
11 | import { prisma } from "./db";
12 |
13 | /**
14 | * Module augmentation for `next-auth` types.
15 | * Allows us to add custom properties to the `session` object and keep type
16 | * safety.
17 | *
18 | * @see https://next-auth.js.org/getting-started/typescript#module-augmentation
19 | **/
20 | declare module "next-auth" {
21 | interface Session extends DefaultSession {
22 | user: {
23 | id: string;
24 | // ...other properties
25 | // role: UserRole;
26 | } & DefaultSession["user"];
27 | }
28 |
29 | // interface User {
30 | // // ...other properties
31 | // // role: UserRole;
32 | // }
33 | }
34 |
35 | /**
36 | * Options for NextAuth.js used to configure adapters, providers, callbacks,
37 | * etc.
38 | *
39 | * @see https://next-auth.js.org/configuration/options
40 | **/
41 | export const authOptions: NextAuthOptions = {
42 | callbacks: {
43 | session({ session, user }) {
44 | if (session.user) {
45 | session.user.id = user.id;
46 | // session.user.role = user.role; <-- put other properties on the session here
47 | }
48 | return session;
49 | },
50 | },
51 | adapter: PrismaAdapter(prisma),
52 | providers: [
53 | DiscordProvider({
54 | clientId: env.DISCORD_CLIENT_ID,
55 | clientSecret: env.DISCORD_CLIENT_SECRET,
56 | }),
57 | GoogleProvider({
58 | clientId: env.GOOGLE_CLIENT_ID,
59 | clientSecret: env.GOOGLE_CLIENT_SECRET,
60 | }),
61 | /**
62 | * ...add more providers here
63 | *
64 | * Most other providers require a bit more work than the Discord provider.
65 | * For example, the GitHub provider requires you to add the
66 | * `refresh_token_expires_in` field to the Account model. Refer to the
67 | * NextAuth.js docs for the provider you want to use. Example:
68 | * @see https://next-auth.js.org/providers/github
69 | **/
70 | ],
71 | debug: false,
72 | pages: {
73 | signIn: "/auth/signin",
74 | // error: "https://example.com", // Error code passed in query string as ?error=
75 | },
76 | };
77 |
78 | /**
79 | * Wrapper for `getServerSession` so that you don't need to import the
80 | * `authOptions` in every file.
81 | *
82 | * @see https://next-auth.js.org/configuration/nextjs
83 | **/
84 | export const getServerAuthSession = (ctx: {
85 | req: GetServerSidePropsContext["req"];
86 | res: GetServerSidePropsContext["res"];
87 | }) => {
88 | return getServerSession(ctx.req, ctx.res, authOptions);
89 | };
90 |
--------------------------------------------------------------------------------
/src/server/db.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from "@prisma/client";
2 |
3 | import { env } from "../env/server.mjs";
4 |
5 | const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
6 |
7 | export const prisma =
8 | globalForPrisma.prisma ||
9 | new PrismaClient({
10 | // log:
11 | // env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
12 | });
13 |
14 | if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
15 |
--------------------------------------------------------------------------------
/src/stores/search.ts:
--------------------------------------------------------------------------------
1 | import { type Tag } from "@prisma/client";
2 | import { create } from "zustand";
3 | import { devtools } from "zustand/middleware";
4 |
5 | export type ThemeType = "dark" | "light";
6 |
7 | // Sort fields
8 | const sortFieldLabels = {
9 | title: "Title",
10 | createdAt: "Creation Date",
11 | lastUpdated: "Last Updated",
12 | } as const;
13 | type SortField = keyof typeof sortFieldLabels;
14 |
15 | interface ThemeStore {
16 | // search input
17 | searchInput: string;
18 | setSearchInput: (newSearchInput: string) => void;
19 | // sort field
20 | sortField: SortField;
21 | setSortField: (newSortField: SortField) => void;
22 | // sort order
23 | sortOrder: "asc" | "desc";
24 | setSortOrder: (newSortOrder: "asc" | "desc") => void;
25 | // selected tags
26 | selectedTagIds: string[];
27 | toggleSelectedTag: (tagId: string) => void;
28 | }
29 |
30 | const useSearchStore = create()(
31 | devtools(
32 | (set) => ({
33 | // search input
34 | searchInput: "",
35 | setSearchInput: (newSearchInput) => set({ searchInput: newSearchInput }),
36 | // sort field
37 | sortField: "lastUpdated",
38 | setSortField: (newSortField) => set({ sortField: newSortField }),
39 | // sort order
40 | sortOrder: "desc",
41 | setSortOrder: (newSortOrder) => set({ sortOrder: newSortOrder }),
42 | // selected tags
43 | selectedTagIds: [],
44 | toggleSelectedTag: (tagId) =>
45 | set((state) => {
46 | const newSelectedTags = state.selectedTagIds.includes(tagId)
47 | ? state.selectedTagIds.filter((id) => id !== tagId)
48 | : [...state.selectedTagIds, tagId];
49 | return { selectedTagIds: newSelectedTags };
50 | }),
51 | }),
52 | {
53 | name: "theme-storage",
54 | }
55 | )
56 | );
57 |
58 | export default useSearchStore;
59 |
--------------------------------------------------------------------------------
/src/stores/theme.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { devtools, persist } from "zustand/middleware";
3 |
4 | export type ThemeType = "dark" | "light";
5 |
6 | interface ThemeStore {
7 | theme: ThemeType;
8 | setTheme: (newTheme: ThemeType) => void;
9 | }
10 |
11 | const useThemeStore = create()(
12 | devtools(
13 | persist(
14 | (set) => ({
15 | theme: "light",
16 | setTheme: (newTheme) => set(() => ({ theme: newTheme })),
17 | }),
18 | {
19 | name: "theme-storage",
20 | }
21 | )
22 | )
23 | );
24 |
25 | export default useThemeStore;
26 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | /* codemirror editor */
6 | .cm-content {
7 | font-family: monospace;
8 | font-size: 16px;
9 | border: none;
10 | outline: none;
11 | }
12 |
13 | .cm-wrap {
14 | height: 100%;
15 | }
16 | .cm-scroller {
17 | overflow: auto;
18 | }
19 |
20 | /* markdown preview */
21 | .preview {
22 | @apply text-gray-800 dark:text-gray-200;
23 | }
24 |
25 | .preview h1,
26 | .preview h2 {
27 | @apply my-3 border-b-2 border-gray-300 pb-1 tracking-tight dark:border-gray-700;
28 | }
29 |
30 | .preview h3,
31 | .preview h4 {
32 | @apply mb-3 tracking-tight;
33 | }
34 |
35 | .preview h1 {
36 | @apply text-3xl font-bold;
37 | }
38 |
39 | .preview h2 {
40 | @apply text-2xl font-bold;
41 | }
42 |
43 | .preview h3 {
44 | @apply text-xl font-bold;
45 | }
46 |
47 | .preview h4 {
48 | @apply text-lg font-bold;
49 | }
50 |
51 | .preview p {
52 | @apply my-4;
53 | }
54 |
55 | .preview img {
56 | @apply mx-auto my-6 max-h-[600px] rounded-md;
57 | }
58 |
59 | .preview code {
60 | @apply rounded-md bg-gray-300 px-2 py-0.5 font-normal dark:bg-gray-700 dark:text-white;
61 | }
62 |
63 | .preview a,
64 | .preview a code {
65 | @apply text-blue-600 underline decoration-transparent hover:decoration-blue-600 dark:text-blue-400 dark:hover:decoration-blue-400;
66 | }
67 |
68 | .preview code[class*="language-"] {
69 | @apply px-0;
70 | }
71 |
--------------------------------------------------------------------------------
/src/styles/markdown.module.css:
--------------------------------------------------------------------------------
1 | .cm-content {
2 | font-family: monospace;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/src/utils/api.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This is the client-side entrypoint for your tRPC API.
3 | * It is used to create the `api` object which contains the Next.js
4 | * App-wrapper, as well as your type-safe React Query hooks.
5 | *
6 | * We also create a few inference helpers for input and output types
7 | */
8 | import { httpBatchLink, loggerLink } from "@trpc/client";
9 | import { createTRPCNext } from "@trpc/next";
10 | import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
11 | import superjson from "superjson";
12 |
13 | import { type AppRouter } from "../server/api/root";
14 |
15 | const getBaseUrl = () => {
16 | if (typeof window !== "undefined") return ""; // browser should use relative url
17 | if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
18 | return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
19 | };
20 |
21 | /** A set of type-safe react-query hooks for your tRPC API. */
22 | export const api = createTRPCNext({
23 | config() {
24 | return {
25 | /**
26 | * Transformer used for data de-serialization from the server.
27 | *
28 | * @see https://trpc.io/docs/data-transformers
29 | **/
30 | transformer: superjson,
31 |
32 | /**
33 | * Links used to determine request flow from client to server.
34 | *
35 | * @see https://trpc.io/docs/links
36 | * */
37 | links: [
38 | loggerLink({
39 | enabled: (opts) =>
40 | process.env.NODE_ENV === "development" ||
41 | (opts.direction === "down" && opts.result instanceof Error),
42 | }),
43 | httpBatchLink({
44 | url: `${getBaseUrl()}/api/trpc`,
45 | }),
46 | ],
47 | };
48 | },
49 | /**
50 | * Whether tRPC should await queries when server rendering pages.
51 | *
52 | * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
53 | */
54 | ssr: false,
55 | });
56 |
57 | /**
58 | * Inference helper for inputs.
59 | *
60 | * @example type HelloInput = RouterInputs['example']['hello']
61 | **/
62 | export type RouterInputs = inferRouterInputs;
63 |
64 | /**
65 | * Inference helper for outputs.
66 | *
67 | * @example type HelloOutput = RouterOutputs['example']['hello']
68 | **/
69 | export type RouterOutputs = inferRouterOutputs;
70 |
--------------------------------------------------------------------------------
/src/utils/dates.ts:
--------------------------------------------------------------------------------
1 | export function formatDate(date: Date): string {
2 | const nowInSeconds = Math.floor(Date.now() / 1000);
3 | const dateInSeconds = Math.floor(date.getTime() / 1000);
4 |
5 | const difference = nowInSeconds - dateInSeconds;
6 | let output = ``;
7 | if (difference < 60) {
8 | // Less than a minute has passed:
9 | // output = `${difference} ${difference === 1 ? "second" : "seconds"} ago`;
10 | output = "less than a minute ago";
11 | } else if (difference < 3600) {
12 | // Less than an hour has passed:
13 | output = `${Math.floor(difference / 60)} ${
14 | Math.floor(difference / 60) === 1 ? "minute" : "minutes"
15 | } ago`;
16 | } else if (difference < 86400) {
17 | // Less than a day has passed:
18 | output = `${Math.floor(difference / 3600)} ${
19 | Math.floor(difference / 3600) === 1 ? "hour" : "hours"
20 | } ago`;
21 | } else if (difference < 2620800) {
22 | // Less than a month has passed:
23 | output = `${Math.floor(difference / 86400)} ${
24 | Math.floor(difference / 86400) === 1 ? "day" : "days"
25 | } ago`;
26 | } else if (difference < 31449600) {
27 | // Less than a year has passed:
28 | output = `${Math.floor(difference / 2620800)} ${
29 | Math.floor(difference / 2620800) === 1 ? "month" : "months"
30 | } ago`;
31 | } else {
32 | // More than a year has passed:
33 | output = `${Math.floor(difference / 31449600)} ${
34 | Math.floor(difference / 31449600) === 1 ? "year" : "years"
35 | } ago`;
36 | }
37 |
38 | return output;
39 | }
40 |
--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ["./src/**/*.{js,ts,jsx,tsx}"],
4 | darkMode: "class",
5 | theme: {
6 | extend: {
7 | colors: {
8 | gray: {
9 | 850: "#151E31",
10 | 950: "#0A0F1C",
11 | },
12 | },
13 | },
14 | },
15 | plugins: [
16 | require("@headlessui/tailwindcss")({ prefix: "ui" }),
17 | require("@tailwindcss/typography"),
18 | ],
19 | };
20 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
165 | 
249 |
250 | {/* Hero image (desktop) */}
251 | 
256 | 
411 |
412 | {/* Editor preview image (mobile) */}
413 |
414 | 
420 | 
425 |