Skip to content
This repository was archived by the owner on Nov 14, 2022. It is now read-only.

Commit 35e7e26

Browse files
maiertechmaiertech
committed
Add scrollytelling component to gatsby-theme-blog
Fixes #528
1 parent 6db5db7 commit 35e7e26

File tree

7 files changed

+162
-1
lines changed

7 files changed

+162
-1
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
"scripts": {
99
"version": "changeset version && yarn run format",
1010
"release": "changeset publish",
11+
"prettier": "prettier . --ignore-path .gitignore",
1112
"lint": "run-s lint:*",
1213
"lint:eslint": "eslint . --ignore-path .gitignore",
1314
"lint:prettier": "yarn run prettier --check",
14-
"prettier": "prettier . --ignore-path .gitignore",
1515
"format": "run-s format:*",
1616
"format:eslint": "yarn run lint:eslint --fix",
1717
"format:prettier": "yarn run prettier --write",

‎site/content/image01.jpg

1.7 MB
Loading

‎site/content/image02.jpg

3.5 MB
Loading

‎site/content/image03.jpg

388 KB
Loading

‎site/content/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { default as image01 } from './image01.jpg';
2+
export { default as image02 } from './image02.jpg';
3+
export { default as image03 } from './image03.jpg';

‎site/src/pages/article.js

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import React from 'react';
2+
import { shape, string } from 'prop-types';
3+
import { Layout } from '@undataforum/gatsby-theme-base';
4+
import { Box, Container, Divider, Flex, Image, Styled } from 'theme-ui';
5+
6+
import { image01, image02, image03 } from '../../content';
7+
8+
const Article = ({ location }) => (
9+
<Layout location={location}>
10+
<Container variant="narrow" mb={4}>
11+
<Styled.h1>Story Layout</Styled.h1>
12+
<Styled.h2>Introduction</Styled.h2>
13+
<Styled.p>
14+
Esse Lorem excepteur consectetur id elit nulla ea irure nostrud ullamco.
15+
Est dolor id aliquip exercitation est tempor. Dolore sint do sint
16+
eiusmod sunt sint labore tempor elit elit nostrud enim cillum velit.
17+
Aute veniam tempor sunt minim pariatur ullamco cillum irure commodo
18+
voluptate nostrud est.
19+
</Styled.p>
20+
<Styled.p>
21+
Non quis anim excepteur mollit cupidatat in nostrud tempor labore. Qui
22+
velit non do voluptate adipisicing eiusmod incididunt dolore sunt.
23+
Aliquip ullamco anim aliqua ipsum deserunt ullamco qui aliquip ipsum ea
24+
ex labore. Commodo dolor minim dolor laborum. Adipisicing quis magna
25+
cillum cupidatat sit dolor cillum sit consequat et id aute.
26+
</Styled.p>
27+
</Container>
28+
<Container>
29+
<Divider sx={{ mb: 4 }} />
30+
</Container>
31+
<Container>
32+
<Flex
33+
sx={{
34+
flexDirection: 'row-reverse',
35+
mb: 4,
36+
}}
37+
>
38+
<Box sx={{ alignSelf: 'flex-start', position: 'sticky', top: 3 }}>
39+
<Image src={image01} />
40+
</Box>
41+
<Box sx={{ minWidth: '40%', maxWidth: '40%', mr: 3 }}>
42+
<Styled.h2>Step 1</Styled.h2>
43+
<Styled.p>
44+
Ex non do dolore occaecat pariatur dolore minim eu laboris voluptate
45+
mollit incididunt. Eiusmod culpa consectetur esse nostrud minim do
46+
Lorem sint sint magna mollit elit dolore. Mollit esse id velit irure
47+
tempor fugiat. Cupidatat sunt nostrud id pariatur magna non anim do
48+
excepteur id dolor mollit. Pariatur minim cupidatat sint ea aliquip
49+
nisi incididunt pariatur. Magna do nostrud laborum eiusmod anim id.
50+
</Styled.p>
51+
<Styled.p>
52+
Ut laboris eiusmod laborum qui proident tempor laboris. Incididunt
53+
ex anim proident ullamco veniam ullamco anim Lorem elit occaecat
54+
consectetur occaecat ad. Fugiat cupidatat est minim ipsum.
55+
Incididunt ut cupidatat aliqua velit laboris eu laboris ex aliqua do
56+
eu culpa. Id quis dolore nostrud quis Lorem minim et eu est.
57+
</Styled.p>
58+
<Styled.p>
59+
Proident ullamco voluptate deserunt pariatur ut aliqua non cillum
60+
ipsum id nisi esse sunt. Nostrud quis voluptate veniam excepteur.
61+
Officia officia fugiat cupidatat magna cillum sit anim dolor Lorem
62+
aliqua elit pariatur irure. Aliquip id occaecat qui quis aute velit
63+
eu. Incididunt ipsum elit magna ullamco tempor laboris enim dolore
64+
sunt duis. Laboris commodo aliqua aute magna laboris est labore
65+
voluptate mollit pariatur fugiat in irure.
66+
</Styled.p>
67+
</Box>
68+
</Flex>
69+
<Divider sx={{ mb: 4 }} />
70+
<Flex
71+
sx={{
72+
flexDirection: 'row',
73+
mb: 4,
74+
}}
75+
>
76+
<Box
77+
sx={{ alignSelf: 'flex-start', position: 'sticky', top: 3, mr: 3 }}
78+
>
79+
<Image src={image02} />
80+
</Box>
81+
<Box sx={{ minWidth: '40%', maxWidth: '40%' }}>
82+
<Styled.h2>Step 2</Styled.h2>
83+
<Styled.p>
84+
Nulla proident adipisicing sunt veniam amet ipsum esse ut nisi. Do
85+
consequat nisi non tempor quis proident ullamco commodo adipisicing
86+
do proident aliquip laboris. Nulla culpa anim enim magna eu qui
87+
magna. Exercitation qui ipsum esse est fugiat minim anim non et in.
88+
Esse fugiat in duis eu culpa.
89+
</Styled.p>
90+
<Styled.p>
91+
Nulla duis id sint labore sint sint tempor fugiat dolore eu. Ad
92+
mollit mollit culpa eu ipsum dolore ea est pariatur. Nulla nisi
93+
ipsum ut quis reprehenderit labore duis fugiat commodo esse. Ipsum
94+
id aliqua reprehenderit aliquip reprehenderit et reprehenderit velit
95+
cupidatat qui sunt deserunt nisi eu.
96+
</Styled.p>
97+
</Box>
98+
</Flex>
99+
<Divider sx={{ mb: 4 }} />
100+
<Flex
101+
sx={{
102+
flexDirection: 'row-reverse',
103+
mb: 4,
104+
}}
105+
>
106+
<Box sx={{ alignSelf: 'flex-start', position: 'sticky', top: 3 }}>
107+
<Image src={image03} />
108+
</Box>
109+
<Box sx={{ minWidth: '40%', maxWidth: '40%', mr: 3 }}>
110+
<Styled.h2>Step 3</Styled.h2>
111+
<Styled.p>
112+
Pariatur sint commodo enim et magna nostrud mollit labore ipsum ex
113+
adipisicing veniam cupidatat minim. Adipisicing nisi irure ea dolor
114+
tempor eiusmod sint officia esse nisi voluptate est pariatur magna.
115+
Eu minim non qui labore laboris. Quis officia ipsum consectetur non
116+
tempor cillum ut do tempor exercitation dolore. Commodo do tempor
117+
laborum dolor do anim non veniam consectetur.
118+
</Styled.p>
119+
<Styled.p>
120+
Id exercitation cupidatat exercitation consequat anim fugiat.
121+
Nostrud officia aliqua aute fugiat laborum exercitation elit laboris
122+
sit est eu excepteur id velit. Ipsum est ea tempor duis aliquip
123+
aliquip. Dolore cupidatat Lorem ea do dolore Lorem enim fugiat
124+
ullamco consequat.
125+
</Styled.p>
126+
<Styled.p>
127+
Minim Lorem commodo magna ullamco anim minim laboris velit enim.
128+
Irure nisi non non do culpa incididunt tempor veniam velit ipsum
129+
cupidatat non non deserunt. Id exercitation excepteur et do aliquip
130+
sunt occaecat nostrud eu fugiat. Laboris qui Lorem tempor non ut
131+
deserunt sit laborum esse eu esse enim aute. Ea laboris amet
132+
incididunt sit quis pariatur sint dolor dolore eu. Aliquip nulla
133+
incididunt culpa esse.
134+
</Styled.p>
135+
</Box>
136+
</Flex>
137+
</Container>
138+
<Container>
139+
<Divider sx={{ mb: 4 }} />
140+
</Container>
141+
<Container variant="narrow">
142+
<Styled.h2>Conclusion</Styled.h2>
143+
<Styled.p>
144+
Dolore exercitation nostrud pariatur occaecat exercitation veniam
145+
ullamco magna consectetur deserunt excepteur minim quis. Laboris enim
146+
fugiat magna labore. Tempor id in et do. Amet do in irure commodo nulla
147+
magna sit mollit sunt anim fugiat nulla dolor. Laborum commodo et ut
148+
eiusmod consequat est sint excepteur in.
149+
</Styled.p>
150+
</Container>
151+
</Layout>
152+
);
153+
154+
Article.propTypes = {
155+
location: shape({ pathname: string.isRequired }).isRequired,
156+
};
157+
158+
export default Article;

‎themes/gatsby-theme-blog/src/components/story.js

Whitespace-only changes.

0 commit comments

Comments
 (0)