Skip to content

Commit d78953b

Browse files
author
ankitrewar11
committed
Improve Event page Performance
1 parent 21b33cc commit d78953b

File tree

3 files changed

+160
-72
lines changed

3 files changed

+160
-72
lines changed

‎src/components/Card/index.js‎

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,33 @@ import Image from "../image";
66
import { CardWrapper } from "./Card.style";
77
import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
88

9-
const Card = ({ frontmatter, fields, loading = "lazy", fetchpriority = "auto" }) => {
10-
9+
const Card = ({
10+
frontmatter,
11+
fields,
12+
loading = "lazy",
13+
fetchpriority = "auto",
14+
}) => {
1115
const { isDark } = useStyledDarkMode();
1216

1317
return (
1418
<CardWrapper fixed={!!frontmatter.abstract}>
1519
<div className="post-block">
1620
<div className="post-thumb-block">
1721
<Image
18-
{...((isDark && frontmatter.darkthumbnail && frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL)
19-
? frontmatter.darkthumbnail : frontmatter.thumbnail)}
22+
{...(isDark &&
23+
frontmatter.darkthumbnail &&
24+
frontmatter.darkthumbnail.publicURL !==
25+
frontmatter.thumbnail.publicURL
26+
? frontmatter.darkthumbnail
27+
: frontmatter.thumbnail)}
2028
imgStyle={{ objectFit: "contain" }}
2129
loading={loading}
2230
fetchpriority={fetchpriority}
2331
alt={frontmatter.title}
2432
/>
2533
</div>
2634
<div className="post-content-block">
27-
<h2 className="post-title">
28-
{frontmatter.title}
29-
</h2>
35+
<h2 className="post-title">{frontmatter.title}</h2>
3036
<div className="post-meta-block">
3137
{frontmatter.date && frontmatter.author && (
3238
<>
@@ -47,21 +53,41 @@ const Card = ({ frontmatter, fields, loading = "lazy", fetchpriority = "auto" })
4753
<div className="readmore-btn-wrapper">
4854
{fields && fields.slug && frontmatter.eurl && (
4955
<>
50-
<Link className="readmore-btn" to={fields.slug}>
56+
<Link
57+
className="readmore-btn"
58+
to={fields.slug}
59+
aria-label={`See more about ${frontmatter.title}`}
60+
>
5161
see more <IoIosArrowRoundForward />
5262
</Link>
53-
<a className="external-link-btn" href={frontmatter.eurl} target="_blank" rel="noreferrer">
63+
<a
64+
className="external-link-btn"
65+
href={frontmatter.eurl}
66+
target="_blank"
67+
rel="noreferrer noopener"
68+
aria-label={`Visit external link for ${frontmatter.title}`}
69+
>
5470
<BiLinkExternal />
5571
</a>
5672
</>
5773
)}
5874
{fields && fields.slug && !frontmatter.eurl && (
59-
<Link className="readmore-btn" to={fields.slug}>
75+
<Link
76+
className="readmore-btn"
77+
to={fields.slug}
78+
aria-label={`See more about ${frontmatter.title}`}
79+
>
6080
see more <IoIosArrowRoundForward />
6181
</Link>
6282
)}
63-
{!fields && !fields.slug && frontmatter.eurl && (
64-
<a className="external-link-btn" href={frontmatter.eurl} target="_blank" rel="noreferrer">
83+
{(!fields || !fields.slug) && frontmatter.eurl && (
84+
<a
85+
className="external-link-btn"
86+
href={frontmatter.eurl}
87+
target="_blank"
88+
rel="noreferrer noopener"
89+
aria-label={`Visit external link for ${frontmatter.title}`}
90+
>
6591
<BiLinkExternal />
6692
</a>
6793
)}

‎src/components/UpcomingEventCard/index.js‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,60 @@ import "swiper/css/bundle";
88
import Button from "../../reusecore/Button";
99
import slugify from "../../utils/slugify";
1010

11-
1211
const UpcomingEvents = ({ data }) => {
1312
return (
1413
<UpcomingEventsWrapper>
1514
<div className="blog-slider swiper">
16-
<div style={{
17-
display: "block"
18-
}} className="blog-slider__wrp swiper-wrapper"
15+
<div
16+
style={{ display: "block" }}
17+
className="blog-slider__wrp swiper-wrapper"
1918
>
20-
2119
<Swiper
2220
spaceBetween={50}
2321
slidesPerView={1}
2422
modules={[Mousewheel, Pagination]}
2523
pagination={{ clickable: true }}
2624
>
27-
{data.nodes.map(item => {
25+
{data.nodes.map((item) => {
2826
return (
2927
<SwiperSlide key={item.id}>
3028
<div className="blog-slider_item swiper-slide">
3129
<div className="blog-slider_img">
32-
<Link to={`/community/events/${slugify(item.frontmatter.title)}`}>
33-
<Image {...item.frontmatter.thumbnail} alt={item.frontmatter.title} />
30+
<Link
31+
to={`/community/events/${slugify(item.frontmatter.title)}`}
32+
aria-label={`View event: ${item.frontmatter.title}`}
33+
>
34+
<Image
35+
{...item.frontmatter.thumbnail}
36+
alt={item.frontmatter.title}
37+
width={480}
38+
height={270}
39+
/>
3440
</Link>
3541
</div>
3642
<div className="blog-slider_content">
37-
<h3 className="blog-slider_title">{item.frontmatter.title}</h3>
38-
<p className="blog-slider_date">{item.frontmatter.date}</p>
39-
<p className="blog-slider_description">{item.frontmatter.abstract}</p>
40-
<Button $secondary className="blog-slider_button" $url={item.frontmatter.eurl} title="Join Now" $external={true} />
43+
<h3 className="blog-slider_title">
44+
{item.frontmatter.title}
45+
</h3>
46+
<p className="blog-slider_date">
47+
{item.frontmatter.date}
48+
</p>
49+
<p className="blog-slider_description">
50+
{item.frontmatter.abstract}
51+
</p>
52+
<Button
53+
$secondary
54+
className="blog-slider_button"
55+
$url={item.frontmatter.eurl}
56+
title="Join Now"
57+
$external={true}
58+
/>
4159
</div>
4260
</div>
4361
</SwiperSlide>
4462
);
4563
})}
4664
</Swiper>
47-
4865
</div>
4966
</div>
5067
</UpcomingEventsWrapper>

‎src/sections/Events/index.js‎

Lines changed: 92 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -10,59 +10,104 @@ import RssFeedIcon from "../../assets/images/socialIcons/rss-sign.svg";
1010

1111
const Meetups = ({ data, pageContext }) => {
1212
const [active, setActive] = useState("all");
13+
1314
const sortEvents = (nodes) => {
14-
return nodes.slice().sort((first, second) => new Date(second.frontmatter.date.replace(/(st|nd|rd|th),/g, "")) - new Date(first.frontmatter.date.replace(/(st|nd|rd|th),/g, "")));
15+
return nodes
16+
.slice()
17+
.sort(
18+
(first, second) =>
19+
new Date(second.frontmatter.date.replace(/(st|nd|rd|th),/g, "")) -
20+
new Date(first.frontmatter.date.replace(/(st|nd|rd|th),/g, "")),
21+
);
1522
};
1623

1724
return (
1825
<MeetupStyle>
19-
<PageHeader title="Events" path="Community/Events" img={RssFeedIcon} feedlink="/events/feed.xml" />
20-
<h2 className="event-subhead">Join Layer5 at these events</h2>
21-
<UpcomingEvents data={data.allUpcoming} />
22-
<Container>
23-
<div className="filterBtns">
24-
<Button className={active == "all" ? "active" : ""} onClick={() => setActive("all")} title="All" />
25-
<Button className={active == "events" ? "active" : ""} onClick={() => setActive("events")} title="Events" />
26-
<Button className={active == "workshops" ? "active" : ""} onClick={() => setActive("workshops")} title="Workshops" />
27-
<Button className={active == "meetups" ? "active" : ""} onClick={() => setActive("meetups")} title="MeetUps" />
28-
</div>
29-
<div>
30-
<Row style={{
31-
flexWrap: "wrap"
32-
}}
26+
<main>
27+
<PageHeader
28+
title="Events"
29+
path="Community/Events"
30+
img={RssFeedIcon}
31+
feedlink="/events/feed.xml"
32+
/>
33+
<h2 className="event-subhead">Join Layer5 at these events</h2>
34+
<UpcomingEvents data={data.allUpcoming} />
35+
<Container>
36+
<div
37+
className="filterBtns"
38+
role="group"
39+
aria-label="Filter events by type"
3340
>
34-
{active == "all" ? sortEvents(data.allCategories.nodes).map(category => {
35-
return (
36-
<Col $xs={12} $sm={6} $lg={4} key={category.id}>
37-
<Card frontmatter={category.frontmatter} fields={category.fields} />
38-
</Col>
39-
);
40-
}) : <></>}
41-
{active == "events" ? sortEvents(data.allEvents.nodes).map(event => {
42-
return (
43-
<Col $xs={12} $sm={6} $lg={4} key={event.id}>
44-
<Card frontmatter={event.frontmatter} fields={event.fields} />
45-
</Col>
46-
);
47-
}) : <></>}
48-
{active == "workshops" ? sortEvents(data.allWorkshops.nodes).map(workshop => {
49-
return (
50-
<Col $xs={12} $sm={6} $lg={4} key={workshop.id}>
51-
<Card frontmatter={workshop.frontmatter} fields={workshop.fields} />
52-
</Col>
53-
);
54-
}) : <></>}
55-
{active == "meetups" ? sortEvents(data.allMeetups.nodes).map(meetup => {
56-
return (
57-
<Col $xs={12} $sm={6} $lg={4} key={meetup.id}>
58-
<Card frontmatter={meetup.frontmatter} fields={meetup.fields} />
59-
</Col>
60-
);
61-
}) : <></>}
62-
</Row>
63-
</div>
64-
{active == "all" ? <Pager pageContext={pageContext} text={"Events"} /> : <></>}
65-
</Container>
41+
<Button
42+
className={active === "all" ? "active" : ""}
43+
onClick={() => setActive("all")}
44+
title="All"
45+
aria-pressed={active === "all"}
46+
/>
47+
<Button
48+
className={active === "events" ? "active" : ""}
49+
onClick={() => setActive("events")}
50+
title="Events"
51+
aria-pressed={active === "events"}
52+
/>
53+
<Button
54+
className={active === "workshops" ? "active" : ""}
55+
onClick={() => setActive("workshops")}
56+
title="Workshops"
57+
aria-pressed={active === "workshops"}
58+
/>
59+
<Button
60+
className={active === "meetups" ? "active" : ""}
61+
onClick={() => setActive("meetups")}
62+
title="MeetUps"
63+
aria-pressed={active === "meetups"}
64+
/>
65+
</div>
66+
<div>
67+
<Row style={{ flexWrap: "wrap" }}>
68+
{active === "all" &&
69+
sortEvents(data.allCategories.nodes).map((category) => (
70+
<Col $xs={12} $sm={6} $lg={4} key={category.id}>
71+
<Card
72+
frontmatter={category.frontmatter}
73+
fields={category.fields}
74+
/>
75+
</Col>
76+
))}
77+
{active === "events" &&
78+
sortEvents(data.allEvents.nodes).map((event) => (
79+
<Col $xs={12} $sm={6} $lg={4} key={event.id}>
80+
<Card
81+
frontmatter={event.frontmatter}
82+
fields={event.fields}
83+
/>
84+
</Col>
85+
))}
86+
{active === "workshops" &&
87+
sortEvents(data.allWorkshops.nodes).map((workshop) => (
88+
<Col $xs={12} $sm={6} $lg={4} key={workshop.id}>
89+
<Card
90+
frontmatter={workshop.frontmatter}
91+
fields={workshop.fields}
92+
/>
93+
</Col>
94+
))}
95+
{active === "meetups" &&
96+
sortEvents(data.allMeetups.nodes).map((meetup) => (
97+
<Col $xs={12} $sm={6} $lg={4} key={meetup.id}>
98+
<Card
99+
frontmatter={meetup.frontmatter}
100+
fields={meetup.fields}
101+
/>
102+
</Col>
103+
))}
104+
</Row>
105+
</div>
106+
{active === "all" && (
107+
<Pager pageContext={pageContext} text={"Events"} />
108+
)}
109+
</Container>
110+
</main>
66111
</MeetupStyle>
67112
);
68113
};

0 commit comments

Comments
 (0)