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.

Sign up for GitHub

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

Markdown format #13

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Markdown format #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions basic-page-syntax.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
---
title: Demo story
author: EOX
format: scrollytelling
navigation: true
---

# Section 1
Some content here using basic markdown.

# Section 2 {#identifier .class .class key=value key=value}
Some code examples:
```js
const foo = "bar"
```

```js {.dark}
const bla = "blub"
```

# Videos
Simple video embed:
{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}

Advanced video embed:
{{< video https://www.youtube.com/embed/wo9vZccmqwc
title="What is the CERN?"
start="116"
aspect-ratio="21x9"
>}}

# DIVs
A simple HTML div with a class:

::: {.simple-div}
Some **md** div content.
:::

Nested DIVs:

::::: {#id .parent-div}
::: {.child-div}
Some **md** div content.
:::
:::::

# Page Layout
See https://quarto.org/docs/authoring/article-layout.html

# Embedding an eox-element
<eox-map id="one"><img alt="placeholder image" src="https://placehold.co/600x400" /></eox-map>

```{js}
document.querySelector("eox-map#one").config = {
view:{
center:[0,0],
zoom:7
},
layers:[
{
type:"Tile",
source:{
type:"OSM"
}
}
]
}

```

8 changes: 8 additions & 0 deletions hero-section.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: Hero section
author: EOX
format: scrollytelling
---

## This title is not visible {.hero .full height=70% title="My title"}
{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}
41 changes: 41 additions & 0 deletions map-steps.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
title: Map steps
author: EOX
format: scrollytelling
---

<eox-map id="tour" .config=${{
view:{
center:[0,0],
zoom:7
},
layers:[
{
type:"Tile",
properties: {
id: "foo"
},
source:{
type:"OSM"
}
},
{
type:"Tile",
properties: {
id: "bar"
},
source:{
type:"OSM"
}
}
]
}}></eox-map>
Comment on lines +7 to +32
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't it better to avoid injecting html and js code directly into markdown but try to make it similar to the section pattern, something like this -

# eox-map { #tour center='[0,0]' zoom='7' layers='[{"type":"Tile","properties":{"id":"foo"},"source":{type:"OSM"}}]' }

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will help us to avoid unnecessary code injection into the storytelling renderer and which may cause unnecessary output.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would also think we discussed not wanting to allow code injection. This is also why we moved away from concepts such as MDX and MDJS, right?

## Climate Related Disaster {.sidecar .left map="#tour"}
### Section Step 1 {.step zoom='1' lat='20.333' lon='30.232' duration='4000' layers='["foo"]'}
Step 1 content

### Section Step 2 {.step zoom='1' lat='20.333' lon='30.232' duration='4000' layers='["foo", "bar"]'}
Step 2 content

### Section Step 3 {.step zoom='1' lat='20.333' lon='30.232' duration='4000' stac='https://[...]/collection.json'}
Step 3 content