area44 · torn4dom4n · Jun 5, 2026 · Jun 5, 2026 · Jun 5, 2026 · Jun 5, 2026
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 This is a site collecting useful notes about anything you are finding. It is more than just a note-taking site. It’s a community of learners and doers who value useful notes and want to improve their skills and knowledge. Whether you’re a student, a professional, a hobbyist, or just someone who enjoys learning new things, this site is for you. Join [us](https://github.com/AREA44/fancy-notes) today and start collecting some notes about useful notes!
 
-Fancy Notes is built using [Fumadocs](https://fumadocs.com) - a simple, powerful and flexible site generation framework with everything you love from Next.js.
+Fancy Notes is built using [Fumadocs](https://fumadocs.dev) - a simple, powerful and flexible site generation framework with everything you love from Next.js.
 
 ## Local development
 

diff --git a/app/[[...slug]]/page.tsx b/app/[[...slug]]/page.tsx
@@ -9,10 +9,10 @@ import { source } from "@/lib/source";
 import { useMDXComponents } from "@/mdx-components";
 
 export default async function Page(props: {
-  params: Promise<{ mdxPath?: string[] }>;
+  params: Promise<{ slug?: string[] }>;
 }) {
   const params = await props.params;
-  const page = source.getPage(params.mdxPath);
+  const page = source.getPage(params.slug);
 
   if (!page) notFound();
 
@@ -34,10 +34,10 @@ export async function generateStaticParams() {
 }
 
 export async function generateMetadata(props: {
-  params: Promise<{ mdxPath?: string[] }>;
+  params: Promise<{ slug?: string[] }>;
 }) {
   const params = await props.params;
-  const page = source.getPage(params.mdxPath);
+  const page = source.getPage(params.slug);
 
   if (!page) return {};
 

diff --git a/content/230302_0215.mdx b/content/230302_0215.mdx
@@ -7,15 +7,20 @@ title: Convert Doc to Docx
 In this section, we’ll show you how to use VBA code to batch convert `.doc` files to `.docx` files in a specific folder. Just follow the steps below:
 
 <Steps>
-{<h3>Step 1</h3>}
+<Step>
+### Gather your files
 
 Gather all the `.doc` files that you want to convert into a single folder.
+</Step>
 
-{<h3>Step 2</h3>}
+<Step>
+### Open Word and VBA Editor
 
 Open Microsoft Word, and press `Alt` + `F11` to open the Microsoft Visual Basic for Applications (VBA) window.
+</Step>
 
-{<h3>Step 3</h3>}
+<Step>
+### Insert the VBA script
 
 In the VBA window, click `Insert` > `Module`. Then, copy and paste the following VBA code into the module:
 
@@ -44,16 +49,19 @@ Sub ConvertDocToDocx()
 End Sub
 ```
 
-![VBA Code](/assets/230302_0215/01.png)
+<Image src="/assets/230302_0215/01.png" alt="VBA Code" width={1200} height={630} />
+</Step>
 
-{<h3>Step 4</h3>}
+<Step>
+### Run the script
 
 Press the `F5` key to run the code. In the window that appears, select the folder containing your `.doc` files and click **OK**. The script will automatically convert all `.doc` files to `.docx` format.
 
-![Select Folder](/assets/230302_0215/02.png)
+<Image src="/assets/230302_0215/02.png" alt="Select Folder" width={1200} height={630} />
+</Step>
 
 </Steps>
 
 ## Resources
 
-1. [Batch Convert DOC to DOCX with VBA – ExtendOffice](https://www.extendoffice.com/documents/word/5601-word-batch-convert-doc-to-docx.html)
+1. [Batch Convert DOC to DOCX with VBA – ExtendOffice](https://www.extendoffice.com/documents/word/5601-word-batch-convert-doc-to-docx.html)
diff --git a/content/230304_2057.mdx b/content/230304_2057.mdx
@@ -9,19 +9,24 @@ title: Google Drive PDF
 Follow these simple steps to download a view-only protected PDF from Google Drive using Chrome browser:
 
 <Steps>
-{<h3>Step 1</h3>}
+<Step>
+### Open PDF in Chrome
 
 Open the PDF file in your Chrome browser. Wait for the file to load completely, then scroll to the bottom of the page.
 
-![Step 1](/assets/230304_2057/01.png)
+<Image src="/assets/230304_2057/01.png" alt="Open PDF" width={1200} height={630} />
+</Step>
 
-{<h3>Step 2</h3>}
+<Step>
+### Open Developer Console
 
 Open the **Developer Console** by pressing `Ctrl` + `Shift` + `C` (`F12`) on Windows or `Cmd` + `Shift` + `C` on Mac. Then, click the **Console** tab.
 
-![Step 2](/assets/230304_2057/02.png)
+<Image src="/assets/230304_2057/02.png" alt="Developer Console" width={1200} height={630} />
+</Step>
 
-{<h3>Step 3</h3>}
+<Step>
+### Execute the script
 
 Paste the following script into the **Developer Console** and press `Enter`:
 
@@ -52,13 +57,16 @@ jspdf.src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js";
 document.body.appendChild(jspdf);
 ```
 
-![Step 3](/assets/230304_2057/03.png)
+<Image src="/assets/230304_2057/03.png" alt="Execute Script" width={1200} height={630} />
+</Step>
 
-{<h3>Step 4</h3>}
+<Step>
+### Download the PDF
 
 Once the process is complete, the PDF file will be automatically downloaded.
 
-![Step 4](/assets/230304_2057/04.png)
+<Image src="/assets/230304_2057/04.png" alt="Automatic Download" width={1200} height={630} />
+</Step>
 
 </Steps>
 
@@ -67,28 +75,36 @@ Once the process is complete, the PDF file will be automatically downloaded.
 The simple JavaScript method works well for basic PDFs, but if you're dealing with large or complex PDFs, the download might not work as expected. For better quality and handling of complex PDFs, try the advanced method.
 
 <Steps>
-{<h3>Step 1</h3>}
+<Step>
+### Download the Downloader Script
 
 Download the [Google Drive PDF Downloader](https://github.com/zeltox/Google-Drive-PDF-Downloader/archive/refs/heads/master.zip) file and extract its contents. Open the `Method_1_Script.js` file, copy the script inside, and paste it into the **Developer Console**, then press `Enter`.
 
-![Step 1](/assets/230304_2057/05.png)
+<Image src="/assets/230304_2057/05.png" alt="Downloader Script" width={1200} height={630} />
+</Step>
 
-{<h3>Step 2</h3>}
+<Step>
+### Save and Move the Data File
 
 After a few seconds, the browser will prompt you to save a file with the `.PDF_DataFile` extension. Save the file and move it to the `Input` directory located inside the folder you downloaded.
 
-![Step 2](/assets/230304_2057/06.png)
-![Step 2](/assets/230304_2057/07.png)
+<Image src="/assets/230304_2057/06.png" alt="Save Data File" width={1200} height={630} />
+<Image src="/assets/230304_2057/07.png" alt="Move to Input" width={1200} height={630} />
+</Step>
 
-{<h3>Step 3</h3>}
+<Step>
+### Generate the PDF
 
 If you're using **Windows**, navigate to the `Windows` folder and double-click on `GeneratePDF.cmd`. For **Linux**, go to the `Linux` folder and execute `GeneratePDF`.
 
-![Step 3](/assets/230304_2057/08.png)
+<Image src="/assets/230304_2057/08.png" alt="Run Generator" width={1200} height={630} />
+</Step>
 
-{<h3>Step 4</h3>}
+<Step>
+### Success!
 
 Once the process is complete, you’ll see a success message. Check the `Output` folder to find the downloaded PDF.
+</Step>
 
 </Steps>
 
@@ -99,4 +115,4 @@ Once the process is complete, you’ll see a success message. Check the `Output`
 ## Resources
 
 1. [Download View-Only PDFs from Google Drive](https://bytesbin.com/download-view-only-pdf-google-drive)
-2. [Google Drive PDF Downloader on GitHub](https://github.com/zeltox/Google-Drive-PDF-Downloader)
+2. [Google Drive PDF Downloader on GitHub](https://github.com/zeltox/Google-Drive-PDF-Downloader)
diff --git a/content/index.mdx b/content/index.mdx
@@ -4,4 +4,4 @@ title: Welcome to Fancy Notes
 
 This is a site collecting useful notes about anything you are finding. It is more than just a note-taking site. It’s a community of learners and doers who value useful notes and want to improve their skills and knowledge. Whether you’re a student, a professional, a hobbyist, or just someone who enjoys learning new things, this site is for you. Join [us](https://github.com/AREA44/fancy-notes) today and start collecting some notes about useful notes!
 
-Fancy Notes is built using [Fumadocs](https://fumadocs.com) - a simple, powerful and flexible site generation framework with everything you love from Next.js
+Fancy Notes is built using [Fumadocs](https://fumadocs.dev) - a simple, powerful and flexible site generation framework with everything you love from Next.js
diff --git a/mdx-components.tsx b/mdx-components.tsx
@@ -1,13 +1,22 @@
 import { Callout } from "fumadocs-ui/components/callout";
-import { Steps } from "fumadocs-ui/components/steps";
+import { Step, Steps } from "fumadocs-ui/components/steps";
 import defaultComponents from "fumadocs-ui/mdx";
 import type { MDXComponents } from "mdx/types";
+import NextImage, { type ImageProps } from "next/image";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...defaultComponents,
     Callout,
     Steps,
+    Step,
+    Image: (props: ImageProps) => (
+      <NextImage
+        sizes="100vw"
+        style={{ width: "100%", height: "auto" }}
+        {...props}
+      />
+    ),
     ...components,
   };
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@ title: Welcome to Fancy Notes

		This is a site collecting useful notes about anything you are finding. It is more than just a note-taking site. It’s a community of learners and doers who value useful notes and want to improve their skills and knowledge. Whether you’re a student, a professional, a hobbyist, or just someone who enjoys learning new things, this site is for you. Join [us](https://github.com/AREA44/fancy-notes) today and start collecting some notes about useful notes!

		Fancy Notes is built using [Fumadocs](https://fumadocs.com) - a simple, powerful and flexible site generation framework with everything you love from Next.js
		Fancy Notes is built using [Fumadocs](https://fumadocs.dev) - a simple, powerful and flexible site generation framework with everything you love from Next.js