<IFrame /> component

components/Content/Content.module.css

@@ -3,13 +3,6 @@
   line-height: 1.7;
 }
 
-.content blockquote {
-  margin-left: 0;
-  padding-left: 1.5em;
-  border-left: 3px solid var(--link);
-  color: var(--medium-dark);
-}
-
 .content h2,
 .content h3,
 .content h4 {
@@ -43,6 +36,13 @@
   padding-left: 0.25em;
 }
 
+.content blockquote {
+  margin-left: 0;
+  padding-left: 1.5em;
+  border-left: 3px solid var(--link);
+  color: var(--medium-dark);
+}
+
 .content hr {
   margin: 1.5em auto;
   height: 2px;
@@ -50,33 +50,6 @@
   background-color: var(--light);
 }
 
-.content :global(.image_wrapper) {
-  line-height: 0;
-}
-
-/* default to centering all images */
-.content :global(.image_wrapper),
-.content figure {
-  margin: 1em auto;
-  text-align: center;
-}
-
-.content figure :global(.image_wrapper) {
-  margin-bottom: 0;
-}
-
-.content figure figcaption {
-  margin-top: 0.75em;
-  font-size: 0.9em;
-  line-height: 1.5;
-  color: var(--medium);
-}
-
-/* some figcaptions contain paragraphs, some don't, so reset all of them */
-.content figure figcaption p {
-  margin: 0;
-}
-
 /* sub-heading anchor styles */
 .content :global(.h-anchor) {
   margin: 0 0.25em;

components/Figure/Figure.module.css

@@ -0,0 +1,15 @@
+.figure {
+  margin: 1em auto;
+  text-align: center;
+}
+
+.caption {
+  font-size: 0.9em;
+  line-height: 1.5;
+  color: var(--medium);
+}
+
+/* some figcaptions contain paragraphs, some don't, so reset all of them */
+.caption p {
+  margin: 0;
+}

components/Figure/Figure.tsx

@@ -3,6 +3,8 @@ import innerText from "react-innertext";
 import type { ReactNode } from "react";
 import type { ImageProps as NextImageProps } from "next/image";
 
+import styles from "./Figure.module.css";
+
 type Props = Omit<NextImageProps, "alt"> & {
   children: ReactNode; // caption (can be in markdown, yay!!!)
   alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
@@ -10,9 +12,9 @@ type Props = Omit<NextImageProps, "alt"> & {
 
 const Figure = ({ children, alt, ...imageProps }: Props) => {
   return (
-    <figure>
+    <figure className={styles.figure}>
       <Image alt={alt || innerText(children)} {...imageProps} />
-      <figcaption>{children}</figcaption>
+      <figcaption className={styles.caption}>{children}</figcaption>
     </figure>
   );
 };

components/IFrame/IFrame.module.css

@@ -0,0 +1,6 @@
+.frame {
+  width: 100%;
+  display: block;
+  margin: 1em auto;
+  border: 2px solid var(--kinda-light);
+}

components/IFrame/IFrame.tsx

@@ -0,0 +1,28 @@
+import styles from "./IFrame.module.css";
+
+type Props = {
+  src: string;
+  title?: string;
+  height: number;
+  width?: number; // defaults to 100%
+  allowScripts?: boolean;
+  noScroll?: boolean;
+};
+
+const IFrame = ({ src, title, height, width, allowScripts, noScroll, ...rest }: Props) => (
+  <iframe
+    className={styles.frame}
+    src={src}
+    title={title}
+    sandbox={allowScripts ? "allow-same-origin allow-scripts allow-popups" : undefined}
+    scrolling={noScroll ? "no" : undefined}
+    loading="lazy"
+    style={{
+      height: `${height}px`,
+      maxWidth: width ? `${width}px` : undefined,
+    }}
+    {...rest}
+  />
+);
+
+export default IFrame;

components/Image/Image.module.css

@@ -0,0 +1,7 @@
+.wrapper {
+  line-height: 0;
+
+  /* default to centering all images */
+  margin: 1em auto;
+  text-align: center;
+}

components/Image/Image.tsx

@@ -1,9 +1,11 @@
 import NextImage from "next/image";
 import type { ImageProps as NextImageProps } from "next/image";
 
+import styles from "./Image.module.css";
+
 const Image = ({ src, width, height, alt, quality, priority }: NextImageProps) => {
   return (
-    <div className="image_wrapper">
+    <div className={styles.wrapper}>
       <NextImage
         src={(src as string).replace(/^\/public/g, "")}
         layout="intrinsic"

components/OctocatLink/OctocatLink.module.css

@@ -0,0 +1,11 @@
+.link {
+  margin: 0 0.4em;
+  color: var(--text);
+  background: none !important;
+  padding-bottom: 0;
+  transition: none;
+}
+
+.link:hover {
+  color: var(--link);
+}

components/OctocatLink/OctocatLink.tsx

@@ -1,17 +1,13 @@
 import { OctocatOcticon } from "../Icons";
 
+import styles from "./OctocatLink.module.css";
+
 type Props = {
   repo: string;
 };
 
 const OctocatLink = (props: Props) => (
-  <a
-    className="no-underline"
-    href={`https://github.com/${props.repo}`}
-    target="_blank"
-    rel="noopener noreferrer"
-    style={{ margin: "0 0.4em", color: "var(--text)" }}
-  >
+  <a className={styles.link} href={`https://github.com/${props.repo}`} target="_blank" rel="noopener noreferrer">
     <OctocatOcticon fill="currentColor" />
   </a>
 );