feat: add contributions page

Signed-off-by: Matej Focko <mfocko@redhat.com>

docusaurus.config.js

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

src/components/contributions/Contribution.module.scss

@@ -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);
+  }
+}

src/components/contributions/Contribution.tsx

@@ -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;

src/components/contributions/assets/icon-repository.svg

@@ -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>

src/css/mixins.scss

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

src/pages/contributions.tsx

@@ -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>
+    );
+}