Entangle
Another attempt at writing Tangle.js documents in markdown.
The main objective here was to keep the "explanation" part as readable as possible, without losing the power of javascript.
Install
npm install -g entangle-docUsage
entangle <source.entangle>If you have trouble opening the output html in Mac Safari, try Firefox.
Explanation
A "Entangle" document is split into three sections, separated by ---:
- the content (markdown)
- the config (yaml)
- the code (coffeescript)
The code is a single function, named update, that produces the dependent variables from the independent variables (i.e. the user controls). Entangle will bundle the content, script, and some styles (a la the original Tangle.js) into a standalone html file which you can open.
Example
example/cookies.entangle:
# Cookies
If you eat `${cookies} cookies`, you will consume `${calories} calories`, or `${percent}%` of your recommended daily intake.
---
cookies:
class: TKAdjustableNumber
min: 0
max: 10
initial: 3
percent:
format: "%.0f"
---
update = ({cookies}) ->
calories: cookies*50,
percent: cookies*2.38
Running...
entangle example/cookies.entangle... will output ...
API
I also included some hooks for parsing entangle code.
import { parse } from "entangle-doc";
const { html, javascript } = parse(source);The resulting html is a div element you can put anywhere in the HTML body. The resulting javascript needs to be encapsulated in a <script> tag, but after that you can put it anywhere.