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),
-.code :global(.code-highlight) :global(.token.prolog),
-.code :global(.code-highlight) :global(.token.cdata) {
+.block :global(.code-highlight) :global(.token.comment),
+.block :global(.code-highlight) :global(.token.prolog),
+.block :global(.code-highlight) :global(.token.cdata) {
   color: var(--code-comment);
 }
 
-.code :global(.code-highlight) :global(.token.delimiter),
-.code :global(.code-highlight) :global(.token.boolean),
-.code :global(.code-highlight) :global(.token.keyword),
-.code :global(.code-highlight) :global(.token.selector),
-.code :global(.code-highlight) :global(.token.important),
-.code :global(.code-highlight) :global(.token.doctype),
-.code :global(.code-highlight) :global(.token.atrule),
-.code :global(.code-highlight) :global(.token.url) {
+.block :global(.code-highlight) :global(.token.delimiter),
+.block :global(.code-highlight) :global(.token.boolean),
+.block :global(.code-highlight) :global(.token.keyword),
+.block :global(.code-highlight) :global(.token.selector),
+.block :global(.code-highlight) :global(.token.important),
+.block :global(.code-highlight) :global(.token.doctype),
+.block :global(.code-highlight) :global(.token.atrule),
+.block :global(.code-highlight) :global(.token.url) {
   color: var(--code-keyword);
 }
 
-.code :global(.code-highlight) :global(.token.tag),
-.code :global(.code-highlight) :global(.token.builtin),
-.code :global(.code-highlight) :global(.token.regex) {
+.block :global(.code-highlight) :global(.token.tag),
+.block :global(.code-highlight) :global(.token.builtin),
+.block :global(.code-highlight) :global(.token.regex) {
   color: var(--code-namespace);
 }
 
-.code :global(.code-highlight) :global(.token.property),
-.code :global(.code-highlight) :global(.token.constant),
-.code :global(.code-highlight) :global(.token.variable),
-.code :global(.code-highlight) :global(.token.attr-value),
-.code :global(.code-highlight) :global(.token.class-name),
-.code :global(.code-highlight) :global(.token.string),
-.code :global(.code-highlight) :global(.token.char) {
+.block :global(.code-highlight) :global(.token.property),
+.block :global(.code-highlight) :global(.token.constant),
+.block :global(.code-highlight) :global(.token.variable),
+.block :global(.code-highlight) :global(.token.attr-value),
+.block :global(.code-highlight) :global(.token.class-name),
+.block :global(.code-highlight) :global(.token.string),
+.block :global(.code-highlight) :global(.token.char) {
   color: var(--code-variable);
 }
 
-.code :global(.code-highlight) :global(.token.literal-property),
-.code :global(.code-highlight) :global(.token.attr-name) {
+.block :global(.code-highlight) :global(.token.literal-property),
+.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),
-.code :global(.code-highlight) :global(.token.attr-value .punctuation) {
+.block :global(.code-highlight) :global(.token.tag .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>
+);