next-mdx-remote v4 (#737)

components/RepositoryCard/RepositoryCard.module.css

@@ -0,0 +1,59 @@
+.card {
+  width: 100%;
+  padding: 1.2em 1.2em 0.8em;
+  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.7em 0 0.5em;
+  line-height: 1.7;
+}
+
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+
+.meta_item {
+  margin-right: 1.5em;
+  font-size: 0.875em;
+  line-height: 2;
+  color: var(--medium);
+}
+
+.meta_item a {
+  background: none;
+  padding-bottom: 0;
+  color: inherit;
+}
+
+.meta_item a:hover {
+  color: var(--link);
+}
+
+.octicon,
+.language_color {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+  margin-right: 0.5em;
+}
+
+.language_color {
+  display: inline-block;
+  width: 1.15em;
+  height: 1.15em;
+  border-radius: 50%;
+  position: relative;
+  vertical-align: text-top;
+}

components/RepositoryCard/RepositoryCard.tsx

@@ -0,0 +1,74 @@
+import { intlFormat, formatDistanceToNowStrict } from "date-fns";
+import { StarOcticon, ForkOcticon } from "../Icons";
+import { RepoType } from "../../types";
+
+import styles from "./RepositoryCard.module.css";
+
+const RepositoryCard = (props: RepoType) => (
+  <div className={styles.card}>
+    <a className={styles.name} href={props.url} target="_blank" rel="noopener noreferrer">
+      {props.name}
+    </a>
+
+    {props.description && <p className={styles.description}>{props.description}</p>}
+
+    <div className={styles.meta}>
+      {props.language && (
+        <div className={styles.meta_item}>
+          <span className={styles.language_color} style={{ backgroundColor: props.language.color }} />
+          <span>{props.language.name}</span>
+        </div>
+      )}
+
+      {props.stars > 0 && (
+        <div className={styles.meta_item}>
+          <a
+            href={`${props.url}/stargazers`}
+            title={`${props.stars.toLocaleString("en-US")} ${props.stars === 1 ? "star" : "stars"}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <StarOcticon fill="currentColor" className={styles.octicon} />
+            <span>{props.stars.toLocaleString("en-US")}</span>
+          </a>
+        </div>
+      )}
+
+      {props.forks > 0 && (
+        <div className={styles.meta_item}>
+          <a
+            href={`${props.url}/network/members`}
+            title={`${props.forks.toLocaleString("en-US")} ${props.forks === 1 ? "fork" : "forks"}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <ForkOcticon fill="currentColor" className={styles.octicon} />
+            <span>{props.forks.toLocaleString("en-US")}</span>
+          </a>
+        </div>
+      )}
+
+      <div
+        className={styles.meta_item}
+        title={intlFormat(
+          new Date(props.updatedAt),
+          {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+            timeZoneName: "short",
+          },
+          {
+            locale: "en-US",
+          }
+        )}
+      >
+        <span>Updated {formatDistanceToNowStrict(new Date(props.updatedAt), { addSuffix: true })}</span>
+      </div>
+    </div>
+  </div>
+);
+
+export default RepositoryCard;