4 |
6 | );
7 | };
8 |
9 | export default Footer;
10 |
--------------------------------------------------------------------------------
/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes©Jotion | 2024
5 |
6 |
8 | {children}
9 |
10 |
11 | );
12 | };
13 |
14 | export default MarketingLayout;
15 |
--------------------------------------------------------------------------------
/app/(marketing)/page.tsx:
--------------------------------------------------------------------------------
1 | import Hero from "./_components/Hero";
2 | import Footer from "./_components/Footer";
3 | import Heading from "./_components/Heading";
4 |
5 | const MarketingPage = () => {
6 | return (
7 |
8 |
14 | );
15 | };
16 |
17 | export default MarketingPage;
18 |
--------------------------------------------------------------------------------
/hooks/useCoverImage.tsx:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 |
3 | type CoverImageStore = {
4 | url?: string;
5 | isOpen: boolean;
6 | onOpen: () => void;
7 | onClose: () => void;
8 | onReplace: (url: string) => void;
9 | };
10 |
11 | export const useCoverImage = create
9 |
12 |
13 |
15 |
31 | );
32 | };
33 |
34 | export default Logo;
35 |
--------------------------------------------------------------------------------
/app/error.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/components/ui/button";
4 |
5 | import Link from "next/link";
6 | import Image from "next/image";
7 |
8 | const Error = () => {
9 | return (
10 | Jotion
30 |
11 |
30 | );
31 | };
32 |
33 | export default Error;
34 |
--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface TextareaProps
6 | extends React.TextareaHTMLAttributesSomething went wrong!
26 | 29 |A full-stack Productivity and Note-Taking Web Application built using Next.js.
4 | 5 | 6 | ## Preview of live site 7 |  8 |  9 | 10 | 11 | ## Key Features 12 | 13 | - Real-time Database 14 | - Notion-style Editor 15 | - Light and Dark Mode 16 | - Infinite Children Documents 17 | - Trash can & soft delete 18 | - Authentication 19 | - Real time updates 20 | - File upload 21 | - File deletion 22 | - Expandable sidebar 23 | - Fully responsive 24 | - Publish your note to the web 25 | - Cover image of each document 26 | - Recover deleted files 27 | 28 | ## Tech Stack 29 | 30 | - Next.js 14 31 | - Tailwind CSS 32 | - TypeScript 33 | - Clerk 34 | - Convex 35 | - Shadcn UI 36 | - Edgestore 37 | - BlockNote Editor 38 | - Next themes 39 | - Sonner 40 | - Zustand 41 | - Zod 42 | - Vercel 43 | -------------------------------------------------------------------------------- /app/(main)/layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useConvexAuth } from "convex/react"; 4 | 5 | import { redirect } from "next/navigation"; 6 | 7 | import Spinner from "@/components/Spinner"; 8 | import Navigation from "./_components/Navigation"; 9 | import SearchCommand from "@/components/SearchCommand"; 10 | 11 | const MainLayout = ({ children }: { children: React.ReactNode }) => { 12 | const { isAuthenticated, isLoading } = useConvexAuth(); 13 | 14 | if (isLoading) 15 | return ( 16 |
17 |
19 | );
20 |
21 | //every route inside main is now protected
22 | if (!isAuthenticated) {
23 | return redirect("/");
24 | }
25 |
26 | return (
27 |
28 |
30 |
33 |
34 | );
35 | };
36 |
37 | export default MainLayout;
38 |
--------------------------------------------------------------------------------
/components/modals/SettingsModal.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useSettings } from "@/hooks/useSettings";
4 |
5 | import { Dialog, DialogContent, DialogHeader } from "../ui/dialog";
6 | import { Label } from "../ui/label";
7 | import { ModeToggle } from "../ModeToggle";
8 |
9 | const SettingsModal = () => {
10 | const settings = useSettings();
11 |
12 | return (
13 |
29 | );
30 | };
31 |
32 | export default SettingsModal;
33 |
--------------------------------------------------------------------------------
/components/IconPicker.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import EmojiPicker, { Theme } from "emoji-picker-react";
4 |
5 | import { useTheme } from "next-themes";
6 |
7 | import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
8 |
9 | interface IconPickerProps {
10 | onChange: (icon: string) => void;
11 | children: React.ReactNode;
12 | asChild?: boolean;
13 | }
14 |
15 | const IconPicker = ({ onChange, children, asChild }: IconPickerProps) => {
16 | const { resolvedTheme } = useTheme();
17 | const currentTheme = (resolvedTheme || "light") as keyof typeof themeMap;
18 | const themeMap = {
19 | dark: Theme.DARK,
20 | light: Theme.LIGHT,
21 | };
22 | const theme = themeMap[currentTheme];
23 |
24 | return (
25 |
6 |
37 | );
38 | };
39 |
40 | export default Hero;
41 |
--------------------------------------------------------------------------------
/public/assets/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as PopoverPrimitive from "@radix-ui/react-popover";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | const Popover = PopoverPrimitive.Root;
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 |
12 | const PopoverContent = React.forwardRef<
13 | React.ElementRef
7 |
36 |
8 |
21 |
22 |
35 |
19 |
23 | Jotion is the connected workspace
24 | where
25 |
28 | {isLoading && (
29 |
40 |
43 |
44 | )}
45 |
46 | );
47 | };
48 |
49 | export default Heading;
50 |
--------------------------------------------------------------------------------
/app/(main)/(routes)/documents/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 |
5 | import { Button } from "@/components/ui/button";
6 |
7 | import { PlusCircle } from "lucide-react";
8 |
9 | import { api } from "@/convex/_generated/api";
10 |
11 | import { toast } from "sonner";
12 |
13 | import { useMutation } from "convex/react";
14 | import { useRouter } from "next/navigation";
15 |
16 | const Page = () => {
17 | const router = useRouter();
18 |
19 | const create = useMutation(api.documents.create);
20 |
21 | const onCreate = () => {
22 | const promise = create({ title: "Untitled" }).then((documentId) =>
23 | router.push(`/documents/${documentId}`)
24 | );
25 |
26 | toast.promise(promise, {
27 | loading: "Creating a new note...",
28 | success: "New Note created.",
29 | error: "Failed to create a new note!",
30 | });
31 | };
32 |
33 | return (
34 | 20 | Your Ideas, Documents, & Plans unified. 21 |
22 |
23 | Jotion is the connected workspace
24 | where
25 |
26 | better and faster work happens.
27 |
28 | {isLoading && (
29 |
30 |
32 | )}
33 | {isAuthenticated && !isLoading && (
34 |
37 | )}
38 | {!isAuthenticated && !isLoading && (
39 |
35 |
55 | );
56 | };
57 |
58 | export default Page;
59 |
--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Avatar = React.forwardRef<
9 | React.ElementRefWelcome to Jotion
50 | 54 |
19 |
53 | );
54 | };
55 |
56 | export default Navbar;
57 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "./globals.css";
2 |
3 | import { Inter } from "next/font/google";
4 |
5 | import { ThemeProvider } from "@/components/providers/ThemeProvider";
6 | import { ModalProvider } from "@/components/providers/ModalProvider";
7 | import { ConvexClientProvider } from "@/components/providers/ConvexProvider";
8 |
9 | import { EdgeStoreProvider } from "@/lib/edgestore";
10 |
11 | import { cn } from "@/lib/utils";
12 |
13 | import { Toaster } from "sonner";
14 |
15 | import type { Metadata } from "next";
16 |
17 | const inter = Inter({ subsets: ["latin"] });
18 |
19 | export const metadata: Metadata = {
20 | title: "Jotion",
21 | description: "The connected workspace where better, faster work happens.",
22 | icons: {
23 | icon: [
24 | {
25 | media: "(prefers-color-scheme: light)",
26 | url: "/assets/logo.svg",
27 | href: "/assets/logo.svg",
28 | },
29 | {
30 | media: "(prefers-color-scheme: dark)",
31 | url: "/assets/logo-dark.svg",
32 | href: "/assets/logo-dark.svg",
33 | },
34 | ],
35 | },
36 | };
37 |
38 | export default function RootLayout({
39 | children,
40 | }: {
41 | children: React.ReactNode;
42 | }) {
43 | return (
44 |
45 |
46 |
21 | {isLoading &&
52 |
25 |
26 |
29 |
30 |
31 |
34 |
35 |
36 | )}
37 | {isAuthenticated && !isLoading && (
38 |
39 |
49 | )}
50 |
42 |
52 | );
53 | }
54 |
55 | if (document === null) {
56 |
44 |
51 |
45 |
50 | Not Found
;
57 | }
58 |
59 | return (
60 |
61 |
67 | );
68 | };
69 |
70 | export default Page;
71 |
--------------------------------------------------------------------------------
/convex/_generated/dataModel.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /**
3 | * Generated data model types.
4 | *
5 | * THIS CODE IS AUTOMATICALLY GENERATED.
6 | *
7 | * Generated by convex@1.8.0.
8 | * To regenerate, run `npx convex dev`.
9 | * @module
10 | */
11 |
12 | import type {
13 | DataModelFromSchemaDefinition,
14 | DocumentByName,
15 | TableNamesInDataModel,
16 | SystemTableNames,
17 | } from "convex/server";
18 | import type { GenericId } from "convex/values";
19 | import schema from "../schema.js";
20 |
21 | /**
22 | * The names of all of your Convex tables.
23 | */
24 | export type TableNames = TableNamesInDataModel
63 |
66 |
42 |
52 | );
53 | }
54 |
55 | if (document === null) {
56 |
44 |
51 |
45 |
50 | Not Found
;
57 | }
58 |
59 | return (
60 |
61 |
71 | );
72 | };
73 |
74 | export default Page;
75 |
--------------------------------------------------------------------------------
/app/(main)/_components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { api } from "@/convex/_generated/api";
4 | import { Id } from "@/convex/_generated/dataModel";
5 |
6 | import { useQuery } from "convex/react";
7 | import { useParams } from "next/navigation";
8 |
9 | import { MenuIcon } from "lucide-react";
10 |
11 | import Title from "./Title";
12 | import Banner from "./Banner";
13 | import Menu from "./Menu";
14 | import Publish from "./Publish";
15 |
16 | interface NavbarProps {
17 | isCollapsed: boolean;
18 | onResetWidth: () => void;
19 | }
20 |
21 | const Navbar = ({ isCollapsed, onResetWidth }: NavbarProps) => {
22 | const params = useParams();
23 |
24 | const document = useQuery(api.documents.getById, {
25 | documentId: params.documentId as Id<"documents">,
26 | });
27 |
28 | if (document === undefined) {
29 | return (
30 |
36 | );
37 | }
38 |
39 | if (document === null) {
40 | return null;
41 | }
42 |
43 | return (
44 | <>
45 |
66 | {document.isArchived && (
67 |
63 |
70 |
64 | Last edited by: {user?.fullName}.
65 |
66 |
58 |
68 |
71 |
72 |
73 | );
74 | };
75 |
76 | export default Banner;
77 |
--------------------------------------------------------------------------------
/components/Editor/Editor.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { BlockNoteEditor, PartialBlock } from "@blocknote/core";
4 | import {
5 | BlockNoteView,
6 | FormattingToolbarPositioner,
7 | HyperlinkToolbarPositioner,
8 | ImageToolbarPositioner,
9 | SideMenuPositioner,
10 | SlashMenuPositioner,
11 | useBlockNote,
12 | } from "@blocknote/react";
13 | import "@blocknote/react/style.css";
14 | import "./styles.css";
15 |
16 | import { useTheme } from "next-themes";
17 | import { useMediaQuery } from "usehooks-ts";
18 | import { useEdgeStore } from "@/lib/edgestore";
19 |
20 | interface EditorProps {
21 | onChange: (value: string) => void;
22 | initialContent?: string;
23 | editable?: boolean;
24 | }
25 |
26 | const Editor = ({ onChange, initialContent, editable }: EditorProps) => {
27 | const { resolvedTheme } = useTheme();
28 | const isSmallScreen = useMediaQuery("(max-width: 800px)");
29 |
30 | const { edgestore } = useEdgeStore();
31 |
32 | const handleUpload = async (file: File) => {
33 | const response = await edgestore.publicFiles.upload({
34 | file,
35 | });
36 |
37 | return response.url;
38 | };
39 |
40 | const editor: BlockNoteEditor = useBlockNote({
41 | editable,
42 | initialContent: initialContent //@ts-ignore
43 | ? (JSON.parse(initialContent) as PartialBlock[])
44 | : undefined,
45 | onEditorContentChange: (editor) => {
46 | onChange(JSON.stringify(editor.topLevelBlocks, null, 2));
47 | },
48 | uploadFile: handleUpload,
49 | });
50 |
51 | return (
52 | ⓘ This page is in trash.
59 | 67 |
53 |
57 | {isSmallScreen ? (
58 | <>
59 |
71 |
72 | );
73 | };
74 |
75 | export default Editor;
76 |
--------------------------------------------------------------------------------
/app/(main)/_components/UserItem.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | DropdownMenu,
5 | DropdownMenuContent,
6 | DropdownMenuItem,
7 | DropdownMenuSeparator,
8 | DropdownMenuTrigger,
9 | } from "@/components/ui/dropdown-menu";
10 | import { Avatar, AvatarImage } from "@/components/ui/avatar";
11 |
12 | import { ChevronsLeftRight } from "lucide-react";
13 |
14 | import { SignOutButton, useUser } from "@clerk/clerk-react";
15 |
16 | const UserItem = () => {
17 | const { user } = useUser();
18 |
19 | return (
20 |
26 |
36 |
27 |
28 |
30 |
31 | {user?.firstName}'s Jotion
32 |
33 |
34 |
44 |
56 |
45 |
46 |
48 |
49 |
50 |
55 | {user?.fullName}
51 |52 | {user?.emailAddresses[0].emailAddress} 53 |
54 |
53 | {!!initialData.icon &&
77 | );
78 | };
79 |
80 | Title.Skeleton = function TitleSkeleton() {
81 | return {initialData.icon}
} 54 | {isEditing ? ( 55 | 64 | ) : ( 65 | 75 | )} 76 |
56 | {!!url &&
80 | );
81 | };
82 |
83 | Cover.Skeleton = function CoverSkeleton() {
84 | return
59 |
68 |
77 |
78 | )}
79 | {document.icon}
73 | ) : ( 74 |66 | {level === 0 ? "No pages" : "No pages inside"} 67 |
68 | )} 69 | 70 | {documents.map((document) => ( 71 |
72 | - onRedirect(document._id)}
75 | label={document.title}
76 | icon={FileIcon}
77 | documentIcon={document.icon}
78 | active={params.documentId === document._id}
79 | onExpand={() => onExpand(document._id)}
80 | expanded={expanded[document._id]}
81 | level={level}
82 | />
83 | {expanded[document._id] && (
84 | //to display all the child documents under a parent document
85 | //all the documents with that parent document id
86 |
89 | ))}
90 |
91 | );
92 | };
93 |
94 | export default DocumentList;
95 |
--------------------------------------------------------------------------------
/convex/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to your Convex functions directory!
2 |
3 | Write your Convex functions here. See
4 | https://docs.convex.dev/using/writing-convex-functions for more.
5 |
6 | A query function that takes two arguments looks like:
7 |
8 | ```ts
9 | // functions.js
10 | import { query } from "./_generated/server";
11 | import { v } from "convex/values";
12 |
13 | export const myQueryFunction = query({
14 | // Validators for arguments.
15 | args: {
16 | first: v.number(),
17 | second: v.string(),
18 | },
19 |
20 | // Function implementation.
21 | handler: async (ctx, args) => {
22 | // Read the database as many times as you need here.
23 | // See https://docs.convex.dev/database/reading-data.
24 | const documents = await ctx.db.query("tablename").collect();
25 |
26 | // Arguments passed from the client are properties of the args object.
27 | console.log(args.first, args.second);
28 |
29 | // Write arbitrary JavaScript here: filter, aggregate, build derived data,
30 | // remove non-public properties, or create new objects.
31 | return documents;
32 | },
33 | });
34 | ```
35 |
36 | Using this query function in a React component looks like:
37 |
38 | ```ts
39 | const data = useQuery(api.functions.myQueryFunction, {
40 | first: 10,
41 | second: "hello",
42 | });
43 | ```
44 |
45 | A mutation function looks like:
46 |
47 | ```ts
48 | // functions.js
49 | import { mutation } from "./_generated/server";
50 | import { v } from "convex/values";
51 |
52 | export const myMutationFunction = mutation({
53 | // Validators for arguments.
54 | args: {
55 | first: v.string(),
56 | second: v.string(),
57 | },
58 |
59 | // Function implementation.
60 | handler: async (ctx, args) => {
61 | // Insert or modify documents in the database here.
62 | // Mutations can also read from the database like queries.
63 | // See https://docs.convex.dev/database/writing-data.
64 | const message = { body: args.first, author: args.second };
65 | const id = await ctx.db.insert("messages", message);
66 |
67 | // Optionally, return a value from your mutation.
68 | return await ctx.db.get(id);
69 | },
70 | });
71 | ```
72 |
73 | Using this mutation function in a React component looks like:
74 |
75 | ```ts
76 | const mutation = useMutation(api.functions.myMutationFunction);
77 | function handleButtonPress() {
78 | // fire and forget, the most common way to use mutations
79 | mutation({ first: "Hello!", second: "me" });
80 | // OR
81 | // use the result once the mutation has completed
82 | mutation({ first: "Hello!", second: "me" }).then((result) =>
83 | console.log(result)
84 | );
85 | }
86 | ```
87 |
88 | Use the Convex CLI to push your functions to a deployment. See everything
89 | the Convex CLI can do by running `npx convex -h` in your project root
90 | directory. To learn more, launch the docs with `npx convex docs`.
91 |
--------------------------------------------------------------------------------
/convex/_generated/server.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /**
3 | * Generated utilities for implementing server-side Convex query and mutation functions.
4 | *
5 | * THIS CODE IS AUTOMATICALLY GENERATED.
6 | *
7 | * Generated by convex@1.8.0.
8 | * To regenerate, run `npx convex dev`.
9 | * @module
10 | */
11 |
12 | import {
13 | actionGeneric,
14 | httpActionGeneric,
15 | queryGeneric,
16 | mutationGeneric,
17 | internalActionGeneric,
18 | internalMutationGeneric,
19 | internalQueryGeneric,
20 | } from "convex/server";
21 |
22 | /**
23 | * Define a query in this Convex app's public API.
24 | *
25 | * This function will be allowed to read your Convex database and will be accessible from the client.
26 | *
27 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
28 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
29 | */
30 | export const query = queryGeneric;
31 |
32 | /**
33 | * Define a query that is only accessible from other Convex functions (but not from the client).
34 | *
35 | * This function will be allowed to read from your Convex database. It will not be accessible from the client.
36 | *
37 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
38 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
39 | */
40 | export const internalQuery = internalQueryGeneric;
41 |
42 | /**
43 | * Define a mutation in this Convex app's public API.
44 | *
45 | * This function will be allowed to modify your Convex database and will be accessible from the client.
46 | *
47 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
48 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
49 | */
50 | export const mutation = mutationGeneric;
51 |
52 | /**
53 | * Define a mutation that is only accessible from other Convex functions (but not from the client).
54 | *
55 | * This function will be allowed to modify your Convex database. It will not be accessible from the client.
56 | *
57 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
58 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
59 | */
60 | export const internalMutation = internalMutationGeneric;
61 |
62 | /**
63 | * Define an action in this Convex app's public API.
64 | *
65 | * An action is a function which can execute any JavaScript code, including non-deterministic
66 | * code and code with side-effects, like calling third-party services.
67 | * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
68 | * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
69 | *
70 | * @param func - The action. It receives an {@link ActionCtx} as its first argument.
71 | * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
72 | */
73 | export const action = actionGeneric;
74 |
75 | /**
76 | * Define an action that is only accessible from other Convex functions (but not from the client).
77 | *
78 | * @param func - The function. It receives an {@link ActionCtx} as its first argument.
79 | * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
80 | */
81 | export const internalAction = internalActionGeneric;
82 |
83 | /**
84 | * Define a Convex HTTP action.
85 | *
86 | * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
87 | * as its second.
88 | * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
89 | */
90 | export const httpAction = httpActionGeneric;
91 |
--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as DialogPrimitive from "@radix-ui/react-dialog";
5 | import { X } from "lucide-react";
6 |
7 | import { cn } from "@/lib/utils";
8 |
9 | const Dialog = DialogPrimitive.Root;
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger;
12 |
13 | const DialogPortal = DialogPrimitive.Portal;
14 |
15 | const DialogClose = DialogPrimitive.Close;
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef
75 |
77 | );
78 | }
79 |
80 | return (
81 |
82 |
124 | );
125 | };
126 |
127 | export default TrashBox;
128 |
--------------------------------------------------------------------------------
/app/(main)/_components/Publish.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Doc } from "@/convex/_generated/dataModel";
4 | import { api } from "@/convex/_generated/api";
5 | import { useMutation } from "convex/react";
6 |
7 | import { useOrigin } from "@/hooks/useOrigin";
8 | import { useState } from "react";
9 |
10 | import {
11 | Popover,
12 | PopoverContent,
13 | PopoverTrigger,
14 | } from "@/components/ui/popover";
15 | import { Button } from "@/components/ui/button";
16 | import { Check, Copy, Globe } from "lucide-react";
17 | import { toast } from "sonner";
18 |
19 | interface PublishProps {
20 | initialData: Doc<"documents">;
21 | }
22 |
23 | const Publish = ({ initialData }: PublishProps) => {
24 | const origin = useOrigin();
25 |
26 | const update = useMutation(api.documents.update);
27 |
28 | const [copied, setCopied] = useState(false);
29 | const [isSubmitting, setIsSubmitting] = useState(false);
30 |
31 | const url = `${origin}/preview/${initialData._id}`;
32 |
33 | const onPublish = () => {
34 | setIsSubmitting(true);
35 |
36 | const promise = update({
37 | id: initialData._id,
38 | isPublished: true,
39 | }).finally(() => setIsSubmitting(false));
40 |
41 | toast.promise(promise, {
42 | loading: "Publishing...",
43 | success: "Note Published.",
44 | error: "Failed to publish note!",
45 | });
46 | };
47 |
48 | const onUnpublish = () => {
49 | setIsSubmitting(true);
50 |
51 | const promise = update({
52 | id: initialData._id,
53 | isPublished: false,
54 | }).finally(() => setIsSubmitting(false));
55 |
56 | toast.promise(promise, {
57 | loading: "Unpublishing...",
58 | success: "Note unpublished.",
59 | error: "Failed to unpublish note!",
60 | });
61 | };
62 |
63 | const onCopy = () => {
64 | navigator.clipboard.writeText(url);
65 | setCopied(true);
66 | setTimeout(() => {
67 | setCopied(false);
68 | }, 1000);
69 | };
70 |
71 | return (
72 |
83 |
91 |
92 |
123 | 93 | No documents found! 94 |
95 | {filteredDocuments?.map((document) => ( 96 | onClick(document._id)}
100 | className="text-sm rounded-sm w-full hover:bg-primary/5 flex items-center text-primary justify-between"
101 | >
102 | {document.title}
103 |
121 | ))}
122 |
104 | onRemove(document)}>
112 |
119 |
120 | onRestore(e, document._id)}
106 | role="button"
107 | className="rounded-sm p-2 hover:bg-neutral-200 dark:hover:bg-neutral-600"
108 | >
109 |
111 |
116 |
118 |
85 |
118 | ) : (
119 |
86 |
91 | 88 | This note is live on web. 89 |
90 |
92 |
97 |
108 |
109 |
117 |
120 |
134 | )}
135 | Publish this Note
122 | 123 | Share your work with others. 124 | 125 | 133 |
81 | {!!initialData.icon && !preview && (
82 | onInput(e.target.value)}
133 | className="p-0 text-5xl bg-transparent font-bold break-words outline-none text-[#3F3F3F]dark:text-[#CFCFCF] resize-none cursor-end w-[250px] md:w-[500px] lg:w-[600px]"
134 | />
135 | ) : (
136 |
144 | );
145 | };
146 |
147 | export default Toolbar;
148 |
--------------------------------------------------------------------------------
/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
5 |
6 | import { cn } from "@/lib/utils";
7 | import { buttonVariants } from "@/components/ui/button";
8 |
9 | const AlertDialog = AlertDialogPrimitive.Root;
10 |
11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
12 |
13 | const AlertDialogPortal = AlertDialogPrimitive.Portal;
14 |
15 | const AlertDialogOverlay = React.forwardRef<
16 | React.ElementRef
83 |
84 |
88 |
96 |
97 | )}
98 | {!!initialData.icon && preview && (
99 | 85 | {initialData.icon} 86 |
87 |{initialData.icon}
100 | )} 101 |
102 | {!initialData.icon && !preview && (
103 |
104 |
112 |
113 | )}
114 | {!initialData.coverImage && !preview && (
115 |
124 | )}
125 |
126 | {isEditing && !preview ? (
127 |
140 | {initialData.title}
141 |
142 | )}
143 |
45 |
55 | ));
56 |
57 | CommandInput.displayName = CommandPrimitive.Input.displayName;
58 |
59 | const CommandList = React.forwardRef<
60 | React.ElementRef
110 | {!!id && (
111 |
162 | );
163 | };
164 |
165 | Item.Skeleton = function ItemSkeleton({ level }: { level?: number }) {
166 | return (
167 |
116 |
118 | )}
119 | {documentIcon ? (
120 | {documentIcon}
121 | ) : (
122 |
127 |
128 | e.stopPropagation()}>
129 |
136 |
142 |
143 |
146 |
151 |
152 |
160 | )}
161 |
133 |
135 |
148 | Last edited by: {user?.fullName}
149 |
150 |
157 |
159 |
173 |
176 | );
177 | };
178 |
179 | export default Item;
180 |
--------------------------------------------------------------------------------
/convex/_generated/server.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /**
3 | * Generated utilities for implementing server-side Convex query and mutation functions.
4 | *
5 | * THIS CODE IS AUTOMATICALLY GENERATED.
6 | *
7 | * Generated by convex@1.8.0.
8 | * To regenerate, run `npx convex dev`.
9 | * @module
10 | */
11 |
12 | import {
13 | ActionBuilder,
14 | HttpActionBuilder,
15 | MutationBuilder,
16 | QueryBuilder,
17 | GenericActionCtx,
18 | GenericMutationCtx,
19 | GenericQueryCtx,
20 | GenericDatabaseReader,
21 | GenericDatabaseWriter,
22 | } from "convex/server";
23 | import type { DataModel } from "./dataModel.js";
24 |
25 | /**
26 | * Define a query in this Convex app's public API.
27 | *
28 | * This function will be allowed to read your Convex database and will be accessible from the client.
29 | *
30 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
31 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
32 | */
33 | export declare const query: QueryBuilder
208 | {!!params.documentId ? (
209 |
222 |
223 | );
224 | };
225 |
226 | export default Navigation;
227 |
--------------------------------------------------------------------------------
/components/SingleImageDropzone.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { UploadCloudIcon, X } from "lucide-react";
4 | import * as React from "react";
5 | import { useDropzone, type DropzoneOptions } from "react-dropzone";
6 | import { twMerge } from "tailwind-merge";
7 |
8 | import Spinner from "./Spinner";
9 |
10 | const variants = {
11 | base: "relative rounded-md flex justify-center items-center flex-col cursor-pointer min-h-[150px] min-w-[200px] border border-dashed border-gray-400 dark:border-gray-300 transition-colors duration-200 ease-in-out",
12 | image:
13 | "border-0 p-0 min-h-0 min-w-0 relative shadow-md bg-slate-200 dark:bg-slate-900 rounded-md",
14 | active: "border-2",
15 | disabled:
16 | "bg-gray-200 border-gray-300 cursor-default pointer-events-none bg-opacity-30 dark:bg-gray-700",
17 | accept: "border border-blue-500 bg-blue-500 bg-opacity-10",
18 | reject: "border border-red-700 bg-red-700 bg-opacity-10",
19 | };
20 |
21 | type InputProps = {
22 | width?: number;
23 | height?: number;
24 | className?: string;
25 | value?: File | string;
26 | onChange?: (file?: File) => void | Promise
126 | {disabled && (
127 |
183 | );
184 | }
185 | );
186 | SingleImageDropzone.displayName = "SingleImageDropzone";
187 |
188 | const Button = React.forwardRef<
189 | HTMLButtonElement,
190 | React.ButtonHTMLAttributes
128 |
130 | )}
131 |
140 | {/* Main File Input */}
141 |
142 |
143 | {imageUrl ? (
144 | // Image Preview
145 | ![{acceptedFiles[0]?.name}]({imageUrl})
150 | ) : (
151 | // Upload Icon
152 |
179 |
180 | {/* Error Text */}
181 |
153 |
158 | )}
159 |
160 | {/* Remove Image Icon */}
161 | {imageUrl && !disabled && (
162 |
155 | Click or drag file to this area to upload.
156 |
157 | {
165 | e.stopPropagation();
166 | void onChange?.(undefined);
167 | }}
168 | >
169 |
177 | )}
178 |
170 |
176 | {errorMessage}
182 |