Closed Peter9192 closed 2 years ago
After several hours of try, fail, search, repeat I managed to get a minimal working version of something I'm quite happy with.
I like the syntax proposed by remark-directive
. This leads to:
:::Panel{headline=Introduction image=intro.png}
## content for the side story
in plain markdown
:::
:::Panel{headline="Methods overview" image=concept.png}
etc.
Since nuxt/content is still using an older version of the unified/remark ecosystem, I had to use an older version (1.0.1) of remark-directive. The remark-plugin that I added to parse the syntax also follows the old version of the remark-directive example. I had to add my remark-plugin to the modules section in nuxt.config.js in order for it to work.
Now, each :::Panel
directive is converted into a Panel
component. I want to render all panels at once and toggle their visibility, as opposed to updating the content of the panels interactively.
Proof of concept in #57, will now work on porting everything to this new structure.
Addressed in #57
For content authoring, ideally the storyboards should be as simple as possible.
To this end I'd like to achieve the following:
1. Text (markdown) and images (or other static content) should live in the same directory.
By default, Nuxt Content splits them between the /content and the /static folder, which leads to a duplicated folder structure like so:
It would be much nice if this could be represented like so:
A long discussion about this can be found here: https://github.com/nuxt/content/issues/106. There is a workaround to achieve this, where all images should be loaded using a
require
call.A complete story should live in a single (markdown) file
It would be much easier to author a story if it lived in a single file, as opposed to one file per panel as we currently have. So a story could look something like this:
The presentation of our panels is very similar to slide decks. Tools like reveal.js, remark.js, or R's flexdashboard all use special slide separators (typically
---
) to split the markdown into multiple sections before rendering it as HTML slides. Nuxt/Content doesn't do this; instead it just parses all content into a single syntax tree which is then converted to formatted HTML using the<nuxt-content>
component. However, it is possible to add custom remark/rehype plugins to modify how the markdown is parsed. One such plugin could by remark-sectionizeHere's an issue in Nuxt/Content that basically proposes the same functionality.