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.

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

Storytelling web components #7

Open
silvester-pari opened this issue Dec 20, 2023 · 0 comments
Open

Storytelling web components #7

silvester-pari opened this issue Dec 20, 2023 · 0 comments

Comments

@silvester-pari
Copy link
Collaborator

To keep in line with our EOxElements, the storytelling itself could and maybe should be a web component as well. This would offer portabilty and also maybe two "APIs" on how to program a story. Example:

<eox-story format="pages" style="background: lightgrey">
  <eox-story-page style="background: #004170">
    <h1>Page 1 title</h1>
    <p>Page 1 text</p>
  </eox-story-page>
  [...]
</eox-story>

The markdown input could then also "translate" into the story format:

// INPUT
---
layout: scrollytelling
background: lightgrey
---
# Section 1
Text for section one

---
[background-color]: #f00
[scrub-direction]: vertical
[element]: chart
# Section 2
Text for section 2

// OUTPUT
<eox-story format="scrollytelling" style="background: lightgrey">
  <eox-story-block>
    <h1>Section 1</h1>
    <p>Text for section one</p>
  </eox-story-block>
  <eox-story-block style="background: #f00" scrub-direction="vertical">
    <h1>Section 2</h1>
    <p>Text for section 2</p>
    <eox-chart slot="sticky-element"></eox-chart>
  </eox-story-block>
</eox-story>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant