You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A long discussion about this can be found here: nuxt/content#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:
---
- name: Story name
- author: Jane Doe
- trl: high
- tags:
- CPM
- Precipitation---# Panel 1
This is the introduction text that appears in the text box next to the main content
It can include any regular markdown syntax.
We need a way to mark the main image (or other content type) so we can separate
it from the text panel in the front end. We could for example use a special HTML tag
like so:
<MainImagesrc="story1/image1.png" />
# Panel 2
<MainContentsrc="story1/standalone2.html" />
The first level heading in this case marks the transition to a new panel.
There may be alternative ways to mark this, e.g. using three dashes
on a line surrounded by horizontal spacing:
---# Panel 3
etc.
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-sectionize
Here's an issue in Nuxt/Content that basically proposes the same functionality.
The text was updated successfully, but these errors were encountered:
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.
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: nuxt/content#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.
The text was updated successfully, but these errors were encountered: