Update NPM dependencies

.prettierrc

@@ -1,6 +1,5 @@
 {
   "singleQuote": true,
   "trailingComma": "none",
-  "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindConfig": "./tailwind.config.js"
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/settings.json

@@ -1 +1,5 @@
-{}
+{
+    "files.associations": {
+        "*.css": "tailwindcss"
+    }
+}

README.md

@@ -26,14 +26,3 @@ install node, it is recommended to follow the guide provided by Node.js
 
 For comprehensive guidelines on writing documentation, including how to use custom nodes and tags, please refer to the
 [Writing Documentation](/WRITING_DOCS.md) page.
-
-## Generating a PDF
-
-This repository provides a tool for generating a PDFs from the documentation using [puppeteer](https://pptr.dev).
-To run the tool, use the following commands:
-
-```bash
-cd tools/pdf
-npm install
-npm run generate-pdf
-```

app/[...slug]/layout.tsx

@@ -1,8 +1,16 @@
 // Copyright (c) ZeroC, Inc.
 
 import { PathProvider } from 'context/state';
+import { ReactNode } from 'react';
 
-export default function DocsLayout(props: any) {
-  const path = '/' + (props.params.slug?.join('/') ?? '');
+interface DocsLayoutProps {
+  children: ReactNode;
+  params: Promise<{
+    slug?: string[];
+  }>;
+}
+
+export default async function DocsLayout(props: DocsLayoutProps) {
+  const path = '/' + ((await props.params).slug?.join('/') ?? '');
   return <PathProvider path={path}>{props.children}</PathProvider>;
 }

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

@@ -20,9 +20,8 @@ type PageProps = {
   params: Params;
 };
 
-export async function generateMetadata({
-  params
-}: PageProps): Promise<Metadata> {
+export async function generateMetadata(props: PageProps): Promise<Metadata> {
+  const params = await props.params;
   const path = '/' + (params.slug.join('/') ?? '');
   const { frontmatter } = await getMarkdownContent(path);
   const title: string = frontmatter?.title ?? '';
@@ -38,8 +37,9 @@ export async function generateMetadata({
       title,
       description,
       images: {
-        url: `https://docs.icerpc.dev/api/og?title=${baseUrls.includes(path) ? 'Overview' : title
-          }&description=${description}&path=${encodeURIComponent(path)}`
+        url: `https://docs.icerpc.dev/api/og?title=${
+          baseUrls.includes(path) ? 'Overview' : title
+        }&description=${description}&path=${encodeURIComponent(path)}`
       }
     }
   };
@@ -90,7 +90,8 @@ export async function generateStaticParams() {
   }));
 }
 
-export default async function Page({ params }: PageProps) {
+export default async function Page(props: PageProps) {
+  const params = await props.params;
   const path = '/' + (params.slug.join('/') ?? '');
   const { content } = await getMarkdownContent(path);
 
@@ -104,7 +105,7 @@ export default async function Page({ params }: PageProps) {
 
   return (
     <div className="mt-[6.4rem] flex grow flex-row justify-center">
-      <div className="flex max-w-[100rem] grow flex-row justify-center">
+      <div className="flex max-w-400 grow flex-row justify-center">
         <SideNav path={path} />
         <div className="grow">
           <div id="skip-nav" />

app/api/og/route.tsx

@@ -28,8 +28,8 @@ export async function GET(request: NextRequest) {
         : pageImage(hostname, breadcrumbs, title, description);
 
     return image;
-  } catch (e: any) {
-    console.log(`${e.message}`);
+  } catch (e) {
+    console.log(`${e instanceof Error ? e.message : 'Unknown error'}`);
     return new NextResponse(`Failed to generate the image`, {
       status: 500
     });
@@ -39,20 +39,18 @@ export async function GET(request: NextRequest) {
 // Image rendering functions
 const homeImage = (hostname: string | null) => {
   return new ImageResponse(
-    (
-      <div
-        style={{
-          background: 'black',
-          height: '100%',
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          backgroundImage: `url(http://${hostname}/images/og-home.png)`,
-          backgroundSize: 'cover'
-        }}
-      />
-    ),
+    <div
+      style={{
+        background: 'black',
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        backgroundImage: `url(http://${hostname}/images/og-home.png)`,
+        backgroundSize: 'cover'
+      }}
+    />,
     {
       width: 1200,
       height: 630
@@ -67,68 +65,65 @@ const pageImage = (
   description: string | undefined
 ) => {
   return new ImageResponse(
-    (
+    <div
+      style={{
+        background: 'black',
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        backgroundImage: `url(http://${hostname}/images/og.png)`,
+        backgroundSize: 'cover'
+      }}
+    >
       <div
         style={{
-          background: 'black',
-          height: '100%',
-          width: '100%',
+          width: '80%',
+          height: '360px',
+          marginTop: '200px',
+          marginLeft: '84px',
+          marginRight: '84px',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'flex-start',
-          backgroundImage: `url(http://${hostname}/images/og.png)`,
-          backgroundSize: 'cover'
+          justifyContent: 'flex-start'
         }}
       >
-        <div
+        <ol
           style={{
-            width: '80%',
-            height: '360px',
-            marginTop: '200px',
-            marginLeft: '84px',
-            marginRight: '84px',
             display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            justifyContent: 'flex-start'
+            justifyContent: 'flex-start',
+            padding: '0px'
           }}
         >
-          <ol
-            style={{
-              display: 'flex',
-              justifyContent: 'flex-start',
-              padding: '0px'
-            }}
-          >
-            {renderBreadcrumb(breadcrumbs)}
-          </ol>
-          <h1
-            style={{
-              fontSize: '78px',
-              fontWeight: 700,
-              lineHeight: '80px',
-              marginTop: '4px',
-              marginLeft: '-6px'
-            }}
-          >
-            {title}
-          </h1>
-          <h2
-            style={{
-              fontSize: '32px',
-              fontWeight: '600',
-              color: '#64748b',
-              maxWidth: '80%',
-              lineHeight: '42px'
-            }}
-          >
-            {description}
-          </h2>
-        </div>
+          {renderBreadcrumb(breadcrumbs)}
+        </ol>
+        <h1
+          style={{
+            fontSize: '78px',
+            fontWeight: 700,
+            lineHeight: '80px',
+            marginTop: '4px',
+            marginLeft: '-6px'
+          }}
+        >
+          {title}
+        </h1>
+        <h2
+          style={{
+            fontSize: '32px',
+            fontWeight: '600',
+            color: '#64748b',
+            maxWidth: '80%',
+            lineHeight: '42px'
+          }}
+        >
+          {description}
+        </h2>
       </div>
-    ),
+    </div>,
     {
-      // @ts-ignore - The FontOptions type cannot be imported
       width: 1200,
       height: 630
     }