@openeventkit/event-site 2.0.64 → 2.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ const PageHeader = ({
|
|
|
10
10
|
<section className={styles.pageHeader}>
|
|
11
11
|
<div className={styles.titles}>
|
|
12
12
|
<h1>{title}</h1>
|
|
13
|
-
<span
|
|
13
|
+
<span className={styles.subtitle}>{subtitle}</span>
|
|
14
14
|
</div>
|
|
15
15
|
{backgroundImageSrc &&
|
|
16
16
|
<div className={styles.image} style={{backgroundImage: `url(${backgroundImageSrc})`}}></div>
|
|
@@ -6,217 +6,136 @@ import { getSponsorURL } from "../utils/urlFormating";
|
|
|
6
6
|
|
|
7
7
|
import styles from "../styles/sponsor.module.scss";
|
|
8
8
|
|
|
9
|
+
const TierWrapper = ({title, index, wrapperExtraClass, children}) => (
|
|
10
|
+
<div className={`${index === 0 ? styles.firstContainer : ""} ${wrapperExtraClass}`} key={`tier-${index}`}>
|
|
11
|
+
{title &&
|
|
12
|
+
<span><b>{title}</b></span>
|
|
13
|
+
}
|
|
14
|
+
{children}
|
|
15
|
+
</div>
|
|
16
|
+
);
|
|
17
|
+
|
|
9
18
|
const SponsorComponent = ({ page, sponsorsState, linkButton }) => {
|
|
10
19
|
let renderButton = false;
|
|
11
20
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
21
|
+
const sponsorsByTier = sponsorsState.reduce((result, it) => {
|
|
22
|
+
let sponsorship = result.find(s => s.id === it.sponsorship.id);
|
|
23
|
+
if (!sponsorship) {
|
|
24
|
+
const idx = result.push({...it.sponsorship, sponsors: []});
|
|
25
|
+
sponsorship = result[idx - 1];
|
|
26
|
+
}
|
|
27
|
+
sponsorship.sponsors.push(it);
|
|
28
|
+
return result;
|
|
29
|
+
}, []).sort((a, b) => a.order - b.order);
|
|
30
|
+
|
|
31
|
+
const getSponsorImage = (sponsor, settings = {} ) => {
|
|
32
|
+
const {hideWrapper = false, overrideImg, overrideAlt, wrapperExtraClass = ''} = settings;
|
|
33
|
+
const imageUrl = overrideImg || sponsor.company.big_logo || sponsor.company.logo;
|
|
34
|
+
const alt = overrideAlt || sponsor.company.name;
|
|
35
|
+
const link = sponsor.is_published ? `/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}` : sponsor.external_link;
|
|
36
|
+
|
|
37
|
+
if (!imageUrl) return null;
|
|
38
|
+
|
|
39
|
+
let imageTag = <img src={imageUrl} alt={alt} />;
|
|
40
|
+
|
|
41
|
+
if (link) {
|
|
42
|
+
imageTag = (
|
|
43
|
+
<Link to={link}>
|
|
44
|
+
{imageTag}
|
|
45
|
+
</Link>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
17
48
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
49
|
+
if (!hideWrapper) {
|
|
50
|
+
imageTag = (
|
|
51
|
+
<div className={`${styles.imageBox} ${wrapperExtraClass}`}>
|
|
52
|
+
{imageTag}
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return React.cloneElement(imageTag, { key: `${sponsor.id}-image` });
|
|
58
|
+
};
|
|
21
59
|
|
|
22
60
|
return (
|
|
23
|
-
|
|
24
|
-
{
|
|
61
|
+
<>
|
|
62
|
+
{sponsorsByTier.map((tier, tierIndex) => {
|
|
25
63
|
const sponsors = tier.sponsors.sort((a, b) => a.order - b.order);
|
|
26
|
-
|
|
27
|
-
const template =
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
</Link>
|
|
88
|
-
</div>
|
|
89
|
-
:
|
|
90
|
-
<div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
|
|
91
|
-
<img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
|
|
92
|
-
</div>
|
|
93
|
-
)
|
|
94
|
-
})}
|
|
95
|
-
</div>
|
|
96
|
-
)
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
case "horizontal-images": {
|
|
100
|
-
return (
|
|
101
|
-
<div className={`${tierIndex === 0 ? styles.firstContainer : ""} ${styles.horizontalContainer} px-6`} key={tierIndex}>
|
|
102
|
-
{sponsors.map((sponsor, index) => {
|
|
103
|
-
return (
|
|
104
|
-
(!sponsor.company.big_logo && !sponsor.company.logo) ?
|
|
105
|
-
null
|
|
106
|
-
:
|
|
107
|
-
sponsor.is_published ?
|
|
108
|
-
<div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
|
|
109
|
-
<Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`}>
|
|
110
|
-
<img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
|
|
111
|
-
</Link>
|
|
112
|
-
</div>
|
|
113
|
-
: sponsor.external_link ?
|
|
114
|
-
<div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
|
|
115
|
-
<Link to={sponsor.external_link}>
|
|
116
|
-
<img src={sponsor.logo} alt={sponsor.company.name} />
|
|
117
|
-
</Link>
|
|
118
|
-
</div>
|
|
119
|
-
:
|
|
120
|
-
<div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
|
|
121
|
-
<img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
|
|
122
|
-
</div>
|
|
123
|
-
)
|
|
124
|
-
})}
|
|
125
|
-
</div>
|
|
126
|
-
)
|
|
127
|
-
}
|
|
128
|
-
case "expo-hall": {
|
|
129
|
-
return tier.should_display_on_expo_hall_page === true && (
|
|
130
|
-
<div className={`${styles.expoContainer} px-6`} key={tierIndex}>
|
|
64
|
+
|
|
65
|
+
const template = ['lobby', 'event'].includes(page) ? tier[`${page}_template`] : 'expo-hall';
|
|
66
|
+
const hideTier = (page === "lobby" && !tier.should_display_on_lobby_page) || (template === "expo-hall" && !tier.should_display_on_expo_hall_page)
|
|
67
|
+
|
|
68
|
+
if (!sponsors?.length > 0 || hideTier) return null;
|
|
69
|
+
|
|
70
|
+
renderButton = true;
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
switch (template) {
|
|
74
|
+
case "big-images": {
|
|
75
|
+
return (
|
|
76
|
+
<TierWrapper title={tier.widget_title} index={tierIndex} wrapperExtraClass={styles.bigImageContainer}>
|
|
77
|
+
{sponsors.map(sponsor => getSponsorImage(sponsor,{hideWrapper: true}))}
|
|
78
|
+
</TierWrapper>
|
|
79
|
+
)
|
|
80
|
+
}
|
|
81
|
+
case "small-images": {
|
|
82
|
+
return (
|
|
83
|
+
<TierWrapper title={tier.widget_title} index={tierIndex} wrapperExtraClass={styles.smallImageContainer}>
|
|
84
|
+
{sponsors.map((sponsor, index) => {
|
|
85
|
+
if (page === "event" && !sponsor.showLogoInEventPage) return null
|
|
86
|
+
return getSponsorImage(sponsor);
|
|
87
|
+
})}
|
|
88
|
+
</TierWrapper>
|
|
89
|
+
)
|
|
90
|
+
}
|
|
91
|
+
case "horizontal-images": {
|
|
92
|
+
return (
|
|
93
|
+
<TierWrapper index={tierIndex} wrapperExtraClass={styles.horizontalContainer}>
|
|
94
|
+
{sponsors.map(getSponsorImage)}
|
|
95
|
+
</TierWrapper>
|
|
96
|
+
)
|
|
97
|
+
}
|
|
98
|
+
case "expo-hall": {
|
|
99
|
+
return (
|
|
100
|
+
<div className={`${styles.expoContainer} px-6`} key={tierIndex}>
|
|
101
|
+
{sponsors.map(sponsor => {
|
|
102
|
+
const wrapperExtraClass = tier.expo_hall_template === "big-images" ? styles.large : tier.expo_hall_template === "medium-images" ? styles.medium : styles.small;
|
|
103
|
+
return getSponsorImage(sponsor, {wrapperExtraClass});
|
|
104
|
+
})}
|
|
105
|
+
</div>
|
|
106
|
+
)
|
|
107
|
+
}
|
|
108
|
+
case "carousel": {
|
|
109
|
+
const sliderSettings = {
|
|
110
|
+
autoplay: true,
|
|
111
|
+
autoplaySpeed: 5000,
|
|
112
|
+
infinite: true,
|
|
113
|
+
className: "sponsor-carousel",
|
|
114
|
+
dots: false,
|
|
115
|
+
slidesToShow: 1,
|
|
116
|
+
slidesToScroll: 1
|
|
117
|
+
};
|
|
118
|
+
return (
|
|
119
|
+
<TierWrapper
|
|
120
|
+
title={tier.widget_title}
|
|
121
|
+
index={tierIndex}
|
|
122
|
+
wrapperExtraClass={styles.carouselContainer}
|
|
123
|
+
>
|
|
124
|
+
<Slider {...sliderSettings}>
|
|
131
125
|
{sponsors.map((sponsor, index) => {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
:
|
|
136
|
-
sponsor.is_published ?
|
|
137
|
-
<div className={`
|
|
138
|
-
${styles.imageBox}
|
|
139
|
-
${tier.expo_hall_template === "big-images" ? styles.large : tier.expo_hall_template === "medium-images" ? styles.medium : styles.small}`}
|
|
140
|
-
key={`${tier.type.label}-${index}`}
|
|
141
|
-
>
|
|
142
|
-
<Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`}>
|
|
143
|
-
<img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
|
|
144
|
-
</Link>
|
|
145
|
-
</div>
|
|
146
|
-
: sponsor.external_link ?
|
|
147
|
-
<div className={`
|
|
148
|
-
${styles.imageBox}
|
|
149
|
-
${tier.expo_hall_template === "big-images" ? styles.large : tier.expo_hall_template === "medium-images" ? styles.medium : styles.small}`}
|
|
150
|
-
key={`${tier.type.label}-${index}`}
|
|
151
|
-
>
|
|
152
|
-
<Link to={sponsor.external_link}>
|
|
153
|
-
<img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
|
|
154
|
-
</Link>
|
|
155
|
-
</div>
|
|
156
|
-
:
|
|
157
|
-
<div className={`
|
|
158
|
-
${styles.imageBox}
|
|
159
|
-
${tier.expo_hall_template === "big-images" ? styles.large : tier.expo_hall_template === "medium-images" ? styles.medium : styles.small}`}
|
|
160
|
-
key={`${tier.type.label}-${index}`}
|
|
161
|
-
>
|
|
162
|
-
<img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
|
|
163
|
-
</div>
|
|
164
|
-
)
|
|
165
|
-
})}
|
|
166
|
-
</div>
|
|
167
|
-
)
|
|
168
|
-
}
|
|
169
|
-
case "carousel": {
|
|
170
|
-
if (page === "lobby" && !tier.should_display_on_lobby_page) {
|
|
171
|
-
return null
|
|
172
|
-
} else {
|
|
173
|
-
const sliderSettings = {
|
|
174
|
-
autoplay: true,
|
|
175
|
-
autoplaySpeed: 5000,
|
|
176
|
-
infinite: true,
|
|
177
|
-
className: "sponsor-carousel",
|
|
178
|
-
dots: false,
|
|
179
|
-
slidesToShow: 1,
|
|
180
|
-
slidesToScroll: 1
|
|
181
|
-
};
|
|
182
|
-
return (
|
|
183
|
-
<div className={`${tierIndex === 0 ? styles.firstContainer : ""} ${styles.carouselContainer}`} key={tierIndex}>
|
|
184
|
-
{tier.widget_title &&
|
|
185
|
-
<span style={{ marginBottom: "0" }}><b>{tier.widget_title}</b></span>
|
|
126
|
+
const settings = {
|
|
127
|
+
hideWrapper: true,
|
|
128
|
+
overrideImg: sponsor.carousel_advertise_image,
|
|
129
|
+
overrideAlt: sponsor.carousel_advertise_image_alt_text
|
|
186
130
|
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
null
|
|
193
|
-
:
|
|
194
|
-
sponsor.is_published ?
|
|
195
|
-
<Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`} key={`${tier.type.label}-${index}`}>
|
|
196
|
-
<img src={sponsor.carousel_advertise_image} alt={sponsor.carousel_advertise_image_alt_text} />
|
|
197
|
-
</Link>
|
|
198
|
-
:
|
|
199
|
-
sponsor.external_link ?
|
|
200
|
-
<Link to={sponsor.external_link} key={`${tier.type.label}-${index}`}>
|
|
201
|
-
<img src={sponsor.carousel_advertise_image} alt={sponsor.carousel_advertise_image_alt_text} />
|
|
202
|
-
</Link>
|
|
203
|
-
:
|
|
204
|
-
<Link key={`${tier.type.label}-${index}`}>
|
|
205
|
-
<img src={sponsor.carousel_advertise_image} alt={sponsor.carousel_advertise_image_alt_text} />
|
|
206
|
-
</Link>
|
|
207
|
-
)
|
|
208
|
-
})}
|
|
209
|
-
</Slider>
|
|
210
|
-
</div>
|
|
211
|
-
|
|
212
|
-
)
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
default:
|
|
216
|
-
return null;
|
|
131
|
+
return getSponsorImage(sponsor, settings);
|
|
132
|
+
})}
|
|
133
|
+
</Slider>
|
|
134
|
+
</TierWrapper>
|
|
135
|
+
)
|
|
217
136
|
}
|
|
218
|
-
|
|
219
|
-
|
|
137
|
+
default:
|
|
138
|
+
return null;
|
|
220
139
|
}
|
|
221
140
|
})}
|
|
222
141
|
{linkButton?.text && linkButton?.link && renderButton &&
|
|
@@ -226,7 +145,7 @@ const SponsorComponent = ({ page, sponsorsState, linkButton }) => {
|
|
|
226
145
|
</button>
|
|
227
146
|
</Link>
|
|
228
147
|
}
|
|
229
|
-
|
|
148
|
+
</>
|
|
230
149
|
)
|
|
231
150
|
};
|
|
232
151
|
|
package/src/pages/index.js
CHANGED
|
@@ -21,6 +21,7 @@ export const marketingPageQuery = graphql`
|
|
|
21
21
|
gatsbyImageData (
|
|
22
22
|
quality: 100
|
|
23
23
|
placeholder: BLURRED
|
|
24
|
+
layout: FULL_WIDTH
|
|
24
25
|
)
|
|
25
26
|
}
|
|
26
27
|
}
|
|
@@ -32,6 +33,7 @@ export const marketingPageQuery = graphql`
|
|
|
32
33
|
gatsbyImageData (
|
|
33
34
|
quality: 100
|
|
34
35
|
placeholder: BLURRED
|
|
36
|
+
layout: FULL_WIDTH
|
|
35
37
|
)
|
|
36
38
|
}
|
|
37
39
|
}
|
|
@@ -66,6 +68,7 @@ export const marketingPageQuery = graphql`
|
|
|
66
68
|
gatsbyImageData (
|
|
67
69
|
quality: 100
|
|
68
70
|
placeholder: BLURRED
|
|
71
|
+
layout: FULL_WIDTH
|
|
69
72
|
)
|
|
70
73
|
}
|
|
71
74
|
}
|
|
@@ -87,6 +90,7 @@ export const marketingPageQuery = graphql`
|
|
|
87
90
|
gatsbyImageData (
|
|
88
91
|
quality: 100
|
|
89
92
|
placeholder: BLURRED
|
|
93
|
+
layout: FULL_WIDTH
|
|
90
94
|
)
|
|
91
95
|
}
|
|
92
96
|
}
|