diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..8230b97 --- /dev/null +++ b/.env.example @@ -0,0 +1,52 @@ +# Since the ".env" file is gitignored, you can use the ".env.example" file to +# build a new ".env" file when you clone the repo. Keep this file up-to-date +# when you add new variables to `.env`. + +# This file will be committed to version control, so make sure not to have any +# secrets in it. If you are cloning this repo, create a copy of this file named +# ".env" and populate it with your secrets. + +# When adding additional environment variables, the schema in "/src/env.mjs" +# should be updated accordingly. + +ORIGIN="" + +# Prisma DB +# https://www.prisma.io/docs/reference/database-reference/connection-urls#env +DATABASE_URL="" + +# Google API +GOOGLE_CLIENT_ID="" +GOOGLE_CLIENT_SECRET="" + +# Dall E API +DALLE_API_KEY="" +USE_MOCK_DALLE="true" + +# Stable Diffusion API +STABLE_DIFFUSION_API_KEY="" +STABLE_DIFFUSION_API_ENDPOINT="" + +# AWS/S3 API +ACCESS_KEY_ID_AWS="" +SECRET_ACCESS_KEY_AWS="" +REGION_AWS="us-east-2" +S3_BUCKET_URL_AWS="" +S3_BUCKET_THUMBNAIL_URL_AWS="" +S3_BUCKET_NAME_AWS="" + +# Stripe API +STRIPE_PUBLISHABLE_KEY="" +STRIPE_SECRET_KEY="" +STRIPE_CREDITS_PRICE_ID="" +STRIPE_WEB_HOOK_SECRET="" + +# Honeypot +HONEYPOT_SECRET="SOME_SECRET_HONEYPOT" + +# CSRF +SESSION_SECRET="SOME_SECRET_SESSION" + +# Clerk +CLERK_PUBLISHABLE_KEY="" +CLERK_SECRET_KEY="" \ No newline at end of file diff --git a/app/components/NavigationSidebar.tsx b/app/components/NavigationSidebar.tsx index 9a6870b..0aece79 100644 --- a/app/components/NavigationSidebar.tsx +++ b/app/components/NavigationSidebar.tsx @@ -2,14 +2,6 @@ import React from "react"; import PixelStudioIcon from "components/PixelStudioIcon"; import { Link } from "@remix-run/react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; import { Search, Layers, @@ -19,7 +11,44 @@ import { LogOut, CreditCard, } from "lucide-react"; -// import { useLoggedInUser } from "~/hooks"; +import { + SignedIn, + SignedOut, + SignInButton, + SignUpButton, + UserButton, + useUser, +} from "@clerk/remix"; + +const NAV_LINKS = [ + { + title: "Explore", + icon: , + href: "/explore", + }, + { + title: "Collections", + icon: , + href: "/collections", + }, + { + title: "Create", + icon: , + href: "/create", + }, + { + title: "Profile", + icon: , + // href: `/profile/${userData?.username || ""}`, + href: `/profile/`, + }, + // ! TODO: Hide for now, get barebones out first + // { + // title: "Manage", + // icon: , + // href: "/manage", + // }, +]; const NavButton = ({ title, @@ -37,58 +66,22 @@ const NavButton = ({ {...props} > {icon} - {/* */} {title} ); const NavigationSidebar = () => { + const { user } = useUser(); + console.log(user); + const [credits, setCredits] = React.useState(31); // const userData = React.useContext(UserContext); // const userData = useLoggedInUser(); // const isLoggedIn = Boolean(userData?.id); - const userData = { - name: "John Doe", - username: "johndoe", - }; - const NAV_LINKS = [ - { - title: "Explore", - icon: , - href: "/explore", - }, - { - title: "Collections", - icon: , - href: "/collections", - }, - { - title: "Create", - icon: , - href: "/create", - }, - { - title: "Profile", - icon: , - // href: `/profile/${userData?.username || ""}`, - href: `/profile/`, - }, - // ! TODO: Hide for now, get barebones out first - // { - // title: "Manage", - // icon: , - // href: "/manage", - // }, - ]; - - // const navLinksToRender = isLoggedIn ? NAV_LINKS : []; - const navLinksToRender = NAV_LINKS; return ( <> - {/*
*/}
*/} +
{
- {/*
*/} - {/*
- -
*/} - {/*
*/} - {/* {isLoggedIn && ( */} -
- {/* */} - - - JS - -
- {/* )} */} + + + - {/* {isLoggedIn && ( */}
- {navLinksToRender.map((link) => ( - - {link.icon} - - ))} + + {NAV_LINKS.map((link) => ( + + {link.icon} + + ))} + + + + + +
- {/* )} */} diff --git a/app/root.tsx b/app/root.tsx index a2e1714..444c3ec 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -11,7 +11,11 @@ import { useLocation, useRouteError, } from "@remix-run/react"; -import { LoaderFunctionArgs } from "@remix-run/node"; +import { + LoaderFunction, + LoaderFunctionArgs, + MetaFunction, +} from "@remix-run/node"; import { Toaster, toast as showToast } from "sonner"; import { prisma } from "services/prisma.server"; import NavigationSidebar from "components/NavigationSidebar"; @@ -22,59 +26,76 @@ import { AuthenticityTokenProvider } from "remix-utils/csrf/react"; import { HoneypotProvider } from "remix-utils/honeypot/react"; import { honeypot } from "utils/honeypot.server"; import { getToast, type Toast } from "utils/toast.server"; +import { rootAuthLoader } from "@clerk/remix/ssr.server"; +import { ClerkApp } from "@clerk/remix"; import "./tailwind.css"; import "./globals.css"; -export async function loader({ request }: LoaderFunctionArgs) { - const [csrfToken, csrfCookieHeader] = await csrf.commitToken(request); - const honeyProps = honeypot.getInputProps(); - const users = (await prisma.user.findMany()) || []; +export const meta: MetaFunction = () => [ + { + charset: "utf-8", + title: "Pixel Studio AI", + viewport: "width=device-width,initial-scale=1", + property: "og:title", + content: "Pixel Studio AI", + }, +]; - const { toast, headers: toastHeaders } = await getToast(request); +// export async function loader({ request }: LoaderFunctionArgs) { +export const loader: LoaderFunction = (args) => { + return rootAuthLoader(args, async ({ request }) => { + const [csrfToken, csrfCookieHeader] = await csrf.commitToken(request); + const honeyProps = honeypot.getInputProps(); + const users = (await prisma.user.findMany()) || []; - return json( - { - // username: os.userInfo().username, - // theme: getTheme(request), - users: users.length, - toast, - ENV: getEnv(), - csrfToken, - honeyProps, - }, - { - headers: combineHeaders( - csrfCookieHeader ? { "set-cookie": csrfCookieHeader } : null, - toastHeaders - ), - } - ); -} + const { toast, headers: toastHeaders } = await getToast(request); + + return json( + { + // username: os.userInfo().username, + // theme: getTheme(request), + users: users.length, + toast, + ENV: getEnv(), + csrfToken, + honeyProps, + }, + { + headers: combineHeaders( + csrfCookieHeader ? { "set-cookie": csrfCookieHeader } : null, + toastHeaders + ), + } + ); + }); +}; function Document({ children, - env, -}: { +}: // env, +{ children: React.ReactNode; - env?: Record; + // env?: Record; }) { return ( - - + {/* */} {children} -