Skip to content

Commit a08e7c9

Browse files
benadam11benadam11
authored
Remove convert kit (#282)
1 parent fc2f80f commit a08e7c9

File tree

6 files changed

+99
-52
lines changed

6 files changed

+99
-52
lines changed

‎docs/public/images/bytes-logo.png‎

91.8 KB
Loading

‎docs/src/components/BytesForm.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react'
2+
import useBytesSubmit from './useBytesSubmit'
3+
4+
export default function BytesForm() {
5+
const { state, handleSubmit, error } = useBytesSubmit()
6+
if (state === 'submitted') {
7+
return (
8+
<p>Success! Please, check your email to confirm your subscription.</p>
9+
)
10+
}
11+
return (
12+
<form onSubmit={handleSubmit}>
13+
<div data-element="fields" className="grid relative">
14+
<figure
15+
className="absolute right-0"
16+
style={{ bottom: '72px', right: '-10px' }}
17+
>
18+
<img
19+
height={40}
20+
width={40}
21+
src="/images/bytes-logo.png"
22+
alt="Bytes"
23+
/>
24+
</figure>
25+
<input
26+
className="border rounded p-2 mb-2 w-full"
27+
name="email_address"
28+
placeholder="Your email address"
29+
type="email"
30+
required=""
31+
/>
32+
<button
33+
type="submit"
34+
className="mb-4 border rounded bg-coral border-none text-white p-2"
35+
>
36+
{state !== 'loading' ? (
37+
<span>Subscribe</span>
38+
) : (
39+
<span>Loading...</span>
40+
)}
41+
</button>
42+
</div>
43+
<p className="text-gray-400 text-xs">
44+
No spam. Unsubscribe at <em>any</em> time.
45+
</p>
46+
{error && <p className="text-red-600">{error}</p>}
47+
</form>
48+
)
49+
}

‎docs/src/components/Footer.js‎

Lines changed: 7 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react'
22
import Link from 'next/link'
33
import CarbonAds from './CarbonAds'
4+
import BytesForm from './BytesForm'
5+
46
export const Footer = props => {
57
return (
68
<div className="bg-gray-50 border-t border-gray-200">
@@ -90,57 +92,14 @@ export const Footer = props => {
9092
<CarbonAds />
9193
</div>
9294
<div className="mt-8 xl:mt-0">
93-
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
94-
Subscribe to our newsletter
95+
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
96+
Subscribe to Bytes
9597
</h4>
9698
<p className="mt-4 text-gray-500 text-base leading-6 mb-4">
97-
The latest TanStack news, articles, and resources, sent to your
98-
inbox.
99+
The best JavaScript newsletter! Delivered every Monday to over
100+
76,000 devs.
99101
</p>
100-
<form
101-
action="https://app.convertkit.com/forms/1513638/subscriptions"
102-
className=""
103-
method="post"
104-
data-sv-form="1513638"
105-
data-uid="4fc050bc50"
106-
data-format="inline"
107-
data-version="5"
108-
data-options='{"settings":{"after_subscribe":{"action":"message","success_message":"Success! Please, check your email to confirm your subscription.","redirect_url":""},"modal":{"trigger":null,"scroll_percentage":null,"timer":null,"devices":null,"show_once_every":null},"recaptcha":{"enabled":false},"slide_in":{"display_in":null,"trigger":null,"scroll_percentage":null,"timer":null,"devices":null,"show_once_every":null}}}'
109-
>
110-
<ul
111-
className="formkit-alert formkit-alert-error"
112-
data-element="errors"
113-
data-group="alert"
114-
/>
115-
116-
<div
117-
data-element="fields"
118-
className="seva-fields grid grid-cols-3 gap-2 max-w-lg"
119-
>
120-
<input
121-
className="formkit-input border rounded p-2 mb-4 w-full col-span-2"
122-
name="email_address"
123-
placeholder="Your email address"
124-
type="text"
125-
required=""
126-
/>
127-
<button
128-
data-element="submit"
129-
className="formkit-submit mb-4 border rounded bg-coral border-none text-white"
130-
>
131-
<span>Subscribe</span>
132-
</button>
133-
</div>
134-
<div
135-
data-element="guarantee"
136-
className="formkit-guarantee text-gray-400 text-xs mt-4"
137-
>
138-
<p>I won't send you spam.</p>
139-
<p>
140-
Unsubscribe at <em>any</em> time.
141-
</p>
142-
</div>
143-
</form>
102+
<BytesForm />
144103
</div>
145104
</div>
146105
<div className="mt-8 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between">

‎docs/src/components/LayoutDocs.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { Seo } from './Seo'
2020
import MDXComponents from './MDXComponents'
2121
import Head from 'next/head'
2222
import { getManifest } from 'manifests/getManifest'
23+
import BytesForm from './BytesForm'
2324

2425
const getSlugAndTag = path => {
2526
const parts = path.split('/')
@@ -112,6 +113,16 @@ export const LayoutDocs = props => {
112113
On this page
113114
</h4>
114115
<Toc />
116+
<div className="mt-12 relative">
117+
<h4 className="font-semibold uppercase text-sm mb-2 mt-2 text-gray-500">
118+
Subscribe to Bytes
119+
</h4>
120+
<p className="mt-4 text-sm leading-6 mb-4">
121+
The best JavaScript newsletter! Delivered every
122+
Monday to over 76,000 devs.
123+
</p>
124+
<BytesForm />
125+
</div>
115126
</div>
116127
</div>
117128
)}

‎docs/src/components/useBytesSubmit.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { useState } from 'react';
2+
3+
function sendBytesOptIn({ email, influencer, source, referral }) {
4+
return fetch(`https://bytes.dev/api/bytes-optin-cors`, {
5+
method: 'POST',
6+
body: JSON.stringify({ email, influencer, source, referral }),
7+
headers: {
8+
Accept: 'application/json',
9+
'Content-Type': 'application/json',
10+
},
11+
}).then((res) => res.json())
12+
}
13+
14+
export default function useBytesSubmit() {
15+
const [state, setState] = useState("initial");
16+
const [error, setError] = useState(null);
17+
18+
const handleSubmit = (e) => {
19+
e.preventDefault();
20+
const email = e.target.email_address.value;
21+
setState("loading");
22+
sendBytesOptIn({ email, influencer: "tanstack" })
23+
.then(() => {
24+
setState("submitted");
25+
})
26+
.catch((err) => {
27+
setError(err);
28+
});
29+
};
30+
31+
return { handleSubmit, state, error };
32+
}

‎docs/src/pages/_app.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@ function loadScript(src, attrs = {}) {
1818
function MyApp({ Component, pageProps }) {
1919
React.useEffect(() => {
2020
loadScript('https://buttons.github.io/buttons.js')
21-
// Convert kit slide up form
22-
loadScript('https://tanstack.ck.page/2e928df461/index.js', {
23-
'data-uid': '2e928df461',
24-
})
2521
}, [])
2622

2723
return (

0 commit comments

Comments
 (0)