Several days ago Maarten Lambrechts — creator of the great rocknpoll.graphics — wrote on twitter asking if it would create an article with similar navigation using Idyll.
It is!
Click to find out more...
To simplify things, I created a Scroll component that will scroll to a particular
section based on its input value. The Idyll markup looks something like this:
[var name:"currentSection" value:"1" /]
[Scroll section:currentSection]
[Section name:"1"] This is section 1... [/Section]
[Section name:"2"] This is section 2... [/Section]
[Section name:"2"] This is section 3... [/Section]
[/Scroll]To trigger a scroll to the next section, simply update that currentSection variable:
[button onClick:`currentSection++` ]
Click me to go to the next section!
[/button]This scrolling code can be used in conjunction with the variables powering the rest of document. For example:
Add Point:
Remove Point:
Toggle Color:
Click to continue...Thanks for reading. The code for this can be found at: https://github.com/mathisonian/auto-scroller. See the README file in that repo for instructions on cloning and deploying yourself.
Find out more about Idyll at idyll-lang.org. Feel free to reach out in our chatroom on gitter, or on twitter @mathisonian.