feat: adding form and getFieldState to mdx (#991)

Author: aranlucas

contentlayer.config.ts

@@ -3,6 +3,7 @@ import { remarkHeadingId } from "remark-custom-heading-id"
 import remarkGfm from "remark-gfm"
 import rehypeMdxCodeProps from "rehype-mdx-code-props"
 import emoji from "remark-emoji"
+import * as sidebar from "./src/components/Menu/MenuLinks"
 
 export const Doc = defineDocumentType(() => ({
   name: "Doc",
@@ -11,7 +12,17 @@ export const Doc = defineDocumentType(() => ({
   fields: {
     title: { type: "string", required: true },
     description: { type: "string", required: true },
-    sidebar: { type: "string", required: true },
+    sidebar: {
+      type: "enum",
+      options: [
+        "apiLinks",
+        "advancedLinks",
+        "tsLinks",
+        "faqLinks",
+        "getStartedLinks",
+      ],
+      required: true,
+    },
   },
   computedFields: {
     slug: {
@@ -26,6 +37,10 @@ export const Doc = defineDocumentType(() => ({
       type: "list",
       resolve: (doc) => doc._raw.flattenedPath.split("/"),
     },
+    pages: {
+      type: "list",
+      resolve: (doc) => sidebar[doc.sidebar] ?? [],
+    },
   },
 }))
 

src/components/Menu/Menu.tsx

@@ -5,7 +5,7 @@ import typographyStyles from "../../styles/typography.module.css"
 import { useRouter } from "next/router"
 import { Pages } from "../../types/types"
 
-function Menu({ pages }: { pages: Pages }) {
+function Menu({ pages = [] }: { pages: Pages }) {
   const router = useRouter()
   const { pathname } = router
 

src/components/codeExamples/formComponent.ts

@@ -9,6 +9,7 @@ import { Admonition } from "../Admonition"
 import { CodeSandBoxLink } from "../CodeSandbox"
 import tableStyles from "../../styles/table.module.css"
 import { SelectNav } from "@/components/selectNav"
+import CodeArea from "@/components/CodeArea"
 
 export const MDXComponents: Components = {
   // p: P,
@@ -26,6 +27,7 @@ export const MDXComponents: Components = {
   // img: ResponsiveImage,
   // Layout,
   SelectNav,
+  CodeArea,
   table(props) {
     return (
       <div className={tableStyles.tableWrapper}>