Rename ConvertKit to Kit *everywhere*

Author: kentcdodds

.env.example

@@ -70,8 +70,8 @@ DISCORD_MEMBER_ROLE=111122223333444455
 
 # Feature: /sign-up
 # Mocked: yes
-CONVERT_KIT_API_KEY=some_api_key
-CONVERT_KIT_API_SECRET=some_api_secret
+KIT_API_KEY=some_api_key
+KIT_API_SECRET=some_api_secret
 
 # Feature: /chats
 # Mocked: yes

.gitignore

@@ -9,6 +9,7 @@ node_modules/
 /coverage
 tsconfig.tsbuildinfo
 /prisma/sqlite.db
+/prisma/sqlite.db-journal
 
 other/postcss.ignored
 
@@ -25,3 +26,5 @@ other/postcss.ignored
 *.bkp.*
 
 *.heapsnapshot
+
+*.db-journal

app/components/footer.tsx

@@ -2,8 +2,8 @@ import { Link } from '@remix-run/react'
 import { getImgProps, type ImageBuilder } from '#app/images.tsx'
 import { AnchorOrLink } from '#app/utils/misc.tsx'
 import { useRootData } from '#app/utils/use-root-data.ts'
-import { ConvertKitForm } from '../convertkit/form.tsx'
 import { externalLinks } from '../external-links.tsx'
+import { KitForm } from '../kit/form.tsx'
 import { IconLink } from './icon-link.tsx'
 import { ArrowIcon, GithubIcon, RssIcon, XIcon, YoutubeIcon } from './icons.tsx'
 import { Signature } from './signature.tsx'
@@ -31,7 +31,7 @@ function NewsletterSection() {
 			</div>
 
 			<div className="mt-8">
-				<ConvertKitForm formId="newsletter" convertKitFormId="827139" />
+				<KitForm formId="newsletter" KitFormId="827139" />
 			</div>
 		</div>
 	)
@@ -145,7 +145,7 @@ function Footer({ image }: { image: ImageBuilder }) {
 	const { userInfo } = useRootData()
 	const subscribedToNewsletter =
 		Boolean(userInfo) ||
-		userInfo?.convertKit?.tags.some(
+		userInfo?.kit?.tags.some(
 			({ name }) => name === 'Subscribed: general newsletter',
 		)
 	const featuredImg = (

app/convertkit/form.tsx app/kit/form.tsxapp/convertkit/form.tsx renamed to app/kit/form.tsx

@@ -6,30 +6,30 @@ import { CheckIcon } from '#app/components/icons.tsx'
 import { useRootData } from '#app/utils/use-root-data.ts'
 import { type ActionData } from './types.ts'
 
-function ConvertKitForm({
+function KitForm({
 	formId,
-	convertKitTagId,
-	convertKitFormId,
+	kitTagId,
+	KitFormId,
 }: { formId: string } & (
-	| { convertKitTagId?: never; convertKitFormId: string }
-	| { convertKitTagId: string; convertKitFormId?: never }
-	| { convertKitTagId: string; convertKitFormId: string }
+	| { kitTagId?: never; KitFormId: string }
+	| { kitTagId: string; KitFormId?: never }
+	| { kitTagId: string; KitFormId: string }
 )) {
 	const websiteId = React.useId()
-	const convertKit = useFetcher<ActionData>()
+	const kit = useFetcher<ActionData>()
 	const formRef = React.useRef<HTMLFormElement>(null)
-	const isDone = convertKit.state === 'idle' && convertKit.data != null
-	const convertKitData = isDone ? convertKit.data : null
+	const isDone = kit.state === 'idle' && kit.data != null
+	const kitData = isDone ? kit.data : null
 	React.useEffect(() => {
-		if (formRef.current && convertKitData?.status === 'success') {
+		if (formRef.current && kitData?.status === 'success') {
 			formRef.current.reset()
 		}
-	}, [convertKitData])
+	}, [kitData])
 
 	const { user, userInfo } = useRootData()
 
-	const alreadySubscribed = userInfo?.convertKit?.tags.some(
-		({ id }) => id === convertKitTagId,
+	const alreadySubscribed = userInfo?.kit?.tags.some(
+		({ id }) => id === kitTagId,
 	)
 
 	if (alreadySubscribed) {
@@ -38,15 +38,10 @@ function ConvertKitForm({
 		)
 	}
 
-	const success = isDone && convertKitData?.status === 'success'
+	const success = isDone && kitData?.status === 'success'
 
 	return (
-		<convertKit.Form
-			ref={formRef}
-			action="/action/convert-kit"
-			method="POST"
-			noValidate
-		>
+		<kit.Form ref={formRef} action="/action/kit" method="POST" noValidate>
 			<div style={{ position: 'absolute', left: '-9999px' }}>
 				<label htmlFor={`website-url-${websiteId}`}>Your website</label>
 				<input
@@ -58,40 +53,32 @@ function ConvertKitForm({
 				/>
 			</div>
 			<input type="hidden" name="formId" value={formId} />
-			<input type="hidden" name="convertKitTagId" value={convertKitTagId} />
-			<input type="hidden" name="convertKitFormId" value={convertKitFormId} />
+			<input type="hidden" name="kitTagId" value={kitTagId} />
+			<input type="hidden" name="KitFormId" value={KitFormId} />
 			<Field
 				name="firstName"
 				label="First name"
-				error={
-					convertKitData?.status === 'error'
-						? convertKitData.errors.firstName
-						: null
-				}
+				error={kitData?.status === 'error' ? kitData.errors.firstName : null}
 				autoComplete="given-name"
 				defaultValue={user?.firstName}
 				required
-				disabled={convertKit.state !== 'idle' || success}
+				disabled={kit.state !== 'idle' || success}
 			/>
 
 			<Field
 				name="email"
 				label="Email"
 				autoComplete="email"
-				error={
-					convertKitData?.status === 'error'
-						? convertKitData.errors.email
-						: null
-				}
+				error={kitData?.status === 'error' ? kitData.errors.email : null}
 				defaultValue={user?.email}
-				disabled={convertKit.state !== 'idle' || success}
+				disabled={kit.state !== 'idle' || success}
 			/>
 
 			{success ? (
 				<div className="flex">
 					<CheckIcon />
 					<p className="text-secondary">
-						{userInfo?.convertKit
+						{userInfo?.kit
 							? `Sweet, you're all set`
 							: `Sweet, check your email for confirmation.`}
 					</p>
@@ -101,8 +88,8 @@ function ConvertKitForm({
 					Sign me up
 				</ArrowButton>
 			)}
-		</convertKit.Form>
+		</kit.Form>
 	)
 }
 
-export { ConvertKitForm }
+export { KitForm }

app/convertkit/convertkit.server.ts app/kit/kit.server.tsapp/convertkit/convertkit.server.ts renamed to app/kit/kit.server.ts

@@ -1,9 +1,9 @@
 import { getRequiredServerEnvVar } from '../utils/misc.tsx'
 
-const CONVERT_KIT_API_SECRET = getRequiredServerEnvVar('CONVERT_KIT_API_SECRET')
-const CONVERT_KIT_API_KEY = getRequiredServerEnvVar('CONVERT_KIT_API_KEY')
+const KIT_API_SECRET = getRequiredServerEnvVar('KIT_API_SECRET')
+const KIT_API_KEY = getRequiredServerEnvVar('KIT_API_KEY')
 
-type ConvertKitSubscriber = {
+type KitSubscriber = {
 	id: number
 	first_name: string
 	email_address: string
@@ -12,37 +12,33 @@ type ConvertKitSubscriber = {
 	fields: Record<string, string | null>
 }
 
-type ConvertKitTag = {
+type KitTag = {
 	id: string
 	name: string
 	created_at: string
 }
 
-async function getConvertKitSubscriber(email: string) {
-	const url = new URL('https://api.convertkit.com/v3/subscribers')
-	url.searchParams.set('api_secret', CONVERT_KIT_API_SECRET)
+async function getKitSubscriber(email: string) {
+	const url = new URL('https://api.kit.com/v3/subscribers')
+	url.searchParams.set('api_secret', KIT_API_SECRET)
 	url.searchParams.set('email_address', email)
 
 	const resp = await fetch(url.toString())
 	const json = await resp.json()
 	const { subscribers: [subscriber = { state: 'inactive' }] = [] } = json as {
-		subscribers?: Array<ConvertKitSubscriber>
+		subscribers?: Array<KitSubscriber>
 	}
 
 	return subscriber.state === 'active' ? subscriber : null
 }
 
-async function getConvertKitSubscriberTags(
-	subscriberId: ConvertKitSubscriber['id'],
-) {
-	const url = new URL(
-		`https://api.convertkit.com/v3/subscribers/${subscriberId}/tags`,
-	)
-	url.searchParams.set('api_secret', CONVERT_KIT_API_SECRET)
+async function getKitSubscriberTags(subscriberId: KitSubscriber['id']) {
+	const url = new URL(`https://api.kit.com/v3/subscribers/${subscriberId}/tags`)
+	url.searchParams.set('api_secret', KIT_API_SECRET)
 
 	const resp = await fetch(url.toString())
 	const json = (await resp.json()) as {
-		tags: Array<ConvertKitTag>
+		tags: Array<KitTag>
 	}
 	return json.tags
 }
@@ -54,14 +50,14 @@ async function ensureSubscriber({
 	email: string
 	firstName: string
 }) {
-	let subscriber = await getConvertKitSubscriber(email)
+	let subscriber = await getKitSubscriber(email)
 	if (!subscriber) {
 		// this is a basic form that doesn't really do anything. It's just a way to
 		// get the users on the mailing list
 		subscriber = await addSubscriberToForm({
 			email,
 			firstName,
-			convertKitFormId: '2500372',
+			KitFormId: '2500372',
 		})
 	}
 
@@ -71,53 +67,53 @@ async function ensureSubscriber({
 async function addSubscriberToForm({
 	email,
 	firstName,
-	convertKitFormId,
+	KitFormId,
 }: {
 	email: string
 	firstName: string
-	convertKitFormId: string
+	KitFormId: string
 }) {
 	const subscriberData = {
-		api_key: CONVERT_KIT_API_KEY,
-		api_secret: CONVERT_KIT_API_SECRET,
+		api_key: KIT_API_KEY,
+		api_secret: KIT_API_SECRET,
 		first_name: firstName,
 		email,
 	}
 
 	// this is a basic form that doesn't really do anything. It's just a way to
 	// get the users on the mailing list
 	const response = await fetch(
-		`https://api.convertkit.com/v3/forms/${convertKitFormId}/subscribe`,
+		`https://api.kit.com/v3/forms/${KitFormId}/subscribe`,
 		{
 			method: 'POST',
 			body: JSON.stringify(subscriberData),
 			headers: { 'Content-Type': 'application/json' },
 		},
 	)
 	const json = (await response.json()) as {
-		subscription: { subscriber: ConvertKitSubscriber }
+		subscription: { subscriber: KitSubscriber }
 	}
 	return json.subscription.subscriber
 }
 
 async function addTagToSubscriber({
 	email,
 	firstName,
-	convertKitTagId,
+	kitTagId,
 }: {
 	email: string
 	firstName: string
-	convertKitTagId: string
+	kitTagId: string
 }) {
 	await ensureSubscriber({ email, firstName })
 	const subscriberData = {
-		api_key: CONVERT_KIT_API_KEY,
-		api_secret: CONVERT_KIT_API_SECRET,
+		api_key: KIT_API_KEY,
+		api_secret: KIT_API_SECRET,
 		first_name: firstName,
 		email,
 	}
 
-	const subscribeUrl = `https://api.convertkit.com/v3/tags/${convertKitTagId}/subscribe`
+	const subscribeUrl = `https://api.kit.com/v3/tags/${kitTagId}/subscribe`
 	const response = await fetch(subscribeUrl, {
 		method: 'POST',
 		body: JSON.stringify(subscriberData),
@@ -126,7 +122,7 @@ async function addTagToSubscriber({
 		},
 	})
 	const json = (await response.json()) as {
-		subscription: { subscriber: ConvertKitSubscriber }
+		subscription: { subscriber: KitSubscriber }
 	}
 	return json.subscription.subscriber
 }
@@ -140,12 +136,12 @@ async function tagKCDSiteSubscriber({
 	firstName: string
 	fields: Record<string, string>
 }) {
-	const subscriber = await getConvertKitSubscriber(email)
+	const subscriber = await getKitSubscriber(email)
 	const kcdTagId = '2466369'
 	const kcdSiteForm = '2393887'
 	const subscriberData = {
-		api_key: CONVERT_KIT_API_KEY,
-		api_secret: CONVERT_KIT_API_SECRET,
+		api_key: KIT_API_KEY,
+		api_secret: KIT_API_SECRET,
 		first_name: firstName,
 		email,
 		fields,
@@ -156,8 +152,8 @@ async function tagKCDSiteSubscriber({
 	// tag to existing subscribers who have already confirmed.
 	// This form auto-adds the tag to new subscribers
 	const subscribeUrl = subscriber
-		? `https://api.convertkit.com/v3/tags/${kcdTagId}/subscribe`
-		: `https://api.convertkit.com/v3/forms/${kcdSiteForm}/subscribe`
+		? `https://api.kit.com/v3/tags/${kcdTagId}/subscribe`
+		: `https://api.kit.com/v3/forms/${kcdSiteForm}/subscribe`
 	const updatedRes = await fetch(subscribeUrl, {
 		method: 'POST',
 		body: JSON.stringify(subscriberData),
@@ -166,14 +162,14 @@ async function tagKCDSiteSubscriber({
 		},
 	})
 	const updatedJson = (await updatedRes.json()) as {
-		subscription: { subscriber: ConvertKitSubscriber }
+		subscription: { subscriber: KitSubscriber }
 	}
 	return updatedJson.subscription.subscriber
 }
 
 export {
-	getConvertKitSubscriber,
-	getConvertKitSubscriberTags,
+	getKitSubscriber,
+	getKitSubscriberTags,
 	tagKCDSiteSubscriber,
 	addTagToSubscriber,
 	addSubscriberToForm,