<IFrame /> component

pages/notes/[slug].tsx

@@ -60,7 +60,7 @@ const Note = ({ frontMatter, source }: NoteType) => {
       </Content>
 
       {frontMatter.noComments !== true && (
-        <InView rootMargin="140px" triggerOnce={true} fallbackInView={true}>
+        <InView rootMargin="140px" triggerOnce fallbackInView>
           {({ inView, ref }) => (
             <div id="comments" ref={ref}>
               {inView && <Comments title={frontMatter.title} />}

pages/previously.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
+import IFrame from "../components/IFrame/IFrame";
 import { FloppyIcon, SirenIcon } from "../components/Icons";
 
 /* eslint-disable camelcase */
@@ -75,12 +76,14 @@ const Previously = () => (
           experience anyway.
         </a>
       </p>
+
       <figure>
-        <iframe
-          className="y2k_frame"
+        <IFrame
           src="https://jakejarvis.github.io/my-first-website/"
           title="My Terrible, Horrible, No Good, Very Bad First Website"
-        ></iframe>
+          height={500}
+          allowScripts
+        />
         <figcaption>
           November 2001 (
           <a href="https://github.com/jakejarvis/my-first-website" target="_blank" rel="noopener noreferrer">
@@ -236,10 +239,24 @@ const Previously = () => (
       footer > div {
         font-size: 0.95em !important;
       }
-      .y2k_frame {
-        width: 100%;
-        height: 500px;
-        border: 2px solid #e3d18c;
+      figure {
+        margin: 1em auto;
+        text-align: center;
+      }
+      figure img {
+        margin-bottom: 0;
+      }
+      figcaption {
+        margin-top: 0.2em;
+        font-size: 0.9em;
+        line-height: 1.5;
+        color: var(--medium);
+      }
+      hr {
+        margin: 1em auto !important;
+      }
+      iframe {
+        margin-bottom: 0.6em !important;
       }
       .limegreen {
         color: #32cd32;

pages/privacy.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
+import IFrame from "../components/IFrame/IFrame";
 import { PrivacyIcon } from "../components/Icons";
 
 import faunaImg from "../public/static/images/privacy/fauna_hits.png";
@@ -24,6 +25,7 @@ const Privacy = () => (
       <p>Okay, this is an easy one. 😉</p>
 
       <h2 id="hosting">Hosting</h2>
+
       <p>
         Pages and first-party assets on this website are served by{" "}
         <a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">
@@ -35,6 +37,7 @@ const Privacy = () => (
         </a>{" "}
         for more information.
       </p>
+
       <p>
         For a likely excessive level of privacy and security, this website is also mirrored on the{" "}
         <a href="https://www.torproject.org/" target="_blank" rel="noopener noreferrer">
@@ -42,6 +45,7 @@ const Privacy = () => (
         </a>{" "}
         at:
       </p>
+
       <blockquote>
         <p>
           <a
@@ -55,6 +59,7 @@ const Privacy = () => (
       </blockquote>
 
       <h2 id="analytics">Analytics</h2>
+
       <p>
         A very simple hit counter on each blog post tallies an aggregate number of pageviews (i.e.{" "}
         <code>hits = hits + 1</code>) in a{" "}
@@ -64,6 +69,7 @@ const Privacy = () => (
         database. Individual views and identifying (or non-identifying) details are{" "}
         <strong>never stored or logged</strong>.
       </p>
+
       <p>
         The{" "}
         <a
@@ -87,7 +93,9 @@ const Privacy = () => (
         </a>{" "}
         are public.
       </p>
+
       <Image src={faunaImg} placeholder="blur" alt="The entire database schema." />
+
       <p>
         <a href="https://usefathom.com/ref/ZEYG0O" target="_blank" rel="noopener noreferrer">
           <strong>Fathom Analytics</strong>
@@ -103,15 +111,14 @@ const Privacy = () => (
         </a>{" "}
         is completely public, too!)
       </p>
-      <iframe src="https://app.usefathom.com/share/wbgnqukw/jarv.is" title="Fathom Analytics dashboard">
-        <style jsx>{`
-          iframe {
-            width: 100%;
-            height: 500px;
-            border: 2px solid var(--kinda-light);
-          }
-        `}</style>
-      </iframe>
+
+      <IFrame
+        src="https://app.usefathom.com/share/wbgnqukw/jarv.is"
+        title="Fathom Analytics dashboard"
+        height={500}
+        allowScripts
+      />
+
       <p>
         <a href="https://vercel.com/analytics" target="_blank" rel="noopener noreferrer">
           <strong>Vercel Analytics</strong>
@@ -124,10 +131,12 @@ const Privacy = () => (
       </p>
 
       <h2 id="third-party">Third-Party Content</h2>
+
       <p>
         Occasionally, embedded content from third-party services is included in posts, and some may contain tracking
         code that is outside of my control. Please refer to their privacy policies for more information:
       </p>
+
       <ul>
         <li>
           <a href="https://blog.codepen.io/documentation/privacy/" target="_blank" rel="noopener noreferrer">
@@ -171,6 +180,7 @@ const Privacy = () => (
       </ul>
 
       <h2 id="hcaptcha">Fighting Spam</h2>
+
       <p>
         Using{" "}
         <a href="https://www.hcaptcha.com/" target="_blank" rel="noopener noreferrer">
@@ -186,6 +196,7 @@ const Privacy = () => (
         </a>
         .
       </p>
+
       <p>
         You can refer to hCaptcha's{" "}
         <a href="https://www.hcaptcha.com/privacy" target="_blank" rel="noopener noreferrer">
@@ -206,6 +217,7 @@ const Privacy = () => (
         </a>
         . 🚗
       </p>
+
       <p>
         I also enabled the setting to donate 100% of my{" "}
         <a href="https://humanprotocol.org/?lng=en-US" target="_blank" rel="noopener noreferrer">