Position floating sidenotes/comments next to a document with inline references.
Place notes/comments to the side of one or more documents with inline references.
When an inline reference is clicked, animate the relevant sidenote to be as close as possible and move non-relevant sidenotes out of the way without overlapping.
Do not provide UI or impose any styling, only placement.
Comment streams next to a document. This is showing Curvenote, which is a scientific writing platform that connects to Jupyter.
Use React, Redux & Typescript
Used Redux rather than a hook approach (open to discussion if people are passionate!)
Multiple documents on the page, currently based on the wrapping
Multiple inline references per sidenote, wrapped in
Have fallback placements to a
Provide actions to attach non-react bases, anchors or reposition sidenotes
All positioning is based on the article, and works with
The demo is pretty basic, and not nearly as pretty as the gif above, just blue, green and red divs floating around. See index.tsx for full the code/setup.
sidenotes class is the only CSS that is recommended. You can import it directly,
or look at it and change
it (~30 lines of
Once you create your own store, add a
sidenotes.reducer, it must be
sidenotes. Then pass the
options of padding between sidenotes.
sidenotes.ui state has the following structure:
Have a better mobile solution that places notes at the bottom.
Made with love by Curvenote
Last updated February 19th, 2021