next-mdx-remote v4 (#737)

2026-06-13 02:45:28 -04:00 · 2022-01-18 09:25:09 -05:00
parent 2ef5d06c38
commit a406010bd2
110 changed files with 1009 additions and 1490 deletions
@@ -0,0 +1,83 @@
+.footer {
+  width: 100%;
+  padding: 1.25em 1.5em;
+  border-top: 1px solid var(--kinda-light);
+  color: var(--medium-dark);
+}
+
+.footer a {
+  color: var(--medium-dark);
+  background: none;
+  padding-bottom: 0;
+}
+
+.row {
+  display: flex;
+  width: 100%;
+  max-width: 865px;
+  margin: 0 auto;
+  justify-content: space-between;
+  font-size: 0.85em;
+  line-height: 2.3;
+}
+
+.view_source {
+  padding-bottom: 2px !important;
+  border-bottom: 1px solid;
+  border-color: var(--light);
+}
+
+.view_source:hover {
+  border-color: var(--kinda-light);
+}
+
+.beat {
+  display: inline-block;
+  animation: beat 10s infinite; /* 6 bpm, call 911 if you see this please. */
+  animation-delay: 7.5s; /* offset from wave animation */
+  will-change: transform;
+}
+
+@media screen and (max-width: 768px) {
+  .footer {
+    padding: 1em 1.25em 0;
+
+    /*
+     * Safari iOS menu bar reappears below 44px:
+     * https://www.eventbrite.com/engineering/mobile-safari-why/
+     */
+    padding-bottom: 45px !important;
+
+    /* Allows you to scroll below the viewport; default value is visible */
+    overflow-y: scroll;
+  }
+
+  /* stack columns on left instead of flexboxing across */
+  .row {
+    font-size: 0.8em;
+    display: block;
+  }
+}
+
+@keyframes beat {
+  0% {
+    transform: scale(1);
+  }
+  2% {
+    transform: scale(1.25);
+  }
+  4% {
+    transform: scale(1);
+  }
+  6% {
+    transform: scale(1.2);
+  }
+  8% {
+    transform: scale(1);
+  }
+
+  /* pause for ~9 out of 10 seconds */
+  100% {
+    transform: scale(1);
+  }
+}
@@ -0,0 +1,52 @@
+import { memo } from "react";
+import Link from "next/link";
+import { HeartIcon, NextjsLogo } from "../Icons";
+import * as config from "../../lib/config";
+
+import styles from "./Footer.module.css";
+
+const Footer = () => (
+  <footer className={styles.footer}>
+    <div className={styles.row}>
+      <div className={styles.copyright}>
+        Content{" "}
+        <Link href="/license/" prefetch={false}>
+          <a title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</a>
+        </Link>
+        ,{" "}
+        <Link href="/previously/" prefetch={false}>
+          <a title="Previously on...">2001</a>
+        </Link>{" "}
+        – {new Date().getFullYear()}.
+      </div>
+      <div className={styles.powered_by}>
+        Made with{" "}
+        <span className={styles.beat} title="Love">
+          <HeartIcon />
+        </span>{" "}
+        and{" "}
+        <a
+          href="https://nextjs.org/"
+          title="Powered by Next.js"
+          aria-label="Next.js"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <NextjsLogo fill="currentColor" />
+        </a>
+        .{" "}
+        <a
+          href={`https://github.com/${config.githubRepo}`}
+          title="View Source on GitHub"
+          className={styles.view_source}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          View source.
+        </a>
+      </div>
+    </div>
+  </footer>
+);
+
+export default memo(Footer);