-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.idyll
133 lines (84 loc) · 2.81 KB
/
index.idyll
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
[meta title:"Data Writer Prototype" description:"Short description of your project" /]
[Header
fullWidth:true
title:"Data Writer Prototype"
subtitle:"Welcome to Idyll. Open index.idyll to start writing"
author:"Your Name Here"
authorLink:"https://idyll-lang.org"
date:`(new Date()).toDateString()`
background:"#222222"
color:"#ffffff"
/]
## Introduction
Editing some text
Idyll posts are designed to support interaction and
data-driven graphics.
[var name:"state" value:0 /]
[CustomD3Component className:"d3-component" state:state /]
[button onClick:`state++`]
Click Me.
[/button]
Configuration can be done via the `idyll` field in `package.json`.
## Markup
Idyll is based on Markdown.
You can use familiar syntax
to create **bold** (`**bold**` ) and *italic* (``*italic*` ) styles,
* lists
* of
* items,
```
* lists
* of
* items,
```
1. and numbered
2. lists
3. of items,
```
1. and numbered
2. lists
3. of items,
```
in addition to [hyperlinks](https://idyll-lang.org) and images:
```
```
## Components
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](https://idyll-lang.org/docs/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.
[Radio value:x options:`["option1", "option2"]` /]
```
[var name:"exampleVar" value:5 /]
[Range min:0 max:10 value:exampleVar /]
[Display value:exampleVar /]
```
## Learn More
To learn more see the documentation at [https://idyll-lang.org/docs/](https://idyll-lang.org/docs/),
join our [chatroom](https://gitter.im/idyll-lang/Lobby), or see the project on [GitHub](https://github.com/idyll-lang/idyll).
[hr /]
# Technical Details
## Installation
- Make sure you have `idyll` installed (`npm i -g idyll`).
- Clone this repo and run `npm install`.
## Developing a post locally
Run `idyll`.
## Building a post for production
Run `idyll build`. The output will appear in the top-level `build` folder. To change the output location, change the `output` option in `package.json`.
## Deploying
Make sure your post has been built, then deploy the docs folder via any static hosting service.
## Dependencies
You can install custom dependencies by running `npm install <package-name> --save`. Note that any collaborators will also need download the package locally by running `npm install` after pulling the changes.