Add blog-to-newsletter.html tool

[simonw]

This tool replicates the functionality of the Observable notebook at https://observablehq.com/@simonw/blog-to-newsletter

Features:

• Fetches blog entries, TILs, blogmarks, quotations, and notes from Datasette
• Configurable date range (1-30 days)
• Filters out previously sent content from Substack RSS feed
• Drag-and-drop reordering of featured stories
• Truncates content at cutoff markers
• Generates newsletter HTML with table of contents
• Copy-to-clipboard for full newsletter and extras only
• Live preview of newsletter output

🤖 Generated with Claude Code

[claude]

Claude finished @simonw's task —— View job

---

Code Review Complete ✅

I've thoroughly reviewed the blog-to-newsletter.html tool. Here's my comprehensive analysis:

Todo List:

• Read repository setup instructions (CLAUDE.md) - No specific repo guidelines found
• Analyze blog-to-newsletter.html file structure and implementation
• Review code quality and best practices
• Check for potential bugs and issues
• Evaluate performance considerations
• Assess security concerns
• Consider test coverage needs
• Provide comprehensive review feedback

---

✅ Code Quality & Best Practices

Strengths:

• Clean, well-structured HTML with semantic markup
• Consistent CSS styling using modern flexbox layouts
• Modular JavaScript with clear separation of concerns
• Good use of async/await for API calls
• Proper error handling and user feedback
• Accessibility considerations (labels, ARIA-friendly structure)

Minor Improvements:

• Consider extracting CSS to external file for better maintainability (though single-file approach has benefits for distribution)
• Line 556: The excerpt generation could be more robust - consider using a proper text extraction method instead of simple regex

⚠️ Potential Bugs & Issues

Critical Issues:

1. SQL Injection Risk (Lines 412-445): Direct string interpolation in SQL queries:

   where created >= '${sinceStr}'

   While sinceStr comes from toISOString().split('T')[0], this pattern is risky. Consider using parameterized queries or at minimum, validate the date format.

2. Error Handling Gaps:

   • Line 488: HTTP errors are caught, but network timeouts/CORS issues aren't handled
   • Lines 577-602: Drag-and-drop reordering doesn't handle edge cases where DOM manipulation fails

Medium Issues:

1. RSS Parsing Vulnerability (Lines 361-385): Using DOMParser on external RSS content without sanitization
2. URL Validation Missing (Line 374): Extracted URLs from RSS aren't validated before storing

🔒 Security Concerns

High Priority:

1. XSS Risks (Lines 639, 652, 665, 669, 691): Using marked.parse() without sanitization on user content
2. Content Injection (Lines 678, 682): Direct insertion of quotation content without escaping
3. External Dependencies: CDN dependencies loaded over HTTPS (good) but no integrity checks

Recommendations:

// Add DOMPurify for content sanitization
html += DOMPurify.sanitize(marked.parse(body));

// Validate URLs before use
const isValidUrl = (string) => {
  try { return Boolean(new URL(string)); } catch { return false; }
};

⚡ Performance Considerations

Issues:

1. Multiple API Calls (Lines 448-454): Five parallel API calls could overwhelm slower connections
2. DOM Reflow (Line 554): Large innerHTML assignments cause layout thrashing
3. Memory Leaks: SortableJS instances aren't cleaned up on repeated fetches (Lines 571-572 partially address this)

Optimizations:

• Implement request batching or sequential loading with progress indicators
• Use DocumentFragment for DOM construction
• Add debouncing to preview updates

🧪 Test Coverage Needs

Missing Tests:

1. API Integration: Mock Datasette and Substack endpoints
2. Content Filtering: Test URL deduplication logic
3. HTML Generation: Verify newsletter output format
4. Drag-and-Drop: Test story reordering functionality
5. Error Scenarios: Network failures, malformed API responses

Test Strategy Recommendation:

// Example test structure needed
describe('Blog to Newsletter', () => {
  it('should filter previously sent URLs correctly');
  it('should handle API errors gracefully');
  it('should generate valid newsletter HTML');
  it('should truncate content at cutoff markers');
});

🎯 Additional Recommendations

1. Configuration: Consider adding a config object for API endpoints and settings
2. Accessibility: Add ARIA labels for drag-and-drop interface
3. Browser Support: Add feature detection for clipboard API fallback
4. Content Validation: Implement stricter content type checking
5. Rate Limiting: Add request throttling for API calls

📊 Overall Assessment

This is a well-crafted tool that successfully replicates the Observable notebook functionality. The code is readable and mostly follows good practices. However, there are some security concerns around content sanitization and SQL injection that should be addressed before production use.

Priority Fixes:

1. Implement content sanitization for all user-generated content
2. Add URL validation for extracted links
3. Use parameterized queries or proper escaping for SQL
4. Add integrity checks for CDN dependencies

The tool demonstrates good understanding of modern web APIs and provides a clean, functional interface for newsletter generation.

---

[cloudflare-workers-and-pages]

Deploying tools with    Cloudflare Pages

Latest commit:	8b34d91
Status:	✅  Deploy successful!
Preview URL:	https://9d66b913.tools-b1q.pages.dev
Branch Preview URL:	https://claude-blog-to-newsletter-ht.tools-b1q.pages.dev

View logs

[claude]

Claude finished @simonw's task —— View job

---

Code Review Complete ✅

I've thoroughly reviewed the blog-to-newsletter.html tool. Here's my comprehensive analysis:

Todo List:

• Read repository setup instructions (CLAUDE.md) - No specific repo guidelines found
• Analyze blog-to-newsletter.html file structure and implementation
• Review code quality and best practices
• Check for potential bugs and issues
• Evaluate performance considerations
• Assess security concerns
• Consider test coverage needs
• Provide comprehensive review feedback

---

✅ Code Quality & Best Practices

Strengths:

• Clean, well-structured HTML with semantic markup
• Consistent CSS styling using modern flexbox layouts
• Modular JavaScript with clear separation of concerns
• Good use of async/await for API calls
• Proper error handling and user feedback
• Accessibility considerations (labels, ARIA-friendly structure)

Minor Improvements:

• Consider extracting CSS to external file for better maintainability (though single-file approach has benefits for distribution)
• Line 556: The excerpt generation could be more robust - consider using a proper text extraction method instead of simple regex

⚠️ Potential Bugs & Issues

Critical Issues:

1. SQL Injection Risk (Lines 412-445): Direct string interpolation in SQL queries:

   where created >= '${sinceStr}'

   While sinceStr comes from toISOString().split('T')[0], this pattern is risky. Consider using parameterized queries or at minimum, validate the date format.

2. Error Handling Gaps:

   • Line 488: HTTP errors are caught, but network timeouts/CORS issues aren't handled
   • Lines 577-602: Drag-and-drop reordering doesn't handle edge cases where DOM manipulation fails

Medium Issues:

1. RSS Parsing Vulnerability (Lines 361-385): Using DOMParser on external RSS content without sanitization
2. URL Validation Missing (Line 374): Extracted URLs from RSS aren't validated before storing

🔒 Security Concerns

High Priority:

1. XSS Risks (Lines 639, 652, 665, 669, 691): Using marked.parse() without sanitization on user content
2. Content Injection (Lines 678, 682): Direct insertion of quotation content without escaping
3. External Dependencies: CDN dependencies loaded over HTTPS (good) but no integrity checks

Recommendations:

// Add DOMPurify for content sanitization
html += DOMPurify.sanitize(marked.parse(body));

// Validate URLs before use
const isValidUrl = (string) => {
  try { return Boolean(new URL(string)); } catch { return false; }
};

⚡ Performance Considerations

Issues:

1. Multiple API Calls (Lines 448-454): Five parallel API calls could overwhelm slower connections
2. DOM Reflow (Line 554): Large innerHTML assignments cause layout thrashing
3. Memory Leaks: SortableJS instances aren't cleaned up on repeated fetches (Lines 571-572 partially address this)

Optimizations:

• Implement request batching or sequential loading with progress indicators
• Use DocumentFragment for DOM construction
• Add debouncing to preview updates

🧪 Test Coverage Needs

Missing Tests:

1. API Integration: Mock Datasette and Substack endpoints
2. Content Filtering: Test URL deduplication logic
3. HTML Generation: Verify newsletter output format
4. Drag-and-Drop: Test story reordering functionality
5. Error Scenarios: Network failures, malformed API responses

Test Strategy Recommendation:

// Example test structure needed
describe('Blog to Newsletter', () => {
  it('should filter previously sent URLs correctly');
  it('should handle API errors gracefully');
  it('should generate valid newsletter HTML');
  it('should truncate content at cutoff markers');
});

🎯 Additional Recommendations

1. Configuration: Consider adding a config object for API endpoints and settings
2. Accessibility: Add ARIA labels for drag-and-drop interface
3. Browser Support: Add feature detection for clipboard API fallback
4. Content Validation: Implement stricter content type checking
5. Rate Limiting: Add request throttling for API calls

📊 Overall Assessment

This is a well-crafted tool that successfully replicates the Observable notebook functionality. The code is readable and mostly follows good practices. However, there are some security concerns around content sanitization and SQL injection that should be addressed before production use.

Priority Fixes:

1. Implement content sanitization for all user-generated content
2. Add URL validation for extracted links
3. Use parameterized queries or proper escaping for SQL
4. Add integrity checks for CDN dependencies

The tool demonstrates good understanding of modern web APIs and provides a clean, functional interface for newsletter generation.

---