Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

```html

Building a Session-Driven Technical Blog Pipeline Across Four Sailing & Event Properties

Overview

Implemented an automated system to capture granular technical work across four properties—queenofsandiego.com, sailjada.com, dangerouscentaur.com, and burialsatseasandiego.com—with real-time blog post generation at tech subdomains. The system uses Claude Code session transcripts as the source of truth, parses them for technical details, and publishes timestamped posts without exposing credentials or sensitive data.

What Was Done

Infrastructure Setup

Created four new S3 + CloudFront + DNS entries:

  • tech.queenofsandiego.com — S3 bucket: tech-qos-blog, CloudFront distribution ID: E3XXXX (Route53), ACM wildcard cert from *.queenofsandiego.com
  • tech.sailjada.com — S3 bucket: tech-jada-blog, CloudFront distribution ID: E3XXXX (Route53), ACM wildcard cert from *.sailjada.com
  • tech.dangerouscentaur.com — S3 bucket: dc-tech-blog, CloudFront distribution (Namecheap DNS), CNAME alias to existing wildcard distribution
  • tech.burialsatseasandiego.com — S3 bucket: bats-tech-blog, CloudFront distribution with new ACM cert, GoDaddy DNS CNAME validation

All distributions use index.html as default root object with error page 404 routing to index.html for client-side routing support.

Blog Generator Pipeline

Created two Python utilities:

  • /Users/cb/Documents/repos/tools/tech_blog_init.py — Infrastructure provisioning script. Sets up S3 buckets with versioning and public-read ACL, creates CloudFront distributions with HTTP→HTTPS redirect, provisions ACM certificates with DNS validation, and updates DNS records (Route53 or provider-specific APIs).
  • /Users/cb/Documents/repos/tools/tech_blog_generator.py — Session transcript parser. Reads JSONL session transcripts from Claude's project memory, extracts tool use events and file modifications, filters out credential/key references, and generates HTML blog post with timestamps, file paths, and command examples.

Stop Hook Integration

Registered a Claude Code Stop hook at /Users/cb/.claude/hooks/tech_blog_stop.sh. When a development session ends, the hook:

  1. Reads the session transcript from Claude's session directory
  2. Determines which property (QOS/Jada/DC/BATS) was worked on based on file paths
  3. Invokes the blog generator with the session transcript
  4. Uploads the generated HTML post to the appropriate tech blog S3 bucket
  5. Invalidates the CloudFront cache for that distribution
  6. Logs output to ~/.claude/logs/tech_blog_hook.log

Hook is registered in /Users/cb/.claude/settings.json with event type session_stop.

Technical Details

Session Transcript Parsing

Claude Code sessions store transcripts as JSONL (newline-delimited JSON) in ~/.claude/projects/[project-path]/sessions/. Each line is an event object with structure:

{
  "type": "tool_use",
  "tool_name": "bash",
  "input": {"command": "..."},
  "timestamp": "2025-01-15T10:30:45Z"
}

The generator processes events matching type tool_use and file_write/file_edit, extracts file paths, and cross-references them to identify the property. File path patterns:

  • /queenofsandiego.com/ → tech.queenofsandiego.com
  • /sailjada.com/ or /tools/jada_* → tech.sailjada.com
  • /dangerouscentaur.com/ or /tools/dc_* → tech.dangerouscentaur.com
  • /burialsatseasandiego.com/ → tech.burialsatseasandiego.com

Credential Filtering

Generator implements regex-based redaction before publishing:

  • Hides values from environment variables (API keys, tokens, passwords)
  • Strips AWS secret keys, access keys, and temporary credentials
  • Removes email addresses from non-public contexts
  • Redacts database connection strings and private API endpoints
  • Preserves resource names (bucket IDs, distribution IDs, domain names) for technical clarity

HTML Post Format

Each post is a standalone HTML file named YYYY-MM-DD-HH-MM-SS-session-digest.html with:

  • Post metadata (timestamp, session ID, file count)
  • Summary of files modified/created with exact paths
  • List of commands executed (no secrets)
  • Technical notes extracted from session context
  • Inline styling for readability on mobile/desktop
  • Responsive design compatible with older browsers

Navigation Integration

Updated Ship's Papers menu in all four main sites to include Tech Blog link:

  • /queenofsandiego.com/index.html → added <a href="/tech-blog/">Tech Blog</a> in dropdown
  • /sailjada.com/index.html → same menu structure
  • /dangerouscentaur.com/index.html → same
  • /burialsatseasandiego.com/index.html → same

Note: Links point to /tech-blog/ relative path. These are routed to the tech subdomain via DNS and CloudFront headers.

Infrastructure Decisions

Why CloudFront in front of S3?

Enables HTTPS with ACM certs, provides global edge caching for blog posts, allows for future analytics integration, and isolates tech blog traffic from main site infrastructure.

Why Route53 vs. Namecheap vs. GoDaddy?

Properties using Route53 (QOS, Jada, BATS) have centralized DNS in AWS Route53 for easier automation. Dangerouscentaur uses Namecheap registrar, so CNAME was added via provider