feat: add DocsPage component and integrate rehype-raw for markdown processing

Author: mayank1513

examples/nextjs/src/app/docx/page.tsx examples/nextjs/src/app/docs/page.tsxexamples/nextjs/src/app/docx/page.tsx renamed to examples/nextjs/src/app/docs/page.tsx

@@ -50,6 +50,7 @@
     "r18gs": "^3.0.1",
     "react-live": "^4.1.8",
     "react18-loaders": "workspace:*",
+    "rehype-raw": "^7.0.0",
     "typingfx": "^1.1.1"
   }
 }

packages/shared/package.json

@@ -1,3 +1,4 @@
 .docs {
-  /* create your container styles here */
+  max-width: 800px;
+  margin: auto;
 }

packages/shared/src/client/docs/docs.module.scss

@@ -4,7 +4,10 @@ import readme from "../../../../../README.md?raw"
 import { Md } from "@m2d/react-markdown";
 import { toDocx } from "mdast2docx";
 import { AstArrayElement } from "@m2d/react-markdown/utils";
+import rehypeRaw from "rehype-raw";
+import rebrandingConfig from "@repo/scripts/rebrand.config.json";
 
+const { packageName } = rebrandingConfig;
 export interface DocsProps extends HTMLProps<HTMLDivElement> {
 	children?: ReactNode;
 }
@@ -22,19 +25,20 @@ export const Docs = (props: DocsProps) => {
 						const url = URL.createObjectURL(docxBlob as Blob);
 						const a = document.createElement("a");
 						a.href = url;
-						a.download = "document.docx";
+						a.download = `${packageName}.docx`;
 						document.body.appendChild(a);
 						a.click();
 						document.body.removeChild(a);
 						URL.revokeObjectURL(url);
-					}).catch(() => {
+					}).catch((err) => {
+						console.error(err)
 						alert("Something went wrong!")
 					});
 				} else {
 					alert("Something went wrong!")
 				}
 			}}>Download as Docx</button>
-			<Md astRef={astRef}>{readme}</Md>
+			<Md astRef={astRef} rehypePlugins={[rehypeRaw]}>{readme}</Md>
 		</div>
 	);
 }