Tinkle / Brainstorming for a new introspection and extrospection API and UI / Stuff from Feb 11 2015, originally at bevry/tinkle

README.md

Welcome to Tinkle

Tinkle is an introspection saving library and an extrospection rendering library.

Example

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!

Plugins

Render

Here is some JavaScript:

alert('Hello World!')

Here is some CoffeeScript:

alert 'Hello World!'

Here is some rendered CoffeeScript:

alert 'Hello World!'

Files

Here we include a JavaScript file:

<source value="./hello-world.js" />

Here we include a CoffeeScript file:

<source value="./hello-world.coffee" />

Here we include a rendered CoffeeScript file:

<render value="./hello-world.coffee" />

Here we include a CoffeeScript file, then we render it:

<render value="coffee">
	<source value="./hello-world.coffee" />
</render>

Resources

Here we include a YouTube video:

Here we include a file from a Gist:

Commands

We can even create a repository and commit these files to it too:

<COMMAND cwd=".">
	git init
	git add .
	git commit -m "Initial Commit"
	echo "Yay!"
</COMMAND>

Which when saved will update to:

<COMMAND cwd=".">
	git init
	<COMMAND-OUTPUT code="0" />
	git add .
	<COMMAND-OUTPUT code="0" />
	git commit -m "Initial Commit"
	<COMMAND-OUTPUT code="0" />
	echo "Yay!"
	<COMMAND-OUTPUT code="0">
		Yay!
	</COMMAND-OUTPUT>
</COMMAND>