feat: contentlayer ad

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#contentlayer
+.contentlayer

app/(batches)/batch/[[...batchID]]/page.tsx

@@ -0,0 +1,42 @@
+import { allBatches } from "@/.contentlayer/generated";
+import { Mdx } from "@/components/markdown/mdx";
+import { notFound } from "next/navigation";
+
+type Props = {
+  params: {
+    batchID: string[];
+  };
+};
+
+async function getDocFromParams(params: any) {
+  const slug = params.batchID?.join("/") || "";
+
+  const batch = allBatches.find((batch) => batch.slugAsParams === slug);
+
+  if (!batch) {
+    null;
+  }
+
+  return batch;
+}
+
+export default async function page({ params }: Props) {
+  const batch = await getDocFromParams(params);
+
+  if (!batch) {
+    notFound();
+  }
+
+  return (
+    <div>
+      <h1>hello</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quos?
+        Necessitatibus minima sit pariatur similique earum dicta deserunt quae
+        ipsum, illum dolores incidunt natus doloribus sed numquam mollitia vero
+        aliquam!
+      </p>
+      <Mdx code={batch.body.code} />
+    </div>
+  );
+}

app/(batches)/batch/layout.tsx

@@ -1,4 +1,5 @@
 import { DocsSidebarNav } from "@/components/layout/sidebar-nav";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { docsConfig } from "@/config/sidebar";
 import React from "react";
 
@@ -9,8 +10,10 @@ interface CourseRootLayoutProps {
 const CourseRootLayout = ({ children }: CourseRootLayoutProps) => {
   return (
     <div className="flex-1 md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10">
-      <aside className="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r py-6 pr-2 md:sticky md:block lg:py-10">
-        <DocsSidebarNav items={docsConfig} />
+      <aside className="fixed top-14 z-30 hidden w-full shrink-0 overflow-y-auto border-r py-6 pr-2 md:sticky md:block lg:py-10">
+        <ScrollArea className="h-[calc(100vh-3.5rem)]">
+          <DocsSidebarNav items={docsConfig} />
+        </ScrollArea>
       </aside>
       {children}
     </div>

app/layout.tsx

@@ -1,7 +1,8 @@
 import { cn } from "@/lib/utils";
-import "./globals.css";
 import { Inter as FontSans } from "next/font/google";
 import { ThemeProvider } from "@/components/theme-provider";
+import "./styles/globals.css";
+import "./styles/mdx.css";
 
 const fontSans = FontSans({
   subsets: ["latin"],

app/styles/mdx.css

@@ -0,0 +1,32 @@
+[data-rehype-pretty-code-fragment] code {
+    @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black;
+    counter-reset: line;
+    box-decoration-break: clone;
+  }
+  [data-rehype-pretty-code-fragment] .line {
+    @apply px-4 py-1;
+  }
+  [data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block;
+    width: 1rem;
+    margin-right: 1rem;
+    text-align: right;
+    color: gray;
+  }
+  [data-rehype-pretty-code-fragment] .line--highlighted {
+    @apply bg-slate-300 bg-opacity-10;
+  }
+  [data-rehype-pretty-code-fragment] .line-highlighted span {
+    @apply relative;
+  }
+  [data-rehype-pretty-code-fragment] .word--highlighted {
+    @apply rounded-md bg-slate-300 bg-opacity-10 p-1;
+  }
+  [data-rehype-pretty-code-title] {
+    @apply mt-4 py-2 px-4 text-sm font-medium;
+  }
+  [data-rehype-pretty-code-title] + pre {
+    @apply mt-0;
+  }

components/layout/main-nav.tsx

@@ -6,6 +6,7 @@ import { Icons } from "../icons";
 import { useSelectedLayoutSegment } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { MobileNav } from "./mobile-nav";
+import { NavItem } from "@/types";
 // import { MobileNav } from "./mobile-nav";
 
 interface MainNavProps {

components/layout/sidebar-nav.tsx

@@ -55,7 +55,10 @@ export function DocsSidebarNavItems({
             {item.title}
           </Link>
         ) : (
-          <span className="flex w-full cursor-not-allowed items-center rounded-md p-2 opacity-60">
+          <span
+            key={index}
+            className="flex w-full cursor-not-allowed items-center rounded-md p-2 opacity-60"
+          >
             {item.title}
           </span>
         )

components/markdown/callout.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+
+interface CalloutProps {
+  icon?: string;
+  children?: React.ReactNode;
+  type?: "default" | "warning" | "danger" | "info" | "calm";
+}
+
+export function Callout({
+  children,
+  icon,
+  type = "default",
+  ...props
+}: CalloutProps) {
+  return (
+    <div
+      className={cn("my-6 flex items-start rounded-md border border-l-4 p-4", {
+        "border-red-900 bg-red-50": type === "danger",
+        "border-yellow-900 bg-yellow-50": type === "warning",
+        "border-green-900 bg-green-50": type === "info",
+        "border-sky-900 bg-sky-50": type === "calm",
+      })}
+      {...props}
+    >
+      {icon && <span className="mr-4 text-2xl">{icon}</span>}
+      <div>{children}</div>
+    </div>
+  );
+}

components/markdown/mdx-card.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+
+import { cn } from "@/lib/utils";
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  href?: string;
+  disabled?: boolean;
+}
+
+export function MdxCard({
+  href,
+  className,
+  children,
+  disabled,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={cn(
+        "group relative rounded-lg border p-6 shadow transition-shadow hover:shadow-md",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex flex-col justify-between space-y-4">
+        <div className="space-y-2 [&>h3]:!mt-0 [&>h4]:!mt-0 [&>p]:text-muted-foreground">
+          {children}
+        </div>
+      </div>
+      {href && (
+        <Link href={disabled ? "#" : href} className="absolute inset-0">
+          <span className="sr-only">View</span>
+        </Link>
+      )}
+    </div>
+  );
+}

components/markdown/mdx.tsx

@@ -0,0 +1,168 @@
+//@ts-nocheck
+
+import Image from "next/image";
+import { useMDXComponent } from "next-contentlayer/hooks";
+
+import { cn } from "@/lib/utils";
+import { Callout } from "./callout";
+import { MdxCard } from "./mdx-card";
+
+const components = {
+  h1: ({ className, ...props }) => (
+    <h1
+      className={cn(
+        "mt-2 scroll-m-20 text-4xl font-bold tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h2: ({ className, ...props }) => (
+    <h2
+      className={cn(
+        "mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h3: ({ className, ...props }) => (
+    <h3
+      className={cn(
+        "mt-8 scroll-m-20 text-2xl font-semibold tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h4: ({ className, ...props }) => (
+    <h4
+      className={cn(
+        "mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h5: ({ className, ...props }) => (
+    <h5
+      className={cn(
+        "mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h6: ({ className, ...props }) => (
+    <h6
+      className={cn(
+        "mt-8 scroll-m-20 text-base font-semibold tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  a: ({ className, ...props }) => (
+    <a
+      className={cn("font-medium underline underline-offset-4", className)}
+      {...props}
+    />
+  ),
+  p: ({ className, ...props }) => (
+    <p
+      className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
+      {...props}
+    />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
+  ),
+  ol: ({ className, ...props }) => (
+    <ol className={cn("my-6 ml-6 list-decimal", className)} {...props} />
+  ),
+  li: ({ className, ...props }) => (
+    <li className={cn("mt-2", className)} {...props} />
+  ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote
+      className={cn(
+        "mt-6 border-l-2 pl-6 italic [&>*]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  ),
+  img: ({
+    className,
+    alt,
+    ...props
+  }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img className={cn("rounded-md border", className)} alt={alt} {...props} />
+  ),
+  hr: ({ ...props }) => <hr className="my-4 md:my-8" {...props} />,
+  table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
+    <div className="my-6 w-full overflow-y-auto">
+      <table className={cn("w-full", className)} {...props} />
+    </div>
+  ),
+  tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+    <tr
+      className={cn("m-0 border-t p-0 even:bg-muted", className)}
+      {...props}
+    />
+  ),
+  th: ({ className, ...props }) => (
+    <th
+      className={cn(
+        "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+        className
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }) => (
+    <td
+      className={cn(
+        "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+        className
+      )}
+      {...props}
+    />
+  ),
+  pre: ({ className, ...props }) => (
+    <pre
+      className={cn(
+        "mb-4 mt-6 overflow-x-auto rounded-lg border bg-black py-4",
+        className
+      )}
+      {...props}
+    />
+  ),
+  code: ({ className, ...props }) => (
+    <code
+      className={cn(
+        "relative rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm",
+        className
+      )}
+      {...props}
+    />
+  ),
+  Image,
+  Callout,
+  Card: MdxCard,
+};
+
+interface MdxProps {
+  code: string;
+}
+
+export function Mdx({ code }: MdxProps) {
+  const Component = useMDXComponent(code);
+
+  return (
+    <div className="mdx">
+      <Component components={components} />
+    </div>
+  );
+}