clean up styled JSX of colorful homepage links

components/home/ColorLink.tsx

@@ -23,9 +23,8 @@ export default function ColorLink({
 }: Props) {
   external = external || isAbsoluteUrl(href);
 
-  // hacky hack to form a unique CSS var based on the light hex code, since they need to be set "globally"
+  // spits out an alpha color in rgb() that's compatible with linear-gradient()
-  const varName = `Home__${lightColor.replace("#", "")}`;
+  const bgAlpha = (color: string) => hexRgb(color, { alpha: 0.4, format: "css" });
-  const alpha = 0.4;
 
   return (
     <Link href={href} passHref={true} prefetch={false}>
@@ -37,20 +36,15 @@ export default function ColorLink({
         rel={external ? "noopener noreferrer" : undefined}
       >
         {children}
-        <style jsx global>{`
-          :root {
-            --${varName}: ${lightColor};
-            --${varName}_alpha: ${hexRgb(lightColor, { alpha: alpha, format: "css" })};
-          }
-          [data-theme="dark"] {
-            --${varName}: ${darkColor};
-            --${varName}_alpha: ${hexRgb(darkColor, { alpha: alpha, format: "css" })};
-          }
-        `}</style>
         <style jsx>{`
           a {
-            color: var(--${varName});
+            color: ${lightColor};
-            background-image: linear-gradient(var(--${varName}_alpha), var(--${varName}_alpha));
+            background-image: linear-gradient(${bgAlpha(lightColor)}, ${bgAlpha(lightColor)});
+          }
+
+          :global([data-theme="dark"]) a {
+            color: ${darkColor};
+            background-image: linear-gradient(${bgAlpha(darkColor)}, ${bgAlpha(darkColor)});
           }
         `}</style>
       </a>

components/home/Home.module.scss

@@ -39,7 +39,7 @@
     word-spacing: -0.3em;
 
     a {
-      background: none;
+      background: none !important;
       padding-bottom: 0;
     }
   }

components/notes/List.module.scss

@@ -1,6 +1,15 @@
 .section {
   margin: 2.4em 0;
 
+  &:first-of-type {
+    margin-top: 0;
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
 .year {
   font-size: 2.2em;
   margin-top: 0;
@@ -11,21 +20,24 @@
   list-style-type: none;
   margin: 0;
   padding: 0;
-
-    li:last-of-type {
-      margin-bottom: 0;
-    }
 }
 
-  &:first-of-type {
+.row {
-    margin-top: 0;
+  display: flex;
-  }
+  line-height: 1.75;
+  margin-bottom: 1em;
 
   &:last-of-type {
     margin-bottom: 0;
   }
 }
 
+.date {
+  width: 5.25em;
+  flex-shrink: 0;
+  color: var(--medium);
+}
+
 @media screen and (max-width: 768px) {
   .section .year {
     font-size: 2em;

components/notes/List.tsx

@@ -1,23 +1,38 @@
-import ListItem from "./ListItem";
+import Link from "next/link";
+import { format, parseISO } from "date-fns";
 
 import styles from "./List.module.scss";
 
-export default function List({ allNotes }) {
+type NoteProps = {
+  title: string;
+  date: string;
+  slug: string;
+};
+
+export default function List({ notesByYear }) {
   const sections = [];
 
-  Object.entries(allNotes).forEach(([year, notes]: [string, any]) => {
+  Object.entries(notesByYear).forEach(([year, notes]: [string, NoteProps[]]) => {
     sections.push(
       <section key={year} className={styles.section}>
         <h2 className={styles.year}>{year}</h2>
         <ul className={styles.list}>
           {notes.map((note) => (
-            <ListItem key={note.slug} title={note.title} date={note.date} slug={note.slug} />
+            <li key={note.slug} className={styles.row}>
+              <span className={styles.date}>{format(parseISO(note.date), "MMM d")}</span>
+              <span>
+                <Link href={`/notes/${note.slug}/`} prefetch={false}>
+                  <a>{note.title}</a>
+                </Link>
+              </span>
+            </li>
           ))}
         </ul>
       </section>
     );
   });
 
+  // grouped notes enter this component ordered chronologically -- we want reverse chronological
   const reversed = sections.reverse();
 
   return <>{reversed}</>;

components/notes/ListItem.module.scss

@@ -1,11 +0,0 @@
-.row {
-  display: flex;
-  line-height: 1.75;
-  margin-bottom: 1em;
-}
-
-.date {
-  width: 5.25em;
-  flex-shrink: 0;
-  color: var(--medium);
-}

components/notes/ListItem.tsx

@@ -1,23 +0,0 @@
-import Link from "next/link";
-import { format, parseISO } from "date-fns";
-
-import styles from "./ListItem.module.scss";
-
-export type Props = {
-  title: string;
-  date: string;
-  slug: string;
-};
-
-export default function ListItem({ title, date, slug }: Props) {
-  return (
-    <li className={styles.row}>
-      <span className={styles.date}>{format(parseISO(date), "MMM d")}</span>
-      <span>
-        <Link href={`/notes/${slug}/`} prefetch={false}>
-          <a>{title}</a>
-        </Link>
-      </span>
-    </li>
-  );
-}

lib/parse-notes.ts

@@ -21,12 +21,9 @@ export const getNoteBySlug = (slug, fields = []) => {
   fields.forEach((field) => {
     if (field === "slug") {
       items[field] = realSlug;
-    }
+    } else if (field === "content") {
-    if (field === "content") {
       items[field] = content;
-    }
+    } else if (typeof data[field] !== "undefined") {
-
-    if (typeof data[field] !== "undefined") {
       items[field] = data[field];
     }
   });

pages/notes/index.tsx

@@ -6,12 +6,12 @@ import List from "../../components/notes/List";
 import { getAllNotes } from "../../lib/parse-notes";
 import type { GetStaticProps } from "next";
 
-export default function Notes({ allNotes }) {
+export default function Notes({ notesByYear }) {
   return (
     <>
       <Layout>
         <Container title="Notes" description="Recent posts by Jake Jarvis.">
-          <List allNotes={allNotes} />
+          <List notesByYear={notesByYear} />
         </Container>
       </Layout>
     </>
@@ -26,7 +26,7 @@ export const getStaticProps: GetStaticProps = async () => {
 
   return {
     props: {
-      allNotes: groupBy(allNotes, "year"),
+      notesByYear: groupBy(allNotes, "year"),
     },
   };
 };