Implement opengraph and other stuff (#1)

.eslintrc.cjs

@@ -57,7 +57,7 @@ const config = {
     },
     settings: {
         tailwindcss: {
-            callees: ["twmerge", "cva", "cn"],
+            callees: ["twmerge", "cva", "cn", "tw"],
         },
     },
 }

next.config.mjs

@@ -28,37 +28,16 @@ export default withSentryConfig(
     // @ts-expect-error Contentlayer NextConfig type issue
     withContentlayer(config),
     {
-        // For all available options, see:
-        // https://github.com/getsentry/sentry-webpack-plugin#options
-
         org: "shreyans-jain-org",
         project: "shreyans-sh",
-        // Suppresses source map uploading logs during build
         silent: true,
     },
     {
-        // For all available options, see:
-        // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-        // https://vercel.com/docs/cron-jobs
         automaticVercelMonitors: true,
-
-        // Automatically tree-shake Sentry logger statements to reduce bundle size
         disableLogger: true,
-
-        // Hides source maps from generated client bundles
         hideSourceMaps: true,
-
-        // Transpiles SDK to be compatible with IE11 (increases bundle size)
-        transpileClientSDK: true,
-
-        // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+        transpileClientSDK: false,
         tunnelRoute: "/monitoring",
-
-        // Enables automatic instrumentation of Vercel Cron Monitors.
-        // See the following for more information:
-        // https://docs.sentry.io/product/crons/
-        // Upload a larger set of source maps for prettier stack traces (increases build time)
         widenClientFileUpload: true,
     },
 )

src/app/(pages)/layout.tsx

@@ -2,7 +2,6 @@ import "./globals.css"
 
 import { type Metadata, type Viewport } from "next"
 
-import { Slot } from "@radix-ui/react-slot"
 import { Analytics } from "@vercel/analytics/react"
 import { GeistMono } from "geist/font/mono"
 import { GeistSans } from "geist/font/sans"
@@ -11,14 +10,10 @@ import { AlertCircle } from "lucide-react"
 import Footer from "@/components/footer"
 import Header from "@/components/header"
 import { Alert, AlertDescription, AlertTitle } from "@/components/shadcn/alert"
-// import { headers } from "next/headers"
-
 import { ThemeProvider } from "@/components/theme-provider"
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 
-// import { TRPCReactProvider } from "@/trpc/react"
-
 export const metadata: Metadata = {
     authors: [
         {

src/app/(pages)/page.tsx

@@ -132,6 +132,12 @@ const Home = () => {
                         link="https://blockvote.vercel.app/"
                         title="Blockvote"
                     />
+                    <Project
+                        description="A platform for freelancers and companies to work together"
+                        githubLink="https://github.com/duelance-app"
+                        link="https://duelance.app"
+                        title="Duelance"
+                    />
                 </div>
             </div>
         </main>

src/app/opengraph-image.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable react/no-unknown-property */
+
+import { ImageResponse } from "next/og"
+
+export const runtime = "edge"
+
+export const alt = "About Acme"
+export const size = {
+    height: 630,
+    width: 1200,
+}
+
+export const contentType = "image/png"
+
+export default function OG() {
+    const BG_OPTIONS = [
+        {
+            backgroundColor: "#8BC6EC",
+            backgroundImage:
+                "linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)",
+        },
+        {
+            backgroundColor: "#21D4FD",
+            backgroundImage: "linear-gradient(19deg, #21D4FD 0%, #B721FF 100%)",
+        },
+        {
+            backgroundColor: "#8BC6EC",
+            backgroundImage:
+                "linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)",
+        },
+        {
+            backgroundColor: "#8EC5FC",
+            backgroundImage: "linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)",
+        },
+        {
+            backgroundColor: "#08AEEA",
+            backgroundImage: "linear-gradient(0deg, #08AEEA 0%, #2AF598 100%)",
+        },
+        {
+            backgroundColor: "#3EECAC",
+            backgroundImage: "linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%)",
+        },
+        {
+            backgroundColor: "#FF3CAC",
+            backgroundImage:
+                "linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%)",
+        },
+    ]
+
+    return new ImageResponse(
+        (
+            <div
+                style={
+                    BG_OPTIONS[Math.floor(Math.random() * BG_OPTIONS.length)]
+                }
+                tw="w-full h-full"
+            ></div>
+        ),
+        {
+            ...size,
+            // fonts: [
+            //     {
+            //         data: await interSemiBold,
+            //         name: "Inter",
+            //         style: "normal",
+            //         weight: 400,
+            //     },
+            // ],
+        },
+    )
+}