10 |
12 | {children}
13 |
14 |
15 | );
16 | }
17 |
18 | export default MarketingLayout;
--------------------------------------------------------------------------------
/hooks/use-origin.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export const useOrigin = () => {
4 | const [mounted, setMounted] = useState(false);
5 | const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
6 |
7 | useEffect(() => {
8 | setMounted(true);
9 | }, []);
10 |
11 | if (!mounted) {
12 | return "";
13 | }
14 |
15 | return origin;
16 | };
17 |
--------------------------------------------------------------------------------
/hooks/use-search.tsx:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 |
3 | type SearchStore = {
4 | isOpen: boolean;
5 | onOpen: () => void;
6 | onClose: () => void;
7 | toggle: () => void;
8 | };
9 |
10 | export const useSearch = create
8 |
14 | );
15 | }
16 |
17 | export default MarketingPage;
18 |
19 |
--------------------------------------------------------------------------------
/hooks/use-scroll-top.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 |
3 | export const useScrollTop = (threshold = 10) => {
4 | const [scrolled, setScrolled] = useState(false);
5 |
6 | useEffect(() => {
7 | const handleScroll = () => {
8 | if (window.scrollY > threshold) {
9 | setScrolled(true);
10 | } else {
11 | setScrolled(false);
12 | }
13 | };
14 |
15 | window.addEventListener("scroll", handleScroll);
16 | return () => window.removeEventListener("scroll", handleScroll);
17 | }, [threshold]);
18 |
19 | return scrolled;
20 | }
--------------------------------------------------------------------------------
/convex/schema.ts:
--------------------------------------------------------------------------------
1 | import { defineSchema, defineTable } from "convex/server";
2 | import { v } from "convex/values";
3 |
4 | export default defineSchema({
5 | documents: defineTable({
6 | title: v.string(),
7 | userId: v.string(),
8 | isArchived: v.boolean(),
9 | parentDocument: v.optional(v.id("documents")),
10 | content: v.optional(v.string()),
11 | coverImage: v.optional(v.string()),
12 | icon: v.optional(v.string()),
13 | isPublished: v.boolean(),
14 | })
15 | .index("by_user", ["userId"])
16 | .index("by_user_parent", ["userId", "parentDocument"])
17 | });
18 |
--------------------------------------------------------------------------------
/components/providers/modal-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from "react";
4 |
5 | import { SettingsModal } from "@/components/modals/settings-modal";
6 | import { CoverImageModal } from "@/components/modals/cover-image-modal";
7 |
8 | export const ModalProvider = () => {
9 | const [isMounted, setIsMounted] = useState(false);
10 |
11 | useEffect(() => {
12 | setIsMounted(true);
13 | }, []);
14 |
15 | if (!isMounted) {
16 | return null;
17 | }
18 |
19 | return (
20 | <>
21 |
9 |
12 |
13 |
8 |
18 | )
19 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
/app/api/edgestore/[...edgestore]/route.ts:
--------------------------------------------------------------------------------
1 | import { initEdgeStore } from '@edgestore/server';
2 | import { createEdgeStoreNextHandler } from '@edgestore/server/adapters/next/app';
3 |
4 | const es = initEdgeStore.create();
5 |
6 | /**
7 | * This is the main router for the Edge Store buckets.
8 | */
9 | const edgeStoreRouter = es.router({
10 | publicFiles: es.fileBucket()
11 | .beforeDelete(() => {
12 | return true;
13 | }),
14 | });
15 |
16 | const handler = createEdgeStoreNextHandler({
17 | router: edgeStoreRouter,
18 | });
19 |
20 | export { handler as GET, handler as POST };
21 |
22 | /**
23 | * This type is used to create the type-safe client for the frontend.
24 | */
25 | export type EdgeStoreRouter = typeof edgeStoreRouter;
--------------------------------------------------------------------------------
/components/spinner.tsx:
--------------------------------------------------------------------------------
1 | import { Loader } from "lucide-react";
2 |
3 | import { cva, type VariantProps } from "class-variance-authority";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | const spinnerVariants = cva(
8 | "text-muted-foreground animate-spin",
9 | {
10 | variants: {
11 | size: {
12 | default: "h-4 w-4",
13 | sm: "h-2 w-2",
14 | lg: "h-6 w-6",
15 | icon: "h-10 w-10"
16 | }
17 | },
18 | defaultVariants: {
19 | size: "default",
20 | },
21 | },
22 | );
23 |
24 | interface SpinnerProps extends VariantProps
10 |
13 |
16 |
17 |
14 |
32 | )
33 | }
--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef29 | Jotion 30 |
31 |
11 |
34 | );
35 | }
36 |
37 | export default Error;
--------------------------------------------------------------------------------
/convex/_generated/api.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /**
3 | * Generated `api` utility.
4 | *
5 | * THIS CODE IS AUTOMATICALLY GENERATED.
6 | *
7 | * Generated by convex@1.12.2.
8 | * To regenerate, run `npx convex dev`.
9 | * @module
10 | */
11 |
12 | import type {
13 | ApiFromModules,
14 | FilterApi,
15 | FunctionReference,
16 | } from "convex/server";
17 | import type * as documents from "../documents.js";
18 |
19 | /**
20 | * A utility for referencing Convex functions in your app's API.
21 | *
22 | * Usage:
23 | * ```js
24 | * const myFunctionReference = api.myModule.myFunction;
25 | * ```
26 | */
27 | declare const fullApi: ApiFromModules<{
28 | documents: typeof documents;
29 | }>;
30 | export declare const api: FilterApi<
31 | typeof fullApi,
32 | FunctionReference26 | Something went wrong! 27 |
28 | 33 |
21 |
23 | );
24 | }
25 |
26 | if (!isAuthenticated) {
27 | return redirect("/");
28 | }
29 |
30 | return (
31 |
32 |
34 |
37 |
38 | );
39 | }
40 |
41 | export default MainLayout;
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Alimardon Davronov
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/components/modals/settings-modal.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Dialog,
5 | DialogContent,
6 | DialogHeader
7 | } from "@/components/ui/dialog";
8 | import { useSettings } from "@/hooks/use-settings";
9 | import { Label } from "@/components/ui/label";
10 | import { ModeToggle } from "@/components/mode-toggle";
11 |
12 | export const SettingsModal = () => {
13 | const settings = useSettings();
14 |
15 | return (
16 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/components/icon-picker.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import EmojiPicker, { Theme } from "emoji-picker-react";
4 | import { useTheme } from "next-themes";
5 |
6 | import {
7 | Popover,
8 | PopoverContent,
9 | PopoverTrigger
10 | } from "@/components/ui/popover";
11 |
12 | interface IconPickerProps {
13 | onChange: (icon: string) => void;
14 | children: React.ReactNode;
15 | asChild?: boolean;
16 | };
17 |
18 | export const IconPicker = ({
19 | onChange,
20 | children,
21 | asChild
22 | }: IconPickerProps) => {
23 | const { resolvedTheme } = useTheme();
24 | const currentTheme = (resolvedTheme || "light") as keyof typeof themeMap
25 |
26 | const themeMap = {
27 | "dark": Theme.DARK,
28 | "light": Theme.LIGHT
29 | };
30 |
31 | const theme = themeMap[currentTheme];
32 |
33 | return (
34 |
6 |
37 | )
38 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Fullstack Notion Clone: Next.js 13, React, Convex, TailwindCSS
2 |
3 | Key Features:
4 |
5 | - Real-time database 🔗
6 | - Notion-style editor 📝
7 | - Light and Dark mode 🌓
8 | - Infinite children documents 🌲
9 | - Trash can & soft delete 🗑️
10 | - Authentication 🔐
11 | - File upload
12 | - File deletion
13 | - File replacement
14 | - Icons for each document (changes in real-time) 🌠
15 | - Expandable sidebar ➡️🔀⬅️
16 | - Full mobile responsiveness 📱
17 | - Publish your note to the web 🌐
18 | - Fully collapsable sidebar ↕️
19 | - Landing page 🛬
20 | - Cover image of each document 🖼️
21 | - Recover deleted files 🔄📄
22 |
23 | ### Prerequisites
24 |
25 | **Node version 18.x.x**
26 |
27 | ### Cloning the repository
28 |
29 | ```shell
30 | git clone https://github.com/Davronov-Alimardon/notion-clone.git
31 | ```
32 |
33 | ### Install packages
34 |
35 | ```shell
36 | npm i
37 | ```
38 |
39 | ### Setup .env file
40 |
41 | ```js
42 | # Deployment used by `npx convex dev`
43 | CONVEX_DEPLOYMENT=
44 | NEXT_PUBLIC_CONVEX_URL=
45 |
46 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
47 | CLERK_SECRET_KEY=
48 |
49 | EDGE_STORE_ACCESS_KEY=
50 | EDGE_STORE_SECRET_KEY=
51 | ```
52 |
53 | ### Setup Convex
54 |
55 | ```shell
56 | npx convex dev
57 |
58 | ```
59 |
60 | ### Start the app
61 |
62 | ```shell
63 | npm run dev
64 | ```
65 |
--------------------------------------------------------------------------------
/public/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 |
52 |
57 | )
58 | }
59 |
60 | export default Editor;
61 |
--------------------------------------------------------------------------------
/components/modals/confirm-modal.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | AlertDialog,
5 | AlertDialogAction,
6 | AlertDialogCancel,
7 | AlertDialogContent,
8 | AlertDialogDescription,
9 | AlertDialogFooter,
10 | AlertDialogHeader,
11 | AlertDialogTitle,
12 | AlertDialogTrigger
13 | } from "@/components/ui/alert-dialog";
14 |
15 | interface ConfirmModalProps {
16 | children: React.ReactNode;
17 | onConfirm: () => void;
18 | };
19 |
20 | export const ConfirmModal = ({
21 | children,
22 | onConfirm
23 | }: ConfirmModalProps) => {
24 | const handleConfirm = (
25 | e: React.MouseEvent
31 |
53 | );
54 | }
55 |
56 | export default DocumentsPage;
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Toaster } from "sonner";
2 | import { Inter } from 'next/font/google'
3 | import type { Metadata } from 'next'
4 |
5 | import { ThemeProvider } from '@/components/providers/theme-provider'
6 | import { ConvexClientProvider } from '@/components/providers/convex-provider'
7 | import { ModalProvider } from "@/components/providers/modal-provider";
8 | import { EdgeStoreProvider } from "@/lib/edgestore";
9 |
10 | import './globals.css'
11 |
12 | const inter = Inter({ subsets: ['latin'] })
13 |
14 | export const metadata: Metadata = {
15 | title: 'Jotion',
16 | description: 'The connected workspace where better, faster work happens.',
17 | icons: {
18 | icon: [
19 | {
20 | media: "(prefers-color-scheme: light)",
21 | url: "/logo.svg",
22 | href: "/logo.svg",
23 | },
24 | {
25 | media: "(prefers-color-scheme: dark)",
26 | url: "/logo-dark.svg",
27 | href: "/logo-dark.svg",
28 | }
29 | ]
30 | }
31 | }
32 |
33 | export default function RootLayout({
34 | children,
35 | }: {
36 | children: React.ReactNode
37 | }) {
38 | return (
39 |
40 |
41 | 46 | Welcome to {user?.firstName}'s Jotion 47 |
48 | 52 |
16 |
21 | Jotion is the connected workspace where
24 |
25 | {isLoading && (
26 |
43 |
47 |
48 | )}
49 |
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | html,
6 | body,
7 | :root {
8 | height: 100%;
9 | }
10 |
11 | @layer base {
12 | :root {
13 | --background: 0 0% 100%;
14 | --foreground: 0 0% 3.9%;
15 |
16 | --card: 0 0% 100%;
17 | --card-foreground: 0 0% 3.9%;
18 |
19 | --popover: 0 0% 100%;
20 | --popover-foreground: 0 0% 3.9%;
21 |
22 | --primary: 0 0% 9%;
23 | --primary-foreground: 0 0% 98%;
24 |
25 | --secondary: 0 0% 96.1%;
26 | --secondary-foreground: 0 0% 9%;
27 |
28 | --muted: 0 0% 96.1%;
29 | --muted-foreground: 0 0% 45.1%;
30 |
31 | --accent: 0 0% 96.1%;
32 | --accent-foreground: 0 0% 9%;
33 |
34 | --destructive: 0 84.2% 60.2%;
35 | --destructive-foreground: 0 0% 98%;
36 |
37 | --border: 0 0% 89.8%;
38 | --input: 0 0% 89.8%;
39 | --ring: 0 0% 3.9%;
40 |
41 | --radius: 0.5rem;
42 | }
43 |
44 | .dark {
45 | --background: 0 0% 3.9%;
46 | --foreground: 0 0% 98%;
47 |
48 | --card: 0 0% 3.9%;
49 | --card-foreground: 0 0% 98%;
50 |
51 | --popover: 0 0% 3.9%;
52 | --popover-foreground: 0 0% 98%;
53 |
54 | --primary: 0 0% 98%;
55 | --primary-foreground: 0 0% 9%;
56 |
57 | --secondary: 0 0% 14.9%;
58 | --secondary-foreground: 0 0% 98%;
59 |
60 | --muted: 0 0% 14.9%;
61 | --muted-foreground: 0 0% 63.9%;
62 |
63 | --accent: 0 0% 14.9%;
64 | --accent-foreground: 0 0% 98%;
65 |
66 | --destructive: 0 62.8% 30.6%;
67 | --destructive-foreground: 0 0% 98%;
68 |
69 | --border: 0 0% 14.9%;
70 | --input: 0 0% 14.9%;
71 | --ring: 0 0% 83.1%;
72 | }
73 | }
74 |
75 | @layer base {
76 | * {
77 | @apply border-border;
78 | }
79 | body {
80 | @apply bg-background text-foreground;
81 | }
82 | }
--------------------------------------------------------------------------------
/app/(marketing)/_components/navbar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useConvexAuth } from "convex/react";
4 | import { SignInButton, UserButton } from "@clerk/clerk-react";
5 | import Link from "next/link";
6 |
7 | import { useScrollTop } from "@/hooks/use-scroll-top";
8 | import { ModeToggle } from "@/components/mode-toggle";
9 | import { Button } from "@/components/ui/button";
10 | import { Spinner } from "@/components/spinner";
11 | import { cn } from "@/lib/utils";
12 |
13 | import { Logo } from "./logo";
14 |
15 | export const Navbar = () => {
16 | const { isAuthenticated, isLoading } = useConvexAuth();
17 | const scrolled = useScrollTop();
18 |
19 | return (
20 | 17 | Your Ideas, Documents, & Plans. Unified. Welcome to{" "} 18 | Jotion 19 |
20 |
21 | Jotion is the connected workspace where
22 | better, faster work happens.
23 |
24 |
25 | {isLoading && (
26 |
27 |
29 | )}
30 | {isAuthenticated && !isLoading && (
31 |
37 | )}
38 | 39 | Developed by (Alimardon Davronov) 40 |
41 | {!isAuthenticated && !isLoading && ( 42 |
24 |
58 | )
59 | }
--------------------------------------------------------------------------------
/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.12.2.
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
26 | {isLoading && (
27 |
32 |
35 |
36 |
37 |
40 |
41 |
42 | )}
43 | {isAuthenticated && !isLoading && (
44 | <>
45 |
50 |
57 |
40 |
50 | );
51 | }
52 |
53 | if (document === null) {
54 | return
42 |
49 |
43 |
48 | Not found
55 | }
56 |
57 | return (
58 |
59 |
68 | );
69 | }
70 |
71 | export default DocumentIdPage;
--------------------------------------------------------------------------------
/components/modals/cover-image-modal.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import { useMutation } from "convex/react";
5 | import { useParams } from "next/navigation";
6 |
7 | import {
8 | Dialog,
9 | DialogContent,
10 | DialogHeader
11 | } from "@/components/ui/dialog";
12 | import { useCoverImage } from "@/hooks/use-cover-image";
13 | import { SingleImageDropzone } from "@/components/single-image-dropzone";
14 | import { useEdgeStore } from "@/lib/edgestore";
15 | import { api } from "@/convex/_generated/api";
16 | import { Id } from "@/convex/_generated/dataModel";
17 |
18 | export const CoverImageModal = () => {
19 | const params = useParams();
20 | const update = useMutation(api.documents.update);
21 | const coverImage = useCoverImage();
22 | const { edgestore } = useEdgeStore();
23 |
24 | const [file, setFile] = useState
61 |
67 |
40 |
50 | );
51 | }
52 |
53 | if (document === null) {
54 | return
42 |
49 |
43 |
48 | Not found
55 | }
56 |
57 | return (
58 |
59 |
69 | );
70 | }
71 |
72 | export default DocumentIdPage;
73 |
--------------------------------------------------------------------------------
/app/(main)/_components/banner.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useRouter } from "next/navigation";
4 | import { useMutation } from "convex/react";
5 | import { toast } from "sonner";
6 |
7 | import { Id } from "@/convex/_generated/dataModel";
8 | import { api } from "@/convex/_generated/api";
9 | import { Button } from "@/components/ui/button";
10 | import { ConfirmModal } from "@/components/modals/confirm-modal";
11 |
12 | interface BannerProps {
13 | documentId: Id<"documents">;
14 | };
15 |
16 | export const Banner = ({
17 | documentId
18 | }: BannerProps) => {
19 | const router = useRouter();
20 |
21 | const remove = useMutation(api.documents.remove);
22 | const restore = useMutation(api.documents.restore);
23 |
24 | const onRemove = () => {
25 | const promise = remove({ id: documentId });
26 |
27 | toast.promise(promise, {
28 | loading: "Deleting note...",
29 | success: "Note deleted!",
30 | error: "Failed to delete note."
31 | });
32 |
33 | router.push("/documents");
34 | };
35 |
36 | const onRestore = () => {
37 | const promise = restore({ id: documentId });
38 |
39 | toast.promise(promise, {
40 | loading: "Restoring note...",
41 | success: "Note restored!",
42 | error: "Failed to restore note."
43 | });
44 | };
45 |
46 | return (
47 |
61 |
68 |
48 |
60 |
67 |
68 |
69 | )
70 | }
--------------------------------------------------------------------------------
/app/(main)/_components/menu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useRouter } from "next/navigation";
4 | import { useUser } from "@clerk/clerk-react";
5 | import { useMutation } from "convex/react";
6 | import { toast } from "sonner";
7 | import { MoreHorizontal, Trash } from "lucide-react";
8 |
9 | import { Id } from "@/convex/_generated/dataModel";
10 | import {
11 | DropdownMenu,
12 | DropdownMenuTrigger,
13 | DropdownMenuContent,
14 | DropdownMenuItem,
15 | DropdownMenuSeparator
16 | } from "@/components/ui/dropdown-menu";
17 | import { api } from "@/convex/_generated/api";
18 | import { Button } from "@/components/ui/button";
19 | import { Skeleton } from "@/components/ui/skeleton";
20 |
21 | interface MenuProps {
22 | documentId: Id<"documents">;
23 | };
24 |
25 | export const Menu = ({
26 | documentId
27 | }: MenuProps) => {
28 | const router = useRouter();
29 | const { user } = useUser();
30 |
31 | const archive = useMutation(api.documents.archive);
32 |
33 | const onArchive = () => {
34 | const promise = archive({ id: documentId })
35 |
36 | toast.promise(promise, {
37 | loading: "Moving to trash...",
38 | success: "Note moved to trash!",
39 | error: "Failed to archive note."
40 | });
41 |
42 | router.push("/documents");
43 | };
44 |
45 | return (
46 | 49 | This page is in the Trash. 50 |
51 | 59 |
64 | Last edited by: {user?.fullName}
65 |
66 |
26 |
36 |
27 |
28 |
30 |
31 | {user?.fullName}'s Jotion
32 |
33 |
34 |
44 |
60 | 45 | {user?.emailAddresses[0].emailAddress} 46 |
47 |
48 |
59 |
49 |
50 |
52 |
53 |
54 |
58 | 55 | {user?.fullName}'s Jotion 56 |
57 |
47 | {!!url && (
48 |
78 | )
79 | }
80 |
81 | Cover.Skeleton = function CoverSkeleton() {
82 | return (
83 |
57 |
66 |
75 |
76 | )}
77 |
58 | {!!initialData.icon &&
82 | )
83 | }
84 |
85 | Title.Skeleton = function TitleSkeleton() {
86 | return (
87 | {initialData.icon}
} 59 | {isEditing ? ( 60 | 69 | ) : ( 70 | 80 | )} 81 |72 | {document.icon} 73 |
74 | ) : ( 75 |69 | No pages inside 70 |
71 | {documents.map((document) => ( 72 |
73 | - onRedirect(document._id)}
76 | label={document.title}
77 | icon={FileIcon}
78 | documentIcon={document.icon}
79 | active={params.documentId === document._id}
80 | level={level}
81 | onExpand={() => onExpand(document._id)}
82 | expanded={expanded[document._id]}
83 | />
84 | {expanded[document._id] && (
85 |
91 | ))}
92 |
93 | );
94 | };
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.12.2.
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 |
--------------------------------------------------------------------------------
/app/(main)/_components/trash-box.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import { useParams, useRouter } from "next/navigation";
5 | import { useQuery, useMutation } from "convex/react";
6 | import { Search, Trash, Undo } from "lucide-react";
7 | import { toast } from "sonner";
8 |
9 | import { api } from "@/convex/_generated/api";
10 | import { Id } from "@/convex/_generated/dataModel";
11 | import { Spinner } from "@/components/spinner";
12 | import { Input } from "@/components/ui/input";
13 | import { ConfirmModal } from "@/components/modals/confirm-modal";
14 |
15 | export const TrashBox = () => {
16 | const router = useRouter();
17 | const params = useParams();
18 | const documents = useQuery(api.documents.getTrash);
19 | const restore = useMutation(api.documents.restore);
20 | const remove = useMutation(api.documents.remove);
21 |
22 | const [search, setSearch] = useState("");
23 |
24 | const filteredDocuments = documents?.filter((document) => {
25 | return document.title.toLowerCase().includes(search.toLowerCase());
26 | });
27 |
28 | const onClick = (documentId: string) => {
29 | router.push(`/documents/${documentId}`);
30 | };
31 |
32 | const onRestore = (
33 | event: React.MouseEvent
65 |
67 | );
68 | }
69 |
70 | return (
71 |
72 |
116 | );
117 | };
118 |
--------------------------------------------------------------------------------
/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 DialogOverlay = React.forwardRef<
16 | React.ElementRef
73 |
81 |
82 |
115 | 83 | No documents found. 84 |
85 | {filteredDocuments?.map((document) => ( 86 | onClick(document._id)}
90 | className="text-sm rounded-sm w-full hover:bg-primary/5 flex items-center text-primary justify-between"
91 | >
92 |
93 | {document.title}
94 |
95 |
113 | ))}
114 |
96 | onRemove(document._id)}>
104 |
111 |
112 | onRestore(e, document._id)}
98 | role="button"
99 | className="rounded-sm p-2 hover:bg-neutral-200 dark:hover:bg-neutral-600"
100 | >
101 |
103 |
108 |
110 |
77 | {!!initialData.icon && !preview && (
78 | onInput(e.target.value)}
131 | className="text-5xl bg-transparent font-bold break-words outline-none text-[#3F3F3F] dark:text-[#CFCFCF] resize-none"
132 | />
133 | ) : (
134 |
142 | )
143 | }
--------------------------------------------------------------------------------
/app/(main)/_components/publish.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import { useMutation } from "convex/react";
5 | import { toast } from "sonner";
6 | import { Check, Copy, Globe } from "lucide-react";
7 |
8 | import { Doc } from "@/convex/_generated/dataModel";
9 | import {
10 | PopoverTrigger,
11 | Popover,
12 | PopoverContent
13 | } from "@/components/ui/popover"
14 | import { useOrigin } from "@/hooks/use-origin";
15 | import { api } from "@/convex/_generated/api";
16 | import { Button } from "@/components/ui/button";
17 |
18 | interface PublishProps {
19 | initialData: Doc<"documents">
20 | };
21 |
22 | export const Publish = ({
23 | initialData
24 | }: PublishProps) => {
25 | const origin = useOrigin();
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 | })
40 | .finally(() => setIsSubmitting(false));
41 |
42 | toast.promise(promise, {
43 | loading: "Publishing...",
44 | success: "Note published",
45 | error: "Failed to publish note.",
46 | });
47 | };
48 |
49 | const onUnpublish = () => {
50 | setIsSubmitting(true);
51 |
52 | const promise = update({
53 | id: initialData._id,
54 | isPublished: false,
55 | })
56 | .finally(() => setIsSubmitting(false));
57 |
58 | toast.promise(promise, {
59 | loading: "Unpublishing...",
60 | success: "Note unpublished",
61 | error: "Failed to unpublish note.",
62 | });
63 | };
64 |
65 | const onCopy = () => {
66 | navigator.clipboard.writeText(url);
67 | setCopied(true);
68 |
69 | setTimeout(() => {
70 | setCopied(false);
71 | }, 1000);
72 | }
73 |
74 | return (
75 |
79 |
80 |
84 |
92 |
93 | )}
94 | {!!initialData.icon && preview && (
95 | 81 | {initialData.icon} 82 |
83 |96 | {initialData.icon} 97 |
98 | )} 99 |
100 | {!initialData.icon && !preview && (
101 |
102 |
110 |
111 | )}
112 | {!initialData.coverImage && !preview && (
113 |
122 | )}
123 |
124 | {isEditing && !preview ? (
125 |
138 | {initialData.title}
139 |
140 | )}
141 |
94 |
127 | ) : (
128 |
95 |
100 | 97 | This note is live on web. 98 |
99 |
101 |
106 |
117 |
118 |
126 |
129 |
147 | )}
148 | 133 | Publish this note 134 |
135 | 136 | Share your work with others. 137 | 138 | 146 |
45 |
55 | ))
56 |
57 | CommandInput.displayName = CommandPrimitive.Input.displayName
58 |
59 | const CommandList = React.forwardRef<
60 | React.ElementRef
114 | {!!id && (
115 |
182 | )
183 | }
184 |
185 | Item.Skeleton = function ItemSkeleton({ level }: { level?: number }) {
186 | return (
187 |
120 |
124 | )}
125 | {documentIcon ? (
126 |
127 | {documentIcon}
128 |
129 | ) : (
130 |
144 |
145 | e.stopPropagation()}
147 | asChild
148 | >
149 |
156 |
162 |
163 |
166 |
171 |
172 |
180 | )}
181 |
153 |
155 |
168 | Last edited by: {user?.fullName}
169 |
170 |
177 |
179 |
193 |
196 | )
197 | }
--------------------------------------------------------------------------------
/app/(main)/_components/navigation.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | ChevronsLeft,
5 | MenuIcon,
6 | Plus,
7 | PlusCircle,
8 | Search,
9 | Settings,
10 | Trash
11 | } from "lucide-react";
12 | import { useParams, usePathname, useRouter } from "next/navigation";
13 | import { ElementRef, useEffect, useRef, useState } from "react";
14 | import { useMediaQuery } from "usehooks-ts";
15 | import { useMutation } from "convex/react";
16 | import { toast } from "sonner";
17 |
18 | import { cn } from "@/lib/utils";
19 | import { api } from "@/convex/_generated/api";
20 | import {
21 | Popover,
22 | PopoverTrigger,
23 | PopoverContent,
24 | } from "@/components/ui/popover";
25 | import { useSearch } from "@/hooks/use-search";
26 | import { useSettings } from "@/hooks/use-settings";
27 |
28 | import { UserItem } from "./user-item";
29 | import { Item } from "./item";
30 | import { DocumentList } from "./document-list";
31 | import { TrashBox } from "./trash-box";
32 | import { Navbar } from "./navbar";
33 |
34 | export const Navigation = () => {
35 | const router = useRouter();
36 | const settings = useSettings();
37 | const search = useSearch();
38 | const params = useParams();
39 | const pathname = usePathname();
40 | const isMobile = useMediaQuery("(max-width: 768px)");
41 | const create = useMutation(api.documents.create);
42 |
43 | const isResizingRef = useRef(false);
44 | const sidebarRef = useRef
207 | {!!params.documentId ? (
208 |
218 |
219 | )
220 | }
--------------------------------------------------------------------------------
/components/single-image-dropzone.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 |