feat: add contributions page

Signed-off-by: Matej Focko <mfocko@redhat.com>
This commit is contained in:
Matej Focko 2023-07-19 17:04:53 +02:00
parent f7a028db6f
commit ab4ba212d1
Signed by: mfocko
GPG key ID: 7C47D46246790496
6 changed files with 329 additions and 0 deletions

View file

@ -134,6 +134,10 @@ const config = {
title: "mf",
items: [
...subjects.map((s) => s.navbar()),
{
to: "contributions",
label: "Contributions",
},
{
to: "blog",
position: "right",

View file

@ -0,0 +1,52 @@
@import "../../css/mixins";
.card {
margin-bottom: calc(var(--ifm-spacing-horizontal) * 2);
border: 1px solid var(--ifm-color-emphasis-300);
box-shadow: none;
}
.contributionsContainer {
border-left: 1px solid var(--ifm-color-emphasis-300);
@include small-size {
border-left: 0;
border-top: 1px solid var(--ifm-color-emphasis-300);
padding-top: var(--ifm-spacing-vertical);
}
}
.list {
list-style-type: none;
padding-left: 0;
}
.buttons {
> a {
@include small-size {
width: 100%;
margin-top: calc(var(--ifm-spacing-vertical) / 2);
}
}
a + a {
margin-left: 0.5em;
@include small-size {
margin-left: 0;
}
}
}
.icon {
width: 22px;
height: 22px;
margin-right: 0.3rem;
display: inline-block;
position: relative;
top: 4px;
[data-theme="dark"] & {
fill: var(--ifm-font-color-base);
}
}

View file

@ -0,0 +1,57 @@
import clsx from "clsx";
import React, { FunctionComponent } from "react";
import styles from "./Contribution.module.scss";
import RepositoryIcon from "./assets/icon-repository.svg";
export interface ContributionMetadata {
title: string;
description: React.ReactNode;
contribution: React.ReactNode;
repoURL: string;
}
const Contribution: FunctionComponent<ContributionMetadata> = ({
title,
description,
contribution,
repoURL,
}) => {
return (
<div className="col col--12">
<div className={clsx("card", styles.card)}>
<div className="card__header">
<h2>{title}</h2>
</div>
<div className="card__body">
<div className="row">
<div className="col col--6">
<h6>Description</h6>
{description}
</div>
<div className={clsx("col col--6", styles.contributionsContainer)}>
<h6>Contribution</h6>
{contribution}
</div>
</div>
</div>
<div className="card__footer">
<div className={styles.buttons}>
<a
href={repoURL}
target="_blank"
className="button button--secondary button--outline"
>
<span className="button__icon">
<RepositoryIcon />
</span>
See repository
</a>
</div>
</div>
</div>
</div>
);
};
export default Contribution;

View file

@ -0,0 +1,2 @@
<!-- Source: https://remixicon.com/ -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 21v2.5l-3-2-3 2V21h-.5A3.5 3.5 0 0 1 3 17.5V5a3 3 0 0 1 3-3h14a1 1 0 0 1 1 1v17a1 1 0 0 1-1 1h-7zm0-2h6v-3H6.5a1.5 1.5 0 0 0 0 3H7v-2h6v2zm6-5V4H6v10.035A3.53 3.53 0 0 1 6.5 14H19zM7 5h2v2H7V5zm0 3h2v2H7V8zm0 3h2v2H7v-2z"/></svg>

After

Width:  |  Height:  |  Size: 379 B

7
src/css/mixins.scss Normal file
View file

@ -0,0 +1,7 @@
$breakpoint: 996px;
@mixin small-size {
@media (max-width: $breakpoint) {
@content;
}
}

207
src/pages/contributions.tsx Normal file
View file

@ -0,0 +1,207 @@
import React from "react";
import Layout from "@theme/Layout";
import Contribution, { ContributionMetadata } from "../components/contributions/Contribution";
const contributions: ContributionMetadata[] = [
{
title: "Fedora Infrastructure Ansible",
description: (<p>
Collection of Ansible playbooks that powers the Fedora Infrastructure.
</p>),
contribution: (<p>
I have adjusted the groups in the Bodhi playbooks after Packit has
been granted the privileges to propose updates without restrictions.
</p>),
repoURL: "https://pagure.io/fedora-infra/ansible",
},
{
title: "Bodhi",
description: (<p>
Bodhi is a web-system that facilitates the process of publishing
updates for a Fedora-based software distribution.
</p>),
contribution: (<p>
I have adjusted the client, so that it doesn't show secrets in
terminal when you log in to the Bodhi via browser.
</p>),
repoURL: "https://github.com/fedora-infra/bodhi",
},
{
title: "Gluetool Modules Collection",
description: (<p>
Modules for <code>gluetool</code> a command line centric framework
usable for glueing modules into a pipeline.
</p>),
contribution: (<ul>
<li>
I have proposed a possible implementation of git merging that
was later on extended.
</li>
<li>
I have tried to help out with Copr module after they deprecated
older version of their API.
</li>
</ul>),
repoURL: "https://gitlab.com/testing-farm/gluetool-modules",
},
{
title: "Pagure",
description: (<p>
Pagure is a git-centered forge, python based using pygit2.
</p>),
contribution: (<p>
I have added an API endpoint for reopening pull requests.
</p>),
repoURL: "https://pagure.io/pagure",
},
{
title: "Copr",
description: (<p>
RPM build system - upstream for{" "}
<a target="_blank" href="https://copr.fedorainfracloud.org/">Copr</a>.
</p>),
contribution: (<ul>
<li>
Supporting external repositories for custom SRPM build method.
</li>
<li>
Allowing admins of Copr repositories to build without the need
to ask for explicit <code>builder</code> permissions.
</li>
</ul>),
repoURL: "https://github.com/fedora-copr/copr",
},
{
title: "python-gitlab",
description: (<p>
A python wrapper for the GitLab API.
</p>),
contribution: (<p>
I have contributed support for the <code>merge_ref</code> on merge
requests that hasn't been supported, yet it was present in the GitLab
API.
</p>),
repoURL: "https://github.com/python-gitlab/python-gitlab",
},
{
title: "PatternFly React",
description: (<p>
A set of React components for the PatternFly project.
</p>),
contribution: (<p>
When working on Packit Dashboard, I have spotted smaller bugs that
were present in this project and fixed them upstream to provide
better experience for our users.
</p>),
repoURL: "https://github.com/patternfly/patternfly-react",
},
{
title: "Fira Code",
description: (<p>
Free monospaced font with programming ligatures.
</p>),
contribution: (<p>
I have set up a GitHub Action for building the font on each push to
the default branch allowing users to install <i>bleeding edge</i>{" "}
version of the font.
</p>),
repoURL: "https://github.com/tonsky/FiraCode",
},
{
title: "nixpkgs",
description: (<p>
Nixpkgs is a collection of over 80,000 software packages that can be
installed with the Nix package manager. It also implements NixOS,
a purely-functional Linux distribution.
</p>),
contribution: (<p>
When I was trying out the nixpkgs, I have tried to bump .NET Core to
the latest version. My changes haven't been accepted as they required
bumping of multiple more packages that depended upon the .NET Core.
</p>),
repoURL: "https://github.com/NixOS/nixpkgs",
},
{
title: "Darcula",
description: (<p>
A theme for Visual Studio Code based on Darcula theme from Jetbrains
IDEs.
</p>),
contribution: (<p>
I have contributed support for diff files, though the project doesn't
seem to be live anymore, so it hasn't been accepted as of now.
</p>),
repoURL: "https://github.com/rokoroku/vscode-theme-darcula",
},
{
title: "Packit",
description: (<p>
An open source project aiming to ease the integration of your
project with Fedora Linux, CentOS Stream and other distributions.
</p>),
contribution: (<p>
Have a look at my{" "}
<a
href="https://github.com/search?q=is%3Apr%20author%3Amfocko%20org%3Apackit&type=pullrequests"
target="_blank">
pull requests
</a>.
</p>),
repoURL: "https://github.com/packit",
},
{
title: "Snitch",
description: (<>
<p>
Language agnostic tool that collects TODOs in the source code
and reports them as Issues.
</p>
</>),
contribution: (<ul>
<li>Environment variable support for self-hosted GitLab instances</li>
<li>GitLab support</li>
</ul>),
repoURL: "https://github.com/tsoding/snitch",
},
{
title: "Karel the Robot",
description: (<>
<p>
Karel the robot is in general an educational programming
language for beginners, created by <i>Richard E. Pattis</i>.
This is implementation of <i>Karel the Robot</i> for{" "}
<i>C programming language</i>.
</p>
<p>
This project is used for educational purposes at{" "}
<a target="_blank" href="https://fei.tuke.sk">TUKE</a>.
</p>
</>),
contribution: (<p>
I have contributed some refactoring tips to the author of the
library.
</p>),
repoURL: "https://git.kpi.fei.tuke.sk/kpi/karel-the-robot",
},
];
const title = "Contributions";
const description = "Many of my contributions to open-source projects.";
export default function Contributions(): JSX.Element {
return (
<Layout title={title} description={description}>
<main className="container container--fluid margin-vert--lg">
<h1>{title}</h1>
<p>{description}</p>
<div className="row">
{contributions.map((contributionData) => (
<Contribution key={contributionData.project} {...contributionData} />
))}
</div>
</main>
</Layout>
);
}