feat(site): add newsleter

[jog1t]

Changes

• Removed a console.log statement from the SalesForm component
• Added a Newsletter component to the documentation sidebar
• The Newsletter component allows users to subscribe to the Rivet Newsletter
• Implemented PostHog tracking for newsletter subscriptions
• Added form submission handling with success state feedback

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rivet-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 24, 2025 10:22pm

[claude]

Claude finished @jog1t's task —— View job

---

PR Review: Newsletter Component Addition

Review Checklist:

• Read and analyze all changed files
• Review code quality and best practices
• Check for potential bugs or issues
• Assess performance considerations
• Evaluate security concerns
• Consider test coverage needs
• Provide comprehensive feedback

---

🔍 Code Quality & Best Practices

✅ Strengths:

• Clean React functional component structure in Newsletter.tsx
• Proper TypeScript typing for form events
• Good use of React hooks and form handling patterns
• Accessible implementation with proper labels and input types
• Consistent styling with the existing component library

⚠️ Areas for Improvement:

• Consider extracting hardcoded survey IDs to constants or environment variables
• Add JSDoc comments for the Newsletter component to document its purpose
• The integration point in DocsTableOfContents.tsx:203 could benefit from a comment explaining the Newsletter placement

🐛 Potential Bugs & Issues

🚨 Critical Issue:

• Line 14 in Newsletter.tsx: .toArray() method doesn't exist on formData.entries(). This will cause a runtime error.

  // Current (broken):
  const data = Object.fromEntries(formData.entries().toArray());
  
  // Should be:
  const data = Object.fromEntries(formData.entries());

⚠️ Minor Issues:

• Line 10 in Newsletter.tsx: The submission prevention logic could be more robust. Currently, it returns early but doesn't prevent the form's default behavior in all cases.
• Missing error handling: No error handling for PostHog capture failures
• No validation feedback: Users don't get feedback if email validation fails

⚡ Performance Considerations

✅ Good:

• Lightweight component with minimal re-renders
• Efficient state management with single boolean state
• Form reset timeout is reasonable at 3 seconds

💡 Suggestions:

• Consider debouncing the submit handler if rapid clicking is a concern
• PostHog capture is fire-and-forget, which is appropriate for analytics

🔒 Security Concerns

✅ Generally Secure:

• Form data properly handled through FormData API
• Email validation via HTML5 required and type="email"
• No obvious XSS or injection vulnerabilities
• PostHog survey IDs are appropriately scoped

💡 Recommendations:

• Consider adding client-side email format validation for better UX
• Ensure PostHog data doesn't inadvertently capture sensitive information

🧪 Test Coverage

❌ Missing Tests:
The Newsletter component lacks test coverage. Recommended tests:

1. Form submission flow:

   it('should submit form and show success state', () => {
     // Test form submission and state changes
   });

2. PostHog integration:

   it('should capture analytics event with correct survey ID', () => {
     // Mock PostHog and verify capture call
   });

3. Form reset functionality:

   it('should reset form after 3 seconds', () => {
     // Test automatic form reset
   });

4. Duplicate submission prevention:

   it('should prevent multiple submissions', () => {
     // Test submission blocking when already submitted
   });

🎯 Action Items

Must Fix:

1. Fix the .toArray() bug in Newsletter.tsx:14 - this will cause runtime errors

Should Consider:
2. Add error handling for PostHog capture failures
3. Improve submission prevention logic
4. Add comprehensive test coverage
5. Extract hardcoded values to constants

Nice to Have:
6. Add JSDoc documentation
7. Consider email format validation feedback
8. Add loading state during submission

📝 Overall Assessment

This is a solid implementation of a newsletter subscription feature. The code follows React best practices and integrates well with the existing codebase. The main concern is the .toArray() bug that needs immediate attention. Once fixed, this would be a good addition to the documentation sidebar.

Recommendation: Fix the critical bug, then this PR would be ready for merge. Consider adding tests in a follow-up PR.

---

[jog1t]

• feat(site): add newsleter #2803 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[graphite-app]

Graphite Automations

"Test" took an action on this PR • (07/24/25)

1 assignee was added to this PR based on Kacper Wojciechowski's automation.

[cloudflare-workers-and-pages]

Deploying rivet with    Cloudflare Pages

Latest commit:	c7e06ac
Status:	🚫  Build failed.

View logs

[graphite-app]

Merge activity

• Jul 24, 10:24 PM UTC: jog1t added this pull request to the Graphite merge queue.
• Jul 24, 10:25 PM UTC: CI is running for this pull request on a draft pull request (#2804) due to your merge queue CI optimization settings.
• Jul 24, 10:26 PM UTC: Merged by the Graphite merge queue via draft PR: #2804.