Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
miguelrk opened this issue Feb 20, 2024 · 0 comments
Open

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

miguelrk opened this issue Feb 20, 2024 · 0 comments
Assignees
@miguelrk
Labels
priority: medium Do last (delegate?) type: feature New feature or request

Comments

@miguelrk
Copy link
Contributor

miguelrk commented Feb 20, 2024 •
edited

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.

Reference
@miguelrk miguelrk added priority: medium Do last (delegate?) type: feature New feature or request labels Feb 20, 2024
@miguelrk miguelrk self-assigned this Feb 20, 2024
@miguelrk miguelrk changed the title [mdx] add support for mdx routes [plugins] add mdx plugin to support MDX routes Feb 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@miguelrk miguelrk

Labels
priority: medium Do last (delegate?) type: feature New feature or request
Projects
v1.0
Status: Todo
Milestone
No milestone
Development

No branches or pull requests
1 participant
@miguelrk