Contentlayer -> Velite

.gitignore

@@ -37,4 +37,7 @@ yarn-error.log*
 next-env.d.ts
 
 .vscode
-.contentlayer
+
+# velite generated files
+.velite
+public/static

app/(auth)/login/page.tsx

@@ -11,7 +11,8 @@ export const metadata: Metadata = {
   description: "Login to your account",
 }
 
-export default function LoginPage() {
+export default function LoginPage({ searchParams }) {
+
   return (
     <div className="container flex h-screen w-screen flex-col items-center justify-center">
       <Link
@@ -22,22 +23,22 @@ export default function LoginPage() {
         )}
       >
         <>
-          <Icons.chevronLeft className="mr-2 h-4 w-4" />
+          <Icons.chevronLeft className="mr-2 size-4" />
           Back
         </>
       </Link>
       <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
         <div className="flex flex-col space-y-2 text-center">
-          <Icons.logo className="mx-auto h-6 w-6" />
+          <Icons.logo className="mx-auto size-6" />
           <h1 className="text-2xl font-semibold tracking-tight">
             Welcome back
           </h1>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-muted-foreground text-sm">
             Enter your email to sign in to your account
           </p>
         </div>
-        <UserAuthForm />
-        <p className="px-8 text-center text-sm text-muted-foreground">
+        <UserAuthForm from={searchParams.from} />
+        <p className="text-muted-foreground px-8 text-center text-sm">
           <Link
             href="/register"
             className="hover:text-brand underline underline-offset-4"

app/(auth)/register/page.tsx

@@ -10,7 +10,7 @@ export const metadata = {
   description: "Create an account to get started.",
 }
 
-export default function RegisterPage() {
+export default function RegisterPage({ searchParams }) {
   return (
     <div className="container grid h-screen w-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
       <Link
@@ -22,20 +22,20 @@ export default function RegisterPage() {
       >
         Login
       </Link>
-      <div className="hidden h-full bg-muted lg:block" />
+      <div className="bg-muted hidden h-full lg:block" />
       <div className="lg:p-8">
         <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
           <div className="flex flex-col space-y-2 text-center">
-            <Icons.logo className="mx-auto h-6 w-6" />
+            <Icons.logo className="mx-auto size-6" />
             <h1 className="text-2xl font-semibold tracking-tight">
               Create an account
             </h1>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-muted-foreground text-sm">
               Enter your email below to create your account
             </p>
           </div>
-          <UserAuthForm />
-          <p className="px-8 text-center text-sm text-muted-foreground">
+          <UserAuthForm from={searchParams.from} />
+          <p className="text-muted-foreground px-8 text-center text-sm">
             By clicking continue, you agree to our{" "}
             <Link
               href="/terms"

app/(dashboard)/dashboard/layout.tsx

@@ -22,7 +22,7 @@ export default async function DashboardLayout({
 
   return (
     <div className="flex min-h-screen flex-col space-y-6">
-      <header className="sticky top-0 z-40 border-b bg-background">
+      <header className="bg-background sticky top-0 z-40 border-b">
         <div className="container flex h-16 items-center justify-between py-4">
           <MainNav items={dashboardConfig.mainNav} />
           <UserAccountNav

app/(dashboard)/dashboard/page.tsx

@@ -42,7 +42,7 @@ export default async function DashboardPage() {
       </DashboardHeader>
       <div>
         {posts?.length ? (
-          <div className="divide-y divide-border rounded-md border">
+          <div className="divide-border divide-y rounded-md border">
             {posts.map((post) => (
               <PostItem key={post.id} post={post} />
             ))}

app/(docs)/docs/[[...slug]]/page.tsx

@@ -1,7 +1,6 @@
 import { notFound } from "next/navigation"
-import { allDocs } from "contentlayer/generated"
+import { docs as allDocs } from "#site/content"
 
-import { getTableOfContents } from "@/lib/toc"
 import { Mdx } from "@/components/mdx-components"
 import { DocsPageHeader } from "@/components/page-header"
 import { DocsPager } from "@/components/pager"
@@ -87,19 +86,18 @@ export default async function DocPage({ params }: DocPageProps) {
     notFound()
   }
 
-  const toc = await getTableOfContents(doc.body.raw)
 
   return (
     <main className="relative py-6 lg:gap-10 lg:py-10 xl:grid xl:grid-cols-[1fr_300px]">
       <div className="mx-auto w-full min-w-0">
         <DocsPageHeader heading={doc.title} text={doc.description} />
-        <Mdx code={doc.body.code} />
+        <Mdx code={doc.body} />
         <hr className="my-4 md:my-6" />
         <DocsPager doc={doc} />
       </div>
       <div className="hidden text-sm xl:block">
         <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
-          <DashboardTableOfContents toc={toc} />
+          <DashboardTableOfContents toc={doc.toc} />
         </div>
       </div>
     </main>

app/(docs)/guides/[...slug]/page.tsx

@@ -1,8 +1,7 @@
 import Link from "next/link"
 import { notFound } from "next/navigation"
-import { allGuides } from "contentlayer/generated"
+import { guides as allGuides } from "#site/content"
 
-import { getTableOfContents } from "@/lib/toc"
 import { Icons } from "@/components/icons"
 import { Mdx } from "@/components/mdx-components"
 import { DocsPageHeader } from "@/components/page-header"
@@ -89,27 +88,25 @@ export default async function GuidePage({ params }: GuidePageProps) {
     notFound()
   }
 
-  const toc = await getTableOfContents(guide.body.raw)
-
   return (
     <main className="relative py-6 lg:grid lg:grid-cols-[1fr_300px] lg:gap-10 lg:py-10 xl:gap-20">
       <div>
         <DocsPageHeader heading={guide.title} text={guide.description} />
-        <Mdx code={guide.body.code} />
+        <Mdx code={guide.body} />
         <hr className="my-4" />
         <div className="flex justify-center py-6 lg:py-10">
           <Link
             href="/guides"
             className={cn(buttonVariants({ variant: "ghost" }))}
           >
-            <Icons.chevronLeft className="mr-2 h-4 w-4" />
+            <Icons.chevronLeft className="mr-2 size-4" />
             See all guides
           </Link>
         </div>
       </div>
       <div className="hidden text-sm lg:block">
         <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
-          <DashboardTableOfContents toc={toc} />
+          <DashboardTableOfContents toc={guide.toc} />
         </div>
       </div>
     </main>

app/(docs)/guides/page.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link"
-import { allGuides } from "contentlayer/generated"
+import { guides as allGuides } from "#site/content"
 import { compareDesc } from "date-fns"
 
 import { formatDate } from "@/lib/utils"
@@ -28,7 +28,7 @@ export default function GuidesPage() {
         <div className="grid gap-4 md:grid-cols-2 md:gap-6">
           {guides.map((guide) => (
             <article
-              key={guide._id}
+              key={guide.slug}
               className="group relative rounded-lg border p-6 shadow-md transition-shadow hover:shadow-lg"
             >
               {guide.featured && (
@@ -46,7 +46,7 @@ export default function GuidesPage() {
                   )}
                 </div>
                 {guide.date && (
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-muted-foreground text-sm">
                     {formatDate(guide.date)}
                   </p>
                 )}

app/(docs)/layout.tsx

@@ -15,7 +15,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
     <div className="flex min-h-screen flex-col">
-      <header className="sticky top-0 z-40 w-full border-b bg-background">
+      <header className="bg-background sticky top-0 z-40 w-full border-b">
         <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
           <MainNav items={docsConfig.mainNav}>
             <DocsSidebarNav items={docsConfig.sidebarNav} />
@@ -30,7 +30,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
                 target="_blank"
                 rel="noreferrer"
               >
-                <Icons.gitHub className="h-7 w-7" />
+                <Icons.gitHub className="size-7" />
                 <span className="sr-only">GitHub</span>
               </Link>
             </nav>

app/(editor)/editor/[postId]/page.tsx

@@ -1,5 +1,5 @@
 import { notFound, redirect } from "next/navigation"
-import { Post, User } from "@prisma/client"
+import type { Post, User } from "@prisma/client"
 
 import { authOptions } from "@/lib/auth"
 import { db } from "@/lib/db"

app/(marketing)/[...slug]/page.tsx

@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation"
-import { allPages } from "contentlayer/generated"
+import { pages as allPages } from "#site/content"
 
 import { Mdx } from "@/components/mdx-components"
 
@@ -85,15 +85,15 @@ export default async function PagePage({ params }: PageProps) {
   return (
     <article className="container max-w-3xl py-6 lg:py-12">
       <div className="space-y-4">
-        <h1 className="inline-block font-heading text-4xl lg:text-5xl">
+        <h1 className="font-heading inline-block text-4xl lg:text-5xl">
           {page.title}
         </h1>
         {page.description && (
-          <p className="text-xl text-muted-foreground">{page.description}</p>
+          <p className="text-muted-foreground text-xl">{page.description}</p>
         )}
       </div>
       <hr className="my-4" />
-      <Mdx code={page.body.code} />
+      <Mdx code={page.body} />
     </article>
   )
 }

app/(marketing)/blog/[...slug]/page.tsx

@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation"
-import { allAuthors, allPosts } from "contentlayer/generated"
+import { authors as allAuthors, posts as allPosts } from "#site/content"
 
 import { Mdx } from "@/components/mdx-components"
 
@@ -103,27 +103,27 @@ export default async function PostPage({ params }: PostPageProps) {
           "absolute left-[-200px] top-14 hidden xl:inline-flex"
         )}
       >
-        <Icons.chevronLeft className="mr-2 h-4 w-4" />
+        <Icons.chevronLeft className="mr-2 size-4" />
         See all posts
       </Link>
       <div>
         {post.date && (
           <time
             dateTime={post.date}
-            className="block text-sm text-muted-foreground"
+            className="text-muted-foreground block text-sm"
           >
             Published on {formatDate(post.date)}
           </time>
         )}
-        <h1 className="mt-2 inline-block font-heading text-4xl leading-tight lg:text-5xl">
+        <h1 className="font-heading mt-2 inline-block text-4xl leading-tight lg:text-5xl">
           {post.title}
         </h1>
         {authors?.length ? (
           <div className="mt-4 flex space-x-4">
             {authors.map((author) =>
               author ? (
                 <Link
-                  key={author._id}
+                  key={author.slug}
                   href={`https://twitter.com/${author.twitter}`}
                   className="flex items-center space-x-2 text-sm"
                 >
@@ -136,7 +136,7 @@ export default async function PostPage({ params }: PostPageProps) {
                   />
                   <div className="flex-1 text-left leading-tight">
                     <p className="font-medium">{author.title}</p>
-                    <p className="text-[12px] text-muted-foreground">
+                    <p className="text-muted-foreground text-[12px]">
                       @{author.twitter}
                     </p>
                   </div>
@@ -152,15 +152,15 @@ export default async function PostPage({ params }: PostPageProps) {
           alt={post.title}
           width={720}
           height={405}
-          className="my-8 rounded-md border bg-muted transition-colors"
+          className="bg-muted my-8 rounded-md border transition-colors"
           priority
         />
       )}
-      <Mdx code={post.body.code} />
+      <Mdx code={post.body} />
       <hr className="mt-12" />
       <div className="flex justify-center py-6 lg:py-10">
         <Link href="/blog" className={cn(buttonVariants({ variant: "ghost" }))}>
-          <Icons.chevronLeft className="mr-2 h-4 w-4" />
+          <Icons.chevronLeft className="mr-2 size-4" />
           See all posts
         </Link>
       </div>

app/(marketing)/blog/page.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image"
 import Link from "next/link"
-import { allPosts } from "contentlayer/generated"
 import { compareDesc } from "date-fns"
+import { posts as allPosts } from "#site/content"
 
 import { formatDate } from "@/lib/utils"
 
@@ -20,10 +20,10 @@ export default async function BlogPage() {
     <div className="container max-w-4xl py-6 lg:py-10">
       <div className="flex flex-col items-start gap-4 md:flex-row md:justify-between md:gap-8">
         <div className="flex-1 space-y-4">
-          <h1 className="inline-block font-heading text-4xl tracking-tight lg:text-5xl">
+          <h1 className="font-heading inline-block text-4xl tracking-tight lg:text-5xl">
             Blog
           </h1>
-          <p className="text-xl text-muted-foreground">
+          <p className="text-muted-foreground text-xl">
             A blog built using Contentlayer. Posts are written in MDX.
           </p>
         </div>
@@ -33,7 +33,7 @@ export default async function BlogPage() {
         <div className="grid gap-10 sm:grid-cols-2">
           {posts.map((post, index) => (
             <article
-              key={post._id}
+              key={post.slug}
               className="group relative flex flex-col space-y-2"
             >
               {post.image && (
@@ -42,7 +42,7 @@ export default async function BlogPage() {
                   alt={post.title}
                   width={804}
                   height={452}
-                  className="rounded-md border bg-muted transition-colors"
+                  className="bg-muted rounded-md border transition-colors"
                   priority={index <= 1}
                 />
               )}
@@ -51,7 +51,7 @@ export default async function BlogPage() {
                 <p className="text-muted-foreground">{post.description}</p>
               )}
               {post.date && (
-                <p className="text-sm text-muted-foreground">
+                <p className="text-muted-foreground text-sm">
                   {formatDate(post.date)}
                 </p>
               )}

app/(marketing)/layout.tsx

@@ -15,7 +15,7 @@ export default async function MarketingLayout({
 }: MarketingLayoutProps) {
   return (
     <div className="flex min-h-screen flex-col">
-      <header className="container z-40 bg-background">
+      <header className="bg-background container z-40">
         <div className="flex h-20 items-center justify-between py-6">
           <MainNav items={marketingConfig.mainNav} />
           <nav>