Add WordEntry component and New Words note page with contextual sentences

src/components/mdx/WordEntry.astro

@@ -0,0 +1,129 @@
+---
+interface Props {
+  word: string;
+  sourceTitle: string;
+  sourceAuthor?: string;
+  sourceLink?: string;
+  sentence?: string;
+}
+
+const { word, sourceTitle, sourceAuthor, sourceLink, sentence } = Astro.props;
+---
+
+<div class="word-entry">
+  <div class="word">{word}</div>
+  <div class="definition">
+    <slot />
+  </div>
+  <div class="source">
+    {sourceLink ? (
+      <a href={sourceLink} target="_blank" rel="noopener noreferrer">
+        <span>{sourceTitle}</span>
+      </a>
+    ) : (
+      <span>{sourceTitle}</span>
+    )}
+    {sourceAuthor && (
+      <>
+        <div class="dot"></div>
+        <span class="author">{sourceAuthor}</span>
+      </>
+    )}
+  </div>
+  {sentence && (
+    <q class="sentence">{sentence}</q>
+  )}
+</div>
+
+<style>
+  .word-entry {
+    background-color: var(--color-light-cream);
+    border: 1px solid var(--color-tinted-cream);
+    border-radius: var(--border-radius-base);
+    box-shadow: var(--box-shadow-sm);
+    padding: var(--space-m) var(--space-l);
+    transition: box-shadow 0.2s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+  }
+
+  .word-entry:hover {
+    box-shadow: var(--box-shadow-md);
+  }
+
+  .word {
+    font-family: var(--font-body);
+    font-size: var(--font-size-md);
+    color: var(--color-gray-800);
+    font-weight: 500;
+    line-height: var(--leading-tight);
+  }
+
+  .definition {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+    color: var(--color-gray-700);
+    line-height: var(--leading-normal);
+  }
+
+  .definition :global(p) {
+    margin: 0;
+  }
+
+  .source {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    padding-top: var(--space-xs);
+    border-top: 1px solid var(--color-tinted-cream);
+    margin-top: var(--space-2xs);
+  }
+
+  .source span {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--color-gray-500);
+    font-style: normal;
+  }
+
+  .source a {
+    text-decoration: none;
+  }
+
+  .source a span {
+    color: var(--color-bright-crimson);
+    transition: color 0.2s ease-in;
+  }
+
+  .source a:hover span {
+    color: var(--color-crimson);
+  }
+
+  .source .author {
+    color: var(--color-gray-500);
+  }
+
+  .dot {
+    width: 5px;
+    height: 5px;
+    margin: 3px 2px 0 2px;
+    background-color: var(--color-gray-300);
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .sentence {
+    display: block;
+    font-family: var(--font-body);
+    font-size: var(--font-size-sm);
+    color: var(--color-gray-600);
+    line-height: var(--leading-normal);
+    font-style: italic;
+    margin-top: var(--space-2xs);
+    padding-top: var(--space-xs);
+    border-top: 1px solid var(--color-tinted-cream);
+    quotes: '"' '"';
+  }
+</style>

src/content/notes/new-words.mdx

@@ -0,0 +1,68 @@
+---
+title: "New Words"
+description: "A collection of words I've come across that I didn't know before"
+startDate: "2026-01-27"
+updated: "2026-01-27"
+type: "note"
+topics: ["Linguistics", "Language", "Learning"]
+growthStage: "seedling"
+---
+
+import WordEntry from "../../components/mdx/WordEntry.astro";
+import GridColumns from "../../components/mdx/GridColumns.astro";
+import IntroParagraph from "../../components/mdx/IntroParagraph.astro";
+
+<IntroParagraph>
+
+This is a growing collection of delightful words I've encountered while reading. Some are obscure, some are technical, and some are just plain fun to say. Each entry includes the word's definition and where I first came across it.
+
+</IntroParagraph>
+
+<GridColumns columns={2} alignItems="top">
+
+<WordEntry 
+  word="Defenestration" 
+  sourceTitle="The Better Angels of Our Nature" 
+  sourceAuthor="Steven Pinker"
+  sentence="The Third Defenestration of Prague in 1618 marked the beginning of the Thirty Years' War, one of the most brutal conflicts in European history."
+>
+
+The act of throwing someone out of a window. Surprisingly specific, and surprisingly common enough in history to warrant its own word.
+
+</WordEntry>
+
+<WordEntry 
+  word="Petrichor" 
+  sourceTitle="Nature" 
+  sourceAuthor="Bear & Thomas"
+  sourceLink="https://www.nature.com/articles/205"
+  sentence="The smell of petrichor after a summer rain is caused by oils that plants excrete during dry periods."
+>
+
+The pleasant, earthy smell produced when rain falls on dry ground. The word combines the Greek petros (stone) and ichor (the fluid that flows in the veins of the gods).
+
+</WordEntry>
+
+<WordEntry 
+  word="Sonder" 
+  sourceTitle="The Dictionary of Obscure Sorrows" 
+  sourceAuthor="John Koenig"
+  sentence="I felt a deep sense of sonder watching the crowds rush through the train station, each person absorbed in their own urgent narrative."
+>
+
+The realization that each random passerby is living a life as vivid and complex as your own—populated with their own ambitions, friends, routines, worries and inherited craziness.
+
+</WordEntry>
+
+<WordEntry 
+  word="Apricity" 
+  sourceTitle="Forgotten English" 
+  sourceAuthor="Jeffrey Kacirk"
+  sentence="We sat on the bench enjoying the apricity, grateful for the sun's warmth on an otherwise frigid January afternoon."
+>
+
+The warmth of the sun in winter. One of those perfectly specific words that captures a feeling we've all experienced but never had a name for.
+
+</WordEntry>
+
+</GridColumns>

src/links.json

@@ -2322,6 +2322,16 @@
       }
     ]
   },
+  {
+    "ids": [
+      "New Words"
+    ],
+    "slug": "new-words",
+    "growthStage": "seedling",
+    "description": "A collection of words I've come across that I didn't know before",
+    "outboundLinks": [],
+    "inboundLinks": []
+  },
   {
     "ids": [
       "New Harvest & Illustrating the Cultivated Meat Podcast"