init

Author: ChrisAbdo

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

app/actions.ts

@@ -0,0 +1,44 @@
+"use server";
+
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth-options";
+import { prisma } from "@/prisma/db";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+let sessionCache: any = null;
+
+async function getSession() {
+  if (!sessionCache) {
+    sessionCache = await getServerSession(authOptions);
+  }
+  return sessionCache;
+}
+
+export async function addSnippet(formData: FormData) {
+  const session = await getSession();
+
+  const title = String(formData.get("title"));
+  const code = String(formData.get("code"));
+  const language = String(formData.get("language"));
+
+  const authorId = session?.user.id;
+  const authorName = session?.user.name;
+
+  try {
+    await prisma.snippet.create({
+      data: {
+        title,
+        code,
+        language,
+        authorId,
+      },
+    });
+  } catch (error: any) {
+    return {
+      error: error.message,
+    };
+  }
+  revalidatePath("/profile");
+  redirect(`/profile/${authorName}`);
+}

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,6 @@
+import { authOptions } from "@/lib/auth-options";
+import NextAuth from "next-auth";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

app/api/chat/route.ts

@@ -0,0 +1,27 @@
+import OpenAI from "openai";
+import { OpenAIStream, StreamingTextResponse } from "ai";
+
+// Create an OpenAI API client (that's edge friendly!)
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY || "",
+});
+
+// IMPORTANT! Set the runtime to edge
+export const runtime = "edge";
+
+export async function POST(req: Request) {
+  // Extract the `prompt` from the body of the request
+  const { messages } = await req.json();
+
+  // Ask OpenAI for a streaming chat completion given the prompt
+  const response = await openai.chat.completions.create({
+    model: "gpt-3.5-turbo",
+    stream: true,
+    messages: messages,
+  });
+
+  // Convert the response into a friendly text-stream
+  const stream = OpenAIStream(response);
+  // Respond with the stream
+  return new StreamingTextResponse(stream);
+}

app/create/page.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import FormUpload from "@/components/snippets/form-upload";
+
+export default function Home() {
+  return (
+    <div className="mt-4">
+      <div className="md:flex md:items-center md:justify-between">
+        <div className="min-w-0 flex-1">
+          <h2 className="text-2xl font-bold leading-7 sm:truncate sm:text-3xl sm:tracking-tight">
+            Create a new snippet
+          </h2>
+        </div>
+      </div>
+      <FormUpload />
+    </div>
+  );
+}

app/explore/page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Page() {
+  return <div>Explore</div>;
+}

app/globals.css

@@ -1,27 +1,76 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+ 
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+ 
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+ 
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+ 
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+ 
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+ 
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
   }
 }
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/layout.tsx

@@ -1,22 +1,40 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from "next";
+import "./globals.css";
+import Navbar from "@/components/layout/navbar";
 
-const inter = Inter({ subsets: ['latin'] })
+import { AuthProvider } from "@/lib/auth-provider";
+import { ThemeProvider } from "@/lib/theme-provider";
+
+import { GeistSans } from "geist/font";
+import { Container } from "@/components/layout/container";
+import { Toaster } from "sonner";
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" className={GeistSans.className} suppressHydrationWarning>
+      <AuthProvider>
+        <body>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <Navbar />
+            <Container>{children}</Container>
+            <Toaster position="top-center" richColors />
+          </ThemeProvider>
+        </body>
+      </AuthProvider>
     </html>
-  )
+  );
 }

app/opengraph-image.tsx

@@ -0,0 +1,77 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export const alt = "About Acme";
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = "image/png";
+
+export default async function OGImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: "flex",
+          height: "100%",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          letterSpacing: "-.02em",
+          fontWeight: 700,
+          background: "white",
+        }}
+      >
+        <div
+          style={{
+            left: 42,
+            top: 42,
+            position: "absolute",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <span
+            style={{
+              width: 24,
+              height: 24,
+              background: "black",
+            }}
+          />
+          <span
+            style={{
+              marginLeft: 8,
+              fontSize: 20,
+            }}
+          >
+            Snippets
+          </span>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            justifyContent: "center",
+            padding: "20px 50px",
+            margin: "0 42px",
+            fontSize: 40,
+            width: "auto",
+            maxWidth: 550,
+            textAlign: "center",
+            backgroundColor: "black",
+            color: "white",
+            lineHeight: 1.4,
+          }}
+        >
+          Manage your code snippets
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}