Add infrastructure for mdx docs

apps/web/app/routes/docs.tsx

@@ -0,0 +1,24 @@
+import { Outlet } from '@remix-run/react'
+import SidebarLayout from '~/ui/sidebar-layout'
+
+export default function Component() {
+  return (
+    <div className="relative isolate flex grow flex-col">
+      <SidebarLayout>
+        <SidebarLayout.Nav>
+          <SidebarLayout.NavTitle>Docs</SidebarLayout.NavTitle>
+          <SidebarLayout.NavLink to={'/docs/create-form-action'}>
+            createFormAction
+          </SidebarLayout.NavLink>
+        </SidebarLayout.Nav>
+        <SidebarLayout.Content>
+          <div className="flex flex-col space-y-4 p-4 text-gray-200 sm:space-y-8 sm:p-8">
+            <div className="prose lg:prose-xl">
+              <Outlet />
+            </div>
+          </div>
+        </SidebarLayout.Content>
+      </SidebarLayout>
+    </div>
+  )
+}

apps/web/app/routes/docs/create-form-action.mdx

@@ -0,0 +1,29 @@
+---
+meta:
+  title: createFormAction
+  description: createFormAction
+---
+
+# createFormAction
+
+## heading 2
+
+### heading 3
+
+#### heading 4
+
+You can reference your frontmatter data through "attributes". The title of this post is {attributes.meta.title}!
+
+Create a new file named index.js
+
+```js
+import { createFormAction } from 'remix-forms'
+// For Remix, import it like this
+import { redirect, json } from '@remix-run/node'
+// For React Router 6.4, like this
+import { redirect, json } from 'react-router-dom'
+
+const formAction = createFormAction({ redirect, json })
+
+export { formAction }
+```

apps/web/app/routes/docs/index.ts

@@ -0,0 +1,3 @@
+import { redirect } from '@remix-run/node'
+
+export const loader = () => redirect('/docs/create-form-action')

apps/web/package.json

@@ -28,14 +28,15 @@
     "@remix-run/serve": "^1.6.4",
     "@tailwindcss/forms": "^0.4.0",
     "cross-env": "^7.0.3",
+    "domain-functions": "^1.0.0",
     "highlight.js": "^11.4.0",
     "lodash": "^4.17.21",
     "netlify-cli": "^10.7.1",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.31.0",
-    "domain-functions": "^1.0.0",
+    "rehype-highlight": "^6.0.0",
     "remix-forms": "*",
     "tailwindcss": "^3.0.23",
     "ts-pattern": "~4.0.5",
@@ -44,6 +45,7 @@
   "devDependencies": {
     "@playwright/test": "~1.21.1",
     "@remix-run/dev": "^1.6.4",
+    "@tailwindcss/typography": "^0.5.8",
     "@types/lodash": "^4.14.178",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",

apps/web/remix.config.js

@@ -8,4 +8,12 @@ module.exports = {
   // assetsBuildDirectory: "public/build",
   // serverBuildPath: ".netlify/functions-internal/server.js",
   // publicPath: "/build/",
+  mdx: async (filename) => {
+    const [rehypeHighlight] = await Promise.all([
+      import('rehype-highlight').then((mod) => mod.default),
+    ])
+    return {
+      rehypePlugins: [rehypeHighlight],
+    }
+  },
 }

apps/web/styles/app.css

@@ -24,4 +24,13 @@
     bottom: 0;
     vertical-align: sub;
   }
+  body {
+    @apply text-base text-white;
+  }
+  body * {
+    @apply font-[inherit] text-current;
+  }
+  h1, .h1 {
+    @apply text-2xl font-bold leading-7  sm:text-5xl  text-pink-500;
+  }
 }

apps/web/tailwind.config.js

@@ -1,7 +1,26 @@
 module.exports = {
   content: ['./app/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      typography: ({ theme }) => ({
+        DEFAULT: {
+          css: {
+            color: theme('colors.white'),
+            h1: {
+              color: theme('colors.pink[500]'),
+              fontWeight: 'bold',
+            },
+            'h2, h3, h4, h5, h6': {
+              color: theme('colors.white')
+            }
+          },
+        },
+      }),
+    },
   },
-  plugins: [require('@tailwindcss/forms'), require('tailwind-scrollbar')],
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('tailwind-scrollbar'),
+    require('@tailwindcss/typography'),
+  ],
 }