GitHub Explains the Open Graph Images

An explanation of those new GitHub social media images:

[…] our custom Open Graph image service is a little Node.js app that uses the GitHub GraphQL API to collect data, generates some HTML from a template, and pipes it to 


The post GitHub Explains the Open Graph Images appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

An explanation of those new GitHub social media images:

[…] our custom Open Graph image service is a little Node.js app that uses the GitHub GraphQL API to collect data, generates some HTML from a template, and pipes it to Puppeteer to “take a screenshot” of that HTML.

Jason Etcovich on The GitHub Blog in “A framework for building Open Graph images”

It’s so satisfying to produce templated images from HTML and CSS. It’s the perfect way to do social media images. If you’re doing it at scale like GitHub, there are a couple of nice tricks in here for speeding it up.

Direct Link to ArticlePermalink


The post GitHub Explains the Open Graph Images appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.


Print Share Comment Cite Upload Translate
APA
Chris Coyier | Sciencx (2024-03-29T14:31:04+00:00) » GitHub Explains the Open Graph Images. Retrieved from https://www.scien.cx/2021/07/29/github-explains-the-open-graph-images/.
MLA
" » GitHub Explains the Open Graph Images." Chris Coyier | Sciencx - Thursday July 29, 2021, https://www.scien.cx/2021/07/29/github-explains-the-open-graph-images/
HARVARD
Chris Coyier | Sciencx Thursday July 29, 2021 » GitHub Explains the Open Graph Images., viewed 2024-03-29T14:31:04+00:00,<https://www.scien.cx/2021/07/29/github-explains-the-open-graph-images/>
VANCOUVER
Chris Coyier | Sciencx - » GitHub Explains the Open Graph Images. [Internet]. [Accessed 2024-03-29T14:31:04+00:00]. Available from: https://www.scien.cx/2021/07/29/github-explains-the-open-graph-images/
CHICAGO
" » GitHub Explains the Open Graph Images." Chris Coyier | Sciencx - Accessed 2024-03-29T14:31:04+00:00. https://www.scien.cx/2021/07/29/github-explains-the-open-graph-images/
IEEE
" » GitHub Explains the Open Graph Images." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/07/29/github-explains-the-open-graph-images/. [Accessed: 2024-03-29T14:31:04+00:00]
rf:citation
» GitHub Explains the Open Graph Images | Chris Coyier | Sciencx | https://www.scien.cx/2021/07/29/github-explains-the-open-graph-images/ | 2024-03-29T14:31:04+00:00
https://github.com/addpipe/simple-recorderjs-demo