From 35fce4bc4f2015ec9982a9f4b74ce917696a519a Mon Sep 17 00:00:00 2001
From: Fuma Nama <god63820869@gmail.com>
Date: Mon, 12 Feb 2024 17:05:32 +0800
Subject: [PATCH] Use codeblock transformers

---
 components/files.tsx                             |  2 +-
 content/metadata-client-components.mdx           | 16 +++++++++-------
 ...on-call-inside-server-component-rendering.mdx |  2 +-
 content/when-client-component-in-app-router.mdx  |  6 +++---
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/components/files.tsx b/components/files.tsx
index f81fa52..78864cc 100644
--- a/components/files.tsx
+++ b/components/files.tsx
@@ -52,7 +52,7 @@ export function Folder({ title, defaultOpen = true, children }: FolderProps): JS
         {open ? <FolderOpenIcon /> : <FolderIcon />}
         {title}
       </button>
-      <div className={open ? "ml-4 flex flex-col border-l pl-2 pt-2" : "hidden"}>{children}</div>
+      <div className={open ? "ml-2 flex flex-col border-l pl-2" : "hidden"}>{children}</div>
     </div>
   );
 }
diff --git a/content/metadata-client-components.mdx b/content/metadata-client-components.mdx
index 33f53a9..dbc83f2 100644
--- a/content/metadata-client-components.mdx
+++ b/content/metadata-client-components.mdx
@@ -8,8 +8,7 @@ authors: [joulev]
 
 The `metadata`, `generateMetadata`, `viewport` and `generateViewport` exports are only supported in server components. Hence, you need to make your page a server component to use them. A method to do that is to move all your client-side logic to a separate client component and import that client component to the now-server component `page.tsx`. So instead of
 
-```tsx
-// page.tsx
+```tsx title="page.tsx"
 "use client";
 export default function Page() {
   useSomeHook();
@@ -20,20 +19,23 @@ export const metadata = { title: "My Page" };
 
 you need to make a new client component, say `page.client.tsx`, and import it to `page.tsx`:
 
-```tsx
-// page.client.tsx
+```tsx title="page.client.tsx"
 "use client";
+
 export default function PageClient() {
   useSomeHook();
   return <Something />;
 }
+```
+
+```tsx title="page.tsx"
+import PageClient from "./page.client"; // [!code highlight]
+
+export const metadata = { title: "My Page" };
 
-// page.tsx
-import PageClient from "./page.client";
 export default function Page() {
   return <PageClient />;
 }
-export const metadata = { title: "My Page" };
 ```
 
 ## How do I set dynamic metadata that depends on client-side states?
diff --git a/content/server-action-call-inside-server-component-rendering.mdx b/content/server-action-call-inside-server-component-rendering.mdx
index ec0a7ba..a5538e6 100644
--- a/content/server-action-call-inside-server-component-rendering.mdx
+++ b/content/server-action-call-inside-server-component-rendering.mdx
@@ -39,7 +39,7 @@ As you've seen above, `cookies().set()` does _not_ work during a server componen
 
 Use [middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware) instead. It allows you to [read and set cookies both in the request and in the response](https://nextjs.org/docs/app/building-your-application/routing/middleware#using-cookies). So you can do something like
 
-```ts
+```ts title="middleware.ts"
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
diff --git a/content/when-client-component-in-app-router.mdx b/content/when-client-component-in-app-router.mdx
index ae64a57..f6f0de3 100644
--- a/content/when-client-component-in-app-router.mdx
+++ b/content/when-client-component-in-app-router.mdx
@@ -19,7 +19,7 @@ Do note that when a component X is imported to a client component Y, X is render
 
 In the following example
 
-```tsx
+```tsx title="client-component.tsx"
 "use client";
 import ServerComponent from "./server-component";
 
@@ -34,7 +34,7 @@ export default function ClientComponent() {
 
 `ServerComponent` is rendered as a client component, but in the following example
 
-```tsx
+```tsx title="client-component.tsx"
 "use client";
 
 export default function ClientComponent({ children }: { children: React.ReactNode }) {
@@ -42,7 +42,7 @@ export default function ClientComponent({ children }: { children: React.ReactNod
 }
 ```
 
-```tsx
+```tsx title="another-server-component.tsx"
 import ClientComponent from "./client-component";
 import ServerComponent from "./server-component";