Skip to content

Commit a6647c8

Browse files
savisaluwadanasavisaluwadana
authored
Adding a seperate page for the Slack channel (#681)
* feat: add Slack community page with engagement options * chore: trigger pages deploy * chore: trigger pages deploy * Fix GitHub Pages baseUrl * Fix GitHub Pages baseUrl * Fixed minor style issues * Update site URL and organization name in config; fix Slack icon path Signed-off-by: savisaluwadana <savisaluwadana@gmail.com> * Fix DCO signoff Signed-off-by: savisaluwadana <savisaluwadana@gmail.com> * DCO Remediation Commit for savisaluwadana <savisaluwadana@gmail.com> I, savisaluwadana <savisaluwadana@gmail.com>, hereby add my Signed-off-by to this commit: a1acddd I, savisaluwadana <savisaluwadana@gmail.com>, hereby add my Signed-off-by to this commit: 4973437 I, savisaluwadana <savisaluwadana@gmail.com>, hereby add my Signed-off-by to this commit: 104d397 I, savisaluwadana <savisaluwadana@gmail.com>, hereby add my Signed-off-by to this commit: c31bc9e I, savisaluwadana <savisaluwadana@gmail.com>, hereby add my Signed-off-by to this commit: c774928 I, savisaluwadana <savisaluwadana@gmail.com>, hereby add my Signed-off-by to this commit: 0b2d46d Signed-off-by: savisaluwadana <savisaluwadana@gmail.com> --------- Signed-off-by: savisaluwadana <savisaluwadana@gmail.com>
1 parent 43b328c commit a6647c8

5 files changed

Lines changed: 405 additions & 3 deletions

File tree

‎docusaurus.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ const config: Config = {
264264
'aria-label': 'GitHub repository',
265265
},
266266
{
267-
href: 'https://slack.cncf.io/',
267+
to: '/slack',
268268
position: 'right',
269269
className: 'header-slack-link',
270270
'aria-label': 'Slack channel',

‎src/components/Community/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const communityActions: CommunityAction[] = [
4040
{
4141
description: 'Join #openchoreo channel to get real-time support, ask questions, and engage with other users.',
4242
buttonText: 'Join CNCF Slack',
43-
link: 'https://slack.cncf.io/',
43+
link: '/slack',
4444
iconLight: '/img/icons/community-icon-slack.png',
4545
iconDark: '/img/icons/community-icon-slack-dark.png'
4646
}

‎src/css/custom.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,9 @@ html[data-theme='dark'] {
138138
height: 24px;
139139
display: flex;
140140
background: var(--ifm-navbar-link-color);
141+
background-repeat: no-repeat;
142+
background-position: center;
143+
background-size: contain;
141144
}
142145

143146
.header-github-link:hover,
@@ -150,7 +153,7 @@ html[data-theme='dark'] {
150153
}
151154

152155
.header-slack-link:before {
153-
mask-image: url("data:image/svg+xml,%3Csvg role='img' viewBox='63 63 144 144' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ESlack%3C/title%3E%3Cpath d='M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9C105.9,183.5,105.9,151.2,105.9,151.2z M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9C86.5,105.9,118.8,105.9,118.8,105.9z M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9V118.8z M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9H151.2z'/%3E%3C/svg%3E");
156+
background: url('/img/icons/community-icon-slack.png') center/contain no-repeat;
154157
}
155158

156159
/* Richer visual layout for workflow guides */

‎src/pages/slack.module.css‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
.page {
2+
padding: 2.75rem 0 5rem;
3+
background: #f5f6f7;
4+
}
5+
6+
.shell {
7+
box-sizing: border-box;
8+
max-width: 920px;
9+
margin: 0 auto;
10+
padding: 2.5rem 2.75rem;
11+
border: 1px solid rgba(15, 23, 42, 0.06);
12+
border-radius: 24px;
13+
background: var(--ifm-card-background-color);
14+
box-shadow:
15+
0 22px 56px rgba(15, 23, 42, 0.07),
16+
inset 0 1px 0 rgba(255, 255, 255, 0.92);
17+
}
18+
19+
.section {
20+
width: 100%;
21+
text-align: center;
22+
}
23+
24+
.iconWrap {
25+
width: 72px;
26+
height: 72px;
27+
border-radius: 18px;
28+
margin: 0 auto 1.25rem;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
background: #fff;
33+
box-shadow:
34+
0 12px 30px rgba(15, 23, 42, 0.08),
35+
inset 0 1px 0 rgba(255, 255, 255, 0.95);
36+
}
37+
38+
.icon {
39+
width: 36px;
40+
height: 36px;
41+
object-fit: contain;
42+
}
43+
44+
.header {
45+
max-width: 920px;
46+
margin: 0 auto;
47+
}
48+
49+
.header h1 {
50+
margin: 0;
51+
font-size: 2.5rem;
52+
font-weight: 700;
53+
line-height: 1.2;
54+
color: var(--ifm-heading-color);
55+
}
56+
57+
.subtitle {
58+
max-width: 640px;
59+
margin: 0.75rem auto 0;
60+
font-size: 1.2rem;
61+
line-height: 1.6;
62+
color: var(--ifm-color-emphasis-700);
63+
}
64+
65+
.titleUnderline {
66+
display: block;
67+
width: 80px;
68+
height: 4px;
69+
margin: 1.25rem auto 0;
70+
border-radius: 2px;
71+
background: var(--ifm-color-primary);
72+
}
73+
74+
.prompt {
75+
max-width: 720px;
76+
margin: 1.5rem auto 0;
77+
font-size: 1.15rem;
78+
line-height: 1.45;
79+
}
80+
81+
.optionsGrid {
82+
display: grid;
83+
grid-template-columns: repeat(2, 1fr);
84+
justify-content: center;
85+
gap: 1.5rem;
86+
max-width: 760px;
87+
margin: 1.5rem auto 0;
88+
}
89+
90+
.optionCard {
91+
box-sizing: border-box;
92+
width: 100%;
93+
min-height: 190px;
94+
display: flex;
95+
flex-direction: column;
96+
gap: 1.125rem;
97+
padding: 1.25rem;
98+
text-align: left;
99+
border: 1px solid rgba(15, 23, 42, 0.08);
100+
border-radius: 20px;
101+
background: var(--ifm-card-background-color);
102+
box-shadow:
103+
0 8px 22px rgba(15, 23, 42, 0.06),
104+
inset 0 1px 0 rgba(255, 255, 255, 0.9);
105+
}
106+
107+
.optionContent {
108+
display: flex;
109+
align-items: flex-start;
110+
gap: 1rem;
111+
}
112+
113+
.optionIcon {
114+
width: 50px;
115+
height: 50px;
116+
border-radius: 999px;
117+
display: inline-flex;
118+
align-items: center;
119+
justify-content: center;
120+
flex-shrink: 0;
121+
}
122+
123+
.negative {
124+
color: #f04438;
125+
background: #fff1f1;
126+
}
127+
128+
.positive {
129+
color: #2b8cf7;
130+
background: #eef5ff;
131+
}
132+
133+
.optionText {
134+
display: flex;
135+
flex-direction: column;
136+
gap: 0.375rem;
137+
padding-top: 0.05rem;
138+
}
139+
140+
.optionTitle {
141+
margin: 0;
142+
font-size: 1.05rem;
143+
font-weight: 700;
144+
line-height: 1.3;
145+
color: var(--ifm-heading-color);
146+
}
147+
148+
.optionDescription {
149+
max-width: 240px;
150+
margin: 0;
151+
font-size: 0.88rem;
152+
line-height: 1.55;
153+
color: var(--ifm-color-emphasis-700);
154+
}
155+
156+
.optionButton {
157+
width: auto;
158+
min-width: 230px;
159+
margin-top: auto;
160+
display: flex;
161+
position: relative;
162+
align-items: center;
163+
justify-content: center;
164+
min-height: auto;
165+
align-self: center;
166+
padding: 0.55rem 1rem;
167+
border-radius: 8px;
168+
font-size: 0.9rem;
169+
font-weight: 700;
170+
background: #fff;
171+
color: var(--ifm-color-primary);
172+
border-color: var(--ifm-color-primary);
173+
}
174+
175+
.optionButton:hover {
176+
background: var(--ifm-color-primary);
177+
color: #fff;
178+
border-color: var(--ifm-color-primary);
179+
}
180+
181+
[data-theme='dark'] .page {
182+
background: var(--ifm-background-color);
183+
}
184+
185+
[data-theme='dark'] .shell {
186+
background: rgba(15, 23, 42, 0.96);
187+
border-color: rgba(148, 163, 184, 0.1);
188+
box-shadow:
189+
0 28px 72px rgba(43, 140, 247, 0.18),
190+
0 28px 70px rgba(2, 6, 23, 0.5),
191+
inset 0 1px 0 rgba(255, 255, 255, 0.04);
192+
}
193+
194+
[data-theme='dark'] .iconWrap,
195+
[data-theme='dark'] .optionCard {
196+
background: rgba(15, 23, 42, 0.78);
197+
border-color: rgba(148, 163, 184, 0.18);
198+
}
199+
200+
[data-theme='dark'] .optionDescription {
201+
color: var(--ifm-color-emphasis-600);
202+
}
203+
204+
[data-theme='dark'] .negative {
205+
color: #fda29b;
206+
background: rgba(180, 35, 24, 0.22);
207+
}
208+
209+
[data-theme='dark'] .positive {
210+
color: #8bb8ff;
211+
background: rgba(43, 140, 247, 0.16);
212+
}
213+
214+
[data-theme='dark'] .optionButton {
215+
background: rgba(15, 23, 42, 0.7);
216+
color: var(--ifm-color-primary-light);
217+
}
218+
219+
[data-theme='dark'] .optionButton:hover {
220+
background: var(--ifm-color-primary);
221+
color: #fff;
222+
border-color: var(--ifm-color-primary);
223+
}
224+
225+
@media (max-width: 996px) {
226+
.page {
227+
padding: 1.25rem 0 1.5rem;
228+
}
229+
230+
.page :global(.container) {
231+
padding-left: 1.5rem;
232+
padding-right: 1.5rem;
233+
}
234+
235+
.shell {
236+
padding: 1.5rem;
237+
}
238+
239+
.optionsGrid {
240+
grid-template-columns: repeat(2, minmax(0, 1fr));
241+
gap: 1.25rem;
242+
max-width: 100%;
243+
}
244+
245+
.optionCard {
246+
padding: 1.15rem;
247+
}
248+
}
249+
250+
@media (max-width: 768px) {
251+
.shell {
252+
padding: 1.25rem;
253+
border-radius: 16px;
254+
}
255+
256+
.iconWrap {
257+
width: 56px;
258+
height: 56px;
259+
border-radius: 14px;
260+
}
261+
262+
.icon {
263+
width: 28px;
264+
height: 28px;
265+
}
266+
267+
.header h1 {
268+
font-size: 2rem;
269+
}
270+
271+
.prompt {
272+
margin-top: 1rem;
273+
font-size: 1.05rem;
274+
}
275+
276+
.optionsGrid {
277+
grid-template-columns: 1fr;
278+
gap: 1rem;
279+
}
280+
281+
.optionCard {
282+
gap: 0.9rem;
283+
padding: 1rem;
284+
}
285+
286+
.optionContent {
287+
gap: 0.8rem;
288+
}
289+
290+
.optionIcon {
291+
width: 50px;
292+
height: 50px;
293+
}
294+
295+
.optionButton {
296+
width: 100%;
297+
min-width: 0;
298+
align-self: stretch;
299+
padding: 0.55rem 1rem;
300+
}
301+
302+
}

0 commit comments

Comments
 (0)