Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Carbon as an API #210

Closed
deadcoder0904 opened this issue Feb 6, 2018 · 39 comments
Closed

Carbon as an API #210

deadcoder0904 opened this issue Feb 6, 2018 · 39 comments
Assignees

Comments

@deadcoder0904
Copy link

@deadcoder0904 deadcoder0904 commented Feb 6, 2018

Send the code & it returns a dynamic image. It can have all the other options as well. That way it would be easy to embed it dynamically with just code. I can't think of any other use cases right now. What do you think?

@KennethWussmann
Copy link

@KennethWussmann KennethWussmann commented Feb 6, 2018

I thought about the same and found this related issue: #179

@briandennis
Copy link
Collaborator

@briandennis briandennis commented Feb 8, 2018

Cool idea! #179 seems to be focused on rendering an embeddable editor. From your description, it seems to me that this is more tuned towards an API the returns the image data. Am I understanding that correctly?

@mfix22 mfix22 added the integrations label Feb 8, 2018
@briandennis briandennis removed the integrations label Feb 8, 2018
@deadcoder0904
Copy link
Author

@deadcoder0904 deadcoder0904 commented Feb 8, 2018

Not sure what the use case might be though 😂

If you find a use case, keep this open otherwise we have other issue that requests embedding it. I can't think of anything useful though, what I needed was embeddable editor only. I just kinda put it the wrong way. The embeddable editor would have the specified theme, font size & all the other features but it will be a replacement of Github Gist for Medium or any other Blog so we can select text just like we do on the Carbon website rather than an actual Image.

As for the API, if its there then extensions might be easier to make.

Just send a POST request to

https://api.carbon.now.sh?code={console.log('GIMME A HELL YEAH')}&lang=js&theme=monokai

& it will download the image in the same directory & after downloading it will then delete it from the server or imgur whatever you prefer.

I am assuming the current way might be a little bit tedious without the API like

  1. Select the code
  2. Then Select the extension
  3. Then Use Puppeteer to visit Carbon Website
  4. Then put in the code & call the Download Button

Idk if its gonna be required or there are any other use cases. But I can't think of anything else at this moment. So close it if you want.

@KennethWussmann
Copy link

@KennethWussmann KennethWussmann commented Feb 8, 2018

@deadcoder0904 Why sending a POST request and use query parameters?
Large code can not fit in the URL and messes with encoding/formatting.

Better use POST with JSON as payload with your desired settings and code.
The response could be the image the API client can download/display.

@briandennis
Copy link
Collaborator

@briandennis briandennis commented Feb 8, 2018

gotcha @deadcoder0904 , I understand what you mean now. Well if you're primarily interested in the embeddable part, keep an eye on #179 because that's exactly what we're working on over there!

As for the image API aspect, I agree that could be useful for building extensions! Fortunately with #213 we've ended up needing to implement most of this already. @KennethWussmann the way that is shaping up, it will be similar to what you're talking about. Client can POST with a base64 encoded state string or a state object and the response JSON will include the image 👍

@drcmda
Copy link

@drcmda drcmda commented Feb 10, 2018

@briandennis

I love the idea, a service would be so useful. The downside right now is that it's some hassle to update.

For instance i'm using carbon on a github project: https://github.com/drcmda/react-contextual

But silly like i am i set it to javascript, not jsx, so all the images are mangled, on top of it there's a bug i oversaw. It means i have to go through all the trouble again, preparing code in the editor so that it looks good even though prettier wants it to stretch, making sure all images have the same width (something i couldn't find out how to do with the settings, so i inserted a long blank-space line in them), etc.

If you could link to an image generator service that creates the png on the fly with some caching maybe, that would make it so much easier to maintain a series of snippets ...

![](https://png.carbon.now.sh?code=...&language=jsx&theme=dracula)

Or even better if it could point to a plain-text url

![](https://png.carbon.now.sh?url=raw.githubusercontent.com/username/project/master/examples/demo.js&language=jsx&theme=dracula)

@haze
Copy link

@haze haze commented Feb 26, 2018

Hi, I kinda wanted to use carbon for auto screenshotting images of my code whenever I posted them into an IO service. I decided to self host an API I wrote using puppeteer. I know it's a bit basic as of now, but I want to know if anyone wants to help with PRs or issues. (this is my first node project btw)

Repo Here

EDIT: Currently a lot of the features are supported but some issues like long typing times (because puppeteer types it out char by char and not pasting the code into the box) and drop shadow configuration aren't there yet. You can still however use code, set background colors and padding and more.

EDIT 2: Just realized I could use the code endpoint for using code, will add and update when I get home. This should reduce the time by a big %.

@deadcoder0904
Copy link
Author

@deadcoder0904 deadcoder0904 commented Apr 14, 2018

The Image generated via Carbon is awesome. But its not good for accessibility & I think blind people would not be able to read the code so for that I think a Service where we can embed beautiful looking code with colour formatting, themes but still accessible.

Something like CodePen, CodeSandbox or Github Gist but just that you get beautiful looking code & can copy/paste the code & its still accessible.

I just hope this doesn't overload your server though. Or as this is an open source project maybe someone like Now would give it for free. Just an idea. Not sure how embedding works.

@thebetterjort
Copy link

@thebetterjort thebetterjort commented Apr 26, 2018

Running carbon locally in docker and outputting our company code automatically to our document server would be a killer feature. Devs won't do this thing by themselves and we will need to automate this process. Great for versioning, and onboarding.

@popey456963
Copy link

@popey456963 popey456963 commented Aug 3, 2018

I'm currently using it to embed code automatically in chat clients (like Discord, Whatsapp, etc):

Since most clients don't support embeds, I would find an API useful.

@mittalyashu
Copy link
Contributor

@mittalyashu mittalyashu commented Aug 16, 2018

What's the progress in the Carbon API?

@flxwu
Copy link

@flxwu flxwu commented Sep 26, 2018

Hey, we would like to use Carbon via an API for the 30-seconds projects aswell! Is there any progress on this?

@cawa-93

This comment has been minimized.

1 similar comment
@alxvgt

This comment has been minimized.

@mittalyashu
Copy link
Contributor

@mittalyashu mittalyashu commented Mar 3, 2019

Why not send a file using API? Instead of sending data in JSON format or inside the URL.

The concept with handling the file it start forward the user can send a POST request to the API and carbon can read the content inside file and return the beautiful formatted code in the form of image.

Benefits

  1. Data handling in files is easy we can add 2 lines or 1000 lines of code.
  2. Implement file handling inside carbon can bring new by drag and drop file directly inside carbon website
  3. Carbon doesn't support all the Prettier features yet, but uploading a file which is already formatted locally can solve a big problem.
  4. Carbon doesn't have to auto decide the language type if there is a file type extension along with the file.

@mfix22

@axetroy
Copy link

@axetroy axetroy commented Mar 19, 2019

One year has passed

Is there any plan for this API? Is there anyone to implement it?

@Jeepeo
Copy link

@Jeepeo Jeepeo commented Apr 1, 2019

@briandennis Is there any talks about API ? This is open for a year Now

@BaileyJM02
Copy link

@BaileyJM02 BaileyJM02 commented Apr 16, 2019

I opened a discussion about this on Spectrum the other day: https://spectrum.chat/carbon-now/general/allowed-to-write-an-api-in-go~33b1fe22-1564-48e5-b189-50c960ccc347

@mfix22
Copy link
Contributor

@mfix22 mfix22 commented Apr 16, 2019

Hey all,
I know this issue has been open for a long time, but we have not been ignoring it — rather we have been cultivating a plan for the future of Carbon.

The goal of Carbon is simple: to make sharing snippets of code easier and more enjoyable. An API will definitely help further that goal.

The API will enable:

  • Programmatically generating screenshots in your servers and applications
  • Creating <img /> tags using a Carbon URL as it’s src
  • Accessing Carbon snippets on your domain (CORS access)

I will post a more complete progress update soon, but I just wanted to say that we are working on it!

...more soon

@RohitMidha23
Copy link
Contributor

@RohitMidha23 RohitMidha23 commented Jun 6, 2019

@mfix22 any developments on the API?

@ashifa454
Copy link

@ashifa454 ashifa454 commented Jul 7, 2019

@mfix22 whats the progress on this, I wanted to contribute on this.

@mfix22
Copy link
Contributor

@mfix22 mfix22 commented Jul 8, 2019

Hey all, we are working on a bunch of new features on this front, which will start launching soon. Many of these details are non-technical (happy to discuss privately or in another thread).

I apologize for the continued delay. We have wanted to support this feature for a long time now, and we hope that time comes to an end soon.

@skayo
Copy link

@skayo skayo commented Jul 10, 2019

Need the API as well for a project.
When can we expect it to be released?

@mfix22 mfix22 changed the title Feature Request: Carbon as an API Carbon as an API Dec 9, 2019
@KalobTaulien
Copy link

@KalobTaulien KalobTaulien commented Mar 21, 2020

Looks like a lot of excitement around this. But it's now March 2020 and I'm wondering if this issue could be closed with no progress?

@mfix22
Copy link
Contributor

@mfix22 mfix22 commented Mar 23, 2020

@KalobTaulien there has been progress on this feature, so I am going to keep this issue open, especially since this is something we really would like to support.

Releasing it is not a matter of engineering effort, but a question of sustaining the cost of it into the future. We want to make sure the cost does not damage the sustainability of Carbon and its community.

@petersolopov
Copy link

@petersolopov petersolopov commented May 10, 2020

Hi everyone! @mfix22 thanks for the great project!

Carbonara is an attempt to create API for carbon. Check example. You can use exported carbon config for customizing images via API.

The project at the beginning and any suggestions are welcome!

@KalobTaulien
Copy link

@KalobTaulien KalobTaulien commented May 17, 2020

@petersolopov this works REALLY well, thank you!

@cyberboysumanjay
Copy link

@cyberboysumanjay cyberboysumanjay commented May 29, 2020

I was learning Pyppeteer so thought of writing an API using Python and Flask.
Check out Carbon-API

@cyberpirate92
Copy link

@cyberpirate92 cyberpirate92 commented Jul 5, 2020

Trying to create something similar with code2img, although I must say Carbonara looks a lot better than my hackish version.

Also check out Themeify, A Google chrome extension that uses code2img API to generate images directly from webpages.

@CrackleCreeper
Copy link

@CrackleCreeper CrackleCreeper commented May 7, 2021

So, I wanted to use this to convert code to an image and send it on discord. Any api's to use with nodejs?

@kelsny
Copy link

@kelsny kelsny commented May 7, 2021

you can use node-fetch or some other http client to interact with carbon's api

@mfix22
Copy link
Contributor

@mfix22 mfix22 commented May 22, 2021

Hey folks, Carbon has always had an API, which you can see if you generate a screenshot using Safari. It works by passing an encoded JSON blob to https://carbon.now.sh/api/image.

I really would like to open-source the API, but I just haven't had time to accurately document it.

Hopefully I'll have time to release the first class-API soon.

@adasq
Copy link

@adasq adasq commented Jul 5, 2021

I created some utility, which returns a blob with a image (generated by carbon.now.sh) based on github code snippet:
https://github.com/adasq/github-code-screenshot.
Live preview here:
https://github-code-screenshot.herokuapp.com/

@tycrek
Copy link

@tycrek tycrek commented Jul 26, 2021

I just haven't had time to accurately document it.

@mfix22 I'd be more than happy to help with this, so long as I know which file(s) needs to be documented (I assume this one? https://github.com/carbon-app/carbon/blob/main/api/image/index.js)

@mfix22
Copy link
Contributor

@mfix22 mfix22 commented Aug 14, 2021

@mfix22 I'd be more than happy to help with this, so long as I know which file(s) needs to be documented (I assume this one? https://github.com/carbon-app/carbon/blob/main/api/image/index.js)

Yes 👍

@carbon-app carbon-app deleted a comment from jacobmstein Oct 13, 2021
@carbon-app carbon-app deleted a comment from jacobmstein Nov 24, 2021
@hashlash
Copy link

@hashlash hashlash commented Jan 17, 2022

Any update on this? @tycrek @mfix22

I've successfully tried the API with some catches (I'm not really familiar with Next.js code):

  • Only for GitHub gists, can't pass the code directly yet.
  • Can't pass the styling configuration yet.
  • I don't understand the auth code. I tried using a POST request with empty Origin and Authorization headers.

Btw, the code has moved to pages/api/image/[id].js since a327b44.

@DeveloperBlue
Copy link

@DeveloperBlue DeveloperBlue commented Feb 6, 2022

Would it be possible to generate an embed to a github gist and pass theme and background color parameters to it?
e.g. https://carbon.now.sh/<gist-id>?theme=monokai&backgroundColor=e55555 via the api?

Would be great for embedding in Medium posts

@mfix22
Copy link
Contributor

@mfix22 mfix22 commented Feb 8, 2022

Would it be possible to generate an embed to a github gist and pass theme and background color parameters to it? e.g. https://carbon.now.sh/<gist-id>?theme=monokai&backgroundColor=e55555 via the api?

Would be great for embedding in Medium posts

@DeveloperBlue This is already a supported feature. 👍 E.g. https://carbon.now.sh/embed/3208813b324d82a9ebd197e4b1c3bae8?bg=blue

@DeveloperBlue
Copy link

@DeveloperBlue DeveloperBlue commented Feb 8, 2022

Would it be possible to generate an embed to a github gist and pass theme and background color parameters to it? e.g. https://carbon.now.sh/<gist-id>?theme=monokai&backgroundColor=e55555 via the api?
Would be great for embedding in Medium posts

@DeveloperBlue This is already a supported feature. 👍 E.g. https://carbon.now.sh/embed/3208813b324d82a9ebd197e4b1c3bae8?bg=blue

Fantastic, is there any API documentation I can find for this and other parameters? I can't seem to get https://carbon.now.sh/embed/3208813b324d82a9ebd197e4b1c3bae8?bg=0077db&theme=nord working.

@carbon-app carbon-app locked and limited conversation to collaborators Feb 19, 2022
@mfix22 mfix22 converted this issue into discussion #1340 Feb 19, 2022

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Projects
None yet
Development

No branches or pull requests