fix: update packages

magicuidesign · Feb 5, 2025 · cf6d1d3 · cf6d1d3
1 parent 5bb45a6
commit cf6d1d3
Show file tree

Hide file tree

Showing 13 changed files with 1,415 additions and 501 deletions.
diff --git a/__registry__/index.tsx b/__registry__/index.tsx
diff --git a/app/(blog)/blog/[slug]/page.tsx b/app/(blog)/blog/[slug]/page.tsx
@@ -195,7 +195,7 @@ export default function BlogPage({ params }: { params: { slug: string[] } }) {
           href="/blog"
           className="flex h-8 w-fit items-center justify-center rounded-full border border-border bg-muted px-4 text-sm text-secondary-foreground"
         >
-          <ArrowLeftIcon className="mr-2 h-4 w-4" />
+          <ArrowLeftIcon className="mr-2 size-4" />
           Back to Blog
         </Link>
       </div>
@@ -206,7 +206,7 @@ export default function BlogPage({ params }: { params: { slug: string[] } }) {
               <img
                 src={post.image}
                 alt={post.title}
-                className="h-full w-full rounded-xl border border-border object-cover object-left"
+                className="size-full rounded-xl border border-border object-cover object-left"
               />
             </div>
             <div className="mx-auto flex flex-col items-center justify-center gap-y-2 border-y border-border p-5">

diff --git a/app/(blog)/blog/page.tsx b/app/(blog)/blog/page.tsx
@@ -52,7 +52,7 @@ export default function BlogPage() {
                   <img
                     src={featuredPosts[0].image}
                     alt={featuredPosts[0].title}
-                    className="h-full w-full rounded-xl object-cover object-left"
+                    className="size-full rounded-xl object-cover object-left"
                   />
                 </div>
                 <div className="py-4">
@@ -153,7 +153,7 @@ export default function BlogPage() {
           {filteredBlogs.map((blog) => (
             <li
               key={blog._meta.path}
-              className="relative p-4 before:absolute before:-left-1 before:top-0 before:z-10 before:h-screen before:w-[1px] before:bg-border before:content-[''] after:absolute after:-top-1 after:left-0 after:z-10 after:h-[1px] after:w-screen after:bg-border after:content-['']"
+              className="relative p-4 before:absolute before:-left-1 before:top-0 before:z-10 before:h-screen before:w-px before:bg-border before:content-[''] after:absolute after:-top-1 after:left-0 after:z-10 after:h-px after:w-screen after:bg-border after:content-['']"
             >
               <Link
                 href={`/blog/${blog._meta.path}`}
@@ -163,7 +163,7 @@ export default function BlogPage() {
                   <img
                     src={blog.image}
                     alt={blog.title}
-                    className="h-full w-full object-cover object-left transition-transform duration-300 ease-in-out group-hover:scale-[1.01] md:max-h-[200px]"
+                    className="size-full object-cover object-left transition-transform duration-300 ease-in-out group-hover:scale-[1.01] md:max-h-[200px]"
                   />
                 </div>
                 <div className="py-2">

diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
@@ -15,7 +15,7 @@ export default async function MarketingLayout({
       <SiteHeader />
       <main className="flex-1">{children}</main>
       <SiteFooter />
-      <div className="pointer-events-none absolute inset-0 h-24 w-full before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[80%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:opacity-20 before:[filter:blur(calc(4*1rem))]" />
+      <div className="pointer-events-none absolute inset-0 h-24 w-full before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-4/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:opacity-20 before:[filter:blur(calc(4*1rem))]" />
     </>
   );
 }
diff --git a/components/blog/more-articles.tsx b/components/blog/more-articles.tsx
@@ -23,7 +23,7 @@ export default function MoreArticles({ currentPost }: { currentPost: Blog }) {
     <section className="mx-auto max-w-6xl py-10">
       <h2 className="mb-5 flex items-center gap-2 text-xl font-medium tracking-tighter">
         Read more like this
-        <ArrowRightIcon className="h-4 w-4" />
+        <ArrowRightIcon className="size-4" />
       </h2>
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
         {relatedPosts.map((post) => (
@@ -37,7 +37,7 @@ export default function MoreArticles({ currentPost }: { currentPost: Blog }) {
               <img
                 src={post.image}
                 alt={post.title}
-                className="h-full w-full object-contain object-left transition-all duration-300 group-hover:scale-[1.01]"
+                className="size-full object-contain object-left transition-all duration-300 group-hover:scale-[1.01]"
               />
             </div>
             <div className="mt-4 flex flex-col gap-2">

diff --git a/components/blog/promo-section.tsx b/components/blog/promo-section.tsx
@@ -18,7 +18,7 @@ export default function PromoSection() {
       <Button variant="default" asChild className="w-full">
         <Link href="https://pro.magicui.design">
           Get Pro
-          <ArrowRightIcon className="ml-2 h-4 w-4" />
+          <ArrowRightIcon className="ml-2 size-4" />
         </Link>
       </Button>
     </div>

diff --git a/components/open-in-v0-button.tsx b/components/open-in-v0-button.tsx
@@ -17,7 +17,7 @@ export function OpenInV0Button({ url }: { url: string }) {
           viewBox="0 0 40 20"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
-          className="h-5 w-5 text-current"
+          className="size-5 text-current"
         >
           <path
             d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"

diff --git a/components/sections/hero.tsx b/components/sections/hero.tsx
@@ -39,7 +39,7 @@ export default async function Hero() {
               >
                 🎉 <Separator className="mx-2 h-4" orientation="vertical" />
                 Introducing {post.title}
-                <ChevronRight className="ml-1 h-4 w-4 text-muted-foreground" />
+                <ChevronRight className="ml-1 size-4 text-muted-foreground" />
               </Link>
               <div className="relative flex flex-col gap-4 md:items-center lg:flex-row">
                 <h1

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -20,15 +20,15 @@ const buttonVariants = cva(
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         rainbow:
-          "group relative animate-rainbow cursor-pointer border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
+          "group relative animate-rainbow cursor-pointer border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
         "rainbow-outline":
-          "group relative animate-rainbow cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] px-4 text-foreground shadow-sm [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
+          "group relative animate-rainbow cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] px-4 text-foreground shadow-sm [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
       },
       size: {
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-xl px-3 text-xs",
         lg: "h-11 rounded-xl px-8",
-        icon: "h-9 w-9",
+        icon: "size-9",
       },
     },
     defaultVariants: {

diff --git a/content/showcase/writora.mdx b/content/showcase/writora.mdx
@@ -5,4 +5,4 @@ image: /showcase/writora.png
 href: https://writora.xyz
 featured: true
 affiliation: Open Source Project
----
+---
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "@content-collections/core": "^0.7.1",
     "@content-collections/mdx": "^0.1.5",
     "@content-collections/next": "^0.2.2",
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@tailwindcss/typography": "^0.5.9",
     "@types/canvas-confetti": "^1.6.4",
     "@types/node": "^20.11.22",
@@ -113,7 +113,7 @@
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.11.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.7.3",
     "unist-builder": "4.0.0",
     "unist-util-visit": "^5.0.0"
   },