Add WordEntry component and New Words note page with contextual sentences

[Copilot]

Adds a reusable component for displaying word definitions with source attribution and contextual sentence examples, plus a new note page collecting interesting words discovered while reading.

Implementation

Component: WordEntry.astro

• Props: word, sourceTitle, sourceAuthor?, sourceLink?, sentence?
• Slot-based definition content for flexibility
• Card styling with hover effects using design system variables
• Dot-separated source metadata matching existing citation patterns
• Optional sentence field to show contextual usage with semantic <q> element
• Visual hierarchy with border separators between sections

Note: new-words.mdx

• 2-column responsive grid (1 column on mobile) using GridColumns
• Four example entries with contextual sentences: Defenestration, Petrichor, Sonder, Apricity
• Growth stage: seedling

Usage

<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.
</WordEntry>

Screenshots

Desktop view:

Mobile view:

Original prompt

Summary

Add a new "New Words" note page that collects words discovered while reading, along with their definitions and sources. This requires a new WordEntry component and a starter MDX file.

Files to Create

1. src/components/mdx/WordEntry.astro

Create a new component for displaying word entries with the following structure:

• Word: Large text in Canela Text (--font-body), using --font-size-md (~25-28px), color --color-gray-800
• Definition: Sans-serif (--font-sans), --font-size-sm, color --color-gray-700
• Source: Small sans-serif (--font-sans), --font-size-xs, color --color-gray-500
  • Source link should use --color-bright-crimson with hover to --color-crimson
  • Author is optional, separated by a dot divider

Props interface:

interface Props {
  word: string;
  sourceTitle: string;
  sourceAuthor?: string;
  sourceLink?: string;
}

The component should:

• Have a light cream background (--color-light-cream)
• Have a tinted cream border (--color-tinted-cream)
• Use --border-radius-base and --box-shadow-sm
• Have a subtle hover effect with --box-shadow-md
• The source section should have a top border separating it from the definition
• Use the existing dot separator pattern (SVG circle) between source title and author, similar to other components in the codebase

2. src/content/notes/new-words.mdx

Create a new note file with:

Frontmatter:

---
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"
---

Content should:

• Import WordEntry from ../../components/mdx/WordEntry.astro
• Import GridColumns from ../../components/mdx/GridColumns.astro
• Have an IntroParagraph explaining the purpose of the page
• Use GridColumns with columns={2} and alignItems="top" to create a two-column layout
• Include 3-4 example word entries to demonstrate the component

Example word entries to include:

1. Defenestration - "The act of throwing someone out of a window" - from "The Better Angels of Our Nature" by Steven Pinker
2. Petrichor - "The pleasant, earthy smell produced when rain falls on dry ground" - from "Nature" by Bear & Thomas (with link)
3. Sonder - "The realization that each random passerby is living a life as vivid and complex as your own" - from "The Dictionary of Obscure Sorrows" by John Koenig
4. Apricity - "The warmth of the sun in winter" - from "Forgotten English" by Jeffrey Kacirk

Design Reference

Follow the existing component patterns in the codebase:

• Look at QuoteCard.astro for source citation styling patterns
• Look at SimpleCard.astro for card styling patterns
• Look at ResourceBook.astro for the slot-based content pattern
• Use existing CSS variables from src/global.css throughout

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
maggieappleton-com-v3	Ignored		Jan 28, 2026 9:27am

[MaggieAppleton]

@copilot I forgot to mention I want to include the sentence where I encountered the word as part of the entry.

E.g.
Acceding
{definition}

Found in {article title} by {author}
"the good-enough mother is one who, initially acceding entirely to a newborn’s demands, intuits how, over time, she might incrementally hold back from offering immediate gratification"

Can we update the data structure and layout to accomodate this?

[Copilot]

@copilot I forgot to mention I want to include the sentence where I encountered the word as part of the entry.

E.g.
...

Updated the component to include an optional sentence prop that displays the contextual sentence where you encountered the word. The sentence appears in italics below the source attribution, styled with quote marks.

All 4 example entries now include sentences demonstrating the feature.

Commit: 375d90e

Desktop view:

Mobile view:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/maggieappleton.com-V3/maggieappleton.com-V3/node_modules/.bin/astro dev (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)