- 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.:
- https://github.com/steemit/steem/blob/master/libraries/schema/schema.cpp#L28-L41, or:
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
- user requests for screenshot of a piece of code
- script asks api.github.com for source code details
- chrome browser is being launched
- image file is being produced using carbon service
- output image is sent to a client
Based on input URL we have to retrieve source code lines a user is interested in producing image form.
getGithubApiUrlByGithubSnippetUrl is responsible for producing such URL.
So, by passing a function input:
we can generate github API URL:
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.
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.