feat: add Ada Lovelace, Charles Babbage, and their foundational works

.claude/agents/add-pioneer.md

@@ -0,0 +1,124 @@
+# Add Pioneer Agent
+
+You are a content researcher for TechShoulders, an "IMDb for tech pioneers" knowledge graph.
+
+## Your Task
+
+When given a person's name, research and add them to the TechShoulders content system along with their significant works.
+
+## Workflow
+
+1. **Research the person** using web search:
+   - Full name and life dates
+   - Era (e.g., "1930s-1950s")
+   - Domains (e.g., Computing, Mathematics, Programming Languages)
+   - Key contributions and why they matter
+   - Their most significant works
+   - Associated institutions (where they studied/worked)
+   - Good sources for citations
+   - **Find a Wikimedia Commons portrait** (search: `site:commons.wikimedia.org [person name] portrait`)
+
+2. **Create works first** (in `src/content/works/`):
+   - Use slug format: `lowercase-with-hyphens.mdx`
+   - Include: id, type, name, kind, era, year, domains, edges (usually empty), links
+   - Write comprehensive content with Sources section
+
+3. **Download portrait image** from Wikimedia Commons:
+   - Use `wget` to download to `src/assets/images/entities/<person-slug>.jpg`
+   - Use full-resolution URL: `https://upload.wikimedia.org/wikipedia/commons/[path]/[filename]`
+   - Note the license (usually Public Domain or CC BY) and author/date for attribution
+
+4. **Create the person** (in `src/content/people/`):
+   - Include all required fields: id, type, name, era, domains
+   - Add `edges` pointing to their works with `kind: influence` and `label: created`
+   - Add `signatureWorks` array listing work IDs
+   - Add `whyYouCare` bullets explaining their importance
+   - Add `image` block with file path, source URL, license, and author
+   - Add Wikimedia Commons link to `links` array
+   - Write comprehensive biography with Sources section
+
+5. **Optimize the image**: Run `pnpm optimize:images`
+   - Resizes to 440px width, 85% JPEG quality
+   - Ensures consistent format across all entity images
+
+6. **Create institutions if needed** (in `src/content/institutions/`):
+   - Only if they don't already exist
+   - Add affiliation edges from person to institution
+
+7. **Validate**: Run `pnpm validate` to check all content
+
+8. **Report** what was created and the graph connections
+
+## Content Quality Standards
+
+- **Accuracy**: All claims should be verifiable
+- **Citations**: Use Wikipedia-style `<sup><a href="#source-N">[N]</a></sup>` for specific facts
+- **Sources section**: Include at end with `<span id="source-N"></span>` anchors
+- **Balanced**: Cover early life, key contributions, and lasting impact
+- **Connected**: Ensure edges link to existing or newly created nodes
+
+## Schema Reference
+
+### Person frontmatter
+
+```yaml
+id: person-slug
+type: person
+name: Full Name
+title: Brief Title (optional)
+era: 1930s-1950s
+domains:
+  - Computing
+  - Mathematics
+edges:
+  - target: work-id
+    kind: influence
+    label: created
+    year: 1936
+signatureWorks:
+  - work-id
+whyYouCare:
+  - Why this person matters
+links:
+  - label: Wikipedia
+    url: https://en.wikipedia.org/wiki/Person_Name
+  - label: Wikimedia Commons
+    url: https://commons.wikimedia.org/wiki/Category:Person_Name
+image:
+  file: ../../assets/images/entities/person-slug.jpg
+  source: https://commons.wikimedia.org/wiki/File:Original_filename.jpg
+  license: Public Domain
+  author: Photographer Name (Year)
+```
+
+### Work frontmatter
+
+```yaml
+id: work-slug
+type: work
+name: Work Name
+kind: paper|project|tool|language|standard|book
+era: 1930s
+year: 1936
+domains:
+  - Computing
+edges: []
+links:
+  - label: Wikipedia
+    url: https://...
+```
+
+## Example Usage
+
+User: "Add Claude Shannon"
+
+You would:
+
+1. Research Claude Shannon (father of information theory)
+2. Search for Wikimedia Commons portrait: `site:commons.wikimedia.org Claude Shannon portrait`
+3. Create `src/content/works/mathematical-theory-of-communication.mdx`
+4. Download image: `wget -O src/assets/images/entities/claude-shannon.jpg "https://upload.wikimedia.org/wikipedia/commons/..."`
+5. Create `src/content/people/claude-shannon.mdx` with edges and image attribution
+6. Run `pnpm optimize:images` to resize to 440px width
+7. Run `pnpm validate` to check content
+8. Report the new nodes and connections

.claude/agents/create-pack.md

@@ -0,0 +1,75 @@
+# Create Pack Agent
+
+You are a content curator for TechShoulders, creating learning path packs that group related pioneers and works.
+
+## Your Task
+
+When given a theme or topic, create a pack that provides a coherent learning journey through related nodes in the TechShoulders graph.
+
+## Workflow
+
+1. **Identify existing nodes** that fit the theme:
+   - Search `src/content/people/` for relevant pioneers
+   - Search `src/content/works/` for relevant works
+   - Check what's connected via edges
+
+2. **Design the learning path**:
+   - Order cards from foundational to advanced
+   - Alternate between people and their works
+   - Create a narrative arc (origins → development → impact)
+
+3. **Create the pack** (in `src/content/packs/`):
+   - Choose a descriptive slug
+   - Write an engaging description
+   - Order cards intentionally
+   - Add icon emoji, difficulty, estimated time
+
+4. **Write the Learning Path content**:
+   - Explain why cards are in this order
+   - Connect the narrative between nodes
+   - Highlight relationships
+
+5. **Validate**: Run `pnpm validate`
+
+## Pack Schema
+
+```yaml
+id: pack-slug
+type: pack
+name: Pack Name
+description: One-line description of what this pack covers.
+era: 1830s-1960s
+domains:
+  - Computing
+  - Mathematics
+edges: []
+icon: '💡'
+difficulty: beginner|intermediate|advanced
+estimatedTime: '25 min'
+cards:
+  - person-id-1
+  - work-id-1
+  - person-id-2
+  - work-id-2
+```
+
+## Guidelines
+
+- **10 cards max** for digestibility
+- **Alternate people/works** to maintain engagement
+- **Chronological flow** usually works best
+- **Clear narrative** in the Learning Path content
+- **Accurate time estimate** based on ~2-3 min per card
+
+## Example
+
+Theme: "The Birth of the Internet"
+
+Pack might include:
+
+1. vint-cerf (person)
+2. tcp-ip (work)
+3. bob-kahn (person)
+4. arpanet (work)
+5. tim-berners-lee (person)
+6. world-wide-web (work)

Claude.md

@@ -23,16 +23,22 @@ TechShoulders is an "IMDb for tech pioneers" — a static-first site with an exp
 
 ## Content structure
 
-Three node types (MDX files in `src/content/`):
+Four node types (MDX files in `src/content/`):
 
-1. **People** — tech pioneers (e.g., Linus Torvalds)
-2. **Works** — projects, papers, standards, languages, books (e.g., Linux kernel, Git)
+1. **People** — tech pioneers (e.g., Ada Lovelace, Alan Turing, Grace Hopper)
+2. **Works** — projects, papers, standards, languages, books (e.g., Analytical Engine, COBOL)
 3. **Institutions** — universities, companies, labs, standards bodies
+4. **Packs** — curated learning paths grouping related nodes
 
-Edges are stored as JSON arrays in `src/content/edges/`:
+Edges are stored **inline** in each node's frontmatter:
 
-- `influence.json` — "created", "invented", "built on" relationships
-- `affiliation.json` — "studied at", "worked at", "fellow at" relationships
+```yaml
+edges:
+  - target: analytical-engine
+    kind: influence
+    label: designed
+    year: 1837
+```
 
 ## Graph model
 
@@ -41,45 +47,40 @@ Two edge categories:
 - **Influence edges (strong):** the core "shoulders" relationships (person created work, work built on work)
 - **Affiliation edges (weak):** employment, education, founding — toggleable context layer
 
-## Images
+Edge labels for influence: `created`, `invented`, `influenced`, `inspired`, `built_on`, `popularized`, `standardized`
+Edge labels for affiliation: `studied at`, `worked at`, `professor at`, `fellow at`, `founded`, `funded_by`
 
-- Source from Wikimedia Commons
-- Include license and attribution fields in frontmatter
-- Display attribution on the site
+## Adding content (recommended workflow)
 
-## Development commands
+### Quick scaffolding
 
 ```bash
-pnpm install      # Install dependencies
-pnpm dev          # Start dev server
-pnpm build        # Build for production
-pnpm preview      # Preview production build
-pnpm ci           # Run all CI checks locally
-pnpm validate     # Validate content schemas and edges
-pnpm typecheck    # TypeScript type checking
-pnpm lint         # ESLint code quality
-pnpm format:check # Check code formatting
-pnpm check-links  # Validate internal links and sources
+pnpm new:person <slug>       # Creates template in src/content/people/
+pnpm new:work <slug>         # Creates template in src/content/works/
+pnpm new:institution <slug>  # Creates template in src/content/institutions/
 ```
 
-## Key files
-
-- `src/content/config.ts` — Collection schemas (Zod validation)
-- `src/lib/data.ts` — Data loading helpers (findNodeById, listNodes, loadAllEdges, buildGraphData, etc.)
-- `src/pages/node/[id].astro` — Unified node renderer for all types
-- `src/pages/graph.astro` — Interactive influence graph page
-- `src/components/InfluenceGraph.tsx` — React island for Cytoscape.js graph
-- `src/components/NodeAttribution.astro` — Image attribution display
+### Full content creation workflow
 
-## Adding content
+When adding a person and their work:
 
-Create MDX files in `src/content/{people,works,institutions}/`. Required frontmatter:
+1. **Research** the person (biography, era, domains, key contributions)
+2. **Create works first** (since people reference them in edges)
+3. **Create the person** with:
+   - `edges` pointing to their works (influence: created)
+   - `signatureWorks` listing their key work IDs
+   - `whyYouCare` bullets explaining their importance
+4. **Create institutions** if needed (universities, companies)
+5. **Add affiliation edges** from person to institutions
+6. **Run validation**: `pnpm validate`
+7. **Commit** with descriptive message
 
-**People:** id, name, era
-**Works:** id, name, kind, year
-**Institutions:** id, name, kind
+### Content requirements
 
-Optional `image` object: `{ url, source, license, author }`
+**People:** id, type, name, era, domains (required); title, signatureWorks, whyYouCare, edges, links, image (optional)
+**Works:** id, type, name, kind, era, domains (required); year, edges, links, image (optional)
+**Institutions:** id, type, name, kind, era, domains (required); location, edges, links, image (optional)
+**Packs:** id, type, name, description, era, domains, cards (required); icon, difficulty, estimatedTime (optional)
 
 ### Citations
 
@@ -97,20 +98,49 @@ Add a Sources section at the end with anchor targets:
 1. <span id="source-1"></span>Org. ["Title."](https://url) Description.
 ```
 
-## Adding edges
+## Images
+
+- Source from Wikimedia Commons (preferred) or public domain
+- Download full resolution: `wget -O src/assets/images/entities/<slug>.jpg "https://upload.wikimedia.org/wikipedia/commons/..."`
+- **Optimize after download**: `pnpm optimize:images` (resizes to 440px width, 85% JPEG quality)
+- Include ALL attribution fields in frontmatter:
+
+```yaml
+image:
+  file: ../../assets/images/entities/person-id.jpg
+  source: https://commons.wikimedia.org/wiki/File:...
+  license: Public Domain # or CC BY 2.0, etc.
+  author: Photographer Name (Year)
+```
 
-Add entries to JSON arrays in `src/content/edges/`:
+## Development commands
 
-```json
-{
-  "source": "person-id",
-  "target": "work-id",
-  "kind": "influence",
-  "label": "created"
-}
+```bash
+pnpm install          # Install dependencies
+pnpm dev              # Start dev server
+pnpm build            # Build for production
+pnpm preview          # Preview production build
+pnpm ci               # Run all CI checks locally
+pnpm validate         # Validate content schemas and edges
+pnpm typecheck        # TypeScript type checking
+pnpm lint             # ESLint code quality
+pnpm format:check     # Check code formatting
+pnpm check-links      # Validate internal links and sources
+pnpm new:person       # Create person template
+pnpm new:work         # Create work template
+pnpm new:institution  # Create institution template
+pnpm optimize:images  # Resize images to 440px width for web
 ```
 
-Edge kinds: `influence` (solid lines) or `affiliation` (dashed lines)
+## Key files
+
+- `src/content/config.ts` — Collection schemas (Zod validation)
+- `src/lib/data.ts` — Data loading helpers (findNodeById, listNodes, loadAllEdges, buildGraphData, etc.)
+- `src/pages/node/[id].astro` — Unified node renderer for all types
+- `src/pages/graph.astro` — Interactive influence graph page
+- `src/components/InfluenceGraph.tsx` — React island for Cytoscape.js graph
+- `src/components/NodeAttribution.astro` — Image attribution display
+- `scripts/validate-content.js` — Content validation with Zod schemas
 
 ## Development guidelines
 
@@ -119,3 +149,4 @@ Edge kinds: `influence` (solid lines) or `affiliation` (dashed lines)
 - Only add JS where interactivity is essential
 - Validate content with schemas
 - Structure content for easy expansion to many nodes
+- Always run `pnpm validate` before committing content changes

package.json

@@ -25,7 +25,8 @@
     "generate:graph": "node scripts/generate-graph-data.mjs",
     "new:person": "node scripts/new-person.js",
     "new:work": "node scripts/new-work.js",
-    "new:institution": "node scripts/new-institution.js"
+    "new:institution": "node scripts/new-institution.js",
+    "optimize:images": "node scripts/optimize-images.js"
   },
   "dependencies": {
     "@astrojs/mdx": "^4.0.0",