Skip to content

Commit

Permalink
chore: add ProjectThumbnail Astro component (#685)
Browse files Browse the repository at this point in the history
  • Loading branch information
@julien-deramond
julien-deramond committed May 14, 2024
1 parent 966de0a commit a1ad90d
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 83 deletions.
26 changes: 26 additions & 0 deletions src/components/ProjectThumbnail.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
export interface Props {
description: string,
env: string,
img: string,
repo: string
}
const { description, env, img, repo } = Astro.props;
---

<div class="card w-full bg-base-100 xs:shadow-xl mb-12 xs:mb-0 not-prose">
<div class="card-body p-0 xs:p-8 list-none">
<div class="flex justify-between">
<h2 class="card-title text-xl xs:text-4xl text-base-content">
<a href=`https://github.com/${env}/${repo}` class="stretched-link hover:underline font-normal break-all">
<span class="max-w-[50px]">{env}/</span>
<br/>
<strong class="font-bold max-w-[50px]">{repo}</strong>
</a>
</h2>
<img src=`https://avatars.githubusercontent.com/u/${img}?v=4` aria-hidden="true" class="w-[50px] h-[50px] xs:w-[100px] xs:h-[100px] rounded-xl" />
</div>
{description && <p>{description}</p>}
</div>
</div>
32 changes: 4 additions & 28 deletions src/content/articles/can-i-take-this-issue.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ lastUpdateDate: '2023-05-17'
title: 'Can I Take This Issue?'
---

import ProjectThumbnail from '../../components/ProjectThumbnail.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>

## So Can I Take It or Not?
Expand Down Expand Up @@ -186,20 +188,7 @@ Everything can start from the creation of these issues with the issues templates

At the time of writing, GitHub doesn't provide any options to add some Markdown content at the end of the issues when using issue templates. However, you can use GitHub Actions to do that. Here is an example of a GitHub Action that adds a message for newly created issues:

<div class="card w-full bg-base-100 xs:shadow-xl mb-12 xs:mb-0 not-prose">
<div class="card-body p-0 xs:p-8 list-none">
<div class="flex justify-between">
<h2 class="card-title text-xl xs:text-4xl text-base-content">
<a href="https://github.com/Open-reSource/labs-append-markdown-to-issues" class="stretched-link hover:underline font-normal break-all">
<span class="max-w-[50px]">Open-reSource/</span><br/>
<strong class="font-bold max-w-[50px]">labs-append-markdown-to-issues</strong>
</a>
</h2>
<img src="https://avatars.githubusercontent.com/u/129324099?s=200&v=4" aria-hidden="true" class="w-[50px] h-[50px] xs:w-[100px] xs:h-[100px] rounded-xl" />
</div>
<p>[Labs] Automatically append Markdown to issues</p>
</div>
</div>
<ProjectThumbnail env="Open-reSource" repo="labs-append-markdown-to-issues" img="129324099" description="[Labs] Automatically append Markdown to issues" />

An infinite way of managing labels is possible. Let's imagine, for example, a "to analyze" label that can be picked up only by a core team member. When this core team member analyzed the issue and provided expectations, clarity, and guidance, the label could be transformed into an "analyzed" label, and a new "ready for dev" label could be applied combined to "high priority" and "low complexity" labels, and a "version 12" label, "bug" or "feature", "core team" if it is reserved for the core team, or "pr welcome" when it is OK for external contributors to work on it. When doing that, contributors can start to help or not, filter the backlog by labels, and the core team can focus on the most important issues. If the workflow is automated, the issue can go to one or another project, be in a roadmap, etc. This is just an example, but you can imagine how powerful it can be.

Expand Down Expand Up @@ -266,20 +255,7 @@ Writing this article was the occasion to try creating a <strong>semi-automation

The source code of this experiment is available on GitHub via the card below.

<div class="card w-full bg-base-100 xs:shadow-xl mb-12 xs:mb-0 not-prose">
<div class="card-body p-0 xs:p-8 list-none">
<div class="flex justify-between">
<h2 class="card-title text-xl xs:text-4xl text-base-content">
<a href="https://github.com/Open-reSource/labs-we-don-t-assign-issues" class="stretched-link hover:underline font-normal break-all">
<span class="max-w-[50px]">Open-reSource/</span><br/>
<strong class="font-bold max-w-[50px]">labs-we-don-t-assign-issues</strong>
</a>
</h2>
<img src="https://avatars.githubusercontent.com/u/129324099?s=200&v=4" aria-hidden="true" class="w-[50px] h-[50px] xs:w-[100px] xs:h-[100px] rounded-xl" />
</div>
<p>[Labs] "we don't assign issues" label that writes a comment and is then auto-deleted</p>
</div>
</div>
<ProjectThumbnail env="Open-reSource" repo="labs-we-don-t-assign-issues" img="129324099" description="[Labs] &quot;we don't assign issues&quot; label that writes a comment and is then auto-deleted" />

Unfortunately, if there are intermediate comments before maintainers have the time to use this label, it won’t work. And it stays semi-automatic.

Expand Down
16 changes: 3 additions & 13 deletions src/content/articles/contrib-rocks.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,13 @@ lastUpdateDate: '2024-04-27'
title: 'contrib.rocks: Generate an Image of GitHub Repositories Top Contributors'
---

import ProjectThumbnail from '../../components/ProjectThumbnail.astro'

<p class="lead">[contrib.rocks](https://contrib.rocks/) is a an online tool that generates an image of the top contributors of a GitHub repository that can be embedded in any website or Markdown file; including its README file.</p>

It is completely free and maintained by Suguru Inatomi, a.k.a. [lacolaco](https://github.com/lacolaco). The source code is available on GitHub:

<div class="card w-full bg-base-100 xs:shadow-xl mb-12 xs:mb-0 not-prose">
<div class="card-body p-0 xs:p-8 list-none">
<div class="flex justify-between">
<h2 class="card-title text-xl xs:text-4xl text-base-content">
<a href="https://github.com/lacolaco/contributors-img" class="stretched-link hover:underline font-normal break-all">
<span class="max-w-[50px]">lacolaco/</span><br/>
<strong class="font-bold max-w-[50px]">contributors-img</strong>
</a>
</h2>
<img src="https://avatars.githubusercontent.com/u/1529180?v=4" aria-hidden="true" class="w-[50px] h-[50px] xs:w-[100px] xs:h-[100px] rounded-xl" />
</div>
</div>
</div>
<ProjectThumbnail env="lacolaco" repo="contributors-img" img="1529180" />

This service allows to give a visual representation of the top contributors of any GitHub repository.

Expand Down
32 changes: 4 additions & 28 deletions src/content/articles/display-your-sponsors-in-your-github-readmes.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,13 @@ lastUpdateDate: '2023-05-19'
title: 'Display Your Sponsors in Your GitHub READMEs'
---

import ProjectThumbnail from '../../components/ProjectThumbnail.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>

There are several ways to display your sponsors in your GitHub READMEs, but this article will focus on a single one by using [SponsorKit](https://github.com/antfu/sponsorkit) created by [Anthony Fu](https://github.com/antfu).

<div class="card w-full bg-base-100 xs:shadow-xl mb-12 xs:mb-0 not-prose">
<div class="card-body p-0 xs:p-8 list-none">
<div class="flex justify-between">
<h2 class="card-title text-xl xs:text-4xl text-base-content">
<a href="https://github.com/antfu/sponsorkit" class="stretched-link hover:underline font-normal break-all">
<span class="max-w-[50px]">antfu/</span><br/>
<strong class="font-bold max-w-[50px]">sponsorkit</strong>
</a>
</h2>
<img src="https://avatars.githubusercontent.com/u/11247099?v=4" aria-hidden="true" class="w-[50px] h-[50px] xs:w-[100px] xs:h-[100px] rounded-xl" />
</div>
<p>💖 Toolkit for generating sponsors images 😄</p>
</div>
</div>
<ProjectThumbnail env="antfu" repo="sponsorkit" img="11247099" description="💖 Toolkit for generating sponsors images 😄" />

**SponsorKit** is a toolkit for generating sponsors images that supports GitHub Sponsors, Open Collective, Patreon, and Afdian.

Expand All @@ -47,20 +36,7 @@ You can find more information about how to create a GitHub token in the [GitHub

In order to facilitate the process, we have created for you a template repository that you can use to create your own repository: https://github.com/Open-reSource/sponsorkit-starter.

<div class="card w-full bg-base-100 xs:shadow-xl mb-12 xs:mb-0 not-prose">
<div class="card-body p-0 xs:p-8 list-none">
<div class="flex justify-between">
<h2 class="card-title text-xl xs:text-4xl text-base-content">
<a href="https://github.com/Open-reSource/sponsorkit-starter" class="stretched-link hover:underline font-normal break-all">
<span class="max-w-[50px]">Open-reSource/</span><br/>
<strong class="font-bold max-w-[50px]">sponsorkit-starter</strong>
</a>
</h2>
<img src="https://avatars.githubusercontent.com/u/129324099?s=200&v=4" aria-hidden="true" class="w-[50px] h-[50px] xs:w-[100px] xs:h-[100px] rounded-xl" />
</div>
<p>Starter template for SponsorKit</p>
</div>
</div>
<ProjectThumbnail env="Open-reSource" repo="sponsorkit-starter" img="129324099" description="Starter template for SponsorKit" />

### From the Starter Template

Expand Down
17 changes: 3 additions & 14 deletions src/content/articles/repobeats.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ lastUpdateDate: '2024-04-02'
title: 'Repobeats: GitHub README analytics'
---

import ProjectThumbnail from '../../components/ProjectThumbnail.astro'

<p class="lead">[Repobeats](https://repobeats.axiom.co/) is a tool that provides analytics of a GitHub repository that can be embedded in any Markdown file; including its README file.</p>

It is completely free and maintained by [axiom.com](https://axiom.co/), but does not seem to be an open-source project as it is not referenced in [github.com/axiomhq](https://github.com/axiomhq).
Expand Down Expand Up @@ -56,20 +58,7 @@ Here is what it looks like for our [openresource.dev GitHub repository](https://

And here is the same kind of data, but on a more active repository like freeCodeCamp:

<div class="card w-full bg-base-100 xs:shadow-xl mb-12 xs:mb-0 not-prose">
<div class="card-body p-0 xs:p-8 list-none">
<div class="flex justify-between">
<h2 class="card-title text-xl xs:text-4xl text-base-content">
<a href="https://github.com/freeCodeCamp/freeCodeCamp" class="stretched-link hover:underline font-normal break-all">
<span class="max-w-[50px]">freeCodeCamp/</span><br/>
<strong class="font-bold max-w-[50px]">freeCodeCamp</strong>
</a>
</h2>
<img src="https://avatars.githubusercontent.com/u/9892522?v=4" aria-hidden="true" class="w-[50px] h-[50px] xs:w-[100px] xs:h-[100px] rounded-xl" />
</div>
<p>freeCodeCamp.org's open-source codebase and curriculum. Learn to code for free.</p>
</div>
</div>
<ProjectThumbnail env="freeCodeCamp" repo="freeCodeCamp" img="9892522" description="freeCodeCamp.org's open-source codebase and curriculum. Learn to code for free." />

![Alt](https://repobeats.axiom.co/api/embed/89be0a1a1c8f641c54f9234a7423e7755352c746.svg 'Repobeats analytics image for freeCodeCamp GitHub repository')

Expand Down

0 comments on commit a1ad90d

Please sign in to comment.