Generate a preview image for each lesson under content.breatheco.de, that preview image needs to display when the article is shared through social media.
Open the project in gitpod (recommended) or clone it to your local computer.
Run the project and get familiar with it, all the markdown files are under the ./src/content folder. To get more familiar with the project you can try adding a new markdown file under the content folder, and you will see how it becomes immediately a new article published, you can find all published articles on the website home screen. Please use one of the current markdown files as template, because you need to add some properties to avoid errors.
Once you understand how the project was built, create a node.js script that scans for all the markdown files under the ./src/content folder and look for only the files that contain no thumb property on their front-matter section.
If the article has not thumb, please generate one using this url https://content.breatheco.de/thumb/?slug=building-apis-with-python-flask
Programmatically take a picture of the URL using this Screenshot Machine API and it will generate a png picture of the article preview.
Programmatically Download that image and upload it under the ./src/assets/thumbs folder.
Programmatically update the markdown file and add a new thumb property into the front-matter that specifies the path to the recently downloaded thumb.
When a lesson is shared in social media like Twitter, Facebook, etc. It needs to contain some metatags to be able to generate a website preview, here is a brief explanation about that.
On this project, every article is created as a markdown file on this folder, Gatsby.js framework automatically reads all the markdown files and generates a different HTML and public link URL for each lesson, for example:
The following markdown file:
https://github.com/breatheco-de/content/blob/master/src/content/lesson/building-your-github-profile-and-reputation.md
Generates the following public URL:
https://content.breatheco.de/lesson/building-your-github-profile-and-reputation
If the markdown file contains on the front-matter a property called thumb, it will be considered its preview image for social media, here is a markdown example that use a thumb property on its front-matter:
Aside from the published article, this project is also able to generate an HTML thumbnail of the article, for example:
This article:
https://content.breatheco.de/lesson/building-apis-with-python-flask
Has this thumbnail:
https://content.breatheco.de/thumb/?slug=building-apis-with-python-flask
Note how the last part of both URL are the same string building-apis-with-python-flask.
Hrs:10
🔥 Objective
Generate a preview image for each lesson under content.breatheco.de, that preview image needs to display when the article is shared through social media.
For example if you share this article in linkedin, you will se how this image will show as preview... try it by clicking here.
💻 Instructions
./src/contentfolder. To get more familiar with the project you can try adding a new markdown file under the content folder, and you will see how it becomes immediately a new article published, you can find all published articles on the website home screen. Please use one of the current markdown files as template, because you need to add some properties to avoid errors../src/contentfolder and look for only the files that contain nothumbproperty on their front-matter section.https://content.breatheco.de/thumb/?slug=building-apis-with-python-flask./src/assets/thumbsfolder.thumbproperty into the front-matter that specifies the path to the recently downloaded thumb.👩🏽🏫 Explanation
All of BreatheCode's lessons/articles are published under content.breatheco.de, you can find the repository here.
When a lesson is shared in social media like Twitter, Facebook, etc. It needs to contain some metatags to be able to generate a website preview, here is a brief explanation about that.
On this project, every article is created as a markdown file on this folder, Gatsby.js framework automatically reads all the markdown files and generates a different HTML and public link URL for each lesson, for example:
If the markdown file contains on the front-matter a property called
thumb, it will be considered its preview image for social media, here is a markdown example that use a thumb property on its front-matter:Aside from the published article, this project is also able to generate an HTML thumbnail of the article, for example:
Note how the last part of both URL are the same string
building-apis-with-python-flask.