feat: Implement Algolia DocSearch, update build configurations, and refine UI components.

app/docs/[[...slug]]/page.tsx

@@ -12,13 +12,19 @@ import MobToc from "@/components/mob-toc";
 const { meta } = docuConfig;
 
 type PageProps = {
-  params: {
+  params: Promise<{
     slug: string[];
-  };
+  }>;
 };
 
 // Function to generate metadata dynamically
-export async function generateMetadata({ params: { slug = [] } }: PageProps) {
+export async function generateMetadata(props: PageProps) {
+  const params = await props.params;
+
+  const {
+    slug = []
+  } = params;
+
   const pathName = slug.join("/");
   const res = await getDocsForSlug(pathName);
 
@@ -62,13 +68,19 @@ export async function generateMetadata({ params: { slug = [] } }: PageProps) {
   };
 }
 
-export default async function DocsPage({ params: { slug = [] } }: PageProps) {
+export default async function DocsPage(props: PageProps) {
+  const params = await props.params;
+
+  const {
+    slug = []
+  } = params;
+
   const pathName = slug.join("/");
   const res = await getDocsForSlug(pathName);
 
   if (!res) notFound();
 
-  const { title, description, image, date } = res.frontmatter;
+  const { title, description, image: _image, date } = res.frontmatter;
 
   // File path for edit link
   const filePath = `contents/docs/${slug.join("/") || ""}/index.mdx`;
@@ -85,17 +97,16 @@ export default async function DocsPage({ params: { slug = [] } }: PageProps) {
           <p className="-mt-4 text-muted-foreground text-[16.5px]">{description}</p>
           <div>{res.content}</div>
           <div
-            className={`my-8 flex items-center border-b-2 border-dashed border-x-muted-foreground ${
-                docuConfig.repository?.editLink ? "justify-between" : "justify-end"
-            }`}
-            >
+            className={`my-8 flex items-center border-b-2 border-dashed border-x-muted-foreground ${docuConfig.repository?.editLink ? "justify-between" : "justify-end"
+              }`}
+          >
             {docuConfig.repository?.editLink && <EditThisPage filePath={filePath} />}
             {date && (
-                <p className="text-[13px] text-muted-foreground">
+              <p className="text-[13px] text-muted-foreground">
                 Published on {formatDate2(date)}
-                </p>
+              </p>
             )}
-            </div>
+          </div>
           <Pagination pathname={pathName} />
         </Typography>
       </div>

app/layout.tsx

@@ -6,6 +6,9 @@ import { GeistMono } from "geist/font/mono";
 import { Footer } from "@/components/footer";
 import docuConfig from "@/docu.json";
 import { Toaster } from "@/components/ui/sonner";
+import "@docsearch/css";
+import "@/styles/algolia.css";
+import "@/styles/syntax.css";
 import "@/styles/globals.css";
 
 const { meta } = docuConfig;