v5: Revenge of the JavaScript 🦸 (#711)

Hugo ➡️ Next.js

components/projects/RepositoryCard.module.scss

@@ -0,0 +1,56 @@
+.card {
+  flex-grow: 1;
+  width: 416px; // magic number
+  padding: 1em 1.2em;
+  margin: 0.6em;
+  border: 1px solid;
+  border-radius: 0.5em;
+  font-size: 0.85em;
+  color: var(--medium-dark);
+  border-color: var(--kinda-light);
+
+  .name {
+    font-size: 1.2em;
+    font-weight: 600;
+  }
+
+  .description {
+    margin: 0.25em 0 0.75em;
+    line-height: 1.7;
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+
+    .meta_item {
+      margin-right: 1.5em;
+      font-size: 0.9em;
+      color: var(--medium);
+
+      a {
+        background: none;
+        padding-bottom: 0;
+        color: inherit;
+
+        &:hover {
+          color: var(--link);
+        }
+      }
+
+      .octicon,
+      .language_color {
+        margin-right: 0.5em;
+      }
+
+      .language_color {
+        display: inline-block;
+        width: 1.15em;
+        height: 1.15em;
+        border-radius: 50%;
+        position: relative;
+        top: 0.175em;
+      }
+    }
+  }
+}

components/projects/RepositoryCard.tsx

@@ -0,0 +1,94 @@
+import { intlFormat, formatDistanceToNowStrict, parseISO } from "date-fns";
+
+// react components:
+import { StarIcon, RepoForkedIcon } from "@primer/octicons-react";
+
+import styles from "./RepositoryCard.module.scss";
+
+type Props = {
+  name: string;
+  url: string;
+  description?: string;
+  language?: {
+    name: string;
+    color?: string;
+  };
+  stars?: number;
+  forks?: number;
+  updatedAt: string;
+};
+
+export default function RepositoryCard({ name, url, description, language, stars, forks, updatedAt }: Props) {
+  return (
+    <div className={styles.card}>
+      <a className={styles.name} href={url} target="_blank" rel="noopener noreferrer">
+        {name}
+      </a>
+
+      {description && <p className={styles.description}>{description}</p>}
+
+      <div className={styles.meta}>
+        {language && (
+          <div className={styles.meta_item}>
+            <span className={styles.language_color}>
+              <style jsx>{`
+                span {
+                  background-color: ${language.color};
+                }
+              `}</style>
+            </span>
+            <span>{language.name}</span>
+          </div>
+        )}
+
+        {stars > 0 && (
+          <div className={styles.meta_item}>
+            <a
+              href={`${url}/stargazers`}
+              title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <StarIcon size={16} className={styles.octicon} />
+              <span>{stars.toLocaleString("en-US")}</span>
+            </a>
+          </div>
+        )}
+
+        {forks > 0 && (
+          <div className={styles.meta_item}>
+            <a
+              href={`${url}/network/members`}
+              title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <RepoForkedIcon size={16} className={styles.octicon} />
+              <span>{forks.toLocaleString("en-US")}</span>
+            </a>
+          </div>
+        )}
+
+        <div
+          className={styles.meta_item}
+          title={intlFormat(
+            parseISO(updatedAt),
+            {
+              year: "numeric",
+              month: "short",
+              day: "numeric",
+              hour: "numeric",
+              minute: "numeric",
+              timeZoneName: "short",
+            },
+            {
+              locale: "en-US",
+            }
+          )}
+        >
+          <span>Updated {formatDistanceToNowStrict(parseISO(updatedAt), { addSuffix: true })}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

components/projects/RepositoryGrid.module.scss

@@ -0,0 +1,12 @@
+.grid {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.view_more {
+  text-align: center;
+  margin-bottom: 0;
+}

components/projects/RepositoryGrid.tsx

@@ -0,0 +1,20 @@
+import RepositoryCard from "./RepositoryCard";
+
+import styles from "./RepositoryGrid.module.scss";
+
+export default function RepositoryGrid({ repos }) {
+  return (
+    <>
+      <div className={styles.grid}>
+        {repos.map((repo) => (
+          <RepositoryCard key={repo.name} {...repo} />
+        ))}
+      </div>
+      <p className={styles.view_more}>
+        <a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
+          View more on GitHub...
+        </a>
+      </p>
+    </>
+  );
+}