feat: added analytics

apps/web/app/layout.tsx

@@ -5,17 +5,15 @@ import { ThemeProvider } from "@/components/core/theme-provider";
 import { cn } from "ui/lib/utils";
 import { Toaster } from "@ui/components/toaster";
 import SiteHeader from "@/components/core/site-header";
-import { generateColorPalette } from "@/lib/colorCalculator";
-import { BaseColorTypes, ColorMode } from "@/types/app";
-import { generateBaseColors } from "@/lib/generateBaseColors";
 import { useColorStore } from "@/store/store";
 import ColorStoreInitializer from "./color-store-initializer";
 import PerformanceChecker from "@/components/core/performance-checker";
 import Toolbar from "@/components/core/toobar";
 import StyleSheetInitializer from "./stylesheet-initializer";
-import { cookies } from "next/headers";
 import { getServerColors } from "@/lib/getServerColors";
 
+import { Analytics } from "@vercel/analytics/react";
+
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 const comfortaa = Comfortaa({
   subsets: ["latin"],
@@ -72,6 +70,7 @@ export default async function RootLayout({
           {children}
           <Toaster />
         </ThemeProvider>
+        <Analytics />
       </body>
     </html>
   );

apps/web/app/page.tsx

@@ -33,17 +33,24 @@ export async function generateMetadata(
 
   // optionally access and extend (rather than replace) parent metadata
   const previousImages = (await parent).openGraph?.images || [];
+  const seoDescription = colors
+    ? `Generated with Fluid Colors: ${paletteColors}`
+    : "Unleash the Power of Dynamic, Variable-Based Color Palettes";
+  const ogImages = [opengraphImage, ...previousImages];
   return {
     title: colors ? "Check out this palette" : "Color Palette Generator",
-    description: colors
-      ? `Generated with Fluid Colors: ${paletteColors}`
-      : "Unleash the Power of Dynamic, Variable-Based Color Palettes",
+    description: seoDescription,
     openGraph: {
-      images: [opengraphImage, ...previousImages],
+      images: ogImages,
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: colors ? "Check out this palette" : "Color Palette Generator",
+      description: seoDescription,
+      images: ogImages,
     },
   };
 }
-
 export default async function Page({ searchParams }: Props) {
   return (
     <div className="site-padding mx-auto flex w-full max-w-[120rem] flex-1 flex-col pb-20 sm:pb-24">

apps/web/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@vercel/analytics": "^1.1.1",
     "culori": "^3.2.0",
     "extract-colors": "^4.0.2",
     "framer-motion": "^10.16.4",