search

FormidableLabs / spectacle

A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.
https://commerce.nearform.com/open-source/spectacle/
MIT License
9.75k stars 691 forks source link

Using SlideLayout API with MDX slides #1283

Closed ricovitch closed 10 months ago

ricovitch commented 1 year ago

Question

Is it possible to use Slide Layouts when writing slides in MDX ?

Background Info/Attempts

Not sure what's the best approach to manage different slide layouts with MDX. The documented Slide Layouts looks to fit very well my needs, but it does not seem to be available when writing slides in MD/MDX, or I may be missing something.

I imagine another approach could be to use some custom html/css or react component, but we loose a bit the simplicity of markdown content.

carloskelly13 commented 1 year ago

Yeah it's something we've talked about internally but it almost necessitates introducing some new custom syntax into Markdown. Happy to think through some ideas here. We sort of already do that with slide breaks, so it's not without precedence.

ricovitch commented 1 year ago

Hi Carlos. Thank you for answering and confirming that it's not supported yet.

I would be happy with some kind of "json decorators" for slide breaks like below. This would also open the door to other parameters.

--- { layout: "statement" }

Statement text

Or frontmatter syntax between two delimiters.

---
layout: "statement"
---

Statement text

The complex part with markdown is column/grid based layouts maybe as it would require some other kind of delimiters. Maybe a subset of the SlideLayouts API could be supported ? (those that don't need delimiters to separate blocks / columns)

carloskelly13 commented 1 year ago

I like the JSON decorators idea, I think the second one might be a bit trickier to get right in every instance to ensure it doesn't get thought of just as a slide.

carloskelly13 commented 1 year ago

We've started to integrate some of the slide layouts using the Markdown decorators: https://github.com/FormidableLabs/spectacle/pull/1289

Not released yet, but you can see where this API is likely heading.

ricovitch commented 1 year ago

That is awesome, thank you so much for taking my feedback into consideration. I'm sure a lot of people will like it !

carloskelly13 commented 1 year ago

@ricovitch Yeah, we've released discretely the first part of it, and when we get more types implemented we'll update the docs. Feel free to kick the tires and let us know if you see anything.

carloskelly13 commented 10 months ago

Check out our docs which show how to leverage slide layouts in markdown → https://formidable.com/open-source/spectacle/docs/md-slide-layouts

We plan to add more types in the future as well!

ricovitch commented 10 months ago

Awesome thank you !