jxnblk / mdx-deck

♠️ React MDX-based presentation decks
https://mdx-deck.jxnblk.com
MIT License
11.33k stars 603 forks source link

Using with headless cms #627

Open Antonio-Laguna opened 4 years ago

Antonio-Laguna commented 4 years ago

Hi!

I stumbled upon this and mdx recently and thought I could try to leverage a headless CMS that I have to power slides. Basically for collaboration.

There's no way that I could see in which mdx-deck could work given that I give this:

# Intro

Hi there

---

## Team

- this is our team!

---

Thanks!

But it would work if I use the CLI with that content. Is there a way to achieve that? Here's the code I envisioned:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function getParams() {
  const params = new URLSearchParams(window.location.search);
  return {
    slug: params.get('slug'),
  };
}

const fetchData = slug => {
  return axios(
    `https://mycms.com/api/pages/${slug}`, {
      params: {
        token: process.env.KEY
      }
    });
};

function Content() {
  const { slug } = getParams();
  const [data, setData] = useState(null);
  useEffect(() => fetchData(slug).then(result => setData(result.data.contentRaw)), []);

  return (
    <SOME_MDX_DECK_WRAPPER_HERE>{data}</SOME_MDX_DECK_WRAPPER_HERE>
  );
}

export default Content;

Basically same as mdx-runtime but for mdx-deck.

Thanks!

mrboen94 commented 1 year ago

Are there any updates on hosting the mdx content remote? Is it possible using the current version?

I was trying to implement it last week, but encountered some issues.