feat(site): add newsleter (#2803)

## 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

Author: jog1t

site/src/app/(v2)/(marketing)/sales/form.tsx

@@ -12,8 +12,6 @@ export function SalesForm() {
 
 		const data = Object.fromEntries(formData.entries().toArray());
 
-		console.log(data);
-
 		posthog.capture("survey sent", {
 			$survey_id: "0193928a-4799-0000-8fc4-455382e21359",
 			...data,
@@ -27,8 +25,8 @@ export function SalesForm() {
 				<span className="text-2xl text-white mb-2 block">
 					Thank you for your interest!
 				</span>
-				We will get back to you within the next few days. In the
-				meantime, feel free to explore our{" "}
+				We will get back to you within the next few days. In the meantime, feel
+				free to explore our{" "}
 				<a href="/docs" className="text-[#FF5C00] hover:underline">
 					documentation
 				</a>{" "}

site/src/components/DocsTableOfContents.tsx

@@ -6,6 +6,7 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 import { useCallback, useRef, useState } from "react";
 import { useEffect } from "react";
+import { Newsletter } from "./Newsletter";
 
 const HEADER_HEIGHT = remToPx(6.5);
 // const SCROLL_MARGIN = remToPx(9 /* scroll-mt-header-offset */ - HEADER_HEIGHT);
@@ -30,10 +31,7 @@ function useScrollToActiveLink(currentSection) {
 		if (linkRelativeTop + LINK_MARGIN >= containerRect.height) {
 			// calculate the difference between the bottom of the link and the bottom of the container
 			const bottomDifference =
-				linkRelativeTop +
-				LINK_MARGIN -
-				containerRect.height +
-				linkRect.height;
+				linkRelativeTop + LINK_MARGIN - containerRect.height + linkRect.height;
 			ref.current.scrollBy(0, bottomDifference);
 		}
 		// if the link is above the container, scroll up by the difference in height + the height of the link itself (so it's not at the top)
@@ -51,19 +49,15 @@ function useCurrentSection(tableOfContents = []) {
 	);
 	const getHeadings = useCallback((tableOfContents) => {
 		return tableOfContents
-			.flatMap((node) => [
-				node.id,
-				...node.children.map((child) => child.id),
-			])
+			.flatMap((node) => [node.id, ...node.children.map((child) => child.id)])
 			.map((id) => {
 				const el = document.getElementById(id);
 				if (!el) return null;
 
 				const style = window.getComputedStyle(el);
 				const scrollMt = Number.parseFloat(style.scrollMarginTop);
 
-				const top =
-					window.scrollY + el.getBoundingClientRect().top - scrollMt;
+				const top = window.scrollY + el.getBoundingClientRect().top - scrollMt;
 				return { id, top };
 			})
 			.filter((x) => x !== null);
@@ -206,6 +200,7 @@ export function DocsTableOfContents({
 			<div className="relative">
 				<div className="relative">
 					<Tree sections={tableOfContents} isActive={isActive} />
+					<Newsletter />
 				</div>
 			</div>
 		</div>

site/src/components/Newsletter.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import posthog from "posthog-js";
+import { Button, Input, Label } from "@rivet-gg/components";
+import { useState } from "react";
+
+export function Newsletter() {
+	const [isSubmitted, setIsSubmitted] = useState(false);
+	const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+		if (isSubmitted) return; // Prevent multiple submissions
+		event.preventDefault();
+		const formData = new FormData(event.currentTarget);
+
+		const data = Object.fromEntries(formData.entries().toArray());
+
+		posthog.capture("survey sent", {
+			$survey_id: "01983e70-b743-0000-e4a7-07ce220da177",
+			...data,
+		});
+		setIsSubmitted(true);
+
+		const form = event.currentTarget;
+
+		setTimeout(() => {
+			form.reset();
+			setIsSubmitted(false);
+		}, 3000);
+	};
+
+	return (
+		<form className="mt-6 px-2" onSubmit={handleSubmit}>
+			<div className="flex flex-col gap-2">
+				<Label htmlFor="newsletter-email" className="text-sm">
+					Rivet Newsletter
+				</Label>
+				<Input
+					type="email"
+					required
+					placeholder="[email protected]"
+					className="text-sm"
+					autoComplete="email"
+					name="$survey_response_2adad347-bc39-48f3-b5d1-755278685c94"
+				/>
+				<Button variant="secondary" type="submit" size="sm">
+					{isSubmitted ? "Subscribed" : "Subscribe"}
+				</Button>
+			</div>
+		</form>
+	);
+}