Tinkle is an introspection saving library and an extrospection rendering library.
Run the following:
mkdir tinkle-example
cd tinkle-example
npm init -f
npm install --save tinkle
touch index.txt
./node_modules/.bin/tinkle watch
Then open up your new tinkle-example
directory in your favourite editor.
Inside the empty ./index.txt
file, add the following:
Here we use the source plugin:
<SOURCE value="./example.md">
This content goes inside `./example.md`
</SOURCE>
You will notice that as soon as you press save, it is replaced with:
Here we use the source plugin:
<SOURCE value="./example.md" mode="saved">
This content goes inside `./example.md`
</SOURCE>
And you may notice you now have a new ./example.md
file that contains:
This content goes inside `./example.md`
Now, if we go back to ./index.txt
and then replace the contents with:
Here we use the source plugin:
<SOURCE value="./example.md" mode="saved">
Blah blah blah
</SOURCE>
Then press save, we will then notice that it resets back to:
Here we use the source plugin:
<SOURCE value="./example.md" mode="saved">
This content goes inside `./example.md`
</SOURCE>
This is due to the added mode="saved"
attribute on the source
node. It ensures that we don't keep over-writing the ./example.md
file all the time.
Let's update the content of ./index.txt
to:
Here we use the source plugin:
<SOURCE value="./example.md" mode="save">
This content goes inside `./example.md`
So *awesome*
</SOURCE>
Then upon save, we'll notice that it stays the same, and that ./example.md
content changes to:
This content goes inside `./example.md`
So *awesome*
Now then, let's render that content using the render plugin. Update ./index.txt
to:
Here we use the source plugin:
<RENDER value="./example.md" />
Then press save. We'll notice that it changes to:
Here we use the source plugin:
<RENDER value="./example.md">
This content goes inside `./example.md`
So <em>awesome</em>
</RENDER>
How cool!
Here is some JavaScript:
alert('Hello World!')
Here is some CoffeeScript:
alert 'Hello World!'
Here is some rendered CoffeeScript:
alert 'Hello World!'