The easiest way to get started with Idyll is to use the project generator. It will help get you set up using custom components, datasets, and stylesheets. To use the generator:
$ npm install -g yo generator-idyll $ yo idyll
The generator will produce a structure that looks like this:
$ tree -I node_modules . ├── _index.html ├── components │ ├── custom-component.js │ └── default │ ├── styles │ │ └── ... default component stylesheets │ └── ... default components in here ├── data │ └── example-data.json ├── images │ └── idyll.png ├── index.idl ├── package.json └── styles.css
The files do the following:
index.idl- The main Idyll file, write your text in here.
styles.css- By putting CSS in here you can override the default styles.
components/- The folder for custom components. Any component defined in this folder can be invoked in the .idl file.
data/- If you want to include a dataset in your project, put it in here.
images/- A folder for static images.
_index.html- A barebones HTML file that will be used if you publish your project to the web.
package.json- This file contains all the metadata for your project.
To get started, from a terminal in that directory run
npm start and Idyll will compile your
file and open it in your web browser. Every time you save the
index.idl file, the system will automatically recompile
everything and update the page in the browser.
components/default/ folder contains the default components that Idyll provides. If you need to directly
update one of these components or their styles, feel free - Idyll is built to be customized.
If you want to configure the paths or build steps that Idyll uses, open
package.json and update the
scripts section. These options are discussed in greater detail later on in the documentation.
Continue to the next section to learn how to use Idyll's syntax.