refactor: add smooth-cursor analytics via npm

apps/www/app/(blog)/blog/[...slug]/page.tsx

@@ -4,14 +4,15 @@ import Link from "next/link"
 import { notFound } from "next/navigation"
 import { mdxComponents } from "@/mdx-components"
 import { ArrowLeftIcon } from "lucide-react"
-import { Badge } from "@/components/ui/badge"
 import type { BlogPosting, BreadcrumbList, WithContext } from "schema-dts"
+
 import { siteConfig } from "@/config/site"
 import { blogSource } from "@/lib/source"
 import { absoluteUrl, calculateReadingTime, formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
 import { buttonVariants } from "@/components/ui/button"
-import { BlogTableOfContents } from "@/components/blog/table-of-contents"
 import { MobileTOC } from "@/components/blog/mobile-toc"
+import { BlogTableOfContents } from "@/components/blog/table-of-contents"
 import { SidebarCTA } from "@/components/sidebar-cta"
 
 export const revalidate = false
@@ -188,7 +189,7 @@ export default async function BlogPage({ params }: PageProps) {
                 <img
                   src={doc.image}
                   alt={doc.title}
-                  className="size-full rounded-xl object-cover object-left border border-border"
+                  className="border-border size-full rounded-xl border object-cover object-left"
                 />
               </div>
               <div className="mx-auto flex flex-col items-center justify-center gap-y-2 p-5">
@@ -219,14 +220,16 @@ export default async function BlogPage({ params }: PageProps) {
 
                   return (
                     tags.length > 0 && (
-                      <div className="flex flex-wrap gap-1 items-center justify-center">
+                      <div className="flex flex-wrap items-center justify-center gap-1">
                         {tags.map((tag) => (
                           <Link
                             key={tag}
                             href={`/blog?tag=${encodeURIComponent(tag)}`}
-
                           >
-                            <Badge variant="secondary" className="border border-border text-xs">
+                            <Badge
+                              variant="secondary"
+                              className="border-border border text-xs"
+                            >
                               {tag}
                             </Badge>
                           </Link>

apps/www/app/(blog)/blog/page.tsx

@@ -127,7 +127,7 @@ export default async function Page({
           __html: serializedBreadcrumbStructuredData,
         }}
       />
-      <main className="container mx-auto py-10 md:py-14 px-10">
+      <main className="container mx-auto px-10 py-10 md:py-14">
         <header className="mb-12 space-y-3">
           <div>
             <h1 className="text-3xl font-semibold tracking-tight">Blog</h1>
@@ -202,20 +202,20 @@ export default async function Page({
                 >
                   <Link href={post.url} className="flex h-full flex-col">
                     {post.data?.image && (
-                      <div className="border-b overflow-hidden rounded-t-lg">
+                      <div className="overflow-hidden rounded-t-lg border-b">
                         <img
                           src={post.data.image}
                           alt={post.data?.title ?? post.url}
                           width={640}
                           height={360}
-                          className="w-full h-auto object-contain transition-transform duration-300 group-hover:scale-[1.02]"
+                          className="h-auto w-full object-contain transition-transform duration-300 group-hover:scale-[1.02]"
                         />
                       </div>
                     )}
 
                     <div className="flex flex-1 flex-col space-y-3 p-6">
                       <div className="flex-1 space-y-2">
-                        <h2 className="group-hover:text-primary line-clamp-2 text-xl font-semibold leading-tight transition-colors">
+                        <h2 className="group-hover:text-primary line-clamp-2 text-xl leading-tight font-semibold transition-colors">
                           {post.data?.title ?? post.url}
                         </h2>
                         {post.data?.description && (
@@ -239,15 +239,17 @@ export default async function Page({
 
                       {normalizeTag(post.data?.tags).length > 0 && (
                         <div className="flex flex-wrap gap-1.5">
-                          {normalizeTag(post.data.tags).slice(0, 3).map((tag) => (
-                            <Badge
-                              key={tag}
-                              variant="secondary"
-                              className="border border-border text-xs"
-                            >
-                              {tag}
-                            </Badge>
-                          ))}
+                          {normalizeTag(post.data.tags)
+                            .slice(0, 3)
+                            .map((tag) => (
+                              <Badge
+                                key={tag}
+                                variant="secondary"
+                                className="border-border border text-xs"
+                              >
+                                {tag}
+                              </Badge>
+                            ))}
                         </div>
                       )}
                     </div>

apps/www/components/blog/table-of-contents.tsx

@@ -16,10 +16,10 @@ const generateHeadingId = (text: string) => {
     .trim()
 }
 
-export function BlogTableOfContents({ 
+export function BlogTableOfContents({
   className,
   onLinkClick,
-}: { 
+}: {
   className?: string
   onLinkClick?: () => void
 }) {

apps/www/content/blog/typescript-vs-javascript-differences.mdx

@@ -39,7 +39,7 @@ This comparison isn't about crowning a winner. It’s about helping you make the
 <div className="my-6 w-full overflow-x-auto rounded-lg border">
   <table className="relative w-full text-sm">
     <thead className="bg-muted border-b">
-      <tr className="m-0 border-b transition-colors hover:bg-muted/50">
+      <tr className="hover:bg-muted/50 m-0 border-b transition-colors">
         <th
           scope="col"
           className="min-w-[120px] px-4 py-3 text-left font-semibold"
@@ -61,7 +61,7 @@ This comparison isn't about crowning a winner. It’s about helping you make the
       </tr>
     </thead>
     <tbody>
-      <tr className="m-0 border-b transition-colors hover:bg-muted/50">
+      <tr className="hover:bg-muted/50 m-0 border-b transition-colors">
         <td className="min-w-[120px] px-4 py-3 text-left font-medium">
           Project Scope
         </td>
@@ -73,7 +73,7 @@ This comparison isn't about crowning a winner. It’s about helping you make the
           maintainability.
         </td>
       </tr>
-      <tr className="m-0 border-b transition-colors hover:bg-muted/50">
+      <tr className="hover:bg-muted/50 m-0 border-b transition-colors">
         <td className="min-w-[120px] px-4 py-3 text-left font-medium">
           Error Detection
         </td>
@@ -84,7 +84,7 @@ This comparison isn't about crowning a winner. It’s about helping you make the
           Catches type-related errors during compilation, before code is run.
         </td>
       </tr>
-      <tr className="m-0 border-b transition-colors hover:bg-muted/50 last:border-b-0">
+      <tr className="hover:bg-muted/50 m-0 border-b transition-colors last:border-b-0">
         <td className="min-w-[120px] px-4 py-3 text-left font-medium">
           Developer Experience
         </td>

apps/www/content/docs/components/smooth-cursor.mdx

@@ -34,6 +34,10 @@ npx shadcn@latest add @magicui/smooth-cursor
 
 <TabsContent value="manual">
 
+```bash
+npx add smooth-cursor framer-motion
+```
+
 <Steps>
 
 <Step>Copy and paste the following code into your project.</Step>
@@ -102,10 +106,10 @@ select {
 
 ## Props
 
-| Prop           | Type              | Default                | Description                                            |
-| -------------- | ----------------- | ---------------------- | ------------------------------------------------------ |
-| `cursor`       | `React.ReactNode` | `<DefaultCursorSVG />` | Custom cursor component to replace the default cursor  |
-| `springConfig` | `SpringConfig`    | See below              | Configuration object for the spring animation behavior |
+| Prop           | Type           | Default                | Description                                            |
+| -------------- | -------------- | ---------------------- | ------------------------------------------------------ |
+| `cursor`       | `JSX.Element`. | `<DefaultCursorSVG />` | Custom cursor component to replace the default cursor  |
+| `springConfig` | `SpringConfig` | See below              | Configuration object for the spring animation behavior |
 
 ### SpringConfig Type
 

apps/www/mdx-components.tsx

@@ -100,10 +100,7 @@ export const mdxComponents = {
     />
   ),
   p: ({ className, ...props }: React.ComponentProps<"p">) => (
-    <p
-      className={cn("leading-relaxed not-first:mt-6", className)}
-      {...props}
-    />
+    <p className={cn("leading-relaxed not-first:mt-6", className)} {...props} />
   ),
   strong: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <strong className={cn("font-medium", className)} {...props} />
@@ -119,7 +116,10 @@ export const mdxComponents = {
   ),
   blockquote: ({ className, ...props }: React.ComponentProps<"blockquote">) => (
     <blockquote
-      className={cn("mt-6 border-l-2 pl-6 pr-4 italic bg-muted/50 py-4 rounded-r-md", className)}
+      className={cn(
+        "bg-muted/50 mt-6 rounded-r-md border-l-2 py-4 pr-4 pl-6 italic",
+        className
+      )}
       {...props}
     />
   ),
@@ -128,40 +128,30 @@ export const mdxComponents = {
     <img className={cn("rounded-md", className)} alt={alt} {...props} />
   ),
   iframe: ({ className, ...props }: React.ComponentProps<"iframe">) => (
-    <iframe
-      className={cn("mt-6 rounded-md w-full", className)}
-      {...props}
-    />
+    <iframe className={cn("mt-6 w-full rounded-md", className)} {...props} />
   ),
   hr: ({ className, ...props }: React.ComponentProps<"hr">) => (
-    <div className={cn("my-4 flex items-center justify-center md:my-8", className)}>
+    <div
+      className={cn("my-4 flex items-center justify-center md:my-8", className)}
+    >
       <hr
-        className="mx-4 h-px w-full border-0 bg-linear-to-r from-transparent via-border to-transparent"
+        className="via-border mx-4 h-px w-full border-0 bg-linear-to-r from-transparent to-transparent"
         {...props}
       />
     </div>
   ),
   table: ({ className, ...props }: React.ComponentProps<"table">) => (
     <div className="my-6 w-full overflow-x-auto rounded-lg border">
-      <table
-        className={cn(
-          "relative w-full text-sm",
-          className
-        )}
-        {...props}
-      />
+      <table className={cn("relative w-full text-sm", className)} {...props} />
     </div>
   ),
   thead: ({ className, ...props }: React.ComponentProps<"thead">) => (
-    <thead
-      className={cn("bg-muted border-b", className)}
-      {...props}
-    />
+    <thead className={cn("bg-muted border-b", className)} {...props} />
   ),
   tr: ({ className, ...props }: React.ComponentProps<"tr">) => (
     <tr
       className={cn(
-        "m-0 border-b transition-colors hover:bg-muted/50 last:border-b-0",
+        "hover:bg-muted/50 m-0 border-b transition-colors last:border-b-0",
         className
       )}
       {...props}

apps/www/package.json

@@ -65,6 +65,7 @@
     "react-tweet": "^3.2.2",
     "rough-notation": "^0.5.1",
     "schema-dts": "^1.1.5",
+    "smooth-cursor": "^0.1.2",
     "sonner": "^1.7.4",
     "svg-dotted-map": "^2.0.1",
     "tailwind-merge": "^3.3.1",