Remove TOC

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

@@ -1,6 +1,5 @@
 import { MdxContent } from "@/components/mdx/mdx-content";
 import { absoluteUrl } from "@/lib/absolute-url";
-import { Item, TableOfContents, getTableOfContents } from "@/lib/get-toc";
 import clsx from "clsx";
 import { allBlogs, blogMetum } from "contentlayer/generated";
 import { CalendarIcon } from "lucide-react";
@@ -21,7 +20,6 @@ export default async function BlogPage({ params }: { params: Params }) {
     const author = blogMetum.authors.find(
         (author) => author.name === page.author
     );
-    const toc = await getTableOfContents(page.body.raw);
 
     return (
         <article className="flex flex-col gap-6 z-[2]">
@@ -42,16 +40,12 @@ export default async function BlogPage({ params }: { params: Params }) {
             <h2 className="text-muted-foreground">{page.description}</h2>
             <div
                 className={clsx(
-                    "grid grid-cols-1 mt-8 gap-8 divide-border",
+                    "grid grid-cols-1 mt-8 gap-4 divide-border",
                     "max-lg:divide-y-reverse max-lg:divide-y-[1px]",
-                    "lg:grid-cols-[auto_300px] lg:divide-x-[1px]"
+                    "lg:gap-16 lg:grid-cols-[auto_300px] lg:divide-x-[1px]"
                 )}
             >
-                <div className="flex flex-col gap-6">
-                    {toc.length > 0 && <TOC toc={toc} />}
-
-                    <MdxContent code={page.body.code} />
-                </div>
+                <MdxContent code={page.body.code} />
                 {author != null && (
                     <div className="flex flex-col gap-4 max-lg:row-start-1 max-lg:pb-4 lg:px-8">
                         <h3 className="text-sm text-muted-foreground">
@@ -80,32 +74,6 @@ export default async function BlogPage({ params }: { params: Params }) {
     );
 }
 
-function TOC({ toc }: { toc: TableOfContents }) {
-    return (
-        <div className="p-4 border-[1px] bg-secondary text-secondary-foreground rounded-xl flex flex-col gap-4">
-            <p className="text-sm text-muted-foreground">Table of Content</p>
-            <ul className="space-y-2 font-semibold list-inside list-disc marker:text-xl marker:text-muted-foreground">
-                {toc.map((item, i) => (
-                    <TOCItem key={i} item={item} />
-                ))}
-            </ul>
-        </div>
-    );
-}
-
-function TOCItem({ item }: { item: Item }) {
-    return (
-        <li>
-            <a href={item.url}>{item.title}</a>
-            <ol className="text-sm font-normal space-y-2 ml-8 list-inside list-disc marker:text-sm">
-                {item.items?.map((item, i) => (
-                    <TOCItem key={i} item={item} />
-                ))}
-            </ol>
-        </li>
-    );
-}
-
 export function generateStaticParams(): Params[] {
     return allBlogs.map((blog) => ({
         slug: blog.slug,

content/blog/why-no-deploy-is-created.mdx

@@ -65,8 +65,6 @@ However, AWS is not just a "hosting service", it is an entire eco-system with a
 
 No Deploy can't beat with their whole eco-system for now, but we still offers a better experience for developers who is lazy, since AWS usually takes a few days to learn and setup.
 
-No Deploy is also growing up, providing a better developer experience, cheaper price and native support for everything.
-
 ## The Future
 
 > Don’t waste your precious time trying to avoid spending a few dollars tools. Don’t be penny-wise and pound-foolish. - Todd H Gardner