Create GitHub Pages People page to replace Squarespace

[jeremymanning]

Background

This issue is split off from #181 (automate the onboarding process). The goal is to create a programmable People page hosted on GitHub Pages that can be automatically updated by the onboarding bot.

Problem

The current People page on Squarespace (https://www.context-lab.com/people) cannot be programmatically updated - Squarespace's API doesn't support content management for pages. This creates a manual bottleneck in the onboarding process.

Proposed Solution

Create a GitHub Pages site at people.context-lab.com (or similar subdomain) that:

• Matches the visual design of the current Squarespace People page
• Stores member data in YAML files for easy programmatic updates
• Auto-deploys via GitHub Actions when data changes
• Integrates with the onboarding Slack bot from automate the onboarding process #181

---

Research Findings

Recommended Architecture

Tech Stack

• Static Site Generator: Jekyll (native GitHub Pages support)
• CSS Framework: Tailwind CSS (easy to match Squarespace styling)
• Data Format: YAML (human-readable, easy to update programmatically)
• Deployment: GitHub Actions (automatic on data changes)

Integration Approach

Custom Subdomain: people.context-lab.com → GitHub Pages

DNS Configuration in Squarespace:

• Add CNAME record: people → contextlab.github.io
• GitHub repository CNAME file: people.context-lab.com

Advantages:

• Clean URL structure (appears native to your domain)
• Independent deployment from main site
• Full control over member data without touching Squarespace
• Free hosting

Challenges:

• DNS propagation (24-48 hours for initial setup)
• Two-site navigation (mitigated with clear nav links)

---

Directory Structure

people-site/
├── _data/
│   └── members.yml           # All member data
├── _layouts/
│   ├── default.html          # Base layout
│   └── person.html           # Individual member card
├── _includes/
│   ├── member-card.html      # Reusable card component
│   └── navigation.html       # Links back to main site
├── assets/
│   ├── css/main.scss
│   └── images/members/       # Member photos (with green borders)
├── _config.yml
├── CNAME                     # people.context-lab.com
└── .github/workflows/
    └── deploy.yml            # Auto-deployment

---

Member Data Structure

members:
  - id: jeremy-manning
    name: Jeremy R. Manning
    title: Director
    role: Associate Professor
    bio: >
      Jeremy is an Associate Professor of Psychological and Brain Sciences 
      at Dartmouth and directs the Contextual Dynamics Lab.
    image: /assets/images/members/jeremy.jpg
    links:
      - label: "CV"
        url: "https://www.context-lab.com/s/JRM_CV.pdf"
      - label: "Dartmouth Profile"
        url: "https://faculty.dartmouth.edu/artsandsciences/people/jeremy-manning"
    status: "active"

  - id: member-name
    name: Member Name
    title: Graduate Student
    bio: Bio text here...
    image: /assets/images/members/member.jpg
    links:
      - label: "CV"
        url: "#"
    status: "active"

alumni:
  - id: former-member
    name: Former Member
    title: PhD 2023
    status: "alumni"

collaborators:
  - name: Collaborator Name
    affiliation: Institution
    url: "https://..."

---

Design Elements to Match

Based on the current Squarespace page:

1. Layout: Card-based grid with member photos, names, titles, bios, and links
2. Typography: Clean, lowercase section headers ("who we are", "who we were")
3. Colors:
   • Dartmouth green accent: RGB(0, 105, 62) / #006932
   • White/neutral background
4. Photo Style: Square images with hand-drawn green borders
5. Sections: Active members, Alumni, Collaborators

Hand-Drawn Border Options

Option 1: Pre-process images (recommended - handled by onboarding bot)

• Apply border during onboarding workflow using Pillow
• Store bordered images directly in the repo

Option 2: CSS border-image with SVG

img.member-photo {
  border: 8px solid;
  border-image: url('/assets/member-border.svg') 8 stretch;
}

Option 3: Simple CSS border

.member-photo {
  border: 4px solid #006932;
}

---

Sample CSS

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.member-card {
  background: white;
  text-align: center;
  padding: 1rem;
}

.member-photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.member-name {
  font-size: 1.1rem;
  margin: 0.5rem 0;
  text-transform: lowercase;
}

.member-title {
  color: #006932;
  font-weight: bold;
  font-size: 0.9rem;
}

.member-bio {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  margin: 1rem 0;
}

.member-links a {
  color: #006932;
  text-decoration: none;
  margin: 0 0.5rem;
  font-size: 0.85rem;
}

.member-links a:hover {
  text-decoration: underline;
}

---

GitHub Actions Deployment

name: Deploy People Site

on:
  push:
    branches: [main]
    paths:
      - '_data/members.yml'
      - '_layouts/**'
      - 'assets/**'
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: 3.1
          bundler-cache: true
      
      - name: Build Jekyll site
        run: bundle exec jekyll build
      
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_site

---

Integration with Onboarding Bot (#181)

The Slack bot can automate member additions:

1. Bot collects member info (name, bio, photo)
2. Bot processes photo (adds green border using Pillow)
3. Bot commits to people-site repo:
   • Adds entry to _data/members.yml
   • Uploads processed photo to assets/images/members/
4. GitHub Actions automatically rebuilds and deploys
5. New member appears on people.context-lab.com

This eliminates manual Squarespace uploads entirely.

---

Implementation Phases

Phase 1: Foundation

• Create GitHub repo: ContextLab/people-site
• Set up Jekyll with basic template
• Create member YAML data structure
• Add current member data

Phase 2: Design

• Add Tailwind CSS or custom CSS
• Match Squarespace typography and colors
• Create responsive member card layout
• Test on mobile/tablet

Phase 3: Deployment

• Configure subdomain DNS in Squarespace
• Set up GitHub Pages custom domain
• Deploy initial site
• Verify SSL certificate

Phase 4: Integration

• Create GitHub Actions workflow
• Document programmatic update process
• Integrate with onboarding bot (automate the onboarding process #181)
• Update main site navigation to point to new People page

---

References

• GitHub Pages Custom Domain Setup
• Squarespace Domain with GitHub Pages
• Jekyll Documentation
• Tailwind CSS
• GitHub Actions for Pages

---

Related

• Parent issue: automate the onboarding process #181 (automate the onboarding process)