chore: change highlighter-demo color to make text readable

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/app/(docs)/docs/[[...slug]]/page.tsx

@@ -55,9 +55,16 @@ export async function generateMetadata({
 
   const url = process.env.NEXT_PUBLIC_APP_URL
 
-  const ogUrl = new URL(`${url}/og`)
-  ogUrl.searchParams.set("title", doc.title ?? "")
-  ogUrl.searchParams.set("description", doc.description ?? "")
+  let ogUrl: URL | null = null
+  try {
+    if (url) {
+      ogUrl = new URL(`${url}/og`)
+      ogUrl.searchParams.set("title", doc.title ?? "")
+      ogUrl.searchParams.set("description", doc.description ?? "")
+    }
+  } catch {
+    // Invalid URL, will use default
+  }
 
   return {
     title: `${doc.title} | React Components & Templates`,
@@ -67,19 +74,21 @@ export async function generateMetadata({
       description: doc.description,
       type: "article",
       url: absoluteUrl(page.url),
-      images: [
-        {
-          url: ogUrl.toString(),
-          width: 1200,
-          height: 630,
-        },
-      ],
+      images: ogUrl
+        ? [
+            {
+              url: ogUrl.toString(),
+              width: 1200,
+              height: 630,
+            },
+          ]
+        : [],
     },
     twitter: {
       card: "summary_large_image",
       title: doc.title,
       description: doc.description,
-      images: [ogUrl.toString()],
+      images: ogUrl ? [ogUrl.toString()] : [],
       creator: "@dillionverma",
     },
   }

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/components/docs-copy-page.tsx

@@ -41,8 +41,8 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) {
   let pathname = "/docs"
   try {
     pathname = new URL(url).pathname
-  } catch (e) {
-    console.error(e)
+  } catch {
+    // Invalid URL provided, using default pathname
   }
   const menuItems: Record<string, (url: string) => React.ReactNode> = {
     viewMarkdown: () => {

apps/www/components/posthog-provider.tsx

@@ -5,8 +5,8 @@ import { usePathname, useSearchParams } from "next/navigation"
 import posthog from "posthog-js"
 import { PostHogProvider } from "posthog-js/react"
 
-if (typeof window !== "undefined") {
-  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, {
+if (typeof window !== "undefined" && process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY, {
     api_host: "https://app.posthog.com",
     capture_pageview: true,
     session_recording: {

apps/www/components/sidebar-cta.tsx

@@ -28,7 +28,20 @@ export function ProCTA() {
           <LineShadowText className="font-bold tracking-tighter italic">
             Faster
           </LineShadowText>{" "}
-          with <AuroraText colors={["#FF66CC", "#FFDC18", "#41FFD7", "#38bdf8", "#8338EC", "#F72585", "#3A86FF"]}>Magic UI Pro</AuroraText>
+          with{" "}
+          <AuroraText
+            colors={[
+              "#FF66CC",
+              "#FFDC18",
+              "#41FFD7",
+              "#38bdf8",
+              "#8338EC",
+              "#F72585",
+              "#3A86FF",
+            ]}
+          >
+            Magic UI Pro
+          </AuroraText>
         </p>
         <p className="text-muted-foreground text-sm leading-relaxed font-medium">
           Stop building from scratch. <br /> Get{" "}
@@ -45,20 +58,20 @@ export function ProCTA() {
 
       <div className="space-y-2.5 font-medium">
         <div className="text-muted-foreground flex items-start gap-3 text-sm">
-          <div className="flex size-4 items-center justify-center rounded-full border border-border bg-foreground shrink-0 mt-0.5">
-            <CheckIcon className="size-2.5 text-primary-foreground stroke-4" />
+          <div className="border-border bg-foreground mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border">
+            <CheckIcon className="text-primary-foreground size-2.5 stroke-4" />
           </div>
           <span>Next.js 15 + TypeScript ready</span>
         </div>
         <div className="text-muted-foreground flex items-start gap-3 text-sm">
-          <div className="flex size-4 items-center justify-center rounded-full border border-border bg-foreground shrink-0 mt-0.5">
-            <CheckIcon className="size-2.5 text-primary-foreground stroke-4" />
+          <div className="border-border bg-foreground mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border">
+            <CheckIcon className="text-primary-foreground size-2.5 stroke-4" />
           </div>
           <span>Copy, paste, customize in minutes</span>
         </div>
         <div className="text-muted-foreground flex items-start gap-3 text-sm">
-          <div className="flex size-4 items-center justify-center rounded-full border border-border bg-foreground shrink-0 mt-0.5">
-            <CheckIcon className="size-2.5 text-primary-foreground stroke-4" />
+          <div className="border-border bg-foreground mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border">
+            <CheckIcon className="text-primary-foreground size-2.5 stroke-4" />
           </div>
           <span>Save 100+ hours of development</span>
         </div>

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/highlighter.mdx

@@ -51,7 +51,7 @@ import { Highlighter } from "@/components/ui/highlighter"
     Magic UI Highlighter
   </Highlighter>{" "}
   makes important{" "}
-  <Highlighter action="highlight" color="#87CEFA">
+  <Highlighter action="highlight" color="#6366F1">
     text stand out
   </Highlighter>{" "}
   effortlessly.

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/public/llms-full.txt

@@ -7467,7 +7467,7 @@ export default function HighlighterDemo() {
           Magic UI Highlighter
         </Highlighter>{" "}
         makes important{" "}
-        <Highlighter action="highlight" color="#87CEFA">
+        <Highlighter action="highlight" color="#6366F1">
           text stand out
         </Highlighter>{" "}
         effortlessly.

apps/www/public/r/highlighter-demo.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/example/highlighter-demo.tsx",
-      "content": "import { Highlighter } from \"@/registry/magicui/highlighter\"\n\nexport default function HighlighterDemo() {\n  return (\n    <div className=\"text-center\">\n      <p className=\"leading-relaxed\">\n        The{\" \"}\n        <Highlighter action=\"underline\" color=\"#FF9800\">\n          Magic UI Highlighter\n        </Highlighter>{\" \"}\n        makes important{\" \"}\n        <Highlighter action=\"highlight\" color=\"#87CEFA\">\n          text stand out\n        </Highlighter>{\" \"}\n        effortlessly.\n      </p>\n    </div>\n  )\n}\n",
+      "content": "import { Highlighter } from \"@/registry/magicui/highlighter\"\n\nexport default function HighlighterDemo() {\n  return (\n    <div className=\"text-center\">\n      <p className=\"leading-relaxed\">\n        The{\" \"}\n        <Highlighter action=\"underline\" color=\"#FF9800\">\n          Magic UI Highlighter\n        </Highlighter>{\" \"}\n        makes important{\" \"}\n        <Highlighter action=\"highlight\" color=\"#6366F1\">\n          text stand out\n        </Highlighter>{\" \"}\n        effortlessly.\n      </p>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     },
     {

apps/www/registry/example/highlighter-demo.tsx

@@ -9,7 +9,7 @@ export default function HighlighterDemo() {
           Magic UI Highlighter
         </Highlighter>{" "}
         makes important{" "}
-        <Highlighter action="highlight" color="#87CEFA">
+        <Highlighter action="highlight" color="#6366F1">
           text stand out
         </Highlighter>{" "}
         effortlessly.