39 | {title} 40 |
41 |
57 | {author &&
61 | {banner && (
62 | {author}
} 58 | {author && —} 59 | {date &&{date}
} 60 |
70 | ![{site.siteMetadata.keywords.join(',]()
74 |
75 | )}
76 | 77 |
116 |
226 |
227 | )
228 | }
229 |
230 | // ThankYouIllustration
231 | const SlopeRollOut = keyframes`
232 | from, 0% {
233 | //transform: translate(0, 115px) rotate(90deg);
234 | transform: translate(0, 115px);
235 | }
236 | to, 100% {
237 | //transform: translate(0, 0) rotate(0);
238 | transform: translate(0, 0);
239 | }
240 | `
241 | const SheetGrow = keyframes`
242 | from, 0% {
243 | transform: scale(0, 1) rotate(-20deg) skew(30deg);
244 | }
245 | to, 100% {
246 | transform: scale(1, 1) rotate(0) skew(0);
247 | }
248 | `
249 | const TextFadeIn = keyframes`
250 | from, 0% {
251 | opacity: 0;
252 | //transform: rotate(-20deg);
253 | }
254 | 5% {
255 | opacity: 0;
256 | //transform: rotate(-20deg);
257 | }
258 | to, 100% {
259 | opacity: 1;
260 | //transform: rotate(0);
261 | }
262 | `
263 | const GrassGrow = keyframes`
264 | from, 0% {
265 |
266 | transform: translate(-35px, 20px);
267 | }
268 | 40% {
269 | transform: translate(-35px, 20px);
270 | }
271 | to, 100% {
272 |
273 | transform: translate(-35px, 0);
274 | }
275 | `
276 | const SlopeGrow = keyframes`
277 | from, 0% {
278 | transform: translate(0, 80px);
279 | }
280 | to, 100% {
281 | transform: translate(0, 0);
282 | }
283 | `
284 | // SVG
285 | export const ThankYouIllustration = () => {
286 | const theme = useTheme()
287 | return (
288 |
310 |
391 |
392 | )
393 | }
394 |
395 | // UnsubscribeIllustration
396 | const MailSlide = keyframes`
397 | from, 0% {
398 | opacity: 0;
399 | transform: translate(18px, 20px);
400 | }
401 | 20% {
402 | opacity: 1;
403 |
404 | }
405 | to, 100% {
406 | opacity: 1;
407 | transform: translate(18px, 75px);
408 | }
409 | `
410 | const PiecesSlide = keyframes`
411 | from, 0% {
412 | transform: scale(1, 0);
413 | opacity: 0;
414 | }
415 | 20% {
416 | transform: scale(1, 0);
417 | opacity: 1;
418 | }
419 | 85% {
420 | opacity: 1;
421 | transform: scale(1, 1);
422 | }
423 | to, 100% {
424 | transform: scale(1,1) translate(0, 50px);
425 | opacity: 1;
426 | }
427 | `
428 | const LightBlink = keyframes`
429 | from, 20% {
430 | opacity: 0.4;
431 | }
432 | 80% {
433 | fill: white;
434 | opacity: 1;
435 | }
436 | to, 100% {
437 | opacity: 0.4;
438 | }
439 | `
440 | const ShadowOpacity = keyframes`
441 | from, 0% {
442 | opacity: 0;
443 | }
444 | 80% {
445 | opacity: 1;
446 | }
447 | to, 100% {
448 | opacity: 0;
449 | }
450 | `
451 | const LoadShredder = keyframes`
452 | from, 0% {
453 | transform: scale(0, 1) translate(0, 67px);
454 | }
455 | to, 100% {
456 | transform: scale(1, 1) translate(0, 67px);
457 | }
458 | `
459 | // SVG
460 | export const UnsubscribeIllustration = (
461 |
496 |
572 |
573 | )
574 |
--------------------------------------------------------------------------------
/src/components/ConfirmMessage/Message.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { css, keyframes } from '@emotion/core'
3 | import styled from '@emotion/styled'
4 | import Markdown from 'react-markdown'
5 | import Link from '../Link'
6 | import { bpMaxSM } from '../../lib/breakpoints'
7 |
8 | export default ({
9 | illustration,
10 | title,
11 | body,
12 | note,
13 | fullscreen = false,
14 | articleTitle,
15 | articleSlug,
16 | }) => (
17 | {illustration}
26 | {title}
27 | {body &&
39 |
40 | {note}
41 |
42 |
43 | )}
44 | {articleTitle && (
45 |
46 | {articleTitle}
47 |
48 | )}
49 |
27 | {props.children}
28 |
29 | )
30 | }
31 |
32 | export default Container
33 |
--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { css } from '@emotion/core'
3 | import { bpMaxSM } from '../lib/breakpoints'
4 | import SubscribeForm from './Forms/Subscribe'
5 | import { Twitter, GitHub } from './Social'
6 | import Container from './Container'
7 |
8 | const Footer = ({ author, noSubscribeForm }) => (
9 |
47 | )
48 |
49 | export default Footer
50 |
--------------------------------------------------------------------------------
/src/components/Forms/Subscribe.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Formik, Field, Form, ErrorMessage } from 'formik'
3 | import * as Yup from 'yup'
4 | import { css } from '@emotion/core'
5 | import { withTheme } from '../Theming'
6 | import { rhythm } from '../../lib/typography'
7 | import { bpMaxSM } from '../../lib/breakpoints'
8 | import Message from '../ConfirmMessage/Message'
9 | import { PleaseConfirmIllustration } from '../ConfirmMessage/Illustrations'
10 |
11 | const FORM_ID = process.env.CONVERTKIT_SIGNUP_FORM
12 |
13 | const SubscribeSchema = Yup.object().shape({
14 | email_address: Yup.string()
15 | .email('Invalid email address')
16 | .required('Required'),
17 | first_name: Yup.string(),
18 | })
19 |
20 | const PostSubmissionMessage = ({ response }) => {
21 | return (
22 |
23 |
30 | )
31 | }
32 |
33 | class SignUp extends React.Component {
34 | state = {
35 | submitted: false,
36 | }
37 |
38 | async handleSubmit(values) {
39 | this.setState({ submitted: true })
40 | try {
41 | const response = await fetch(
42 | `https://app.convertkit.com/forms/${FORM_ID}/subscriptions`,
43 | {
44 | method: 'post',
45 | body: JSON.stringify(values, null, 2),
46 | headers: {
47 | Accept: 'application/json',
48 | 'Content-Type': 'application/json',
49 | },
50 | },
51 | )
52 |
53 | const responseJson = await response.json()
54 |
55 | this.setState({
56 | submitted: true,
57 | response: responseJson,
58 | errorMessage: null,
59 | })
60 | } catch (error) {
61 | this.setState({
62 | submitted: false,
63 | errorMessage: 'Something went wrong!',
64 | })
65 | }
66 | }
67 |
68 | render() {
69 | const { submitted, response, errorMessage } = this.state
70 | const { theme } = this.props
71 | const successful = response && response.status === 'success'
72 |
73 | return (
74 |
75 | {!successful && (
76 | this.handleSubmit(values)}
93 | render={({ errors, touched, isSubmitting }) => (
94 | <>
95 | {!successful && (
96 |
190 | )}
191 | {submitted &&
192 | !isSubmitting &&
198 | )
199 | }
200 | }
201 |
202 | export default withTheme(SignUp)
203 |
--------------------------------------------------------------------------------
/src/components/Header/Button.js:
--------------------------------------------------------------------------------
1 | import { React } from 'react'
2 | import { css } from '@emotion/core'
3 | import { Link } from 'gatsby'
4 | import { useTheme } from '../Theming'
5 | import { rgba, darken } from 'polished'
6 |
7 | const Button = ({ to, children, secondary, ...restProps }) => {
8 | const theme = useTheme()
9 | const styles = css({
10 | display: 'inline-flex',
11 | border: 'none',
12 | borderRadius: '4px',
13 | background: secondary
14 | ? rgba(theme.colors.primary, 0.1)
15 | : theme.colors.primary,
16 | color: secondary ? theme.colors.primary : theme.colors.white,
17 | padding: '10px 15px',
18 | cursor: 'pointer',
19 | transition: 'all 150ms ease',
20 | '@media (hover: hover)': {
21 | ':hover': {
22 | color: theme.colors.white,
23 | background: darken(0.1, theme.colors.primary),
24 | },
25 | },
26 | })
27 | return to ? (
28 |
29 | {children}
30 |
31 | ) : (
32 |
35 | )
36 | }
37 |
38 | export default Button
39 |
--------------------------------------------------------------------------------
/src/components/Header/Links.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'gatsby'
3 | import { useTheme } from '../Theming'
4 | import ThemeToggler from './ThemeToggler'
5 |
6 | export default () => {
7 | const theme = useTheme()
8 | return (
9 | 82 | Join the Newsletter 83 |
84 | )} 85 | 86 |{errorMessage}
}
194 |
195 | )}
196 | />
197 |
26 |
82 | {isToggledOn && (
83 |
122 | )
123 | }
124 |
125 | export default Toggle
126 |
--------------------------------------------------------------------------------
/src/components/Header/ThemeToggler.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Button from './Button'
3 | import styled from '@emotion/styled'
4 | import { FiMoon, FiSun } from 'react-icons/fi'
5 | import { useTheme } from '../Theming'
6 |
7 | const DarkMode = styled(FiMoon)({
8 | display: 'flex',
9 | alignItems: 'center',
10 | justifyContent: 'center',
11 | margin: '0',
12 | })
13 |
14 | const DefaultMode = styled(FiSun)({
15 | display: 'flex',
16 | alignItems: 'center',
17 | justifyContent: 'center',
18 | margin: '0',
19 | })
20 |
21 | const ThemeToggler = ({ toggleTheme, themeName }) => {
22 | const theme = useTheme()
23 | return (
24 |
58 | )
59 | }
60 | export default ThemeToggler
61 |
--------------------------------------------------------------------------------
/src/components/Header/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link, StaticQuery, graphql } from 'gatsby'
3 | import { css } from '@emotion/core'
4 | import { useTheme } from '../Theming'
5 | import { bpMaxSM } from '../../lib/breakpoints'
6 | import MobileMenu from './MobileMenu'
7 | import Links from './Links'
8 |
9 | import Container from '../Container'
10 |
11 | const Header = ({ siteTitle }) => {
12 | const theme = useTheme()
13 | return (
14 |
96 |
117 | {children}
118 |
119 |
120 | )}
121 |
186 |
193 |
194 |
195 |
196 |
198 | {children}
199 |
200 | {!noFooter && (
201 |
205 | )}
206 |
207 |
31 |
37 | Share article
38 |
43 | Twitter
44 |
45 |
53 | Facebook
54 |
55 |
56 | )
57 | }
58 |
59 | export default Share
60 |
--------------------------------------------------------------------------------
/src/components/Social.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Link from './Link'
3 | import { useTheme } from './Theming'
4 | import { css } from '@emotion/core'
5 | import config from '../../config/website'
6 |
7 | export const Twitter = ({ url = `${config.twitter}` }) => {
8 | const theme = useTheme()
9 | return (
10 |
21 |
33 |
34 | )
35 | }
36 |
37 | export const LinkedIn = ({ url = `${config.linkedin}` }) => {
38 | const theme = useTheme()
39 | return (
40 |
51 |
62 |
63 | )
64 | }
65 |
66 | export const GitHub = ({ url = `${config.github}` }) => {
67 | const theme = useTheme()
68 | return (
69 |
80 |
92 |
93 | )
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/Theming.js:
--------------------------------------------------------------------------------
1 | import { createTheming } from '@callstack/react-theme-provider'
2 | import { lighten } from 'polished'
3 | import colors from '../lib/colors'
4 |
5 | const themes = {
6 | default: {
7 | themeName: 'default',
8 | colors: {
9 | primary: colors.blue,
10 | text: colors.black,
11 | bodyBg: colors.gray,
12 | headerBg: colors.blue,
13 | link: colors.blue,
14 | ...colors,
15 | },
16 | },
17 | dark: {
18 | themeName: 'dark',
19 | colors: {
20 | primary: lighten(0.05, colors.blue),
21 | text: colors.white,
22 | bodyBg: colors.black,
23 | headerBg: colors.black,
24 | link: lighten(0.05, colors.blue),
25 | ...colors,
26 | },
27 | },
28 | }
29 |
30 | const { ThemeProvider, withTheme, useTheme } = createTheming(themes.default)
31 |
32 | export { ThemeProvider, withTheme, useTheme, themes, colors }
33 |
--------------------------------------------------------------------------------
/src/components/mdx/Code.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import theme from 'prism-react-renderer/themes/oceanicNext'
3 | import Highlight, { defaultProps } from 'prism-react-renderer'
4 | import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
5 |
6 | const Code = ({children, codeString, className = 'language-js', ...props }) => {
7 | const language = className.replace(/language-/, '')
8 | if (props['react-live']) {
9 | return (
10 |
26 | {tokens.map((line, i) => (
27 |
28 | {line.map((token, key) => (
29 |
30 | ))}
31 |
32 | ))}
33 |
34 | )}
35 |
5 |
8 | )
9 |
--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { graphql } from 'gatsby'
3 | import { css } from '@emotion/core'
4 | import styled from '@emotion/styled'
5 | import Layout from 'components/Layout'
6 | import Link from 'components/Link'
7 | import { useTheme } from 'components/Theming'
8 | import Container from 'components/Container'
9 | import { rhythm } from '../lib/typography'
10 |
11 | const Hero = () => {
12 | const theme = useTheme()
13 | return (
14 | NOT FOUND
6 |You just hit a route that doesn't exist... the sadness.
7 |39 | Your blog says the things you want to say. 40 |
41 |
74 |
91 | {post.excerpt}{' '}
92 |
96 | Read Article →
97 |
98 |
99 |
100 | ))}
101 |
102 | View all articles
103 |
104 | 83 | 87 | {post.frontmatter.title} 88 | 89 |
90 |105 |
15 |
23 |
24 | {latestArticle.edges.map(({ node: post }) => (
25 |
36 |
37 |
45 |
53 | {post.frontmatter.banner && (
54 |
98 | ))}
99 |
62 |
66 | ![]()
67 |
68 |
69 | )}
70 | 76 | 80 | {post.frontmatter.title} 81 | 82 |
83 | {/* {post.frontmatter.date} */} 84 |89 | {post.excerpt} 90 |
{' '} 91 | 95 | Read Article → 96 | 97 |
100 | {nextPagePath && (
101 |
102 | Next Page →
103 |
104 | )}
105 | {previousPagePath && (
106 |
107 | ← Previous Page
108 |
109 | )}
110 |
111 | 116 |
77 |
88 |