@openeventkit/event-site 2.0.63 → 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.
Files changed (5) hide show
  1. package/gatsby-node.js +0 -9
  2. package/package.json +1 -1
  3. package/src/components/PageHeader/index.js +1 -1
  4. package/src/components/SponsorComponent.js +121 -202
  5. package/src/pages/index.js +4 -0
package/gatsby-node.js CHANGED
@@ -4,10 +4,7 @@ const fs = require("fs");
4
4
  const webpack = require("webpack");
5
5
  const { createFilePath } = require("gatsby-source-filesystem");
6
6
  const SentryWebpackPlugin = require("@sentry/webpack-plugin");
7
-
8
7
  const { ClientCredentials } = require("simple-oauth2");
9
- const URI = require("urijs");
10
- const sizeOf = require("image-size");
11
8
 
12
9
  const myEnv = require("dotenv").config({
13
10
  path: `.env.${process.env.NODE_ENV}`,
@@ -18,8 +15,6 @@ const {
18
15
  DEFAULT_COLORS_FILE_PATH,
19
16
  COLORS_FILE_PATH,
20
17
  SITE_SETTINGS_FILE_PATH,
21
- LOBBY_PAGE_FILE_PATH,
22
- EXPO_HALL_PAGE_FILE_PATH,
23
18
  SUMMIT_FILE_PATH,
24
19
  EVENTS_FILE_PATH,
25
20
  EVENTS_IDX_FILE_PATH,
@@ -230,8 +225,6 @@ exports.onPreBootstrap = async () => {
230
225
  let marketingSettings = await SSR_getMarketingSettings(process.env.GATSBY_MARKETING_API_BASE_URL, summitId);
231
226
  const colorSettings = fs.existsSync(COLORS_FILE_PATH) ? JSON.parse(fs.readFileSync(COLORS_FILE_PATH)) : require(`./${DEFAULT_COLORS_FILE_PATH}`);
232
227
  const globalSettings = fs.existsSync(SITE_SETTINGS_FILE_PATH) ? JSON.parse(fs.readFileSync(SITE_SETTINGS_FILE_PATH)) : {};
233
- const lobbyPageSettings = fs.existsSync(LOBBY_PAGE_FILE_PATH) ? JSON.parse(fs.readFileSync(LOBBY_PAGE_FILE_PATH)) : {};
234
- const expoHallPageSettings = fs.existsSync(EXPO_HALL_PAGE_FILE_PATH) ? JSON.parse(fs.readFileSync(EXPO_HALL_PAGE_FILE_PATH)) : {};
235
228
 
236
229
  const config = {
237
230
  client: {
@@ -266,8 +259,6 @@ exports.onPreBootstrap = async () => {
266
259
 
267
260
  fs.writeFileSync(MARKETING_SETTINGS_FILE_PATH, JSON.stringify(marketingSettings), "utf8");
268
261
  fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colorSettings), "utf8");
269
- fs.writeFileSync(LOBBY_PAGE_FILE_PATH, JSON.stringify(lobbyPageSettings), "utf8");
270
- fs.writeFileSync(EXPO_HALL_PAGE_FILE_PATH, JSON.stringify(expoHallPageSettings), "utf8");
271
262
 
272
263
  // summit
273
264
  const summit = await SSR_getSummit(summitApiBaseUrl, summitId);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@openeventkit/event-site",
3
3
  "description": "Event Site",
4
- "version": "2.0.63",
4
+ "version": "2.0.65",
5
5
  "author": "Tipit LLC",
6
6
  "dependencies": {
7
7
  "@mui/base": "^5.0.0-alpha.114",
package/src/components/PageHeader/index.js 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 class={styles.subtitle}>{subtitle}</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>
package/src/components/SponsorComponent.js CHANGED
@@ -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
- let sponsorsByTier = sponsorsState.reduce((memo, x) => {
13
- if (!memo[x["sponsorship"].type.name]) { memo[x["sponsorship"].type.name] = []; }
14
- memo[x["sponsorship"].type.name].push(x);
15
- return memo;
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
- Object.keys(sponsorsByTier).forEach((s) => {
19
- sponsorsByTier[s] = { ...sponsorsByTier[s][0].sponsorship, sponsors: sponsorsByTier[s] }
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
- <React.Fragment>
24
- {Object.values(sponsorsByTier).sort((a, b) => a.order - b.order).map((tier, tierIndex) => {
61
+ <>
62
+ {sponsorsByTier.map((tier, tierIndex) => {
25
63
  const sponsors = tier.sponsors.sort((a, b) => a.order - b.order);
26
- if (!tier) return null;
27
- const template = page === "lobby" ? tier.lobby_template : page === "event" ? tier.event_page_template : "expo-hall";
28
- if (sponsors?.length > 0) {
29
- renderButton = true;
30
- switch (template) {
31
- case "big-images": {
32
- if (page === "lobby" && !tier.should_display_on_lobby_page) {
33
- return null
34
- } else {
35
- return (
36
- <div className={`${tierIndex === 0 ? styles.firstContainer : ""} ${styles.bigImageContainer}`} key={tierIndex}>
37
- {tier.widget_title &&
38
- <span><b>{tier.widget_title}</b></span>
39
- }
40
- {sponsors.map((sponsor, index) => {
41
- return (
42
- (!sponsor.company.big_logo && !sponsor.company.logo) ?
43
- null
44
- :
45
- sponsor.is_published ?
46
- <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`} key={`${tier.type.label}-${index}`}>
47
- <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
48
- </Link>
49
- :
50
- sponsor.external_link ?
51
- <Link to={sponsor.external_link} key={`${tier.type.label}-${index}`}>
52
- <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
53
- </Link>
54
- :
55
- <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
56
- )
57
- })}
58
- </div>
59
- )
60
- }
61
- }
62
- case "small-images": {
63
- if (page === "lobby" && !tier.should_display_on_lobby_page) {
64
- return null
65
- } else {
66
- return (
67
- <div className={`${tierIndex === 0 ? styles.firstContainer : ""} ${styles.smallImageContainer}`} key={tierIndex}>
68
- {tier.widget_title &&
69
- <span><b>{tier.widget_title}</b></span>
70
- }
71
- {sponsors.map((sponsor, index) => {
72
- if (page === "event" && !sponsor.showLogoInEventPage) return null
73
- return (
74
- (!sponsor.company.big_logo && !sponsor.company.logo) ?
75
- null
76
- :
77
- sponsor.is_published ?
78
- <div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
79
- <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`}>
80
- <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
81
- </Link>
82
- </div>
83
- : sponsor.external_link ?
84
- <div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
85
- <Link to={sponsor.external_link}>
86
- <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
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
- return (
133
- (!sponsor.company.big_logo && !sponsor.company.logo) ?
134
- null
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
- <Slider {...sliderSettings}>
188
- {sponsors.map((sponsor, index) => {
189
- const img = sponsor.carousel_advertise_image ? sponsor.carousel_advertise_image : sponsor.logo;
190
- return (
191
- (!sponsor.company.big_logo && !sponsor.company.logo) ?
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
- } else {
219
- return null;
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
- </React.Fragment>
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
  }