Skip to content

Commit 912a192

Browse files
ginifizznatacha-h
ginifizz
authored and
natacha-h
committed
Feat: review 2022 (api-platform#328)
1 parent 7fdff44 commit 912a192

29 files changed

+370
-8
lines changed

‎gatsby-config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,13 @@ module.exports = {
8989
name: 'review2021',
9090
},
9191
},
92+
{
93+
resolve: 'gatsby-source-filesystem',
94+
options: {
95+
path: `${__dirname}/src/con/images/2022/review`,
96+
name: 'review2022',
97+
},
98+
},
9299
{
93100
resolve: 'gatsby-source-filesystem',
94101
options: {

‎src/con/components/2021/Review/ReviewItem.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
1+
import React, { PropsWithChildren } from 'react';
22
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
33
import { useStaticQuery, graphql } from 'gatsby';
44
import useAnimation from '@con/hooks/useAnimation';
55

6-
interface ReviewProps {
6+
interface ReviewProps extends PropsWithChildren {
77
title: JSX.Element;
88
imageId: string;
99
}

‎src/con/components/2021/Review/ReviewList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const ReviewList: React.ComponentType = () => {
8585
</p>
8686
<p>Thank you again!</p>
8787
<Button className="square" size="small" to="mailto:events@les-tilleuls.coop">
88-
Become a partner
88+
Become a partner in 2023
8989
</Button>
9090
</ReviewItem>
9191
<ReviewItem

‎src/con/components/2022/Review/ReviewCover.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React, { useCallback } from 'react';
2+
import { StaticImage } from 'gatsby-plugin-image';
3+
import Button from '@con/components/common/Button';
4+
import useDynamicRefs from '@con/hooks/useDynamicRefs';
5+
6+
const Review: React.ComponentType = () => {
7+
const [getRef] = useDynamicRefs();
8+
9+
const scrollToList = useCallback(() => {
10+
const reviewList = getRef('review-list');
11+
12+
if (reviewList) reviewList.current.scrollIntoView({ behavior: 'smooth' });
13+
}, [getRef]);
14+
15+
return (
16+
<section>
17+
<div className="conf__review-bg">
18+
<StaticImage
19+
src="../../../images/editions/2022.jpg"
20+
alt="Api platform con 2022 picture"
21+
className="review__bg-image"
22+
/>
23+
</div>
24+
<div className="container conf__review-cover">
25+
<h1 className="review__cover-title">
26+
<span>2022 review</span>
27+
<span className="uppercase">An edition beyond our expectations</span>
28+
</h1>
29+
<p className="review__cover-text">
30+
Thank you to all our attendees for joining us for this second edition.
31+
<br />
32+
We hope you enjoyed it as much as we loved organizing it.
33+
</p>
34+
<p>
35+
API Platform Con will be back in 2023. To stay up to date on all of our latest news, follow us on{' '}
36+
<a href="https://twitter.com/ApiPlatform" target="_blank" rel="noreferrer noopener">
37+
Twitter
38+
</a>
39+
.
40+
</p>
41+
<div className="review__cover-buttons">
42+
<Button onClick={scrollToList}>Discover our review</Button>
43+
</div>
44+
</div>
45+
</section>
46+
);
47+
};
48+
49+
export default Review;

‎src/con/components/2022/Review/ReviewItem.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { PropsWithChildren } from 'react';
2+
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
3+
import { useStaticQuery, graphql } from 'gatsby';
4+
import useAnimation from '@con/hooks/useAnimation';
5+
6+
interface ReviewProps extends PropsWithChildren {
7+
title: JSX.Element;
8+
imageId: string;
9+
}
10+
11+
const Review: React.ComponentType<ReviewProps> = ({ title, imageId, children }) => {
12+
const data = useStaticQuery(graphql`
13+
query {
14+
allFile(filter: { sourceInstanceName: { eq: "review2022" } }) {
15+
nodes {
16+
name
17+
childImageSharp {
18+
gatsbyImageData(height: 350, placeholder: DOMINANT_COLOR)
19+
}
20+
}
21+
}
22+
}
23+
`);
24+
const images = data.allFile.nodes.find((imageData) => imageData.name === imageId);
25+
const image = images && getImage(images);
26+
27+
const animationLeft = useAnimation('left', undefined, undefined, undefined);
28+
const animationRight = useAnimation('right');
29+
const animationScale = useAnimation('scale', 1.5, 0.5, undefined, '0px 0px -20% 0px');
30+
31+
return (
32+
<div className="conf__review-item">
33+
<div className="review-item__title" ref={animationScale}>
34+
{title}
35+
</div>
36+
<div className="review-item__aside">
37+
<div className="review-item__picture" ref={animationLeft}>
38+
<div className="w-full h-full">
39+
<GatsbyImage image={image} alt="" />
40+
</div>
41+
</div>
42+
<div className="review-item__content" ref={animationRight}>
43+
<div className="review-item__card dotted-corner">{children}</div>
44+
</div>
45+
</div>
46+
</div>
47+
);
48+
};
49+
50+
export default Review;

‎src/con/components/2022/Review/ReviewList.tsx

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import React from 'react';
2+
import Button from '@con/components/common/Button';
3+
import useDynamicRefs from '@con/hooks/useDynamicRefs';
4+
import ReviewItem from './ReviewItem';
5+
6+
const ReviewList: React.ComponentType = () => {
7+
const [, setRef] = useDynamicRefs();
8+
const reviewRef = setRef('review-list');
9+
10+
return (
11+
<section className="conf__review-list" ref={reviewRef}>
12+
<div className="container">
13+
<ReviewItem
14+
imageId="days"
15+
title={
16+
<>
17+
<strong>2</strong>
18+
<span>awesome days</span>
19+
</>
20+
}
21+
>
22+
<div className="h5 lined lined-left mb-20 font-bold">We doubled the fun</div>
23+
<p>This year, the API Platform Con took place over 2 days with still two tracks in both languages.</p>
24+
<p>
25+
Tracks were given in{' '}
26+
<a href="https://www.euratechnologies.com/" target="_blank" rel="noreferrer noopener">
27+
Euratechnologies
28+
</a>
29+
, located at 1 hour from Paris, 30 min from Brussels and 12 hours from Montreal!
30+
</p>
31+
</ReviewItem>
32+
<ReviewItem
33+
imageId="speakers"
34+
title={
35+
<>
36+
<strong>29</strong>
37+
<span>inspiring speakers</span>
38+
</>
39+
}
40+
>
41+
<div className="h5 lined lined-left mb-20 font-bold">They made this event so amazing!</div>
42+
<p>
43+
Some of the best speakers from our ecosystem came from America, Africa or Europe and shared their knowledge
44+
in English and in French.
45+
</p>
46+
<p>
47+
A wide variety of topics were discussed and we’re very proud to have welcomed some new speakers who were on
48+
stage for the very first time!
49+
</p>
50+
<Button className="square" size="small" to="/con/2022/speakers">
51+
See all speakers
52+
</Button>
53+
</ReviewItem>
54+
<ReviewItem
55+
imageId="attendees"
56+
title={
57+
<>
58+
<strong>700</strong>
59+
<span>attendees</span>
60+
</>
61+
}
62+
>
63+
<div className="h5 lined lined-left mb-20 font-bold">Thank you 700 times!</div>
64+
<p>
65+
300 people were in Lille and 400 people from all over the world listened to our talks online. The online
66+
participation rate has even reached 71%!
67+
</p>
68+
<p>Thank you so much!</p>
69+
</ReviewItem>
70+
<ReviewItem
71+
imageId="sponsors"
72+
title={
73+
<>
74+
<strong>12</strong>
75+
<span>sponsors and partners</span>
76+
</>
77+
}
78+
>
79+
<div className="h5 lined lined-left mb-20 font-bold">Our best allies for this event</div>
80+
<p>
81+
A huge thank you to our Platinum sponsor{' '}
82+
<a href="https://www.france.tv/" target="_blank" rel="noreferrer noopener">
83+
France Télévisions
84+
</a>{' '}
85+
for trusting us.
86+
</p>
87+
<p>
88+
Thank you also to our fabulous Gold sponsors{' '}
89+
<a href="https://sensiolabs.com/fr/" target="_blank" rel="noreferrer noopener">
90+
Sensiolabs
91+
</a>
92+
,{' '}
93+
<a href="https://www.alicesgarden.fr/" target="_blank" rel="noreferrer noopener">
94+
Alice&apos;s Garden
95+
</a>
96+
,{' '}
97+
<a
98+
href="https://api-platform.com/con/2022/partners/linkvalue.png"
99+
target="_blank"
100+
rel="noreferrer noopener"
101+
>
102+
Linkvalue
103+
</a>
104+
,{' '}
105+
<a
106+
href="https://api-platform.com/con/2022/partners/platform-sh.png"
107+
target="_blank"
108+
rel="noreferrer noopener"
109+
>
110+
Platform.sh
111+
</a>{' '}
112+
and{' '}
113+
<a
114+
href="https://api-platform.com/con/2022/partners/clever-cloud.png"
115+
target="_blank"
116+
rel="noreferrer noopener"
117+
>
118+
Clever Cloud
119+
</a>
120+
.
121+
</p>
122+
<p>
123+
A big thank you to our Bronze sponsors{' '}
124+
<a href="https://www.rapid-flyer.com/" target="_blank" rel="noreferrer noopener">
125+
Rapid Flyer
126+
</a>{' '}
127+
and{' '}
128+
<a href="https://fairness.coop/" target="_blank" rel="noreferrer noopener">
129+
Fairness
130+
</a>{' '}
131+
for joining us.
132+
</p>
133+
<Button className="square" size="small" to="mailto:events@les-tilleuls.coop">
134+
Become a partner in 2023
135+
</Button>
136+
</ReviewItem>
137+
<ReviewItem
138+
imageId="release"
139+
title={
140+
<>
141+
<span>API Platform’s new</span>
142+
<strong>release</strong>
143+
</>
144+
}
145+
>
146+
<div className="h5 lined lined-left mb-20 font-bold">An unforgettable edition</div>
147+
<p>API Platform Con was the occasion to celebrate the release of API Platform 3.</p>
148+
<p>We hope you enjoy our core team’s work and we can’t wait to hear from your feedback!</p>
149+
</ReviewItem>
150+
</div>
151+
</section>
152+
);
153+
};
154+
155+
export default ReviewList;

‎src/con/components/2022/Review/ReviewPictureGallery.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { GatsbyImage, getImage, IGatsbyImageData } from 'gatsby-plugin-image';
3+
import { useStaticQuery, graphql } from 'gatsby';
4+
import PictureGallery from '@con/components/common/PictureGallery';
5+
6+
const ReviewPictureGallery: React.ComponentType = () => {
7+
const data = useStaticQuery(graphql`
8+
query {
9+
allFile(
10+
filter: { sourceInstanceName: { eq: "review2022" }, name: { regex: "/^pic-/" } }
11+
sort: { fields: name }
12+
) {
13+
nodes {
14+
name
15+
childImageSharp {
16+
gatsbyImageData(height: 350, placeholder: DOMINANT_COLOR)
17+
}
18+
}
19+
}
20+
}
21+
`);
22+
const images: { image: IGatsbyImageData; name: string }[] = data.allFile.nodes.map((item) => ({
23+
image: getImage(item),
24+
name: item.name,
25+
}));
26+
return (
27+
<section>
28+
<PictureGallery className="pt-50 pb-200" link="https://flickr.com/photos/194052559@N02/albums/72177720302238684">
29+
{images.map(({ image, name }, index) => (
30+
<GatsbyImage key={`${name} ${index}`} image={image} alt={`API Platform con 2022 - ${name}`} />
31+
))}
32+
</PictureGallery>
33+
</section>
34+
);
35+
};
36+
37+
export default ReviewPictureGallery;

‎src/con/components/2022/Review/index.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { Helmet } from 'react-helmet';
3+
import ReviewCover from './ReviewCover';
4+
import ReviewList from './ReviewList';
5+
import ReviewPictureGallery from './ReviewPictureGallery';
6+
7+
const Review: React.ComponentType = () => {
8+
return (
9+
<>
10+
<Helmet>
11+
<title>2022 review</title>
12+
<meta property="og:title" content="2022 review" />
13+
<meta name="twitter:title" content="2022 review" />
14+
</Helmet>
15+
<ReviewCover />
16+
<ReviewList />
17+
<ReviewPictureGallery />
18+
</>
19+
);
20+
};
21+
22+
export default Review;

‎src/con/components/layout/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { createContext } from 'react';
22
import meta from '@con/data/meta';
33
import { Navigation } from '@con/types';
4-
import nav from '@con/data/nav';
4+
import baseNav from '@con/data/nav';
55
import LayoutBase from '@con/components/layout/LayoutBase';
66
import { previousEditions } from '@con/data/editions';
77

@@ -23,6 +23,7 @@ interface LayoutProps {
2323
logoAlwaysVisible?: boolean;
2424
edition?: string;
2525
children: React.ReactNode;
26+
nav?: typeof baseNav;
2627
}
2728

2829
const landingFooter = [
@@ -32,7 +33,7 @@ const landingFooter = [
3233
},
3334
];
3435

35-
const Layout: React.ComponentType<LayoutProps> = ({ children, logoAlwaysVisible = false, edition }) => {
36+
const Layout: React.ComponentType<LayoutProps> = ({ children, logoAlwaysVisible = false, edition, nav = baseNav }) => {
3637
return (
3738
<ConfContext.Provider value={{ nav, edition }}>
3839
<LayoutBase

‎src/con/data/2022/nav.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ const nav = {
2323
text: 'Schedule',
2424
},
2525
{
26-
to: '/con/2021/review',
27-
text: '2021 review',
26+
to: '/con/2022/review',
27+
text: 'Review',
2828
},
2929
],
3030
};

‎src/con/images/2022/review/attendees.jpg

525 KB
Loading

‎src/con/images/2022/review/days.jpg

353 KB
Loading

‎src/con/images/2022/review/pic-01.jpg

477 KB
Loading

‎src/con/images/2022/review/pic-02.jpg

678 KB
Loading

‎src/con/images/2022/review/pic-03.jpg

387 KB
Loading

‎src/con/images/2022/review/pic-04.jpg

454 KB
Loading

‎src/con/images/2022/review/pic-05.jpg

388 KB
Loading

‎src/con/images/2022/review/pic-06.jpg

499 KB
Loading

‎src/con/images/2022/review/pic-07.jpg

437 KB
Loading

‎src/con/images/2022/review/pic-08.jpg

431 KB
Loading

‎src/con/images/2022/review/pic-09.jpg

318 KB
Loading

‎src/con/images/2022/review/pic-10.jpg

354 KB
Loading

‎src/con/images/2022/review/pic-11.jpg

341 KB
Loading

‎src/con/images/2022/review/pic-12.jpg

305 KB
Loading

‎src/con/images/2022/review/release.jpg

651 KB
Loading

‎src/con/images/2022/review/speakers.jpg

298 KB
Loading

‎src/con/images/2022/review/sponsors.jpg

418 KB
Loading

0 commit comments

Comments
 (0)