This is my try to apply performance features from eleventy-high-performance-blog into Eleventy-Garden, additionally I added Rough Notation because I think it is cool.
- You can have animation played once - while opening the website
- or you can have animation played once while reader scrolls to annotated fragment
- or you can have animation played every time when annotated fragment is visible on screen.
Those last two effects are achieved with Intersection Observer API
To annotate / highlight text you have to add css class or id to text you want to annotate in order to let Rough Notation find it.
To do that use:
[Some text you want to underline]{.underline} // This adds <span class=underline>
[Some text you want to highlight]{#highlight} // This adds <span id=highlight>
This feature (adding css id / class) is provided by markdown-it-bracketed-spans so please take a look if you need more specific configuration.
You can use any class / id name, but remember you need to add those to rough-notation-config.js.
Inside rough-notation-config.js there is example configuration for class as well as id used on demo website.
You can check source of demo here. Please mind that if you want to add more animated-on-view annotations you have to add more IntersectionObservers. Also mind that IntersectionObserver should be used with unique identificators (ie. id's ), using it with class may end up in unexpected result when there's more than one class to annotate.
For more options please adhere to:
eleventy-high-performance-blog
WORK IN PROGRESS - PERFORMANCE OPTIMIZATIONS STILL HAVE TO BE ADDED
- add Rough Notation
- add performance optimizations
- add ability to generate graph links
This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.