Dependencies Upgrades, SEO, DX, Performance Improvements

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

src/app/blog/[slug]/page.tsx → mdx-components.tsx

@@ -1,25 +1,58 @@
 import * as React from "react"
+
+import { Link } from "next-view-transitions"
 import Image from "next/image"
-import Link from "next/link"
-import { MDXRemote } from "next-mdx-remote/rsc"
-import { MDXComponents } from "mdx/types"
+import type { MDXComponents } from "mdx/types"
 import { codeToHtml } from "shiki"
 import { v4 as uuidv4 } from "uuid"
+import { ClerkProvider } from "@clerk/nextjs"
 
-import { getPostBySlug, getViewCount, getAllPosts } from "@/lib/posts"
-import TableOfContents from "@/components/TableOfContents"
-import Breadcrumb from "@/components/Breadcrumb"
-import CommentSection from "@/components/CommentSection"
-import BlogHeader from "@/components/BlogHeader"
-import ServerlessDiagram from "@/components/ServerlessDiagram"
-import CodeCopyButton from "@/components/CodeCopyButton"
-
-import { Callout } from "@/components/Callout"
-import { Alert, AlertDescription } from "@/components/Alert"
-import BackToTop from "@/components/BackToTop"
-import ScrollProgressBar from "@/components/ScrollProgressBar"
 import { cn } from "@/lib/utils"
-import { SocialMetadata } from "@/components/SocialMetadata"
+
+import CommentSection from "@/components/blog/CommentSection"
+import TableOfContents from "@/components/blog/TableOfContents"
+import CodeCopyButton from "@/components/blog/CodeCopyButton"
+import { Callout } from "@/components/blog/Callout"
+import { Alert, AlertDescription } from "@/components/blog/Alert"
+import BackToTop from "@/components/blog/BackToTop"
+import ScrollProgressBar from "@/components/blog/ScrollProgressBar"
+
+interface Props {
+  children: React.ReactNode
+}
+
+const BlogWrapper: React.FC<Props> = ({ children }) => {
+  return (
+    <main className="relative mx-auto max-w-5xl px-4 py-36">
+      <div className="flex flex-col lg:flex-row">
+        <div className="w-full lg:w-3/4">
+          <article
+            className={cn(
+              "prose prose-neutral prose-invert prose-lg",
+              "prose-ul:opacity-80 prose-ol:opacity-80",
+              "prose-pre:py-0 prose-pre:px-3 prose-code:text-sm prose-pre:bg-[#121212]",
+              "prose-headings:font-semibold prose-headings:tracking-tight prose-headings:opacity-85 prose-img:rounded-md",
+              "prose-h1:font-bold prose-h1:tracking-tighter"
+            )}
+          >
+            {children}
+          </article>
+          <ClerkProvider>
+            <CommentSection />
+          </ClerkProvider>
+        </div>
+        <aside className="hidden lg:block lg:w-1/4 lg:pl-8">
+          <div className="sticky top-24">
+            <TableOfContents />
+          </div>
+        </aside>
+      </div>
+
+      <BackToTop />
+      <ScrollProgressBar />
+    </main>
+  )
+}
 
 const components: MDXComponents = {
   h1: (props: any) => <h1 {...props}>{props.children}</h1>,
@@ -39,28 +72,6 @@ const components: MDXComponents = {
     </h4>
   ),
   p: (props: any) => <p className="my-2 opacity-80" {...props} />,
-  a: ({ href = "", ...props }: React.ComponentPropsWithoutRef<"a">) => {
-    const transformUrl = (url: string): string => {
-      const separator = url.includes("?") ? "&" : "?"
-      return `${url}${separator}ref=devtoolsacademy.com`
-    }
-
-    return (
-      <Link
-        className="text-blue-500 no-underline outline-none hover:underline focus:underline"
-        href={href.startsWith("http") ? transformUrl(href) : href}
-        {...props}
-      />
-    )
-  },
-  Image: (props: any) => <Image className="my-4" alt={props.alt} {...props} />,
-  blockquote: (props: any) => (
-    <blockquote
-      className="border-l-4 border-neutral-500 pl-4 font-normal not-italic opacity-80"
-      {...props}
-    />
-  ),
-  ServerlessDiagram: ServerlessDiagram,
   code: async ({
     className,
     children,
@@ -91,6 +102,35 @@ const components: MDXComponents = {
       )
     }
   },
+  a: ({ href = "", ...props }: React.ComponentPropsWithoutRef<"a">) => {
+    const transformUrl = (url: string): string => {
+      const separator = url.includes("?") ? "&" : "?"
+      return `${url}${separator}ref=devtoolsacademy.com`
+    }
+
+    return (
+      <Link
+        className="text-blue-500 no-underline outline-none hover:underline focus:underline"
+        href={href.startsWith("http") ? transformUrl(href) : href}
+        {...props}
+      />
+    )
+  },
+  img: (props: any) => (
+    <Image
+      className="my-4"
+      alt={props.alt}
+      width={1200}
+      height={600}
+      {...props}
+    />
+  ),
+  blockquote: (props: any) => (
+    <blockquote
+      className="border-l-4 border-neutral-500 pl-4 font-normal not-italic opacity-80"
+      {...props}
+    />
+  ),
   Callout: Callout,
   Alert: Alert,
   AlertDescription: AlertDescription,
@@ -109,70 +149,12 @@ const components: MDXComponents = {
   hr: (props: any) => <hr className="my-12 opacity-50" {...props} />,
 }
 
-const baseUrl = "https://devtoolsacademy.com"
-
-export default async function BlogPost({
-  params,
-}: {
-  params: { slug: string }
-}) {
-  const post = await getPostBySlug(params.slug)
-  const initialViews = await getViewCount(params.slug)
-
-  const breadcrumbItems = [
-    { label: "Home", href: "/" },
-    { label: "Blog", href: "/blog" },
-    { label: post.title, href: `#` },
-  ]
-
-  const postUrl = `${baseUrl}/blog/${params.slug}`
-
-  return (
-    <div className="relative mx-auto max-w-5xl px-4 py-36">
-      <SocialMetadata
-        title={post.title}
-        description={post.description}
-        url={postUrl}
-        image={`${baseUrl}${post.featuredImage || "/T.png"}`}
-        type="article"
-      />
-      <Breadcrumb items={breadcrumbItems} />
-      <BlogHeader
-        slug={params.slug}
-        title={post.title}
-        publishedAt={post.publishedAt}
-        initialViews={initialViews}
-        content={post.content}
-      />
-      <div className="flex flex-col lg:flex-row">
-        <div className="w-full lg:w-3/4">
-          <article
-            className={cn(
-              "prose prose-neutral prose-invert prose-lg",
-              "prose-ul:opacity-80 prose-ol:opacity-80",
-              "prose-pre:py-0 prose-pre:px-3 prose-code:text-sm prose-pre:bg-[#121212]",
-              "prose-headings:font-semibold prose-headings:tracking-tight prose-headings:opacity-85 prose-img:rounded-md"
-            )}
-          >
-            <MDXRemote source={post.content} components={components} />
-          </article>
-          <CommentSection postSlug={params.slug} />
-        </div>
-        <aside className="hidden lg:block lg:w-1/4 lg:pl-8">
-          <div className="sticky top-24">
-            <TableOfContents />
-          </div>
-        </aside>
-      </div>
-      <BackToTop />
-      <ScrollProgressBar />
-    </div>
-  )
-}
-
-export async function generateStaticParams() {
-  const posts = await getAllPosts()
-  return posts.map((post) => ({
-    slug: post.slug,
-  }))
+export function useMDXComponents(
+  otherComponents: MDXComponents
+): MDXComponents {
+  return {
+    ...otherComponents,
+    ...components,
+    wrapper: BlogWrapper,
+  }
 }

next.config.mjs

@@ -0,0 +1,29 @@
+import createMDX from "@next/mdx"
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  trailingSlash: true,
+  reactStrictMode: true,
+  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
+
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "lh7-rt.googleusercontent.com",
+      },
+      {
+        protocol: "https",
+        hostname: "tender-bugle-dd6.notion.site",
+      },
+    ],
+  },
+
+  experimental: {
+    mdxRs: true,
+  },
+}
+
+const withMDX = createMDX({})
+
+export default withMDX(nextConfig)