How it works

Building blocks works by loading a GitHub gist and rendering it in an iframe, as well as displaying the gists files in various editors. There are some caveats to how files work within the iframe.

Files

Building blocks follows the same guidelines as bl.ocks.org for displaying files, and will present the option to edit the following files:

• index.html - the main code that gets put into the iframe for rendering
• README.md - markdown description that gets rendered as HTML
• thumbnail.png - a thumbnail can be added if you already own the block in questions (i.e., you created or forked it while logged in)

data, scripts and stylesheets

One can add any text-based file (the GitHub API doesn't accept binary files) to a block with the Add File button. These files are made available to the user in the iframe as relative urls, thus you can do:

d3.csv("mydatafile.csv", function(err, data) { ... })

with mydatafile.csv in your gist.
Often times users will also want to load scripts and style sheets:

  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="scrubbing.js"></script>

with style.css and scrubbing.js in your gist.

development

The way this is enabled is with 2 methods, one involves regular expressions and the other overriding the XMLHttpRequest. It is not for the faint of heart.

Modes

We currently have 2 modes of interacting with the app, the standard view which mirrors the bl.ocks.org layout and the "side-by-side" layout which is more akin to Tributary

Inlet

The sliders and color pickers when you click on a number or a hexcode are provided by the Inlet library. You can see a demo of the various supported text in this block

development

If you'd like to modify Inlet and how it works in relation to building-blocks, you can set it up as a linked library like:

git clone https://github.com/enjalot/Inlet
cd Inlet
npm link

Then in building-blocks you can do

npm link codemirror-inlet

Remember to run make whenever you make changes in Inlet.