Creating screenshot of your code hosted on Github.

in utopian-io •  8 months ago

Repository

REPO: https://github.com/adasq/github-code-screenshot
PR: https://github.com/adasq/github-code-screenshot/pull/1

New Projects

  • What is the project about?

You are reading this, so hopefully you are familiar with a concept of sharing your code on the Utopian platform. Sharing your contribution includes presenting pieces of your code as well.

I have just prepared some useful (I believe) service which allows you to create a screenshot of your source code snippet hosted on https://github.com/.

All you need to do is to provide a url to preselected piece of code, i.e.:

  1. https://github.com/steemit/steem/blob/master/libraries/schema/schema.cpp#L28-L41, or:
  2. https://github.com/utopian-io/v2.utopian.io/blob/8c6b60840da1c1d3b94007ea8688771a3123b3e0/src/store/github/index.js#L1-L14

Based on the URL, you will be responded with an image of your source code, which looks like:

Try this service with your source code. PoC available here: https://github-shot.herokuapp.com/. You can copy your output image using in-browser Ctrl+C shortcut and than paste into your favorite editor (steemit.com, busy.org, etc.)

  • Technology Stack

It is a node.js based service.

How it works
  1. user requests for screenshot of a piece of code
  2. script asks api.github.com for source code details
  3. chrome browser is being launched
  4. image file is being produced using carbon service
  5. output image is sent to a client
More details

Based on input URL we have to retrieve source code lines a user is interested in producing image form.

Function getGithubApiUrlByGithubSnippetUrl is responsible for producing such URL.

So, by passing a function input:

https://github.com/steemit/steem/blob/master/libraries/schema/schema.cpp#L28-L44

we can generate github API URL:

https://api.github.com/repos/steemit/steem/contents/libraries/schema/schema.cpp?ref=master

This endpoint produces JSON object, containing metadata related to given github file, including file content property we are interested in.

Having source code we can now use carbon, which is a web service allowing you to prepare fancy image of your source code. In order to use this service we need to open it in a browser.

The best way to do so is to take an advantages of a puppeteer.

This library provides capabilities to control Google's Chrome browser programmatically within a convenient API. We can open web pages, run content script on it or create a screenshot of given DOM Element.

So, using headless browser, we can sends previously gathered piece of code ro a https://carbon.now.sh/ webpage, and then generate a beautiful screenshot of our source code.

The way a puppeteer is being used to achieve it is presented below:

What is more, under the hood there is a queue logic which lets us to generate only one image at a time. So, your image might be generated little bit later than you excepted, if someone else has requested screen producing earlier.

This is a limitation I decided to ignore for the sake of PoC.

Of course, all code snippets has been prepared within the service, presented in the contribution.

  • Roadmap

I would love to see such feature integrated with a editor provided by Utopian 2.0. So, whenever we paste snippet url - a screen is being produced automatically.

That might be huge! What you think people?

  • How to contribute?

Any suggestions highly recommended. Post them here: https://github.com/adasq/github-code-screenshot/issues, or contact me directly on Utopian's Discord ( @adasq ) or just below in a comments section.

Cheers.

GitHub Account

https://github.com/adasq

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for your review, @amosbastian!

So far this week you've reviewed 8 contributions. Keep up the good work!

Hey @adasq
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

This is absolutely awesome. I struggle with taking screenshots of my code because they always end up uneven and I don't want to spend the time and actually cut them to the correct sizes. I'm absolutely going to use this from now on. Thanks a lot!

·

Yup, same problem here.
Cheers!

Hi @adasq! We are @steem-ua, a new Steem dApp, computing UserAuthority for all accounts on Steem. We are currently in test modus upvoting quality Utopian-io contributions! Nice work!