[plugins] add `mdx` plugin to support MDX routes

Deno fresh has built-in support for routes/**/*.(ts|jtsx|js|jsx) files but not for .mdx.

MDX lets you use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. 🚀 Continue reading ».

Netzo should allow using mdx files for routes to allow usage like similar to that of lume.land/plugins/mdx.

frontmatter to set page head
frontmatter made available (e.g. via page?)
allow importing components/islands (must support interactivity)
make components available as global (via context)
auto-generate a navigation (one nav item per page)?

---
title: Dashboard
description: An overview of sales for this quarter. 
---

import { SalesPlot } from "@/islands/SalesPlot.tsx";

const data = await getData(...);

# {page.title}

{page.description}

<SalesPlot data={data} />

instead of the equivalent

import { SalesPlot } from "@/islands/SalesPlot.tsx";

const title = "Dashboard";
const description = "An overview of sales for this quarter.";

export default defineRoute(async (req, ctx) => {
  const data = await getData(...);
  return (
    <div>
      <Head>
        <title>{title} | Netzo</title>
        <meta name="description" content={description} />
      </Head>
      <h1 className="font-bold text-xl">{title}</h1>
      <p className="text-muted-foreground">{description}</p>
      <SalesPlot data={data} />
    </div>
  )
})

This could probably be done via a fresh plugin mdx() which analogous to the api() plugin, mounts some routes, only that in this case it walks the file system to generate them instead of generating them only from the config object.

netzo / fresh-netzo

[plugins] add `mdx` plugin to support MDX routes #146

Reference