even more styled components

components/Blockquote/Blockquote.module.css

@@ -0,0 +1,6 @@
+.blockquote {
+  margin-left: 0;
+  padding-left: 1.5em;
+  border-left: 3px solid var(--link);
+  color: var(--medium-dark);
+}

components/Blockquote/Blockquote.tsx

@@ -0,0 +1,13 @@
+import type { BlockquoteHTMLAttributes } from "react";
+
+import styles from "./Blockquote.module.css";
+
+type Props = BlockquoteHTMLAttributes<HTMLElement>;
+
+const Blockquote = ({ children, ...rest }: Props) => (
+  <blockquote className={styles.blockquote} {...rest}>
+    {children}
+  </blockquote>
+);
+
+export default Blockquote;

components/CodeBlock/CodeBlock.module.css

@@ -1,4 +1,16 @@
+/* all code */
 .code {
+  font-size: 0.925em;
+  page-break-inside: avoid;
+  border: 1px solid var(--kinda-light);
+}
+
+/* inline code in paragraphs/elsewhere (single backticks) */
+.inline {
+  padding: 0.1em 0.25em;
+}
+
+.block {
   position: relative;
   width: 100%;
   margin: 1em auto;
@@ -6,7 +18,7 @@
 
 /* the following sub-classes MUST be global -- the highlight rehype plugin isn't aware of this file */
 
-.code :global(.code-highlight) {
+.block :global(.code-highlight) {
   display: block;
   overflow-x: auto;
   padding: 1em;
@@ -16,11 +28,11 @@
 }
 
 /* leave room for clipboard button to the right of the first line */
-.code :global(.code-highlight) > :global(.code-line:first-of-type) {
+.block :global(.code-highlight) > :global(.code-line:first-of-type) {
   margin-right: 3em;
 }
 
-.code :global(.code-highlight) > :global(.code-line.line-number::before) {
+.block :global(.code-highlight) > :global(.code-line.line-number::before) {
   display: inline-block;
   width: 1.5em;
   margin-right: 1.5em;
@@ -29,69 +41,69 @@
   content: attr(line); /* added to spans by prism */
 }
 
-.code :global(.code-highlight) :global(.token.comment),
+.block :global(.code-highlight) :global(.token.comment),
-.code :global(.code-highlight) :global(.token.prolog),
+.block :global(.code-highlight) :global(.token.prolog),
-.code :global(.code-highlight) :global(.token.cdata) {
+.block :global(.code-highlight) :global(.token.cdata) {
   color: var(--code-comment);
 }
 
-.code :global(.code-highlight) :global(.token.delimiter),
+.block :global(.code-highlight) :global(.token.delimiter),
-.code :global(.code-highlight) :global(.token.boolean),
+.block :global(.code-highlight) :global(.token.boolean),
-.code :global(.code-highlight) :global(.token.keyword),
+.block :global(.code-highlight) :global(.token.keyword),
-.code :global(.code-highlight) :global(.token.selector),
+.block :global(.code-highlight) :global(.token.selector),
-.code :global(.code-highlight) :global(.token.important),
+.block :global(.code-highlight) :global(.token.important),
-.code :global(.code-highlight) :global(.token.doctype),
+.block :global(.code-highlight) :global(.token.doctype),
-.code :global(.code-highlight) :global(.token.atrule),
+.block :global(.code-highlight) :global(.token.atrule),
-.code :global(.code-highlight) :global(.token.url) {
+.block :global(.code-highlight) :global(.token.url) {
   color: var(--code-keyword);
 }
 
-.code :global(.code-highlight) :global(.token.tag),
+.block :global(.code-highlight) :global(.token.tag),
-.code :global(.code-highlight) :global(.token.builtin),
+.block :global(.code-highlight) :global(.token.builtin),
-.code :global(.code-highlight) :global(.token.regex) {
+.block :global(.code-highlight) :global(.token.regex) {
   color: var(--code-namespace);
 }
 
-.code :global(.code-highlight) :global(.token.property),
+.block :global(.code-highlight) :global(.token.property),
-.code :global(.code-highlight) :global(.token.constant),
+.block :global(.code-highlight) :global(.token.constant),
-.code :global(.code-highlight) :global(.token.variable),
+.block :global(.code-highlight) :global(.token.variable),
-.code :global(.code-highlight) :global(.token.attr-value),
+.block :global(.code-highlight) :global(.token.attr-value),
-.code :global(.code-highlight) :global(.token.class-name),
+.block :global(.code-highlight) :global(.token.class-name),
-.code :global(.code-highlight) :global(.token.string),
+.block :global(.code-highlight) :global(.token.string),
-.code :global(.code-highlight) :global(.token.char) {
+.block :global(.code-highlight) :global(.token.char) {
   color: var(--code-variable);
 }
 
-.code :global(.code-highlight) :global(.token.literal-property),
+.block :global(.code-highlight) :global(.token.literal-property),
-.code :global(.code-highlight) :global(.token.attr-name) {
+.block :global(.code-highlight) :global(.token.attr-name) {
   color: var(--code-attribute);
 }
 
-.code :global(.code-highlight) :global(.token.function) {
+.block :global(.code-highlight) :global(.token.function) {
   color: var(--code-literal);
 }
 
-.code :global(.code-highlight) :global(.token.tag .punctuation),
+.block :global(.code-highlight) :global(.token.tag .punctuation),
-.code :global(.code-highlight) :global(.token.attr-value .punctuation) {
+.block :global(.code-highlight) :global(.token.attr-value .punctuation) {
   color: var(--code-punctuation);
 }
 
-.code :global(.code-highlight) :global(.token.inserted) {
+.block :global(.code-highlight) :global(.token.inserted) {
   background-color: var(--code-addition);
 }
 
-.code :global(.code-highlight) :global(.token.deleted) {
+.block :global(.code-highlight) :global(.token.deleted) {
   background-color: var(--code-deletion);
 }
 
-.code :global(.code-highlight) :global(.token.url) {
+.block :global(.code-highlight) :global(.token.url) {
   text-decoration: underline;
 }
 
-.code :global(.code-highlight) :global(.token.bold) {
+.block :global(.code-highlight) :global(.token.bold) {
   font-weight: bold;
 }
 
-.code :global(.code-highlight) :global(.token.italic) {
+.block :global(.code-highlight) :global(.token.italic) {
   font-style: italic;
 }

components/CodeBlock/CodeBlock.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 
 import styles from "./CodeBlock.module.css";
 
-export type Props = {
+type Props = {
   className?: string;
   children: ReactNode;
 };
@@ -12,14 +12,16 @@ const CodeBlock = (props: Props) => {
   if (props.className?.split(" ").includes("code-highlight")) {
     // full multi-line code blocks with prism highlighting and copy-to-clipboard button
     return (
-      <div className={styles.code}>
+      <div className={styles.block}>
         <CopyButton source={props.children} />
-        <code {...props}>{props.children}</code>
+        <code {...props} className={`${styles.code} ${props.className}`}>
+          {props.children}
+        </code>
       </div>
     );
   } else {
     // inline code in paragraphs, headings, etc. (not highlighted)
-    return <code {...props}>{props.children}</code>;
+    return <code className={`${styles.code} ${styles.inline}`}>{props.children}</code>;
   }
 };
 

components/Content/Content.module.css

@@ -3,103 +3,9 @@
   line-height: 1.7;
 }
 
-/* TODO: These will all be their own components... eventually. */
-
-.content h2,
-.content h3,
-.content h4 {
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  line-height: 1.5;
-
-  /* offset (approximately) with sticky header so jumped-to content isn't hiding behind it */
-  scroll-margin-top: 4em;
-}
-
-/* special bottom border for <h2>s */
-.content h2 {
-  padding-bottom: 0.25em;
-  border-bottom: 1px solid var(--kinda-light);
-}
-
-.content h3,
-.content h4 {
-  scroll-margin-top: 5em;
-}
-
-.content ul,
-.content ol {
-  margin-left: 1.5em;
-  padding-left: 0;
-}
-
-.content ul li,
-.content ol li {
-  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;
-  border: 0;
-  background-color: var(--light);
-}
-
-/* all code */
-.content code {
-  font-size: 0.925em;
-  page-break-inside: avoid;
-  border: 1px solid var(--kinda-light);
-}
-
-/* inline code in paragraphs/elsewhere (single backticks) */
-.content :not(pre) code {
-  padding: 0.1em 0.25em;
-}
-
-/* sub-heading anchor styles */
-.content :global(.h-anchor) {
-  margin: 0 0.25em;
-  padding: 0 0.25em;
-  color: var(--medium-light);
-  background: none;
-  font-weight: 300;
-  opacity: 0; /* overridden on hover */
-  user-select: none;
-}
-.content :global(.h-anchor::before) {
-  content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
-}
-.content :global(.h-anchor:hover) {
-  color: var(--link);
-}
-
-/* make anchor `#` link show up on hover over the corresponding heading */
-.content h2:hover :global(.h-anchor),
-.content h3:hover :global(.h-anchor),
-.content h4:hover :global(.h-anchor) {
-  opacity: 1;
-}
-
 @media screen and (max-width: 768px) {
   .content {
     font-size: 0.925em;
     line-height: 1.85;
   }
-
-  .content h2 {
-    scroll-margin-top: 5em;
-  }
-
-  .content h3,
-  .content h4 {
-    scroll-margin-top: 6em;
-  }
 }

components/Heading/Heading.module.css

@@ -0,0 +1,51 @@
+.heading {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+
+  /* offset (approximately) with sticky header so jumped-to content isn't hiding behind it */
+  scroll-margin-top: 4em;
+}
+
+/* special bottom border for <h2>s */
+.h2 {
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--kinda-light);
+}
+
+.h3,
+.h4 {
+  scroll-margin-top: 5em;
+}
+
+/* sub-heading anchor styles */
+.heading :global(.h-anchor) {
+  margin: 0 0.25em;
+  padding: 0 0.25em;
+  color: var(--medium-light);
+  background: none;
+  font-weight: 300;
+  opacity: 0; /* overridden on hover */
+  user-select: none;
+}
+.heading :global(.h-anchor::before) {
+  content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
+}
+.heading :global(.h-anchor:hover) {
+  color: var(--link);
+}
+/* make anchor `#` link show up on hover over the corresponding heading */
+.heading:hover :global(.h-anchor) {
+  opacity: 1;
+}
+
+@media screen and (max-width: 768px) {
+  .h2 {
+    scroll-margin-top: 5em;
+  }
+
+  .h3,
+  .h4 {
+    scroll-margin-top: 6em;
+  }
+}

components/Heading/Heading.tsx

@@ -0,0 +1,49 @@
+import type { HTMLAttributes } from "react";
+
+import styles from "./Heading.module.css";
+
+type Props = HTMLAttributes<HTMLHeadingElement> & {
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+
+const Heading = ({ as: Component, children, ...rest }: Props) => {
+  return (
+    <Component className={`${styles.heading} ${styles[Component] || ""}`} {...rest}>
+      {children}
+    </Component>
+  );
+};
+
+// TODO: do this less manually...
+export const H1 = ({ children, ...props }: Props) => (
+  <Heading as="h1" {...props}>
+    {children}
+  </Heading>
+);
+export const H2 = ({ children, ...props }: Props) => (
+  <Heading as="h2" {...props}>
+    {children}
+  </Heading>
+);
+export const H3 = ({ children, ...props }: Props) => (
+  <Heading as="h3" {...props}>
+    {children}
+  </Heading>
+);
+export const H4 = ({ children, ...props }: Props) => (
+  <Heading as="h4" {...props}>
+    {children}
+  </Heading>
+);
+export const H5 = ({ children, ...props }: Props) => (
+  <Heading as="h5" {...props}>
+    {children}
+  </Heading>
+);
+export const H6 = ({ children, ...props }: Props) => (
+  <Heading as="h6" {...props}>
+    {children}
+  </Heading>
+);
+
+export default Heading;

components/HorizontalRule/HorizontalRule.module.css

@@ -0,0 +1,6 @@
+.hr {
+  margin: 1.5em auto;
+  height: 2px;
+  border: 0;
+  background-color: var(--light);
+}

components/HorizontalRule/HorizontalRule.tsx

@@ -0,0 +1,5 @@
+import styles from "./HorizontalRule.module.css";
+
+const HorizontalRule = () => <hr className={styles.hr} />;
+
+export default HorizontalRule;

components/List/List.module.css

@@ -0,0 +1,9 @@
+.unordered,
+.ordered {
+  margin-left: 1.5em;
+  padding-left: 0;
+}
+
+.item {
+  padding-left: 0.25em;
+}

components/List/List.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+import styles from "./List.module.css";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const UnorderedList = ({ children, ...rest }: Props) => (
+  <ul className={styles.unordered} {...rest}>
+    {children}
+  </ul>
+);
+export const OrderedList = ({ children, ...rest }: Props) => (
+  <ol className={styles.ordered} {...rest}>
+    {children}
+  </ol>
+);
+
+// TODO: this is based on good faith that the children are all `<li>`s...
+export const ListItem = ({ children, ...rest }: Props) => (
+  <li className={styles.item} {...rest}>
+    {children}
+  </li>
+);

lib/mdx-components.ts

@@ -6,6 +6,10 @@ export { default as Figure } from "../components/Figure/Figure";
 
 // These (mostly very small) components are direct replacements for HTML tags generated by remark:
 export { default as code } from "../components/CodeBlock/CodeBlock";
+export { default as blockquote } from "../components/Blockquote/Blockquote";
+export { default as hr } from "../components/HorizontalRule/HorizontalRule";
+export { H1 as h1, H2 as h2, H3 as h3, H4 as h4, H5 as h5, H6 as h6 } from "../components/Heading/Heading";
+export { UnorderedList as ul, OrderedList as ol, ListItem as li } from "../components/List/List";
 
 // ...and these components are technically passed into all posts, but next/dynamic ensures they're loaded only
 // when they're referenced in the individual mdx files.

package.json

@@ -49,7 +49,7 @@
     "next": "^12.0.8",
     "next-compose-plugins": "^2.2.1",
     "next-mdx-remote": "4.0.0-rc.1",
-    "next-seo": "^4.28.1",
+    "next-seo": "^4.29.0",
     "next-themes": "^0.0.15",
     "node-fetch": "^3.1.1",
     "p-retry": "^5.0.0",

pages/cli.tsx

@@ -2,6 +2,9 @@ import Image from "next/image";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
+import Blockquote from "../components/Blockquote/Blockquote";
+import CodeBlock from "../components/CodeBlock/CodeBlock";
+import { H2 } from "../components/Heading/Heading";
 import { BotIcon } from "../components/Icons";
 
 import cliImg from "../public/static/images/cli/screenshot.png";
@@ -21,7 +24,7 @@ const CLI = () => (
     </PageTitle>
 
     <Content>
-      <blockquote>
+      <Blockquote>
         <p>
           The{" "}
           <a href="https://jarv.is/" target="_blank" rel="noopener noreferrer">
@@ -29,7 +32,8 @@ const CLI = () => (
           </a>{" "}
           CLI (aka the most useless Node module ever published, in history, by anyone, ever).
         </p>
-      </blockquote>
+      </Blockquote>
+
       <a
         className="no-underline"
         href="https://www.npmjs.com/package/@jakejarvis/cli"
@@ -38,11 +42,11 @@ const CLI = () => (
       >
         <Image src={cliImg} placeholder="blur" alt="Terminal Screenshot" priority />
       </a>
-      <h2>Usage</h2>
+
-      <pre>
+      <H2>Usage</H2>
-        <code>npx @jakejarvis/cli</code>
+      <CodeBlock className="code-highlight">npx @jakejarvis/cli</CodeBlock>
-      </pre>
+
-      <h2>Inspired by</h2>
+      <H2>Inspired by</H2>
       <ul>
         <li>
           <a href="https://github.com/sindresorhus/sindresorhus-cli" target="_blank" rel="noopener noreferrer">
@@ -55,7 +59,8 @@ const CLI = () => (
           </a>
         </li>
       </ul>
-      <h2>Built with</h2>
+
+      <H2>Built with</H2>
       <ul>
         <li>
           <a href="https://github.com/vadimdemedes/ink" target="_blank" rel="noopener noreferrer">
@@ -75,7 +80,8 @@ const CLI = () => (
           View source on GitHub.
         </a>
       </p>
-      <h2>License</h2>
+
+      <H2>License</H2>
       <p>
         MIT ©{" "}
         <a href="https://jarv.is/" target="_blank" rel="noopener noreferrer">

pages/contact.tsx

@@ -50,9 +50,7 @@ const Contact = () => (
       }
 
       .pubkey {
-        background: none;
+        font-size: 0.925em;
-        border: 0;
-        padding: 0;
         word-spacing: -0.175em;
         white-space: normal;
       }

pages/license.tsx

@@ -1,6 +1,9 @@
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
+import HorizontalRule from "../components/HorizontalRule/HorizontalRule";
+import Blockquote from "../components/Blockquote/Blockquote";
+import { H2, H3 } from "../components/Heading/Heading";
 import { LicenseIcon } from "../components/Icons";
 
 const License = () => (
@@ -32,8 +35,8 @@ const License = () => (
         </a>{" "}
         is re-printed below.
       </p>
-      <hr />
+      <HorizontalRule />
-      <h2>Creative Commons Attribution 4.0 International Public License</h2>
+      <H2>Creative Commons Attribution 4.0 International Public License</H2>
       <p style={{ textAlign: "center" }}>
         <a
           className="no-underline"
@@ -63,7 +66,7 @@ const License = () => (
           </svg>
         </a>
       </p>
-      <blockquote>
+      <Blockquote>
         <p>
           <em>
             Creative Commons Corporation ("Creative Commons") is not a law firm and does not provide legal services or
@@ -74,8 +77,8 @@ const License = () => (
             their use to the fullest extent possible.
           </em>
         </p>
-      </blockquote>
+      </Blockquote>
-      <h3>Using Creative Commons Public Licenses</h3>
+      <H3>Using Creative Commons Public Licenses</H3>
       <p>
         Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights
         holders may use to share original works of authorship and other material subject to copyright and certain other
@@ -123,7 +126,7 @@ const License = () => (
           </p>
         </li>
       </ul>
-      <h3>Licensed Rights</h3>
+      <H3>Licensed Rights</H3>
       <p>
         By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions
         of this Creative Commons Attribution 4.0 International Public License ("Public License"). To the extent this
@@ -131,7 +134,7 @@ const License = () => (
         acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits
         the Licensor receives from making the Licensed Material available under these terms and conditions.
       </p>
-      <h3>Section 1 – Definitions.</h3>
+      <H3>Section 1 – Definitions.</H3>
       <p>
         a. <strong>Adapted Material</strong> means material subject to Copyright and Similar Rights that is derived from
         or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged,
@@ -186,7 +189,7 @@ const License = () => (
         k. <strong>You</strong> means the individual or entity exercising the Licensed Rights under this Public License.{" "}
         <strong>Your</strong> has a corresponding meaning.
       </p>
-      <h3>Section 2 – Scope.</h3>
+      <H3>Section 2 – Scope.</H3>
       <p>
         a.{" "}
         <em>
@@ -277,7 +280,7 @@ const License = () => (
           </p>
         </li>
       </ol>
-      <h3>Section 3 – License Conditions.</h3>
+      <H3>Section 3 – License Conditions.</H3>
       <p>Your exercise of the Licensed Rights is expressly made subject to the following conditions.</p>
       <p>
         a.{" "}
@@ -326,7 +329,7 @@ const License = () => (
           </p>
         </li>
       </ol>
-      <h3>Section 4 – Sui Generis Database Rights.</h3>
+      <H3>Section 4 – Sui Generis Database Rights.</H3>
       <p>
         Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
       </p>
@@ -347,7 +350,7 @@ const License = () => (
         For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public
         License where the Licensed Rights include other Copyright and Similar Rights.
       </p>
-      <h3>Section 5 – Disclaimer of Warranties and Limitation of Liability.</h3>
+      <H3>Section 5 – Disclaimer of Warranties and Limitation of Liability.</H3>
       <p>
         a.{" "}
         <strong>
@@ -374,7 +377,7 @@ const License = () => (
         c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner
         that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
       </p>
-      <h3>Section 6 – Term and Termination.</h3>
+      <H3>Section 6 – Term and Termination.</H3>
       <p>
         a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You
         fail to comply with this Public License, then Your rights under this Public License terminate automatically.
@@ -401,7 +404,7 @@ const License = () => (
         Public License.
       </p>
       <p>d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.</p>
-      <h3>Section 7 – Other Terms and Conditions.</h3>
+      <H3>Section 7 – Other Terms and Conditions.</H3>
       <p>
         a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless
         expressly agreed.
@@ -410,7 +413,7 @@ const License = () => (
         b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are
         separate from and independent of the terms and conditions of this Public License.
       </p>
-      <h3>Section 8 – Interpretation.</h3>
+      <H3>Section 8 – Interpretation.</H3>
       <p>
         a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit,
         restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without
@@ -431,7 +434,7 @@ const License = () => (
         privileges and immunities that apply to the Licensor or You, including from the legal processes of any
         jurisdiction or authority.
       </p>
-      <blockquote>
+      <Blockquote>
         <p>
           Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply
           one of its public licenses to material it publishes and in those instances will be considered the "Licensor."
@@ -461,7 +464,7 @@ const License = () => (
           </a>
           .
         </p>
-      </blockquote>
+      </Blockquote>
     </Content>
   </>
 );

pages/previously.tsx

@@ -3,6 +3,7 @@ import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
 import IFrame from "../components/IFrame/IFrame";
+import HorizontalRule from "../components/HorizontalRule/HorizontalRule";
 import { FloppyIcon, SirenIcon } from "../components/Icons";
 
 /* eslint-disable camelcase */
@@ -60,7 +61,7 @@ const Previously = () => (
         </figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <p>
         <SirenIcon /> <strong>Trigger warning:</strong> marquees, Comic Sans MS, popups,{" "}
@@ -93,77 +94,77 @@ const Previously = () => (
         </figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <Image src={img_2002_02} placeholder="blur" alt="February 2002" />
         <figcaption>February 2002</figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <Image src={img_2002_10} placeholder="blur" alt="October 2002" />
         <figcaption>October 2002</figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <Image src={img_2003_08} placeholder="blur" alt="August 2003" />
         <figcaption>August 2003</figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <Image src={img_2004_11} placeholder="blur" alt="November 2004" />
         <figcaption>November 2004</figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <Image src={img_2006_04} placeholder="blur" alt="April 2006" />
         <figcaption>April 2006</figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <Image src={img_2006_05} placeholder="blur" alt="May 2006" />
         <figcaption>May 2006</figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <Image src={img_2007_01} placeholder="blur" alt="January 2007" />
         <figcaption>January 2007</figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <Image src={img_2007_04} placeholder="blur" alt="April 2007" />
         <figcaption>April 2007</figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <Image src={img_2007_05} placeholder="blur" alt="May 2007" />
         <figcaption>May 2007</figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <Image src={img_2009_07} placeholder="blur" alt="July 2009" />
         <figcaption>July 2009</figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <a
@@ -183,7 +184,7 @@ const Previously = () => (
         </figcaption>
       </figure>
 
-      <hr />
+      <HorizontalRule />
 
       <figure>
         <a

pages/privacy.tsx

@@ -4,6 +4,8 @@ import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
 import IFrame from "../components/IFrame/IFrame";
+import { H2 } from "../components/Heading/Heading";
+import Blockquote from "../components/Blockquote/Blockquote";
 import { PrivacyIcon } from "../components/Icons";
 
 import faunaImg from "../public/static/images/privacy/fauna_hits.png";
@@ -24,7 +26,7 @@ const Privacy = () => (
     <Content>
       <p>Okay, this is an easy one. 😉</p>
 
-      <h2 id="hosting">Hosting</h2>
+      <H2 id="hosting">Hosting</H2>
 
       <p>
         Pages and first-party assets on this website are served by{" "}
@@ -46,7 +48,7 @@ const Privacy = () => (
         at:
       </p>
 
-      <blockquote>
+      <Blockquote>
         <p>
           <a
             href="http://jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion"
@@ -56,9 +58,9 @@ const Privacy = () => (
             <strong>jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion</strong>
           </a>
         </p>
-      </blockquote>
+      </Blockquote>
 
-      <h2 id="analytics">Analytics</h2>
+      <H2 id="analytics">Analytics</H2>
 
       <p>
         A very simple hit counter on each blog post tallies an aggregate number of pageviews (i.e.{" "}
@@ -130,7 +132,7 @@ const Privacy = () => (
         (input delays, layout shifts, etc.), also in an anonymous and aggregate fashion.
       </p>
 
-      <h2 id="third-party">Third-Party Content</h2>
+      <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
@@ -179,7 +181,7 @@ const Privacy = () => (
         </li>
       </ul>
 
-      <h2 id="hcaptcha">Fighting Spam</h2>
+      <H2 id="hcaptcha">Fighting Spam</H2>
 
       <p>
         Using{" "}

pages/uses.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 { H2 } from "../components/Heading/Heading";
 import { LaptopIcon } from "../components/Icons";
 
 import desktopImg from "../public/static/images/uses/bigsur.png";
@@ -36,7 +37,7 @@ const Uses = () => (
 
       <Image src={desktopImg} placeholder="blur" alt="My mess of a desktop." priority />
 
-      <h2>🍎 Hardware</h2>
+      <H2>🍎 Hardware</H2>
       <ul>
         <li>
           <a href="https://browser.geekbench.com/v5/cpu/8124907" target="_blank" rel="noopener noreferrer">
@@ -159,7 +160,7 @@ const Uses = () => (
         </li>
       </ul>
 
-      <h2>💾 Development</h2>
+      <H2>💾 Development</H2>
       <ul>
         <li>
           <a href="https://iterm2.com/" target="_blank" rel="noopener noreferrer">
@@ -509,7 +510,7 @@ const Uses = () => (
         </li>
       </ul>
 
-      <h2>🌎 Browsing</h2>
+      <H2>🌎 Browsing</H2>
       <ul>
         <li>
           <a href="https://www.mozilla.org/en-US/firefox/developer/" target="_blank" rel="noopener noreferrer">
@@ -686,7 +687,7 @@ const Uses = () => (
         </li>
       </ul>
 
-      <h2>💻 macOS</h2>
+      <H2>💻 macOS</H2>
       <ul>
         <li>
           <a href="https://1password.com/" target="_blank" rel="noopener noreferrer">
@@ -791,7 +792,7 @@ const Uses = () => (
         </li>
       </ul>
 
-      <h2>📱 iOS</h2>
+      <H2>📱 iOS</H2>
       <p>I have far too many apps to count, but here the essentials that have earned a spot on my home screen:</p>
       <ul>
         <li>
@@ -857,7 +858,7 @@ const Uses = () => (
         </li>
       </ul>
 
-      <h2>☁️ Cloud</h2>
+      <H2>☁️ Cloud</H2>
       <p>
         I've been making recent efforts to{" "}
         <a href="https://www.stallman.org/google.html" target="_blank" rel="noopener noreferrer">
@@ -1016,12 +1017,12 @@ const Uses = () => (
         </li>
       </ul>
 
-      <h2>
+      <H2>
         🏠 Internet of <del>Things</del>{" "}
         <Link href="/notes/shodan-search-queries/">
           <a>Crap</a>
         </Link>
-      </h2>
+      </H2>
       <ul>
         <li>
           <a href="https://www.synology.com/en-us/products/RT2600ac" target="_blank" rel="noopener noreferrer">
@@ -1075,6 +1076,18 @@ const Uses = () => (
         </li>
       </ul>
     </Content>
+
+    {/* TODO: use OrderedList component */}
+    <style jsx global>{`
+      ul {
+        margin-left: 1.5em;
+        padding-left: 0;
+      }
+
+      li {
+        padding-left: 0.25em;
+      }
+    `}</style>
   </>
 );
 

yarn.lock

@@ -37,19 +37,19 @@
     source-map "^0.5.0"
 
 "@babel/core@^7.15.5":
-  version "7.16.7"
+  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.7.tgz#db990f931f6d40cb9b87a0dc7d2adc749f1dcbcf"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.10.tgz#ebd034f8e7ac2b6bfcdaa83a161141a646f74b50"
-  integrity sha512-aeLaqcqThRNZYmbMqtulsetOQZ/5gbR/dWruUCJcpas4Qoyy+QeagfDsPdMrqwsPRDNxJvBlRiZxxX7THO7qtA==
+  integrity sha512-pbiIdZbCiMx/MM6toR+OfXarYix3uz0oVsnNtfdAGTcCTu3w/JGF8JhirevXLBJUu0WguSZI12qpKnx7EeMyLA==
   dependencies:
     "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.16.7"
+    "@babel/generator" "^7.16.8"
     "@babel/helper-compilation-targets" "^7.16.7"
     "@babel/helper-module-transforms" "^7.16.7"
     "@babel/helpers" "^7.16.7"
-    "@babel/parser" "^7.16.7"
+    "@babel/parser" "^7.16.10"
     "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.16.7"
+    "@babel/traverse" "^7.16.10"
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.16.8"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
@@ -57,7 +57,7 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/generator@^7.12.5", "@babel/generator@^7.16.7", "@babel/generator@^7.16.8":
+"@babel/generator@^7.12.5", "@babel/generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.8.tgz#359d44d966b8cd059d543250ce79596f792f2ebe"
   integrity sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==
@@ -92,9 +92,9 @@
     semver "^6.3.0"
 
 "@babel/helper-create-class-features-plugin@^7.16.7":
-  version "7.16.7"
+  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.7.tgz#9c5b34b53a01f2097daf10678d65135c1b9f84ba"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.10.tgz#8a6959b9cc818a88815ba3c5474619e9c0f2c21c"
-  integrity sha512-kIFozAvVfK05DM4EVQYKK+zteWvY85BFdGBRQBytRyY3y+6PX0DkDOn/CZ3lEuczCfrCxEzwt0YtP/87YPTWSw==
+  integrity sha512-wDeej0pu3WN/ffTxMNCPW5UCiOav8IcLRxSIyp/9+IF2xJUM9h/OYjg0IJLHaL6F8oU8kqMz9nc1vryXhMsgXg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.16.7"
     "@babel/helper-environment-visitor" "^7.16.7"
@@ -279,18 +279,18 @@
     "@babel/types" "^7.16.7"
 
 "@babel/highlight@^7.16.7":
-  version "7.16.7"
+  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.7.tgz#81a01d7d675046f0d96f82450d9d9578bdfd6b0b"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
-  integrity sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==
+  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
   dependencies:
     "@babel/helper-validator-identifier" "^7.16.7"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.12.7", "@babel/parser@^7.16.7", "@babel/parser@^7.16.8":
+"@babel/parser@^7.12.7", "@babel/parser@^7.16.10", "@babel/parser@^7.16.7":
-  version "7.16.8"
+  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.8.tgz#61c243a3875f7d0b0962b0543a33ece6ff2f1f17"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.10.tgz#aba1b1cb9696a24a19f59c41af9cf17d1c716a88"
-  integrity sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==
+  integrity sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
@@ -871,9 +871,9 @@
     "@babel/helper-plugin-utils" "^7.16.7"
 
 "@babel/preset-env@^7.15.6":
-  version "7.16.8"
+  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.8.tgz#e682fa0bcd1cf49621d64a8956318ddfb9a05af9"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.10.tgz#84400e6b5ee1efd982f55c61f3b6ac3fb5c8ab57"
-  integrity sha512-9rNKgVCdwHb3z1IlbMyft6yIXIeP3xz6vWvGaLHrJThuEIqWfHb0DNBH9VuTgnDfdbUDhkmkvMZS/YMCtP7Elg==
+  integrity sha512-iCac3fZn9oOcLqc1N2/copPiX7aoxzsvjeDdXoZobrlbQ6YGgS3bL9HyldOJ8V8AY5P7pFynCATrn7M4dMw0Yg==
   dependencies:
     "@babel/compat-data" "^7.16.8"
     "@babel/helper-compilation-targets" "^7.16.7"
@@ -1006,10 +1006,10 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8":
+"@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.10", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8":
-  version "7.16.8"
+  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.8.tgz#bab2f2b09a5fe8a8d9cad22cbfe3ba1d126fef9c"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.10.tgz#448f940defbe95b5a8029975b051f75993e8239f"
-  integrity sha512-xe+H7JlvKsDQwXRsBhSnq1/+9c+LlQcCK3Tn/l5sbx02HYns/cn7ibp9+RV1sIUqu7hKg91NWsgHurO9dowITQ==
+  integrity sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==
   dependencies:
     "@babel/code-frame" "^7.16.7"
     "@babel/generator" "^7.16.8"
@@ -1017,7 +1017,7 @@
     "@babel/helper-function-name" "^7.16.7"
     "@babel/helper-hoist-variables" "^7.16.7"
     "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/parser" "^7.16.8"
+    "@babel/parser" "^7.16.10"
     "@babel/types" "^7.16.8"
     debug "^4.1.0"
     globals "^11.1.0"
@@ -2563,9 +2563,9 @@ eastasianwidth@^0.2.0:
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
 electron-to-chromium@^1.4.17:
-  version "1.4.48"
+  version "1.4.49"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.48.tgz#1948b5227aa0ca1ed690945eae1adbe9e7904575"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.49.tgz#5b6a3dc032590beef4be485a4b0b3fe7d0e3dfd7"
-  integrity sha512-RT3SEmpv7XUA+tKXrZGudAWLDpa7f8qmhjcLaM6OD/ERxjQ/zAojT8/Vvo0BSzbArkElFZ1WyZ9FuwAYbkdBNA==
+  integrity sha512-k/0t1TRfonHIp8TJKfjBu2cKj8MqYTiEpOhci+q7CVEE5xnCQnx1pTa+V8b/sdhe4S3PR4p4iceEQWhGrKQORQ==
 
 email-regex@^5.0.0:
   version "5.0.0"
@@ -4836,10 +4836,10 @@ next-mdx-remote@4.0.0-rc.1:
     vfile "^5.2.0"
     vfile-matter "^3.0.1"
 
-next-seo@^4.28.1:
+next-seo@^4.29.0:
-  version "4.28.1"
+  version "4.29.0"
-  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.28.1.tgz#c98ee559c8ab7196c62d0f6903afd7a8cde47a03"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.29.0.tgz#d281e95ba47914117cc99e9e468599f0547d9b9b"
-  integrity sha512-WZgwdM+UhpNF3A37zFllzmPhnOVJ9vYeYlc0n3Z/kYfz/QQgy8NEdncNNggS9dU4JD8xriaCcyknhy5OsrFsJw==
+  integrity sha512-xmwzcz4uHaYJ8glbuhs6FSBQ7z3irmdPYdJJ5saWm72Uy3o+mPKGaPCXQetTCE6/xxVnpoDV4yFtFlEjUcljSg==
 
 next-themes@^0.0.15:
   version "0.0.15"