Skip to content

Commit 2275dbe

Browse files
kavishkafernandoKavishka Fernando
kavishkafernando
and
Kavishka Fernando
authored
feat: add community page (#708)
* fix google site link issue Signed-off-by: Kavishka Fernando <kavi@kavishka.local> * fix google site link issue Signed-off-by: Kavishka Fernando <kavi@kavishka.local> * revert quote formatting changes Signed-off-by: Kavishka Fernando <kavi@kavishka.local> * fix dark mode text colour Signed-off-by: Kavishka Fernando <kavi@kavishka.local> * add community page Signed-off-by: Kavishka Fernando <kavi@kavishka.local> * Add community page Signed-off-by: Kavishka Fernando <kavi@kavishka.local> * remove double quotes Signed-off-by: Kavishka Fernando <kavi@kavishka.local> --------- Signed-off-by: Kavishka Fernando <kavi@kavishka.local> Co-authored-by: Kavishka Fernando <kavi@kavishka.local>
1 parent dd4f79b commit 2275dbe

7 files changed

Lines changed: 1228 additions & 0 deletions

File tree

‎docusaurus.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,7 @@ const config: Config = {
248248
},
249249
{ to: '/ecosystem', label: 'Ecosystem', position: 'left' },
250250
{ to: '/blog', label: 'Blog', position: 'left' },
251+
{ to: '/community', label: 'Community', position: 'left' },
251252
{ to: '/enterprise', label: 'Enterprise', position: 'left' },
252253
{
253254
type: 'docsVersionDropdown',

‎src/pages/community/events.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"events": [
3+
{
4+
"month": "JUN",
5+
"day": "11",
6+
"category": "Meetups",
7+
"title": "Cloud Native Hyderabad",
8+
"meta": "Virtual · Open to all",
9+
"primaryAction": "Register",
10+
"primaryActionHref": "https://ocgroups.dev/cncf/group/cloud-native-hyderabad/event/tr9jkbf"
11+
},
12+
{
13+
"month": "JUN",
14+
"day": "18 19",
15+
"category": "Conferences",
16+
"title": "KubeCon + CloudNativeCon India 2026",
17+
"meta": "Bengaluru, India",
18+
"primaryAction": "Register",
19+
"primaryActionHref": "https://events.linuxfoundation.org/kubecon-cloudnativecon-india/"
20+
},
21+
{
22+
"month": "JUN",
23+
"day": "25",
24+
"category": "Community calls",
25+
"title": "OpenChoreo monthly community call — June",
26+
"meta": "Zoom · Open to all",
27+
"primaryAction": "Add to calendar",
28+
"primaryActionHref": "https://zoom-lfx.platform.linuxfoundation.org/meetings/openchoreo?view=list"
29+
}
30+
],
31+
"pastEvents": [
32+
{
33+
"date": "June 4",
34+
"title": "Kubernetes Sri Lanka",
35+
"action": "More Details",
36+
"actionHref": "https://ocgroups.dev/cncf/group/f8dnmxt/event/hkf8t4e"
37+
},
38+
{
39+
"date": "June 3",
40+
"title": "Cloud Native London",
41+
"action": "More Details",
42+
"actionHref": "https://www.meetup.com/cloud-native-london/events/312972430/?eventOrigin=group_upcoming_events"
43+
}
44+
]
45+
}

‎src/pages/community/events/index.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from 'react';
2+
import Layout from '@theme/Layout';
3+
import Link from '@docusaurus/Link';
4+
import pastEventsData from '../past-events.json';
5+
import styles from './styles.module.css';
6+
7+
type PastEvent = {
8+
date: string;
9+
year: string;
10+
title: string;
11+
description: string;
12+
type: string;
13+
location: string;
14+
action: string;
15+
href: string;
16+
};
17+
18+
const pastEvents = pastEventsData.pastEvents as PastEvent[];
19+
20+
export default function CommunityEvents(): React.JSX.Element {
21+
return (
22+
<Layout
23+
title='Past Events'
24+
description='Browse past OpenChoreo community events, talks, meetups, and recordings.'
25+
>
26+
<main className={styles.page}>
27+
<section className={styles.hero}>
28+
<div className={styles.container}>
29+
<Link className={styles.backLink} to='/community'>
30+
Back to Community
31+
</Link>
32+
33+
<h1>Past Events</h1>
34+
<p>
35+
Explore OpenChoreo community calls, conference sessions, meetups,
36+
and recordings from previous events.
37+
</p>
38+
</div>
39+
</section>
40+
41+
<section className={styles.section}>
42+
<div className={styles.container}>
43+
<div className={styles.eventList}>
44+
{pastEvents.map((event) => (
45+
<article className={styles.eventCard} key={event.title}>
46+
<div className={styles.eventDate}>
47+
<span>{event.date}</span>
48+
<strong>{event.year}</strong>
49+
</div>
50+
51+
<div className={styles.eventContent}>
52+
<div className={styles.eventMeta}>
53+
<span>{event.type}</span>
54+
<span>{event.location}</span>
55+
</div>
56+
57+
<h2>{event.title}</h2>
58+
<p>{event.description}</p>
59+
</div>
60+
61+
<Link
62+
className='button button--primary button--sm'
63+
to={event.href}
64+
>
65+
{event.action}
66+
</Link>
67+
</article>
68+
))}
69+
</div>
70+
</div>
71+
</section>
72+
</main>
73+
</Layout>
74+
);
75+
}

‎src/pages/community/events/styles.module.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
.page {
2+
min-height: 100vh;
3+
background: #f8fafc;
4+
}
5+
6+
[data-theme='dark'] .page {
7+
background: var(--ifm-background-color);
8+
}
9+
10+
.container {
11+
width: min(1080px, calc(100% - 40px));
12+
margin: 0 auto;
13+
}
14+
15+
.hero {
16+
padding: 72px 0 32px;
17+
}
18+
19+
.backLink {
20+
display: inline-flex;
21+
margin-bottom: 2rem;
22+
color: var(--ifm-color-primary);
23+
font-weight: 700;
24+
text-decoration: none;
25+
}
26+
27+
.backLink:hover {
28+
color: var(--ifm-color-primary-dark);
29+
text-decoration: none;
30+
}
31+
32+
.hero h1 {
33+
margin: 0 0 18px;
34+
color: var(--ifm-heading-color);
35+
font-size: 3rem;
36+
line-height: 1.1;
37+
}
38+
39+
.hero p {
40+
max-width: 760px;
41+
margin: 0;
42+
color: var(--ifm-color-emphasis-800);
43+
font-size: 1.125rem;
44+
line-height: 1.6;
45+
}
46+
47+
.section {
48+
padding: 32px 0 80px;
49+
}
50+
51+
.eventList {
52+
display: grid;
53+
gap: 1rem;
54+
}
55+
56+
.eventCard {
57+
display: grid;
58+
grid-template-columns: 7rem minmax(0, 1fr) auto;
59+
gap: 1.5rem;
60+
align-items: center;
61+
padding: 1.5rem;
62+
border: 1px solid var(--ifm-color-emphasis-200);
63+
border-radius: 0.875rem;
64+
background: var(--ifm-card-background-color);
65+
}
66+
67+
.eventDate {
68+
display: flex;
69+
flex-direction: column;
70+
overflow: hidden;
71+
border: 1px solid rgba(47, 129, 247, 0.22);
72+
border-radius: 0.875rem;
73+
background: var(--ifm-card-background-color);
74+
text-align: center;
75+
}
76+
77+
.eventDate span {
78+
padding: 0.45rem 0.75rem;
79+
background: rgba(47, 129, 247, 0.14);
80+
color: var(--ifm-color-primary);
81+
font-size: 0.8rem;
82+
font-weight: 800;
83+
}
84+
85+
.eventDate strong {
86+
padding: 0.75rem;
87+
color: var(--ifm-heading-color);
88+
font-size: 1.25rem;
89+
line-height: 1;
90+
}
91+
92+
.eventMeta {
93+
display: flex;
94+
flex-wrap: wrap;
95+
gap: 0.5rem;
96+
margin-bottom: 0.5rem;
97+
}
98+
99+
.eventMeta span {
100+
display: inline-flex;
101+
padding: 0.2rem 0.6rem;
102+
border-radius: 999px;
103+
background: rgba(47, 129, 247, 0.12);
104+
color: var(--ifm-color-primary-dark);
105+
font-size: 0.72rem;
106+
font-weight: 700;
107+
}
108+
109+
.eventContent h2 {
110+
margin: 0 0 0.45rem;
111+
color: var(--ifm-heading-color);
112+
font-size: 1.25rem;
113+
}
114+
115+
.eventContent p {
116+
margin: 0;
117+
color: var(--ifm-color-emphasis-700);
118+
font-size: 0.95rem;
119+
line-height: 1.55;
120+
}
121+
122+
@media (max-width: 768px) {
123+
.eventCard {
124+
grid-template-columns: 1fr;
125+
}
126+
127+
.eventDate {
128+
width: fit-content;
129+
min-width: 7rem;
130+
}
131+
}

0 commit comments

Comments
 (0)