Part 2 - Add an Existing Widget to Your Own Workspace.

Part 2 - Add an Existing Widget to Your Own Workspace. A lot of requests on how to add other existing widgets to a workspace. You’ll see how easy it is.
https://www.youtube.com/attribution_link?a=qLbfgx0KqL8&u=%2Fwatch%3Fv%3DaUEzLZGPkDU%26feature%3Dshare

Awesome documentation. Looking forward to Part 3 @jlauer !

very cool. You know, runme.js is a great idea, and it is already updating so much for you including the README, it would be neat if it also automatically generated the latest screenshot for you. There are tons of screenshot services, but you need one that will let you easily set a delay to give all the JS time to load, and one that will let you easily put the API to query it in the image tag. I found the service “screenshotlayer” has all that. I registered for a free access key to try it out. Here’s one that you could put straight in the image tag, or, better yet, use the runme.js to query it and put the screenshot into the repo so there would be no delay. Here it is for your john1 workspace:

http://api.screenshotlayer.com/api/capture?access_key=a1a36db48dfca4d952fe32bae02c9393&url=http://chilipeppr.com/john1&viewport=1100x760&width=900&delay=5.0

That screenshot service is awesome! It’s even sort of a way to debug what a public view would look like. If you wanted to tweak the runme.js to attempt a grab I’d be more than happy to add it to the core runme.js.

Still need some more info regarding the delay. Using your url and plugging in another site, it does take the 5 seconds as specified to query it. So we set this up as an asynchronous process in node, which triggers the url to perform the capture but doesn’t try to save the image. Since the url is the same, we just put an image tag pointing to that url in the readme. 1 to 5 seconds after the publish it will show the correct, updated snapshot. Make sense? Thoughts?

well, i don’t have much time to mess with it, however, if someone wants to test it, I think all you would need to do is add a function to download a file from the web and put it to the filesystem, since it appears in runme.js (at least the one I looked add) you do a git add * before committing. So, if the javascript downloads the image, and puts it into the filesystem, I think everything would work. Here’s some example code for downloading an image from the web:

var fs = require(‘fs’),
request = require(‘request’);

var download = function(uri, filename, callback){

request.head(uri, function(err, res, body){

console.log('content-type:', res.headers['content-type']);
console.log('content-length:', res.headers['content-length']);

var r = request(uri).pipe(fs.createWriteStream(filename));
r.on('close', callback);

});
};

download(‘https://www.google.com/images/srpr/logo3w.png’, ‘google.png’, function(){
console.log(‘Done downloading…’);
});

Now, of course, you would replace the google logo URI with the one to the screenshot service. Then, in http.createServer, right after you make the call to generateWidgetReadme(), you would make a call to download the screenshot image using the code above.

However, you probably don’t want to use my access code. I’m not sure if it would be best to just have a generic chilipeppr access code and let everyone use it (the free version is limited to 100 snapshots presumably per month), OR, have a way for each developer to sign up for an access code. That would certainly cover the bases since I doubt each developer would need tons per month. I guess it depends on how many times you run runme.js.

@raykholo yes, you could do that, but each time you view the README it would have the delay and unnecessarily generate a new screenshot. What I think you would want is the README to reference a local file that the runme.js updates. It would be even better if runme.js could somehow know if the screenshot needs to be updated or not. Perhaps there could be a little button over the screenshot image that shows when someone with write permissions is on the repo that says “Update Screenshot”. That would be the best since it would only update when the user was ready and not every time they view the README and not every time they run runme.js.

@Frank_Graffagnino

Thanks for the detailed explanation. I think each person should have their own access key/ account. The way we have everything set up, there are constantly new changes being pushed to github. I think having a dedicated button will be the way to go.