This is an Idyll post. It is generated via
the file index.idyll
. To compile this post using
idyll, run the command idyll
inside of this directory.
Idyll posts are designed to support interaction and data-driven graphics.
Configuration can be done via the idyll
field in package.json
.
Idyll is based on Markdown.
You can use familiar syntax
to create bold (**bold**
) and italic (`*italic*
) styles,
* lists
* of
* items,
1. and numbered
2. lists
3. of items,
in addition to hyperlinks and images:
![quill](static/images/quill.svg)
Components can be embedded using a bracket syntax:
[Range /]
and can contain nested content:
[Equation]e = mc^{2}[/Equation]
Components accept properties:
[Range value:x min:0 max:1 /]
that can be bound to variables to achieve interactivity (more in next section).
A variety of components are included by default. See all the available components. You can also use any html tag, for example: [div] A div! [/div]
.
To create your own, add it to the components/
folder. There are examples of how to use Idyll with React and D3 based components already included.
Here is how you can instantiate a variable and bind it to a component:
5.00[var name:"exampleVar" value:5 /]
[Range min:0 max:10 value:exampleVar /]
[Display value:exampleVar /]
To learn more see the documentation at https://idyll-lang.org/docs/, join our chatroom, or see the project on GitHub.