Open-reSource · julien-deramond · Sep 19, 2024 · Sep 19, 2024
diff --git a/src/components/ContentImage.astro b/src/components/ContentImage.astro
@@ -0,0 +1,19 @@
+---
+import { Image } from 'astro:assets';
+---
+<div>
+  <Image src={Astro.props.src} alt={Astro.props.alt} width={Astro.props.width} height={Astro.props.height} />
+</div>
+
+<style>
+  div {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: center;
+  }
+
+  img {
+    border-radius: .5rem;
+  }
+</style>
diff --git a/src/content/docs/about-author/index.mdx b/src/content/docs/about-author/index.mdx
@@ -9,11 +9,12 @@ head:
       property: "og:type"
       content: "website"
 ---
+import { Image } from 'astro:assets';
 import Button from '../../../components/Button.astro'
 import FooterLink from '../../../components/FooterLink.astro'
 
 <div class="rounded-image">
-  <img src="/author-profile.jpg" />
+  <Image src="/author-profile.jpg" alt="" width="96" height="96" />
 </div>
 
 <p class="lead">Software front-end engineer at <a href="https://www.orange.com">Orange</a> in Paris, France. Tech lead of <a href="https://system.design.orange.com">Orange Design System</a> and its web framework <a href="https://boosted.orange.com/">Boosted</a> (fork of <a href="https://getbootstrap.com/">Bootstrap</a>). Also <a href="https://getbootstrap.com/">Bootstrap</a> contributor since 2021, and core team member since 2022.</p>

diff --git a/src/content/docs/articles/can-i-take-this-issue.mdx b/src/content/docs/articles/can-i-take-this-issue.mdx
@@ -11,6 +11,7 @@ tags:
   - Contribution
 ---
 import Chat from '../../../components/Chat.astro'
+import ContentImage from "../../../components/ContentImage.astro";
 import ShowcaseGitHubRepo from '../../../components/ShowcaseGitHubRepo.astro'
 
 <p class="lead">Open-source software development is a collaborative effort that relies on volunteers to contribute to the project. Contributors have different skill levels and come from various backgrounds. As such, project maintainers have a crucial role in ensuring that the contributions received are of high quality and meet the project's goals. One way maintainers do this is by providing clear guidelines on how contributors can submit their work. Unfortunately, contributors don't always take the time to read these guidelines, and maintainers don't always assign issues, which can lead to confusion and frustration on both sides. In this article, we'll explore the issue of unassigned contributions and discuss what can be done to address it.</p>
@@ -252,7 +253,7 @@ If you are maintaining OSS projects or communities on different platforms, you m
 
 Writing this article was the occasion to try creating a **semi-automation tool based on labels**. Maintainer can add a "we don't assign issues" label to an issue right after a comment asking to be assigned. This label will trigger a GitHub action that will write a personalized comment explaining that the repo is not handled that way, and then remove this label automatically. We could even hide the original contributor's comment in the process.
 
-<img src="https://user-images.githubusercontent.com/17381666/236413271-12b7b2f2-12b1-4498-99d0-19db8b4b97d8.png" aria-hidden="true" />
+<ContentImage src="https://user-images.githubusercontent.com/17381666/236413271-12b7b2f2-12b1-4498-99d0-19db8b4b97d8.png" alt="" width="720" height="274" />
 
 The source code of this experiment is available on GitHub via the card below.
 

diff --git a/src/content/docs/articles/display-your-sponsors-in-your-github-readmes.mdx b/src/content/docs/articles/display-your-sponsors-in-your-github-readmes.mdx
@@ -9,6 +9,7 @@ tags:
   - Sponsors
   - Tutorial
 ---
+import ContentImage from "../../../components/ContentImage.astro";
 import ShowcaseGitHubRepo from '../../../components/ShowcaseGitHubRepo.astro'
 
 <p class="lead">A simple nice way to reward your sponsors could be to showcase them in the projects you create on GitHub. And what a better place to do that than in your READMEs? This article will show you how to do that easily!</p>
@@ -176,6 +177,6 @@ For example, you can use the `sponsors.svg` image in your `README.md` file by ad
 
 We don't have (yet) any sponsors specifically for Open &lcub;re&rcub;Source, so you can check my own personal sponsors list generated by following this article:
 
-<img src="https://cdn.jsdelivr.net/gh/julien-deramond/static/sponsors.svg" alt="Julien Déramond sponsors list" />
+<ContentImage src="https://cdn.jsdelivr.net/gh/julien-deramond/static/sponsors.svg" alt="Julien Déramond sponsors list" width="720" height="272" />
 
 And find it integrated in one of my projects: https://github.com/julien-deramond/update-issue-body#sponsors.
diff --git a/src/content/docs/articles/get-real-time-github-stars-notifications-in-discord.mdx b/src/content/docs/articles/get-real-time-github-stars-notifications-in-discord.mdx
@@ -20,6 +20,8 @@ head:
       property: "og:type"
       content: "website"
 ---
+import ContentImage from "../../../components/ContentImage.astro";
+
 <p class="lead">After the refactoring of this website, folks (maybe you) started to spread the word about it. The statistics started to rise a little bit, and we discovered along the way that the repository holding this website also started to receive some new stars. To our knowledge, there's no native way to get notified by GitHub when you receive stars on your repositories. So, we decided to do something about it!</p>
 
 We know, we know, tracking stars is a little bit linked to the gamification of the open source world, but to be honest, it's still a fun way to keep track of your project's popularity and engage with your community.
@@ -30,11 +32,11 @@ After a few times of tweaking and testing, we finally got it working! 🎉
 
 Here is the notification we received on our phone this afternoon:
 
-<img src="/images/get-real-time-github-stars-notifications-in-discord-1.png" alt="Screenshot of the mobile phone showing the Discord notification from the 'Open {re}Source Community' Discord space sent by 'GitHub Stars Bot'. The message is 'The repository has gained new stars! Previous: 60 → Total: 61'" />
+<ContentImage src="/images/get-real-time-github-stars-notifications-in-discord-1.png" alt="Screenshot of the mobile phone showing the Discord notification from the 'Open {re}Source Community' Discord space sent by 'GitHub Stars Bot'. The message is 'The repository has gained new stars! Previous: 60 → Total: 61'" width="458" height="133" />
 
 And when you click on the notification, here is how the notification appears on Discord, showing the new star count and the repository name:
 
-<img src="/images/get-real-time-github-stars-notifications-in-discord-2.png" alt="Screenshot of the Discord app showing the notification sent by a 'GitHub Stars Bot' app, containing a GitHub star avatar, and the text: 'The repository has gained new stars! Previous: 60 → Total: 61'" style="border-radius: 0.75rem" />
+<ContentImage src="/images/get-real-time-github-stars-notifications-in-discord-2.png" alt="Screenshot of the Discord app showing the notification sent by a 'GitHub Stars Bot' app, containing a GitHub star avatar, and the text: 'The repository has gained new stars! Previous: 60 → Total: 61'" width="458" height="166" />
 
 **Cool, right? Here's how it's been done!**
 

diff --git a/src/content/docs/articles/github-ghost-user.mdx b/src/content/docs/articles/github-ghost-user.mdx
@@ -9,15 +9,16 @@ The ghost user plays a vital role in maintaining repository integrity and contin
 tags:
   - GitHub
 ---
+import ContentImage from "../../../components/ContentImage.astro";
 import ShowcaseGitHubUser from '../../../components/ShowcaseGitHubUser.astro'
 
 <p class="lead">This morning, I woke up to a storm of 200+ GitHub notifications. My inbox, usually pristine, was drowning in a deluge of spams.</p>
 
 As I scrolled through, my screen filled with an overwhelming array of spam discussions.
 
-<img src="/images/github-ghost-user-1.png" alt="Screenshot of the GitHub interface showing a spam GitHub discussion with 'WATCH Kingdom of the Planet of the Apes FuLLMovie (.Free.)...' title, and a content matching this title, with big 'Watch now' and 'Download' buttons" />
+<ContentImage src="/images/github-ghost-user-1.png" alt="Screenshot of the GitHub interface showing a spam GitHub discussion with 'WATCH Kingdom of the Planet of the Apes FuLLMovie (.Free.)...' title, and a content matching this title, with big 'Watch now' and 'Download' buttons" width="720" height="570" />
 
-<img src="/images/github-ghost-user-2.png" alt="Screenshot of the GitHub interface showing a spam GitHub discussion with 'FREE-ROBUX-GENERATOR-2024-FREE-ROBUX-NEW-CODES-DAILY BONUS-[Jo)ztyr]' title, and a content matching this title, with links to get it" />
+<ContentImage src="/images/github-ghost-user-2.png" alt="Screenshot of the GitHub interface showing a spam GitHub discussion with 'FREE-ROBUX-GENERATOR-2024-FREE-ROBUX-NEW-CODES-DAILY BONUS-[Jo)ztyr]' title, and a content matching this title, with links to get it" width="720" height="386" />
 
 **OK, cool, we are being productive today! 200+ GitHub discussions to delete!**
 

diff --git a/...ent/docs/articles/github-marketplace-social-preview-for-your-github-actions.mdx b/...ent/docs/articles/github-marketplace-social-preview-for-your-github-actions.mdx
@@ -11,15 +11,17 @@ tags:
   - GitHub
   - GitHub Actions
 ---
+import ContentImage from "../../../components/ContentImage.astro";
+
 <p class="lead">You are finally ready to share your GitHub Action with the world. You have spent hours working on it, and now it is time to show it off. You open your favorite social media platform, start typing your post, link your GitHub Action on the GitHub Marketplace, click on send, and... your big face is on people's screen!</p>
 
-<img src="/images/github-marketplace-social-preview-for-your-github-actions-1.png" alt="Screenshot of the rendering of the social media preview of the link of my GitHub Action on the GitHub Marketplace with my big face on it" />
+<ContentImage src="/images/github-marketplace-social-preview-for-your-github-actions-1.png" alt="Screenshot of the rendering of the social media preview of the link of my GitHub Action on the GitHub Marketplace with my big face on it" width="458" height="327" />
 
 This is what happened to me when I shared the [marketplace link of my GitHub Action named "Update Issue Body"](https://github.com/marketplace/actions/update-issue-body).
 
 To be fair, the rendering is different and way better if one shares a link to the [GitHub Action repository itself](https://github.com/julien-deramond/update-issue-body).
 
-<img src="/images/github-marketplace-social-preview-for-your-github-actions-2.png" alt="Screenshot of the rendering of the social media preview of the link of my GitHub Action repository that shows useful information" />
+<ContentImage src="/images/github-marketplace-social-preview-for-your-github-actions-2.png" alt="Screenshot of the rendering of the social media preview of the link of my GitHub Action repository that shows useful information" width="449" height="318" />
 
 ## What Can We Do About It?
 
@@ -31,19 +33,19 @@ At the times of writing, images are recommended to be 1280x640px for best displa
 
 While not visible in the documentation itself, GitHub provides in the settings of your repository a template for the social preview image which is pretty handy to get started and to have the safe zones.
 
-<img src="/images/github-marketplace-social-preview-for-your-github-actions-3.png" alt="Repo card template provided by GitHub with safe zones" />
+<ContentImage src="/images/github-marketplace-social-preview-for-your-github-actions-3.png" alt="Repo card template provided by GitHub with safe zones" width="720" height="360" />
 
 I am not a designer, so I used the template to create my social preview image which has the following rendering:
 
-<img src="/images/github-marketplace-social-preview-for-your-github-actions-4.png" alt="Social preview of my GitHub Action based on the repo card template provided by GitHub with my profile picture, the project name as a title, a description of the project, and my GitHub username" class="border" />
+<ContentImage src="/images/github-marketplace-social-preview-for-your-github-actions-4.png" alt="Social preview of my GitHub Action based on the repo card template provided by GitHub with my profile picture, the project name as a title, a description of the project, and my GitHub username" width="720" height="360" />
 
 ## How To Check If It Works?
 
 After having uploaded the image to your repository, you can check if it works by using online tools like [opengraph.xyz](https://www.opengraph.xyz/).
 
 Whether you use the marketplace link or the repository link, you should see the social preview image.
 
-<img src="/images/github-marketplace-social-preview-for-your-github-actions-5.png" alt="Screenshot of the rendering provided by opengraph.xyz when my new social preview image has been uploaded which works well with all social media platforms" class="border" />
+<ContentImage src="/images/github-marketplace-social-preview-for-your-github-actions-5.png" alt="Screenshot of the rendering provided by opengraph.xyz when my new social preview image has been uploaded which works well with all social media platforms" width="446" height="1272" />
 
 ## Find This Template On Figma
 

diff --git a/...nt/docs/articles/how-to-create-a-code-of-conduct-for-an-open-source-project.mdx b/...nt/docs/articles/how-to-create-a-code-of-conduct-for-an-open-source-project.mdx
@@ -10,6 +10,8 @@ tags:
   - Community
   - Contribution
 ---
+import ContentImage from "../../../components/ContentImage.astro";
+
 <p class="lead">Creating a code of conduct is an essential step in ensuring a safe and welcoming community for an open-source project. In many cases, the code of conduct may be created before the community even exists. This can be beneficial as it ensures that the project starts with clear expectations and guidelines for behavior. The process of creating a code of conduct involves several steps, including defining goals and scope, researching existing codes of conduct, drafting the document, reviewing and approving the document, publishing and communicating the code of conduct, and regularly reviewing and updating the document.</p>
 
 ## Why do we need one?
@@ -93,16 +95,16 @@ GitHub offers guidance on creating a Code of Conduct through templates available
 - Contributor Covenant;
 - Citizen Code Of Conduct;
 
-<img src="/images/add-a-code-of-conduct-to-your-project-1.png" alt="Screenshot of GitHub interface showing what happens at this stage of the tutorial" />
+<ContentImage src="/images/add-a-code-of-conduct-to-your-project-1.png" alt="Screenshot of GitHub interface showing what happens at this stage of the tutorial" width="720" height="190" />
 
 You can then complete your code of conduct by filling out a simple form with the required information.
 
-<img src="/images/add-a-code-of-conduct-to-your-project-2.png" alt="Screenshot of GitHub interface showing Contributor Covenant and a form on the right hand side to fill out the contact method and a button to review and submit the form." />
-<img src="/images/add-a-code-of-conduct-to-your-project-3.png" alt="Screenshot of GitHub interface showing Citizen Code of Conduct and a form on the right hand side with different fields and a button to review and submit the form." />
+<ContentImage src="/images/add-a-code-of-conduct-to-your-project-2.png" alt="Screenshot of GitHub interface showing Contributor Covenant and a form on the right hand side to fill out the contact method and a button to review and submit the form." width="720" height="482" />
+<ContentImage src="/images/add-a-code-of-conduct-to-your-project-3.png" alt="Screenshot of GitHub interface showing Citizen Code of Conduct and a form on the right hand side with different fields and a button to review and submit the form." width="720" height="502" />
 
 After reviewing your changes, submit them and a `CODE_OF_CONDUCT.md` file will be created at the root level of your repository. You can then view a special display by visiting your repository. An example of this rendering can be seen in the [GitHub Community repository](https://github.com/community/community).
 
-<img src="/images/add-a-code-of-conduct-to-your-project-4.png" alt="Screenshot of GitHub interface showing the rendering of the Code of conduct reference." />
+<ContentImage src="/images/add-a-code-of-conduct-to-your-project-4.png" alt="Screenshot of GitHub interface showing the rendering of the Code of conduct reference." width="285" height="65" />
 
 This article may be obsolete in the future regarding some details, please check the latest version of the GitHub documentation for [Adding a code of conduct to your project](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-code-of-conduct-to-your-project).
 
@@ -118,7 +120,7 @@ If you have selected the Contributor Covenant as your code of conduct, there is
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](code_of_conduct.md)
 ```
 
-<img src="https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg" alt="Contributor Covenant Badge" />
+<ContentImage src="https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg" alt="Contributor Covenant Badge" width="156" height="20" />
 
 #### Reusable Code of Conduct in GitHub
 

diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
@@ -30,6 +30,7 @@ head:
       property: "og:type"
       content: "website"
 ---
+import { Image } from 'astro:assets';
 import Button from '../../components/Button.astro';
 
 <hr style="margin: 0; padding: 0" />
@@ -61,7 +62,7 @@ import Button from '../../components/Button.astro';
         </div>
       </div>
       <div class="homepage-img">
-        <img src="/images/homepage-showcase.webp" width="500" height="400" alt="" />
+        <Image src="/images/homepage-showcase.webp" width="500" height="400" alt="" />
       </div>
     </div>
   </div>
@@ -77,7 +78,7 @@ import Button from '../../components/Button.astro';
           <div class="camera"></div>
           <div class="display">
             <div class="artboard artboard-demo phone-1">
-              <img src="/images/homepage-guide.webp" width="320" height="518" alt="" />
+              <Image src="/images/homepage-guide.webp" width="320" height="518" alt="" />
             </div>
           </div>
         </div>
@@ -111,7 +112,7 @@ import Button from '../../components/Button.astro';
           <div class="camera"></div>
           <div class="display">
             <div class="artboard artboard-demo phone-1">
-              <img src="/images/homepage-articles.webp" width="320" height="512" alt="" />
+              <Image src="/images/homepage-articles.webp" width="320" height="512" alt="" />
             </div>
           </div>
         </div>