mdx layout components

src/app/_components/MdeFormField.tsx

@@ -1,25 +0,0 @@
-import MDEditor from "@uiw/react-md-editor";
-import type { Control, FieldValues, Path } from "react-hook-form";
-import { FormControl, FormField, FormItem, FormLabel } from "~/components/ui/form";
-export default function MdeFormField<T extends FieldValues>(params: { control: Control<T>, name: Path<T>, label: string, dataColorMode: "dark"|"light" }) {
-  return (
-    <FormField
-      control={params.control}
-      name={params.name}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>
-            {params.label}
-          </FormLabel>
-          <FormControl>
-            <MDEditor
-              value={field.value ? field.value : ""}
-              onChange={field.onChange}
-              data-color-mode={params.dataColorMode}
-            />
-          </FormControl>
-        </FormItem>
-      )}
-    />
-  )
-}

src/app/admin/_components/MdxComponentReference.tsx

@@ -44,6 +44,26 @@ External resource
   alt="Describe the image"
   caption="Optional caption"
 />`,
+  },
+  {
+    name: "Layout / Row / Column",
+    description: "Border-less flex layout. Columns sit side by side and wrap when narrow.",
+    code: `<Layout>
+<Row>
+<Column>
+
+- First list item
+- Second list item
+
+</Column>
+<Column>
+
+- Another list
+- Side by side
+
+</Column>
+</Row>
+</Layout>`,
   },
   {
     name: "PullQuote",

src/app/admin/_components/useMdxEditorFieldProps.tsx

@@ -73,6 +73,27 @@ const mdxAutocompleteSuggestions: MdeAutocompleteSuggestion[] = [
     group: 'Component',
     trigger: '<',
   },
+  {
+    label: 'Layout',
+    value: `<Layout>\n<Row>\n<Column>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Column>\n<Column>\n\n</Column>\n</Row>\n</Layout>`,
+    detail: 'Flex layout wrapper with side-by-side, wrapping columns.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Row',
+    value: `<Row>\n<Column>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Column>\n<Column>\n\n</Column>\n</Row>`,
+    detail: 'Side-by-side columns that wrap when narrow.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Column',
+    value: `<Column>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Column>`,
+    detail: 'Vertically stacked column within a Row.',
+    group: 'Component',
+    trigger: '<',
+  },
   {
     label: 'PullQuote',
     value: `<PullQuote>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</PullQuote>`,

src/app/cv/page.tsx

@@ -24,7 +24,7 @@ export default async function CvPage() {
           components={mdxComponents}
           options={{
             mdxOptions: {
-              format: "md",
+              format: "mdx",
               remarkPlugins: [remarkGfm],
               rehypePlugins: [rehypeHighlight],
             },

src/app/projects/page.tsx

@@ -23,7 +23,7 @@ export default async function ProjectsPage() {
         components={mdxComponents}
         options={{
           mdxOptions: {
-            format: "md",
+            format: "mdx",
             remarkPlugins: [remarkGfm],
             rehypePlugins: [rehypeHighlight],
           },