updates to the news feed

[jeremymanning]

First, let's handle the news feed like we do the people, publications, and software pages (via spreadsheets).

Second, I'd like to add a bluesky feed (to the news page) for @contextlab.bsky.social that automatically pulls from bluesky to show a themed, scrollable list of the latest posts from the lab account.

[jeremymanning]

also add new (brief) news articles (sort so most recent appears at the top):

1. January 10, 2025:
   Title: Why are we so preoccupied by the past? Content: Check out our reflection on our recent paper on prediction and retrodiction in Scientific American; thumbnail:

2. August 1, 2025:
   Title: Claudia Gonciulea joins the lab! Content: We've managed to recruit superstar-scientist Claudia Gonciulea to our incoming PhD student cohort at Dartmouth!
   Link below: [READ CLAUDIA'S BIO]
   Thumbnail:

3. July 1, 2024:
   Title: Jeremy gets tenure! Content: Jeremy managed to sneak past the tenure review committee-- they never even noticed he was actually three kittens in a lab coat! He even picked up some awards along the way.
   Thumbnail:

4. January 25, 2022:
   Title: We CAREER'd! Content: The CDL was awarded an NSF CAREER Award to map and enhance how students learn, using natural language processing models. We're excited to do some awesome science with our new-found riches!

Thumbnail:

[jeremymanning]

Implementation Plan for Issue #9: News Feed Updates

Overview

This issue has three main components:

1. Convert news page to spreadsheet-based generation (like people, publications, software)
2. Add Bluesky feed integration for @contextlab.bsky.social
3. Add 4 new news articles from the comment

---

Phase 1: Spreadsheet-Based News Feed

1.1 Create Data Structure

Files to create:

• data/news.xlsx - Single sheet with columns:
  • date (YYYY-MM-DD format for sorting)
  • title - News headline
  • title_url - Optional link for the headline
  • content - HTML-safe content (can include links)
  • links_html - Additional links (e.g., "[READ BIO]")
  • image - Thumbnail filename

Migrate existing news items from news.html to spreadsheet

1.2 Create Build Script

File: scripts/build_news.py

• Follow pattern of build_people.py and build_publications.py
• Load data from data/news.xlsx
• Sort by date (most recent first)
• Generate HTML for each news item
• Inject into template

Functions:

• load_news(xlsx_path) - Load and sort news items
• generate_news_item(item) - Generate HTML for single item
• generate_news_content(items) - Generate full news list HTML
• build_news(data_path, template_path, output_path) - Main build function

1.3 Create Template

File: templates/news.html

• Copy current news.html structure
• Replace news items with <!-- NEWS_CONTENT --> marker

1.4 Update Build Infrastructure

Files to modify:

• scripts/build.py - Add news build to master script
• scripts/validate_data.py - Add news validation
• .github/workflows/build-content.yml - Add news.html to commit list

---

Phase 2: Bluesky Feed Integration

2.1 Architecture Decision

Client-side approach (recommended for static site):

• JavaScript fetches Bluesky posts at page load
• No server-side infrastructure needed
• Uses public Bluesky API (app.bsky.feed.getAuthorFeed)

API Endpoint:

https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=contextlab.bsky.social&limit=10

2.2 Implementation

Files to create/modify:

• js/bluesky-feed.js - New module for Bluesky integration
  • fetchBlueskyPosts(handle, limit) - Fetch posts from API
  • renderBlueskyPost(post) - Generate HTML for single post
  • initBlueskyFeed() - Initialize feed on page load

CSS additions to css/style.css:

• .bluesky-feed - Container styling
• .bluesky-post - Individual post styling
• .bluesky-post-header - Avatar + handle + timestamp
• .bluesky-post-content - Post text
• .bluesky-post-embed - Images/links

2.3 Template Integration

Modify: templates/news.html

• Add Bluesky section with container div
• Include js/bluesky-feed.js script

---

Phase 3: Add New News Articles

3.1 Download and Process Thumbnails

The comment provides 4 articles with GitHub-hosted images that need to be:

1. Downloaded to images/news/
2. Renamed appropriately
3. Possibly resized/bordered using existing scripts

New articles:

1. "Why are we so preoccupied by the past?" (Jan 10, 2025)
2. "Claudia Gonciulea joins the lab!" (Aug 1, 2025)
3. "Jeremy gets tenure!" (Jul 1, 2024)
4. "We CAREER'd!" (Jan 25, 2022)

3.2 Add to Spreadsheet

Add all 4 new articles to data/news.xlsx with proper dates for sorting.

---

Execution Plan (Parallel Agent Assignment)

Batch 1 (Can run in parallel):

• Agent A: Create data/news.xlsx spreadsheet with all existing + new news items
• Agent B: Create scripts/build_news.py following existing patterns
• Agent C: Create templates/news.html template file

Batch 2 (After Batch 1):

• Agent D: Implement Bluesky feed JavaScript (js/bluesky-feed.js)
• Agent E: Add Bluesky CSS styles to css/style.css

Batch 3 (After Batch 2):

• Agent F: Update scripts/build.py, scripts/validate_data.py, and GitHub Actions workflow
• Agent G: Download and process new thumbnail images

Batch 4 (Final integration):

• Agent H: Run full build and comprehensive testing

---

Testing Plan

Unit Tests (NO MOCKS - Real Files)

File: tests/test_build_news.py

• test_loads_news_from_real_xlsx() - Load actual news.xlsx
• test_news_sorted_by_date() - Verify reverse chronological order
• test_generates_valid_html() - Check HTML structure
• test_handles_empty_fields() - Graceful empty handling
• test_handles_special_characters() - HTML entities preserved

Integration Tests (Real Build)

• test_build_produces_valid_news_html() - Full build creates valid file
• test_news_count_matches_spreadsheet() - All items rendered

Bluesky Integration Tests (Real API)

File: tests/test_bluesky_feed.py

• Test fetching real posts from @contextlab.bsky.social
• Test HTML rendering of actual post data
• Test error handling for network failures
• Test rate limiting behavior

Visual Verification

• Open local news.html in browser
• Verify news items display correctly
• Verify Bluesky feed loads and displays
• Test on mobile viewport

---

Files to Create/Modify Summary

New Files:

• data/news.xlsx
• scripts/build_news.py
• templates/news.html
• js/bluesky-feed.js
• tests/test_build_news.py
• tests/test_bluesky_feed.py

Modified Files:

• scripts/build.py - Add news build
• scripts/validate_data.py - Add news validation
• css/style.css - Add Bluesky styles
• .github/workflows/build-content.yml - Add news.html to commit
• news.html - Will be auto-generated

Notes Folder:

• notes/issue_9_news_feed.md - Implementation notes and progress tracking

---

Cleanup Plan

Before signing off:

1. Remove any temporary test files
2. Clean up notes folder (keep only final summary)
3. Remove any .pyc or __pycache__ artifacts
4. Verify no debug code left in production files

---

Pre-Push Checklist

1. Run python scripts/validate_data.py - All validations pass
2. Run python scripts/build.py - All builds succeed
3. Run python -m pytest tests/ -v - All tests pass
4. Open news.html locally - Visual verification
5. Check Bluesky feed loads correctly
6. Run linters if configured
7. Push to GitHub
8. Verify GitHub Actions pass
9. Check live site after deployment

---

Skills/Tools to Leverage

Existing:

• utils.py functions for spreadsheet loading
• citation_utils.py for link resolution
• build_*.py patterns for template injection

Potentially Create:

• Bluesky API helper skill for future use
• Image download/processing automation

---

Ready for review. Please approve or suggest modifications before implementation begins.

[jeremymanning]

Completed in PR #11

News Feed Implementation

• Created data/news.xlsx spreadsheet for managing news entries with columns: date, type (news/bluesky), title, description, image, link, bluesky_url
• Built scripts/build_news.py to generate news.html from the spreadsheet
• Added templates/news.html template with proper structure

Bluesky Integration

• Implemented js/bluesky-feed.js for embedding Bluesky posts from @contextlab.bsky.social
• Posts are fetched client-side and displayed in a themed, scrollable feed
• Supports rich content including images, link cards, and quoted posts
• Added CSS styling in css/style.css to match the site's green theme

How to Use

1. Manual news entries: Add rows to data/news.xlsx with type="news"
2. Bluesky embeds: Add rows with type="bluesky" and the post URL in bluesky_url column
3. Run python scripts/build_news.py to regenerate news.html

The Bluesky feed automatically pulls the latest posts and displays them alongside manual news entries.