v5: Revenge of the JavaScript 🦸 (#711)

Hugo ➡️ Next.js

components/page-footer/Footer.module.scss

@@ -0,0 +1,78 @@
+.footer {
+  width: 100%;
+  letter-spacing: -0.005em;
+  padding: 1.25em 1.5em;
+  border-top: 1px solid var(--kinda-light);
+  color: var(--medium-dark);
+
+  a {
+    color: var(--medium-dark);
+    background: none;
+    padding-bottom: 0;
+  }
+
+  .view_source {
+    padding-bottom: 2px;
+    border-bottom: 1px solid;
+    border-color: var(--light);
+  }
+}
+
+.row {
+  display: flex;
+  width: 100%;
+  max-width: 865px;
+  margin: 0 auto;
+  justify-content: space-between;
+  font-size: 0.85em;
+  line-height: 2.3;
+}
+
+.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: 800px) {
+  .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 {
+    display: block;
+    line-height: 2;
+  }
+}
+
+@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);
+  }
+}

components/page-footer/Footer.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+import { HeartIcon, NextjsIcon } from "../icons";
+import * as config from "../../lib/config";
+
+import styles from "./Footer.module.scss";
+
+export default function Footer() {
+  return (
+    <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}>
+            <HeartIcon alt="Love" />
+          </span>{" "}
+          and{" "}
+          <a href="https://nextjs.org/" title="Powered by Next.js" target="_blank" rel="noopener noreferrer">
+            <NextjsIcon alt="Next.js" 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>
+  );
+}