Skip to content

Commit ab6bc60

Browse files
SwizecSwizec
committed
Individual chapter unlocks
1 parent 5233226 commit ab6bc60

File tree

7 files changed

+83
-95
lines changed

7 files changed

+83
-95
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"card": "npx repng src/components/twitter-card.js -d static -f card.png -w 1024 -h 512"
1414
},
1515
"dependencies": {
16-
"@swizec/gatsby-theme-course-platform": "^1.4.0-15",
16+
"@swizec/gatsby-theme-course-platform": "^1.4.0-29",
1717
"gatsby": "^2.29.2",
1818
"react": "^16.12.0",
1919
"react-dom": "^16.12.0",

‎src/@swizec/gatsby-theme-course-platform/components/layout.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import Nav from "./nav"
1212
import { Paywall, usePaywall } from "../../../components/Paywall"
1313

1414
const Sidebar = (props) => {
15-
const { unlocked: contentUnlocked } = usePaywall()
15+
const { unlocked: contentUnlocked } = usePaywall(props.location.pathname)
1616

1717
return (
1818
<Flex
@@ -67,7 +67,7 @@ const Sidebar = (props) => {
6767
}}
6868
>
6969
{props.children}
70-
{contentUnlocked ? <Reactions page={props.uri} /> : null}
70+
{contentUnlocked ? <Reactions page={props.href} /> : null}
7171
<Paywall page={props.location.pathname} />
7272
<Nav
7373
pathname={props.location.pathname}

‎src/components/Paywall.js‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,14 @@ function hidePaywall(paywallDiv) {
2525
paywallDiv.current.style = `display: none`
2626
}
2727

28-
const overlay =
29-
typeof window !== "undefined" && document.querySelector("#fadeout-overlay")
28+
const overlays =
29+
typeof window !== "undefined" &&
30+
document.querySelectorAll(".fadeout-overlay")
3031

31-
if (overlay) {
32-
overlay.style = "display: none"
32+
if (overlays) {
33+
for (let overlay of overlays) {
34+
overlay.style = "display: none"
35+
}
3336
}
3437

3538
// show content
@@ -52,7 +55,7 @@ function showPaywall(paywallDiv) {
5255
position: absolute;
5356
`
5457
overlay.style = style
55-
overlay.id = "fadeout-overlay"
58+
overlay.className = "fadeout-overlay"
5659

5760
main.style = "position: relative;"
5861
main.appendChild(overlay)
@@ -73,11 +76,16 @@ export function usePaywall(page) {
7376
const { isAuthorized } = useAuth()
7477
const [unlockHandbook] = useLocalStorage("unlock_handbook")
7578
const [saleId] = useLocalStorage("sale_id")
79+
const [unlockedPages, setUnlockedPages] = useLocalStorage(
80+
"unlocked_pages",
81+
[]
82+
)
7683
const hasLock =
7784
typeof window !== "undefined" && document.querySelector("#lock")
7885

7986
const unlocked =
8087
!hasLock ||
88+
(page && unlockedPages.includes(page)) ||
8189
isAuthorized(["ServerlessHandbook"]) ||
8290
(unlockHandbook && saleId)
8391

@@ -93,18 +101,22 @@ export function usePaywall(page) {
93101
}
94102
}, [unlocked])
95103

96-
return { unlocked, paywallDiv }
104+
function unlockCurrentPage() {
105+
setUnlockedPages((unlockedPages) => [...unlockedPages, page])
106+
}
107+
108+
return { unlocked, paywallDiv, unlockCurrentPage }
97109
}
98110

99111
export const Paywall = ({ page }) => {
100-
const { unlocked, paywallDiv } = usePaywall(page)
112+
const { unlocked, paywallDiv, unlockCurrentPage } = usePaywall(page)
101113

102114
if (unlocked) {
103115
return <QuickThanks />
104116
} else {
105117
return (
106118
<Box id="paywall-copy" ref={paywallDiv}>
107-
<PaywallCopy />
119+
<PaywallCopy unlockCurrentPage={unlockCurrentPage} />
108120
</Box>
109121
)
110122
}

‎src/components/homepage.js‎

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react"
22
import { useAuth } from "react-use-auth"
33
import { Heading, Flex, Box, Text } from "theme-ui"
4-
import { GumroadButton, FormCK } from "@swizec/gatsby-theme-course-platform"
4+
import { GumroadButton, TinyFormCK } from "@swizec/gatsby-theme-course-platform"
55
// import * as coverImg from "../images/cover.svg"
66
import * as coverImg from "../images/cover.png"
77

@@ -68,15 +68,39 @@ export const HomeTitle = () => (
6868
Serverless Handbook
6969
<Text sx={{ fontSize: 4 }}>for frontend engineers</Text>
7070
</Heading>
71-
<Text>
72-
Dive into modern backend. Understand <em>any</em> backend
73-
</Text>
71+
<Text>Dive into modern backend. Understand any backend</Text>
7472

75-
{/* <FormCK copyBefore="" submitText="Get my free chapter 💌">
76-
Hai
77-
</FormCK> */}
73+
<Heading sx={{ fontSize: 3, pt: 1 }}>
74+
<em>Available wherever books are sold, Mar 31st</em>
75+
</Heading>
76+
77+
<Box
78+
sx={{
79+
p: 3,
80+
minWidth: 250,
81+
flex: 1,
82+
textAlign: "center",
83+
display: ["block", "none"],
84+
}}
85+
>
86+
<img
87+
src={coverImg}
88+
alt="Serverless Handbook Cover"
89+
style={{ margin: "auto auto", maxWidth: "650px", width: "100%" }}
90+
/>
91+
</Box>
7892

79-
<Box sx={{ mt: 10 }}>
93+
<Box sx={{ mt: 3 }}>
94+
<TinyFormCK copyBefore="" submitText="Send it to me! 💌">
95+
<Heading sx={{ fontSize: 4, pt: 2 }}>Get your free chapter!</Heading>
96+
<p>
97+
Wanna see what’s in Serverless Handbook, but not ready to buy the
98+
full book? Start with a free chapter.
99+
</p>
100+
</TinyFormCK>
101+
</Box>
102+
103+
{/* <Box sx={{ mt: 10 }}>
80104
<GumroadButton>
81105
<a
82106
className="gumroad-button"
@@ -86,10 +110,18 @@ export const HomeTitle = () => (
86110
rel="noopener noreferrer"
87111
>{`Get Serverless Handbook`}</a>
88112
</GumroadButton>
89-
</Box>
113+
</Box> */}
90114
</Box>
91115

92-
<Box sx={{ p: 3, minWidth: 250, flex: 1, textAlign: "center" }}>
116+
<Box
117+
sx={{
118+
p: 3,
119+
minWidth: 250,
120+
flex: 1,
121+
textAlign: "center",
122+
display: ["none", "block"],
123+
}}
124+
>
93125
<img
94126
src={coverImg}
95127
alt="Serverless Handbook Cover"

‎src/components/paywall-copy.mdx‎

Lines changed: 13 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Box, Flex, Button } from "theme-ui"
22
import {
33
GumroadOverlay,
44
GumroadButton,
5+
TinyFormCK,
56
} from "@swizec/gatsby-theme-course-platform"
67

78
<Box sx={{
@@ -13,60 +14,27 @@ import {
1314

1415
Hi,👋
1516

16-
**Serverless Handbook** is a digital + paperback book over a year in development. To keep reading, unlock below :)
17+
**Serverless Handbook** is a digital + paperback book over a year in development – **available wherever books are sold, Mar 31st**. To keep reading this chapter, unlock below :)
1718

18-
<Box sx={{ width: "100%", margin: "0 auto", minHeight: "250px" }}>
19-
<Box
20-
sx={{
21-
width: "100%",
22-
height: 0,
23-
paddingBottom: 900 / 16 + "%",
24-
position: "relative",
25-
overflow: "hidden",
26-
"& > iframe": {
27-
position: "absolute",
28-
width: "100%",
29-
height: "100%",
30-
top: 0,
31-
bottom: 0,
32-
left: 0,
33-
border: 0,
34-
},
35-
}}
36-
>
37-
<iframe
38-
width="100%"
39-
height="100%"
40-
src="https://www.youtube.com/embed/zwi2mxGJgIc"
41-
frameborder="0"
42-
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
43-
allowfullscreen
44-
></iframe>
45-
</Box>
46-
</Box>
19+
### Unlock your free chapter!
20+
21+
Access to this chapter immediately, extra free chapter and Serverless crash course in your email ✌️
22+
23+
<TinyFormCK
24+
copyBefore=""
25+
submitText="Send it to me! 💌"
26+
onSuccess={() => setTimeout(props.unlockCurrentPage, 2000)}
27+
/>
28+
<br />
4729

48-
## Learn everything you need to dive into modern backend. Understand _any_ backend
30+
## Dive into modern backend. Understand any backend
4931

5032
I spent a lot of time digging through the internet learning Serverless. Random StackOverflow answers, even comments, GitHub issues, sporadic blogs ... everyone assumes you've been a backend engineer for 20 years. It's a mess.
5133

5234
**Serverless Handbook** is the resource I wish I had.
5335

5436
If you're new to serverless, or completely new to backend, Serverless Handbook is for you. We'll cover everything from the basic definitions of queues and lambdas and databases, to optimizing for cost, building robust architectures for scale, and cost optimization.
5537

56-
**Unlock digital access immediately, get the paperback end of February**
57-
58-
<Box sx={{ textAlign: "center" }}>
59-
<GumroadButton>
60-
<a
61-
className="gumroad-button"
62-
href="https://gum.co/NsUlA"
63-
data-gumroad-single-product="true"
64-
target="_blank"
65-
rel="noopener noreferrer"
66-
>{`Unlock Serverless Handbook`}</a>
67-
</GumroadButton>
68-
</Box>
69-
7038
Cheers,<br/>
7139
~Swizec
7240

‎src/pages/index.mdx‎

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const pageQuery = graphql`
4848

4949
<Box sx={{ my: "auto" }} />
5050

51-
<ChapterHeading sx={{mb: 2}} />
51+
<ChapterHeading sx={{ mb: 2 }} />
5252

5353
<NavGrid>
5454

@@ -123,18 +123,6 @@ export const pageQuery = graphql`
123123

124124
</Grid>
125125

126-
<Box sx={{ textAlign: "center" }}>
127-
<GumroadButton>
128-
<a
129-
className="gumroad-button"
130-
href="https://gum.co/NsUlA"
131-
data-gumroad-single-product="true"
132-
target="_blank"
133-
rel="noopener noreferrer"
134-
>{`Get Serverless Handbook`}</a>
135-
</GumroadButton>
136-
</Box>
137-
138126
<Grid sx={{ py: 5}} gap={2}>
139127

140128
- > “I work with React but I want to learn the other technologies and how to use them with react”
@@ -163,16 +151,4 @@ export const pageQuery = graphql`
163151

164152
</Grid>
165153

166-
## Get Started
167-
168-
<GumroadButton>
169-
<a
170-
className="gumroad-button"
171-
href="https://gum.co/NsUlA"
172-
data-gumroad-single-product="true"
173-
target="_blank"
174-
rel="noopener noreferrer"
175-
>{`Get Serverless Handbook`}</a>
176-
</GumroadButton>
177-
178154
</Container>

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2205,10 +2205,10 @@
22052205
"@styled-system/core" "^5.1.2"
22062206
"@styled-system/css" "^5.1.5"
22072207

2208-
"@swizec/gatsby-theme-course-platform@^1.4.0-15":
2209-
version "1.4.0-15"
2210-
resolved "https://registry.yarnpkg.com/@swizec/gatsby-theme-course-platform/-/gatsby-theme-course-platform-1.4.0-15.tgz#4bce1485d9a76dfe2dba685d9be8a0551d4273ac"
2211-
integrity sha512-rGcRaoVn6Coh856WzsCUySCoVdw3thrpy14ZIj2nvBLjJzhAXrzvoWJgf4xQQXObTlDcLvFhF3aAgRty9RuZVQ==
2208+
"@swizec/gatsby-theme-course-platform@^1.4.0-29":
2209+
version "1.4.0-29"
2210+
resolved "https://registry.yarnpkg.com/@swizec/gatsby-theme-course-platform/-/gatsby-theme-course-platform-1.4.0-29.tgz#8bc28b20890345946df162912a807870b1745a1a"
2211+
integrity sha512-FfwE4Wu597tIJjieLrvXEZmUWnS+eHGN/rdq7UNRb7c57BLIjYwgNGeSdxTbIZM1HdG9zGeKsvSO0lLePBEoxQ==
22122212
dependencies:
22132213
"@jxnblk/react-live" "2.1.2-1"
22142214
"@mdx-js/mdx" "^1.6.22"

0 commit comments

Comments
 (0)