From 850aef70aabfb818d9aa1ca8b70b0ef8d4303bd7 Mon Sep 17 00:00:00 2001 From: Nabil Mansour Date: Wed, 24 Jul 2024 16:14:31 -0400 Subject: [PATCH] refactored code and added some css transitions --- src/app/excalidraw/[slug]/page.tsx | 3 +- src/app/excalidraw/page.tsx | 2 +- src/app/landing/page.module.css | 19 +++ src/app/landing/page.tsx | 112 +++++++++++++++++- src/app/layout.tsx | 2 +- src/app/page.module.css | 15 +++ src/app/page.tsx | 67 ++++++++++- src/app/profile/[username]/page.tsx | 3 +- src/app/ui/components/other/Constants.tsx | 7 -- .../ui/components/pages/HomePageComponent.tsx | 66 ----------- .../pages/LandingExcalidraw.module.css | 8 -- .../components/pages/LandingPageComponent.tsx | 112 ------------------ src/app/ui/layout/Header.tsx | 2 +- src/lib/constants.ts | 4 + 14 files changed, 221 insertions(+), 201 deletions(-) create mode 100644 src/app/landing/page.module.css create mode 100644 src/app/page.module.css delete mode 100644 src/app/ui/components/other/Constants.tsx delete mode 100644 src/app/ui/components/pages/HomePageComponent.tsx delete mode 100644 src/app/ui/components/pages/LandingExcalidraw.module.css delete mode 100644 src/app/ui/components/pages/LandingPageComponent.tsx diff --git a/src/app/excalidraw/[slug]/page.tsx b/src/app/excalidraw/[slug]/page.tsx index 4f7525c..5ceff6a 100644 --- a/src/app/excalidraw/[slug]/page.tsx +++ b/src/app/excalidraw/[slug]/page.tsx @@ -4,7 +4,8 @@ import { notFound } from 'next/navigation'; import ExcalidrawMain from '@/app/ui/components/excaliCore/ExcalidrawMain'; import { forkDrawingAction, saveDrawingAction, updateDrawingInfoAction } from '@/lib/actions'; import { Metadata } from 'next'; -import { MAIN_URL } from '@/app/ui/components/other/Constants'; + +const MAIN_URL = process.env.MAIN_URL; export async function generateMetadata( { params }: { params: { slug: string } } diff --git a/src/app/excalidraw/page.tsx b/src/app/excalidraw/page.tsx index 1afe837..c0dfb1f 100644 --- a/src/app/excalidraw/page.tsx +++ b/src/app/excalidraw/page.tsx @@ -1,6 +1,6 @@ import ExcalidrawMain from '@/app/ui/components/excaliCore/ExcalidrawMain'; import { forkWelcomeDrawingAction, saveDrawingAction, updateDrawingInfoAction } from '@/lib/actions'; -import { WELCOME_EXCALI_DATA } from '../ui/components/other/Constants'; +import { WELCOME_EXCALI_DATA } from '@/lib/constants'; import { currentUser } from '@clerk/nextjs/server'; export default async function Page() { diff --git a/src/app/landing/page.module.css b/src/app/landing/page.module.css new file mode 100644 index 0000000..a7c4e58 --- /dev/null +++ b/src/app/landing/page.module.css @@ -0,0 +1,19 @@ +@keyframes fadeIn { + 0% { + opacity: 0; + transition: opacity 0.5s ease-out, transform 0.5s ease-out; + } + 100% { + opacity: 1; + } +} + +.drawing footer [class*="App-toolbar"] { + border: 5px solid red; + display: none; +} + +.drawing { + pointer-events: none; + animation: fadeIn 0.25s ease-in-out; +} \ No newline at end of file diff --git a/src/app/landing/page.tsx b/src/app/landing/page.tsx index 7ca91b9..7638a54 100644 --- a/src/app/landing/page.tsx +++ b/src/app/landing/page.tsx @@ -1,4 +1,114 @@ -import LandingPageComponent from "../ui/components/pages/LandingPageComponent"; +"use client"; + +import { Button, Container, Text, Timeline } from '@mantine/core'; +import { FaQuestionCircle } from 'react-icons/fa'; +import CoolButton from '@/app/ui/components/buttons/CoolButton'; +import { RiLinkM } from 'react-icons/ri'; +import { useMediaQuery } from '@mantine/hooks'; +import { Skeleton, useComputedColorScheme } from "@mantine/core"; +import dynamic from "next/dynamic"; +import CenterContainer from '@/app/ui/components/other/CenterContainer'; +import classes from './page.module.css'; +import { WELCOME_EXCALI_DATA } from '@/lib/constants'; +import cx from 'clsx'; + +const Excalidraw = dynamic( + async () => (await import("@excalidraw/excalidraw")).Excalidraw, + { + ssr: false, + loading: () => + }, +); + +function LandingExcalidraw({ isPhone }: { isPhone: boolean | undefined }) { + const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true }); + + return ( +
+ +
+ ); +} + +const myWebsiteLink = + +const LandingPageComponent = () => { + const isPhone = useMediaQuery('(max-width: 650px)'); + + return ( + + + + + + } title={

What is Excalihub?

}> +

Excalihub is a platform for creating and sharing Excalidraw drawings. You can create, save, and share multiple drawings for free.

+

To start, you just need to:

+ +

Or if you already have an account:

+ + + 🤔} title={

Why?

}> +

I find Excalidraw useful but the free version doesn't let you have multiple saved drawings. So I thought I could make that myself.

+ + 😮} title={

Oh so you are part of the Excali team?

}> + Nope :D + But I would like to be... + + 👨‍💻} title={

So who are you?

}> +

Just a guy. You can know more about me on my + {myWebsiteLink} +

+

One thing to note is that I am self-hosting this site. So if you find it useful consider to

+ + + 🧐} title={

Are you trying to replace Excalidraw?

}> +

Of course not. I am making this for myself but would probably use Excalidraw if I want all the fancy features. + This is just to have multiple drawings saved in one place. + I recommend using the + original Excalidraw platform if you want the other features.

+ + 🥼} title={

Feedback

}> +

If you have any feedback or suggestions, feel free to reach out to me on my {myWebsiteLink} +

+ + + + + ); +}; const Page = () => { return ; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5698e1e..a2a545e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -10,7 +10,7 @@ import { theme } from "@/theme"; import { ClerkProvider } from "@clerk/nextjs"; import { Notifications } from "@mantine/notifications"; import { Metadata } from "next"; -import { APP_DESCRIPTION } from "./ui/components/other/Constants"; +import { APP_DESCRIPTION } from "@/lib/constants"; const CaviarDreams = localFont({ src: '../../public/CaviarDreams.ttf' }); diff --git a/src/app/page.module.css b/src/app/page.module.css new file mode 100644 index 0000000..b7e9ae0 --- /dev/null +++ b/src/app/page.module.css @@ -0,0 +1,15 @@ +@keyframes slideUp { + 0% { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.5s ease-out, transform 0.5s ease-out; + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.slideUp { + animation: slideUp 0.25s ease-in-out; +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 937f262..ee21a28 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,70 @@ import { currentUser } from "@clerk/nextjs/server"; -import LandingPageComponent from "./ui/components/pages/LandingPageComponent"; -import HomePageComponent from "./ui/components/pages/HomePageComponent"; import { redirect } from "next/navigation"; +import { Box, Card, Flex, Group, Text } from "@mantine/core"; +import { getUserDrawings, getUserDrawingsCount, getUserIdByClerkId } from "@/db/queries"; +import { createDrawingAction, deleteDrawingAction, togglePublicDrawingAction } from "@/lib/actions"; +import CenterContainer from "./ui/components/other/CenterContainer"; +import SearchDrawings from "./ui/components/excaliCore/components/SearchDrawings"; +import NewDrawingButton from "./ui/components/buttons/NewDrawingButton"; +import DrawingCard from "./ui/components/cards/DrawingCard"; +import PaginationControls from "./ui/components/other/PaginationControls"; +import UserBeingProcessed from "./ui/components/other/UserBeingProcessed"; +import classes from "./page.module.css"; + +async function HomePageComponent({ searchParams, name, clerkId }: { searchParams: SearchParams, name: string | null, clerkId: string | null }) { + if (!name || !clerkId) throw new Error("User not found"); + + const userIdQuery = await getUserIdByClerkId(clerkId); + if (userIdQuery.length > 0) { + const page = searchParams["page"] ?? "1"; + const searchTerm = searchParams["search"] ?? ""; + const userId = userIdQuery[0].id; + const limit = 6 + const drawings = await getUserDrawings(userId, String(searchTerm), Number(page), limit); + + const numberOfDrawings = await getUserDrawingsCount(userId, String(searchTerm)); + const numberOfPages = Math.ceil(numberOfDrawings[0].count / limit); + + return ( + + + Hi {name}! 👋 + + + + + {/*=============Search and new drawing=============*/} + + + + + + {/*=============The drawings=============*/} + + {drawings.length > 0 ? drawings.map((drawing, i) => ) : + + Time to make some drawings... ᕕ(ᐛ)ᕗ + + } + + + {/*=============Pagination=============*/} + + + + + + + + ); + } else { // if a clerkId exists but a userId does not. Then the webhook is potentially still processing the user creation. + return ; // will reload the page after 1 second + } +}; export default async function HomePage({ searchParams }: { searchParams: SearchParams }) { const user = await currentUser(); diff --git a/src/app/profile/[username]/page.tsx b/src/app/profile/[username]/page.tsx index 3bd68b9..bbbd31a 100644 --- a/src/app/profile/[username]/page.tsx +++ b/src/app/profile/[username]/page.tsx @@ -1,7 +1,6 @@ import DrawingPublicCard from '@/app/ui/components/cards/DrawingPublicCard'; import SearchDrawings from '@/app/ui/components/excaliCore/components/SearchDrawings'; import CenterContainer from '@/app/ui/components/other/CenterContainer'; -import { MAIN_URL } from '@/app/ui/components/other/Constants'; import PaginationControls from '@/app/ui/components/other/PaginationControls'; import { getUserPublicDrawings, getUserPublicDrawingsCount, getUserIdByClerkId } from '@/db/queries'; import { clerkClient } from '@clerk/nextjs/server'; @@ -10,6 +9,8 @@ import { Metadata } from 'next'; import { notFound } from 'next/navigation'; import React from 'react'; +const MAIN_URL = process.env.MAIN_URL; + export async function generateMetadata( { params }: { params: { username: string } } ): Promise { diff --git a/src/app/ui/components/other/Constants.tsx b/src/app/ui/components/other/Constants.tsx deleted file mode 100644 index 8ab8055..0000000 --- a/src/app/ui/components/other/Constants.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const DEVELOPER_URL = "https://nabilmansour.com/" -export const GITHUB_URL = "https://github.com/NabilNYMansour/excalihub" -export const MAIN_URL = "https://excalihub.dev" - -export const APP_DESCRIPTION = "ExcaliHub is a platform for creating and sharing Excalidraw drawings."; - -export const WELCOME_EXCALI_DATA = { "elements": [{ "id": "9NDyO50OGK2z9wXJtbG9U", "type": "text", "x": 198.91244506835938, "y": 123.21875, "width": 617.1601806640624, "height": 74.00000000000001, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1307483351, "version": 324, "versionNonce": 802167641, "isDeleted": false, "boundElements": null, "updated": 1720635438943, "link": null, "locked": false, "text": "Welcome to ExcaliHub", "fontSize": 59.2, "fontFamily": 1, "textAlign": "center", "verticalAlign": "top", "baseline": 52.000000000000014, "containerId": null, "originalText": "Welcome to ExcaliHub", "lineHeight": 1.25 }, { "id": "cREhjb3qlb6ld5vKsotRv", "type": "freedraw", "x": 506.5625, "y": 240.21875, "width": 73, "height": 61, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 2142036311, "version": 206, "versionNonce": 1188902103, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [0, 1], [-1, 1], [-2, 2], [-2, 3], [-3, 4], [-4, 4], [-5, 6], [-7, 6], [-8, 8], [-9, 9], [-10, 10], [-11, 11], [-12, 12], [-13, 13], [-14, 14], [-15, 15], [-16, 15], [-17, 15], [-18, 17], [-19, 17], [-20, 18], [-21, 19], [-22, 20], [-23, 21], [-25, 23], [-27, 24], [-28, 25], [-30, 26], [-31, 27], [-33, 28], [-34, 30], [-36, 31], [-37, 32], [-38, 33], [-39, 33], [-39, 34], [-40, 35], [-41, 35], [-41, 36], [-42, 36], [-43, 36], [-44, 37], [-44, 38], [-45, 38], [-46, 39], [-47, 40], [-48, 40], [-49, 41], [-50, 41], [-50, 42], [-51, 43], [-52, 43], [-52, 44], [-53, 44], [-54, 45], [-54, 46], [-55, 46], [-56, 46], [-56, 47], [-57, 48], [-58, 48], [-59, 49], [-59, 50], [-60, 50], [-61, 51], [-62, 51], [-63, 52], [-63, 53], [-64, 53], [-65, 53], [-65, 54], [-66, 55], [-66, 56], [-67, 56], [-68, 56], [-69, 57], [-69, 58], [-70, 59], [-71, 59], [-72, 60], [-73, 61], [-73, 61]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [-73, 61] }, { "id": "zau_hOK84pUqwbeHF36aB", "type": "freedraw", "x": 429.5625, "y": 305.21875, "width": 43, "height": 35, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1492461847, "version": 183, "versionNonce": 19825143, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [2, 0], [3, 0], [4, 0], [4, 1], [5, 1], [7, 1], [7, 2], [8, 2], [9, 2], [10, 2], [11, 2], [12, 3], [12, 4], [13, 4], [14, 4], [14, 5], [15, 5], [16, 5], [16, 6], [17, 7], [18, 8], [19, 9], [19, 10], [20, 10], [21, 10], [22, 12], [23, 13], [24, 13], [24, 14], [25, 14], [25, 15], [25, 16], [26, 16], [26, 17], [27, 17], [27, 18], [27, 19], [28, 20], [29, 20], [29, 21], [29, 22], [30, 22], [31, 23], [32, 24], [32, 25], [33, 25], [34, 26], [34, 27], [35, 28], [36, 29], [37, 29], [37, 30], [38, 31], [39, 32], [40, 32], [40, 33], [41, 34], [42, 34], [42, 35], [43, 35], [43, 35]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [43, 35] }, { "id": "zVqu481GaXYWYxggkQ0zU", "type": "freedraw", "x": 472.5625, "y": 340.21875, "width": 85, "height": 64, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1735460855, "version": 221, "versionNonce": 974727959, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [1, 0], [2, 0], [2, -1], [3, -1], [4, -1], [4, -2], [5, -2], [6, -2], [6, -3], [7, -3], [8, -3], [8, -4], [9, -4], [9, -5], [10, -5], [10, -6], [11, -7], [12, -8], [14, -10], [15, -11], [17, -13], [19, -15], [20, -16], [22, -17], [22, -18], [23, -18], [24, -19], [25, -20], [25, -21], [26, -21], [27, -22], [28, -22], [28, -23], [29, -24], [30, -24], [31, -25], [31, -26], [32, -26], [33, -27], [34, -27], [34, -28], [35, -29], [36, -29], [36, -30], [37, -31], [38, -31], [39, -32], [40, -33], [40, -34], [41, -34], [43, -34], [43, -35], [44, -35], [45, -36], [46, -36], [47, -37], [48, -37], [48, -38], [49, -38], [50, -39], [51, -40], [52, -40], [53, -41], [54, -41], [54, -42], [56, -43], [57, -44], [58, -45], [60, -46], [61, -46], [63, -47], [64, -49], [65, -49], [67, -51], [68, -52], [69, -52], [70, -53], [71, -53], [71, -54], [72, -54], [73, -55], [74, -55], [74, -56], [75, -56], [75, -57], [76, -57], [77, -57], [77, -58], [78, -59], [79, -60], [80, -60], [81, -61], [81, -62], [82, -62], [83, -62], [83, -63], [84, -64], [85, -64], [85, -64]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [85, -64] }, { "id": "kjwHAuUCl7J-96UjqT_Xf", "type": "freedraw", "x": 512.5625, "y": 237.21875, "width": 55, "height": 14, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1713691031, "version": 182, "versionNonce": 236040247, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [1, 0], [1, -1], [3, -1], [4, -1], [5, -1], [6, -2], [8, -2], [9, -2], [10, -2], [11, -3], [12, -3], [13, -3], [14, -3], [15, -3], [15, -4], [16, -4], [17, -4], [18, -4], [19, -4], [20, -4], [20, -5], [21, -5], [22, -5], [23, -5], [23, -6], [24, -6], [25, -6], [26, -6], [27, -6], [28, -6], [29, -7], [30, -7], [31, -7], [32, -8], [33, -8], [34, -8], [34, -9], [35, -9], [36, -9], [37, -9], [38, -9], [40, -9], [40, -10], [42, -10], [43, -11], [44, -11], [45, -11], [46, -11], [47, -11], [48, -12], [49, -12], [50, -12], [50, -13], [51, -13], [52, -13], [53, -13], [53, -14], [54, -14], [55, -14], [55, -14]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [55, -14] }, { "id": "uKp4No6zbpnu-pdWSQJ-L", "type": "freedraw", "x": 568.5625, "y": 224.21875, "width": 7, "height": 46, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 423702713, "version": 163, "versionNonce": 385651031, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [0, 1], [0, 2], [0, 3], [-1, 5], [-1, 7], [-1, 8], [-1, 9], [-1, 10], [-1, 11], [-1, 12], [-1, 13], [-2, 14], [-2, 16], [-2, 17], [-3, 18], [-3, 19], [-3, 20], [-3, 22], [-3, 23], [-4, 24], [-4, 25], [-4, 26], [-4, 27], [-5, 28], [-5, 29], [-5, 30], [-5, 31], [-5, 32], [-5, 33], [-5, 34], [-6, 35], [-6, 36], [-6, 37], [-6, 38], [-7, 40], [-7, 41], [-7, 42], [-7, 43], [-7, 44], [-7, 45], [-7, 46], [-7, 46]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [-7, 46] }, { "id": "4AdCAHx-i99LOwMTbXPP5", "type": "freedraw", "x": 528.5625, "y": 259.21875, "width": 1, "height": 0, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1216339769, "version": 124, "versionNonce": 1043222135, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [-1, 0], [0, 0]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [-1, 0] }, { "id": "YndCldmD9PTDF3LfezSIt", "type": "freedraw", "x": 487.5625, "y": 248.21875, "width": 28, "height": 23, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 439368601, "version": 163, "versionNonce": 1315661719, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [-1, 0], [-2, 0], [-3, 0], [-4, 0], [-5, 0], [-5, -1], [-6, -1], [-7, -1], [-7, -2], [-8, -2], [-9, -3], [-10, -3], [-11, -4], [-12, -5], [-13, -6], [-14, -7], [-15, -8], [-15, -9], [-16, -10], [-17, -10], [-17, -11], [-18, -12], [-18, -13], [-19, -13], [-20, -13], [-20, -14], [-20, -15], [-21, -15], [-22, -15], [-22, -16], [-23, -16], [-23, -17], [-24, -18], [-25, -18], [-25, -19], [-25, -20], [-26, -20], [-26, -21], [-27, -22], [-27, -23], [-28, -23], [-28, -23]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [-28, -23] }, { "id": "8G-YJYGltKO1smMY6pALv", "type": "freedraw", "x": 451.5625, "y": 275.21875, "width": 24, "height": 25, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1781406233, "version": 152, "versionNonce": 1172855991, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [-1, 0], [-2, -1], [-3, -2], [-4, -2], [-5, -4], [-6, -5], [-7, -5], [-8, -7], [-10, -8], [-10, -10], [-12, -11], [-13, -12], [-13, -13], [-14, -14], [-15, -15], [-16, -16], [-16, -17], [-17, -18], [-18, -18], [-18, -19], [-18, -20], [-19, -20], [-19, -21], [-20, -22], [-20, -23], [-21, -23], [-22, -24], [-22, -25], [-23, -25], [-24, -25], [-24, -25]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [-24, -25] }, { "id": "CuEaW4GPjomupLpZ23o2S", "type": "freedraw", "x": 421.5625, "y": 240.21875, "width": 2, "height": 27, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1617316601, "version": 147, "versionNonce": 1749659095, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [0, -1], [1, -1], [1, -2], [1, -3], [1, -4], [1, -5], [1, -6], [1, -7], [2, -8], [2, -10], [2, -11], [2, -13], [2, -14], [2, -16], [2, -17], [2, -18], [2, -19], [2, -20], [2, -21], [2, -22], [2, -23], [2, -24], [2, -25], [2, -26], [2, -27], [2, -27]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [2, -27] }, { "id": "3qW1EG_hTshDyZVJWiq7D", "type": "freedraw", "x": 423.5625, "y": 213.21875, "width": 25, "height": 2, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1696672633, "version": 144, "versionNonce": 279173879, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0], [7, 0], [9, 0], [10, 1], [11, 1], [12, 1], [13, 2], [14, 2], [15, 2], [16, 2], [17, 2], [18, 2], [19, 2], [20, 2], [21, 2], [22, 2], [23, 2], [24, 2], [25, 2], [25, 2]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [25, 2] }, { "id": "eCOQv4VoNQVXTrPjbMYze", "type": "freedraw", "x": 495.5625, "y": 324.21875, "width": 25, "height": 25, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1516525913, "version": 164, "versionNonce": 1132160023, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [1, 0], [1, 1], [2, 1], [3, 1], [3, 2], [4, 2], [4, 3], [5, 3], [6, 3], [6, 4], [7, 5], [8, 5], [8, 6], [8, 7], [9, 7], [9, 8], [9, 9], [10, 9], [10, 10], [10, 11], [11, 11], [11, 12], [11, 13], [12, 13], [12, 14], [13, 14], [13, 15], [14, 15], [15, 15], [15, 16], [16, 17], [17, 17], [17, 18], [18, 18], [18, 19], [19, 20], [20, 21], [21, 22], [22, 23], [23, 24], [24, 24], [25, 25], [25, 25]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [25, 25] }, { "id": "-WMfhPm1i6CP_2lQQGQjE", "type": "freedraw", "x": 519.5625, "y": 349.21875, "width": 27, "height": 17, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1059468473, "version": 151, "versionNonce": 12896567, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [1, 0], [2, 0], [3, -1], [3, -2], [4, -2], [5, -3], [6, -3], [7, -4], [8, -5], [8, -6], [10, -6], [11, -7], [13, -8], [14, -9], [15, -9], [16, -10], [18, -11], [19, -11], [20, -12], [21, -12], [21, -13], [22, -13], [22, -14], [23, -14], [24, -15], [25, -15], [25, -16], [26, -16], [27, -17], [27, -17]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [27, -17] }, { "id": "3M6DdooFdGF9YlFgAuo4R", "type": "freedraw", "x": 526.5625, "y": 303.21875, "width": 18, "height": 21, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 1396621113, "version": 153, "versionNonce": 1441040983, "isDeleted": false, "boundElements": null, "updated": 1720635447021, "link": null, "locked": false, "points": [[0, 0], [1, 0], [2, 0], [3, 2], [4, 2], [5, 3], [6, 4], [7, 5], [8, 5], [9, 6], [9, 7], [10, 7], [10, 8], [11, 8], [11, 10], [12, 10], [12, 11], [12, 12], [12, 13], [13, 13], [13, 14], [14, 14], [14, 15], [14, 16], [14, 17], [15, 17], [15, 18], [16, 18], [16, 19], [17, 19], [17, 20], [18, 20], [18, 21], [18, 21]], "pressures": [], "simulatePressure": true, "lastCommittedPoint": [18, 21] }] } \ No newline at end of file diff --git a/src/app/ui/components/pages/HomePageComponent.tsx b/src/app/ui/components/pages/HomePageComponent.tsx deleted file mode 100644 index 9c4e177..0000000 --- a/src/app/ui/components/pages/HomePageComponent.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import CenterContainer from "../other/CenterContainer"; -import DrawingCard from "../cards/DrawingCard"; -import { Box, Card, Flex, Group, Text } from "@mantine/core"; -import { getUserDrawings, getUserDrawingsCount, getUserIdByClerkId } from "@/db/queries"; -import { createDrawingAction, deleteDrawingAction, togglePublicDrawingAction } from "@/lib/actions"; -import PaginationControls from "../other/PaginationControls"; -import UserBeingProcessed from "../other/UserBeingProcessed"; -import SearchDrawings from "../excaliCore/components/SearchDrawings"; -import NewDrawingButton from "../buttons/NewDrawingButton"; - -async function HomePageComponent({ searchParams, name, clerkId }: { searchParams: SearchParams, name: string | null, clerkId: string | null }) { - if (!name || !clerkId) throw new Error("User not found"); - - const userIdQuery = await getUserIdByClerkId(clerkId); - if (userIdQuery.length > 0) { - const page = searchParams["page"] ?? "1"; - const searchTerm = searchParams["search"] ?? ""; - const userId = userIdQuery[0].id; - const limit = 6 - const drawings = await getUserDrawings(userId, String(searchTerm), Number(page), limit); - - const numberOfDrawings = await getUserDrawingsCount(userId, String(searchTerm)); - const numberOfPages = Math.ceil(numberOfDrawings[0].count / limit); - - return ( - - - Hi {name}! 👋 - - - - - {/*=============Search and new drawing=============*/} - - - - - - {/*=============The drawings=============*/} - - {drawings.length > 0 ? drawings.map((drawing, i) => ) : - - Time to make some drawings... ᕕ(ᐛ)ᕗ - - } - - - {/*=============Pagination=============*/} - - - - - - - - ); - } else { // if a clerkId exists but a userId does not. Then the webhook is potentially still processing the user creation. - return ; // will reload the page after 1 second - } -}; - -export default HomePageComponent; diff --git a/src/app/ui/components/pages/LandingExcalidraw.module.css b/src/app/ui/components/pages/LandingExcalidraw.module.css deleted file mode 100644 index 33def60..0000000 --- a/src/app/ui/components/pages/LandingExcalidraw.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.drawing footer [class*="App-toolbar"] { - border: 5px solid red; - display: none; -} - -.drawing { - pointer-events: none; -} diff --git a/src/app/ui/components/pages/LandingPageComponent.tsx b/src/app/ui/components/pages/LandingPageComponent.tsx deleted file mode 100644 index 114258f..0000000 --- a/src/app/ui/components/pages/LandingPageComponent.tsx +++ /dev/null @@ -1,112 +0,0 @@ -"use client"; - -import { Button, Container, Text, Timeline } from '@mantine/core'; -import { FaQuestionCircle } from 'react-icons/fa'; -import CoolButton from '../buttons/CoolButton'; -import { RiLinkM } from 'react-icons/ri'; -import { useMediaQuery } from '@mantine/hooks'; -import { Skeleton, useComputedColorScheme } from "@mantine/core"; -import dynamic from "next/dynamic"; -import { WELCOME_EXCALI_DATA } from "../other/Constants"; -import CenterContainer from '../other/CenterContainer'; -import excaliClasses from './LandingExcalidraw.module.css'; - -const Excalidraw = dynamic( - async () => (await import("@excalidraw/excalidraw")).Excalidraw, - { - ssr: false, - loading: () => - }, -); - -function LandingExcalidraw({ isPhone }: { isPhone: boolean | undefined }) { - const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true }); - - return ( -
- -
- ); -} - -const myWebsiteLink = - -const LandingPageComponent = () => { - const isPhone = useMediaQuery('(max-width: 650px)'); - - return ( - - - - - - } title={

What is Excalihub?

}> -

Excalihub is a platform for creating and sharing Excalidraw drawings. You can create, save, and share multiple drawings for free.

-

To start, you just need to:

- -

Or if you already have an account:

- - - 🤔} title={

Why?

}> -

I find Excalidraw useful but the free version doesn't let you have multiple saved drawings. So I thought I could make that myself.

- - 😮} title={

Oh so you are part of the Excali team?

}> - Nope :D - But I would like to be... - - 👨‍💻} title={

So who are you?

}> -

Just a guy. You can know more about me on my - {myWebsiteLink} -

-

One thing to note is that I am self-hosting this site. So if you find it useful consider to

- - - 🧐} title={

Are you trying to replace Excalidraw?

}> -

Of course not. I am making this for myself but would probably use Excalidraw if I want all the fancy features. - This is just to have multiple drawings saved in one place. - I recommend using the - original Excalidraw platform if you want the other features.

- - 🥼} title={

Feedback

}> -

If you have any feedback or suggestions, feel free to reach out to me on my {myWebsiteLink} -

- - - - - ); -}; - -export default LandingPageComponent; \ No newline at end of file diff --git a/src/app/ui/layout/Header.tsx b/src/app/ui/layout/Header.tsx index 436ab30..e4348e7 100644 --- a/src/app/ui/layout/Header.tsx +++ b/src/app/ui/layout/Header.tsx @@ -10,10 +10,10 @@ import { SignedIn, SignedOut } from '@clerk/clerk-react'; import SignInAction from '../components/buttons/SignInAction'; import { dark } from '@clerk/themes'; import { SiExcalidraw } from 'react-icons/si'; -import { DEVELOPER_URL, GITHUB_URL } from '../components/other/Constants'; import Image from 'next/image'; import { AiFillGithub } from 'react-icons/ai'; import Link from 'next/link'; +import { DEVELOPER_URL, GITHUB_URL } from '@/lib/constants'; const DeveloperAction = () => ( diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 137b885..4cb87f3 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1,3 +1,7 @@ +export const DEVELOPER_URL = "https://nabilmansour.com/" +export const GITHUB_URL = "https://github.com/NabilNYMansour/excalihub" +export const MAIN_URL = "https://excalihub.dev" + export const NEW_DRAWING = { "elements": [{ "id": "gudG2BE25zfp57R7XXKfA", "type": "text", "x": 813, "y": 385, "width": 215.02809143066406, "height": 45, "angle": 0, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "groupIds": [], "frameId": null, "roundness": null, "seed": 2009499878, "version": 93, "versionNonce": 1038612262, "isDeleted": false, "boundElements": null, "updated": 1720881617151, "link": null, "locked": false, "text": "New Drawing", "fontSize": 36, "fontFamily": 1, "textAlign": "center", "verticalAlign": "top", "baseline": 32, "containerId": null, "originalText": "New Drawing", "lineHeight": 1.25 }] } export const APP_DESCRIPTION = "ExcaliHub is a platform for creating and sharing Excalidraw drawings.";