Skip to content

Improve Event page Performance #7621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AnkitRewar11 wants to merge 4 commits into
base: master
Choose a base branch
from
+137 −66
Open

Improve Event page Performance #7621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7cf252e
Improve Event page Performance
Apr 11, 2026
78a7814
Merge branch 'master' into fix/event-page-performance
AnkitRewar11 Apr 11, 2026
fe1ca40
Merge branch 'master' into fix/event-page-performance
AnkitRewar11 Apr 13, 2026
8dcfabd
Merge branch 'master' into fix/event-page-performance
Rajesh-Nagarajan-11 Apr 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions src/components/Card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const Card = ({
fetchpriority = "auto",
}) => {
const { isDark } = useStyledDarkMode();

return (
<CardWrapper fixed={!!frontmatter.abstract}>
<div className="post-block">
Expand Down Expand Up @@ -53,21 +52,30 @@ const Card = ({
<div className="readmore-btn-wrapper">
{fields && fields.slug && frontmatter.eurl && (
<>
<Link className="readmore-btn" to={fields.slug}>
<Link
className="readmore-btn"
to={fields.slug}
aria-label={`See more about ${frontmatter.title}`}
>
see more <IoIosArrowRoundForward />
</Link>
<a
className="external-link-btn"
href={frontmatter.eurl}
target="_blank"
rel="noreferrer oopener"
rel="noreferrer noopener"
aria-label={`Visit external link for ${frontmatter.title}`}
>
<BiLinkExternal />
</a>
</>
)}
{fields && fields.slug && !frontmatter.eurl && (
<Link className="readmore-btn" to={fields.slug}>
<Link
className="readmore-btn"
to={fields.slug}
aria-label={`See more about ${frontmatter.title}`}
>
see more <IoIosArrowRoundForward />
</Link>
)}
Expand All @@ -76,7 +84,8 @@ const Card = ({
className="external-link-btn"
href={frontmatter.eurl}
target="_blank"
rel="noreferrer"
rel="noreferrer noopener"
aria-label={`Visit external link for ${frontmatter.title}`}
>
<BiLinkExternal />
</a>
Expand All @@ -88,4 +97,4 @@ const Card = ({
);
};

export default Card;
export default Card;
43 changes: 30 additions & 13 deletions src/components/UpcomingEventCard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,60 @@ import "swiper/css/bundle";
import Button from "../../reusecore/Button";
import slugify from "../../utils/slugify";


const UpcomingEvents = ({ data }) => {
return (
<UpcomingEventsWrapper>
<div className="blog-slider swiper">
<div style={{
display: "block"
}} className="blog-slider__wrp swiper-wrapper"
<div
style={{ display: "block" }}
className="blog-slider__wrp swiper-wrapper"
>

<Swiper
spaceBetween={50}
slidesPerView={1}
modules={[Mousewheel, Pagination]}
pagination={{ clickable: true }}
>
{data.nodes.map(item => {
{data.nodes.map((item) => {
return (
<SwiperSlide key={item.id}>
<div className="blog-slider_item swiper-slide">
<div className="blog-slider_img">
<Link to={`/community/events/${slugify(item.frontmatter.title)}`}>
<Image {...item.frontmatter.thumbnail} alt={item.frontmatter.title} />
<Link
to={`/community/events/${slugify(item.frontmatter.title)}`}
aria-label={`View event: ${item.frontmatter.title}`}
>
<Image
{...item.frontmatter.thumbnail}
alt={item.frontmatter.title}
width={480}
height={270}
/>
</Link>
</div>
<div className="blog-slider_content">
<h3 className="blog-slider_title">{item.frontmatter.title}</h3>
<p className="blog-slider_date">{item.frontmatter.date}</p>
<p className="blog-slider_description">{item.frontmatter.abstract}</p>
<Button $secondary className="blog-slider_button" $url={item.frontmatter.eurl} title="Join Now" $external={true} />
<h3 className="blog-slider_title">
{item.frontmatter.title}
</h3>
<p className="blog-slider_date">
{item.frontmatter.date}
</p>
<p className="blog-slider_description">
{item.frontmatter.abstract}
</p>
<Button
$secondary
className="blog-slider_button"
$url={item.frontmatter.eurl}
title="Join Now"
$external={true}
/>
</div>
</div>
</SwiperSlide>
);
})}
</Swiper>

</div>
</div>
</UpcomingEventsWrapper>
Expand Down
139 changes: 92 additions & 47 deletions src/sections/Events/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,59 +10,104 @@ import RssFeedIcon from "../../assets/images/socialIcons/rss-sign.svg";

const Meetups = ({ data, pageContext }) => {
const [active, setActive] = useState("all");

const sortEvents = (nodes) => {
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, "")));
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, "")),
);
};

return (
<MeetupStyle>
<PageHeader title="Events" path="Community/Events" img={RssFeedIcon} feedlink="/events/feed.xml" />
<h2 className="event-subhead">Join Layer5 at these events</h2>
<UpcomingEvents data={data.allUpcoming} />
<Container>
<div className="filterBtns">
<Button className={active == "all" ? "active" : ""} onClick={() => setActive("all")} title="All" />
<Button className={active == "events" ? "active" : ""} onClick={() => setActive("events")} title="Events" />
<Button className={active == "workshops" ? "active" : ""} onClick={() => setActive("workshops")} title="Workshops" />
<Button className={active == "meetups" ? "active" : ""} onClick={() => setActive("meetups")} title="MeetUps" />
</div>
<div>
<Row style={{
flexWrap: "wrap"
}}
<main>
<PageHeader
title="Events"
path="Community/Events"
img={RssFeedIcon}
feedlink="/events/feed.xml"
/>
<h2 className="event-subhead">Join Layer5 at these events</h2>
<UpcomingEvents data={data.allUpcoming} />
<Container>
<div
className="filterBtns"
role="group"
aria-label="Filter events by type"
>
{active == "all" ? sortEvents(data.allCategories.nodes).map(category => {
return (
<Col $xs={12} $sm={6} $lg={4} key={category.id}>
<Card frontmatter={category.frontmatter} fields={category.fields} />
</Col>
);
}) : <></>}
{active == "events" ? sortEvents(data.allEvents.nodes).map(event => {
return (
<Col $xs={12} $sm={6} $lg={4} key={event.id}>
<Card frontmatter={event.frontmatter} fields={event.fields} />
</Col>
);
}) : <></>}
{active == "workshops" ? sortEvents(data.allWorkshops.nodes).map(workshop => {
return (
<Col $xs={12} $sm={6} $lg={4} key={workshop.id}>
<Card frontmatter={workshop.frontmatter} fields={workshop.fields} />
</Col>
);
}) : <></>}
{active == "meetups" ? sortEvents(data.allMeetups.nodes).map(meetup => {
return (
<Col $xs={12} $sm={6} $lg={4} key={meetup.id}>
<Card frontmatter={meetup.frontmatter} fields={meetup.fields} />
</Col>
);
}) : <></>}
</Row>
</div>
{active == "all" ? <Pager pageContext={pageContext} text={"Events"} /> : <></>}
</Container>
<Button
className={active === "all" ? "active" : ""}
onClick={() => setActive("all")}
title="All"
aria-pressed={active === "all"}
/>
<Button
className={active === "events" ? "active" : ""}
onClick={() => setActive("events")}
title="Events"
aria-pressed={active === "events"}
/>
<Button
className={active === "workshops" ? "active" : ""}
onClick={() => setActive("workshops")}
title="Workshops"
aria-pressed={active === "workshops"}
/>
<Button
className={active === "meetups" ? "active" : ""}
onClick={() => setActive("meetups")}
title="MeetUps"
aria-pressed={active === "meetups"}
/>
</div>
<div>
<Row style={{ flexWrap: "wrap" }}>
{active === "all" &&
sortEvents(data.allCategories.nodes).map((category) => (
<Col $xs={12} $sm={6} $lg={4} key={category.id}>
<Card
frontmatter={category.frontmatter}
fields={category.fields}
/>
</Col>
))}
{active === "events" &&
sortEvents(data.allEvents.nodes).map((event) => (
<Col $xs={12} $sm={6} $lg={4} key={event.id}>
<Card
frontmatter={event.frontmatter}
fields={event.fields}
/>
</Col>
))}
{active === "workshops" &&
sortEvents(data.allWorkshops.nodes).map((workshop) => (
<Col $xs={12} $sm={6} $lg={4} key={workshop.id}>
<Card
frontmatter={workshop.frontmatter}
fields={workshop.fields}
/>
</Col>
))}
{active === "meetups" &&
sortEvents(data.allMeetups.nodes).map((meetup) => (
<Col $xs={12} $sm={6} $lg={4} key={meetup.id}>
<Card
frontmatter={meetup.frontmatter}
fields={meetup.fields}
/>
</Col>
))}
</Row>
</div>
{active === "all" && (
<Pager pageContext={pageContext} text={"Events"} />
)}
</Container>
</main>
</MeetupStyle>
);
};
Expand Down
Loading