joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Quick demo showing how to get a Base64-encoded thumbnail.png file from a gist.

Thumbnails are very handy visual indicators of the content of a block on
bl.ocks.org, esp for rapidly surveying a user's collection.
However, many block creators don't add thumbnails because of the extra steps involved in adding them to a gist. Since the gist API doesn't let you upload binaries you end up having to clone you're gist to add a thumbnail. Note: @mbostock's gist to clone all gists is useful here.
It's been suggested that the gist-img shell script enables you to upload thumbnail images. That's at least half true. It automates the base64 encoding of png images prior to upload with @defunkt's gist CLI tool, so you end up uploading the encoded text file.
In fact, it's easy enough to encode and upload such png files yourself: base64 < thumbnail.png | gist -u 3883098 -f thumbnail.png.B64 -.
Anyhoo ...  bl.ocks.org doesn't currently recognize Base64-encoded thumbnails.
FWIW, I opened up an issue for the bl.ocks.org repo to see if @mbostock might enable (in all his copious free time!) the decoding of such thumbnails when rendering a block.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://jashkenas.github.io/coffee-script/extras/coffee-script.js"></script>
<style>
  #file {
    margin-top: 25px;
    margin-left: 50px;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 100;
    font-size: 75px;
    color: #777;
    -webkit-font-smoothing: antialiased;
  }
</style>
<body>
  <div id="file"></div>
  <img id="image" src=""/>

<script type="text/coffeescript">
  url = 'https://api.github.com/gists/7280524'

  insert = (res) ->
    gist = JSON.parse res
    thumb = gist.files['thumbnail.png.B64']
    file.textContent = thumb.filename
    image.src = "data:image/png;base64," + thumb.content

  get = (url, done) ->
    xhr = new XMLHttpRequest()
    xhr.onreadystatechange = ->
      if (xhr.readyState is 4) and (xhr.status is 200)
        done xhr.responseText
    xhr.open("GET", url, true)
    xhr.send()

  get url, insert
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://jashkenas.github.io/coffee-script/extras/coffee-script.js"></script>
	<style>
	#file {
	margin-top: 25px;
	margin-left: 50px;
	font-family: "Helvetica Neue", sans-serif;
	font-weight: 100;
	font-size: 75px;
	color: #777;
	-webkit-font-smoothing: antialiased;
	}
	</style>
	<body>
	<div id="file"></div>
	<img id="image" src=""/>

	<script type="text/coffeescript">
	url = 'https://api.github.com/gists/7280524'

	insert = (res) ->
	gist = JSON.parse res
	thumb = gist.files['thumbnail.png.B64']
	file.textContent = thumb.filename
	image.src = "data:image/png;base64," + thumb.content

	get = (url, done) ->
	xhr = new XMLHttpRequest()
	xhr.onreadystatechange = ->
	if (xhr.readyState is 4) and (xhr.status is 200)
	done xhr.responseText
	xhr.open("GET", url, true)
	xhr.send()

	get url, insert
	</script>