From a3e43550f1c032b2a27684c0026783a26b273656 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 19 Sep 2024 20:36:05 +0200 Subject: [PATCH] feat: make images rounded and centered in the guide and articles --- src/components/ContentImage.astro | 19 +++++++++++++++++++ src/content/docs/about-author/index.mdx | 3 ++- .../docs/articles/can-i-take-this-issue.mdx | 3 ++- ...y-your-sponsors-in-your-github-readmes.mdx | 3 ++- ...-github-stars-notifications-in-discord.mdx | 6 ++++-- .../docs/articles/github-ghost-user.mdx | 5 +++-- ...social-preview-for-your-github-actions.mdx | 12 +++++++----- ...-of-conduct-for-an-open-source-project.mdx | 12 +++++++----- src/content/docs/index.mdx | 7 ++++--- 9 files changed, 50 insertions(+), 20 deletions(-) create mode 100644 src/components/ContentImage.astro diff --git a/src/components/ContentImage.astro b/src/components/ContentImage.astro new file mode 100644 index 00000000..d7cce8d5 --- /dev/null +++ b/src/components/ContentImage.astro @@ -0,0 +1,19 @@ +--- +import { Image } from 'astro:assets'; +--- +
+ {Astro.props.alt} +
+ + diff --git a/src/content/docs/about-author/index.mdx b/src/content/docs/about-author/index.mdx index 969b7ce3..9b19ebe5 100644 --- 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'
- +

Software front-end engineer at Orange in Paris, France. Tech lead of Orange Design System and its web framework Boosted (fork of Bootstrap). Also Bootstrap contributor since 2021, and core team member since 2022.

diff --git a/src/content/docs/articles/can-i-take-this-issue.mdx b/src/content/docs/articles/can-i-take-this-issue.mdx index c986fc47..606c303e 100644 --- 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'

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.

@@ -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. - + 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 index 8aa9c78d..89e5009b 100644 --- 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'

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!

@@ -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 {re}Source, so you can check my own personal sponsors list generated by following this article: -Julien Déramond sponsors list + 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 index 968242b0..313d0e0c 100644 --- 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"; +

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!

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: -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' + And when you click on the notification, here is how the notification appears on Discord, showing the new star count and the repository name: -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' + **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 index 18c41823..ab1e22d1 100644 --- 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'

This morning, I woke up to a storm of 200+ GitHub notifications. My inbox, usually pristine, was drowning in a deluge of spams.

As I scrolled through, my screen filled with an overwhelming array of spam discussions. -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 + -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 + **OK, cool, we are being productive today! 200+ GitHub discussions to delete!** diff --git a/src/content/docs/articles/github-marketplace-social-preview-for-your-github-actions.mdx b/src/content/docs/articles/github-marketplace-social-preview-for-your-github-actions.mdx index 5a021dc0..e8426021 100644 --- a/src/content/docs/articles/github-marketplace-social-preview-for-your-github-actions.mdx +++ b/src/content/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"; +

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!

-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 + 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). -Screenshot of the rendering of the social media preview of the link of my GitHub Action repository that shows useful information + ## What Can We Do About It? @@ -31,11 +33,11 @@ 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. -Repo card template provided by GitHub with safe zones + I am not a designer, so I used the template to create my social preview image which has the following rendering: -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 + ## How To Check If It Works? @@ -43,7 +45,7 @@ After having uploaded the image to your repository, you can check if it works by Whether you use the marketplace link or the repository link, you should see the social preview image. -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 + ## Find This Template On Figma diff --git a/src/content/docs/articles/how-to-create-a-code-of-conduct-for-an-open-source-project.mdx b/src/content/docs/articles/how-to-create-a-code-of-conduct-for-an-open-source-project.mdx index feb5b865..2c50c13d 100644 --- a/src/content/docs/articles/how-to-create-a-code-of-conduct-for-an-open-source-project.mdx +++ b/src/content/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"; +

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.

## 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; -Screenshot of GitHub interface showing what happens at this stage of the tutorial + You can then complete your code of conduct by filling out a simple form with the required information. -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. -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. + + 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). -Screenshot of GitHub interface showing the rendering of the Code of conduct reference. + 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) ``` -Contributor Covenant Badge + #### Reusable Code of Conduct in GitHub diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index 7f2a7397..47818960 100644 --- 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';
@@ -61,7 +62,7 @@ import Button from '../../components/Button.astro';
- +
@@ -77,7 +78,7 @@ import Button from '../../components/Button.astro';
- +
@@ -111,7 +112,7 @@ import Button from '../../components/Button.astro';
- +