docs: new option direction (horizontal, vertical and papyrus)

[peterpeterparker]

Documentation

The presentations used to be swipable horizontally but we recently enhanced this. We are going to introduce the ability to swipe vertically and also developed a new mode we called papyrus which basically transform a presentation into a "landing page".

These options can be set on the deckgo-deck main component with the properties direction and directionMobile (respectivelly direction-mobile if used as HTML attribute).

Both option can be set as horizontal, vertical or papyrus.

Direction default is horizontal. Direction-mobile default is papyrus.

These options are not yet documented and therefore a new dedicated page should be added to our docs.

https://docs.deckdeckgo.com/deck/direction

What do do

To add a new page, the transition, renamed in master as "animation" documentation example can be followed.

1. Add a new TSX component app-direction (see app-animation source as example). The render content does not matter as it will be parsed at build time aka will be overwrite later with the related markdown file.

2. Add a new route in app-root

3. Create the documentation in markdown. The animation example can be followed.

Note that there is no live reload to parse the mardkow to JSX.

Get starter

git clone https://github.com/deckgo/deckdeckgo
cd deckdeckgo/docs
npm i
npm run start

Get Started

If you need help to get started with this feature, I'll be happy to help.

Ping me: @peterpeterparker | twitter | email | slack

[DaniAcu]

Maybe I will have some doubts, but I would like to take it. 😄

[peterpeterparker]

Awesome! Thank you for your help @DaniAcu

Yeah I know it is not that clear but it is something brand new which even live yet in our editor but, I just updated all our kits with it so you can easily give it a try. You should be able to create a new presentation locally with npm init deckdeckgo (choose HTML).

After you have started your presentation locally (npm i && npm run start), then you go in src/index.html and there you modify the direction property of the deckgo-deck respectivelly

<deckgo-deck id="slider" direction="horizontal">

=> you can swipe the presentationhorizontally

<deckgo-deck id="slider" direction="vertical">

=> you can swipe the presentationvertically

<deckgo-deck id="slider" direction="papyrus">

=> you can scroll the presentation 😃

Let me know if it is clearer like this?

Of course happy to help, ping me anytime!

Note: if you are participating to Hacktoberfest, note that the issue can of course wait for October so you can count it.

[peterpeterparker]

@DaniAcu are you working on that one or should I un-assign you the issue?

[dhiemaz]

This issue is still open?

[peterpeterparker]

@dhiemaz yes indeed, still open. meantime we just have migrated from a custom documentation to storybook.

Nevertheless this is still valid and these options can be documented in https://github.com/deckgo/deckdeckgo/tree/main/docs/src/stories/deck