Skip to content

Commit 6144448

Browse files
julhoanggregjkal
julhoang
and
gregjkal
authored
Story 2129: Community Page V3 (#2365)
Co-authored-by: Greg Kaleka <greg@gregkaleka.com>
1 parent 32b0df7 commit 6144448

28 files changed

Lines changed: 610 additions & 55 deletions

‎config/urls.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
BoostDevelopmentView,
2626
CalendarView,
2727
ClearCacheView,
28+
CommunityView,
2829
DocLibsTemplateView,
2930
ImageView,
3031
MarkdownTemplateView,
@@ -180,10 +181,9 @@
180181
),
181182
path("health/", include("health_check.urls")),
182183
path("asciidoctor_sandbox/", include("asciidoctor_sandbox.urls")),
183-
# temp page for community until mailman is done.
184184
path(
185185
"community/",
186-
TemplateView.as_view(template_name="community.html"),
186+
CommunityView.as_view(),
187187
name="community",
188188
),
189189
# Boost community calendar

‎core/views.py‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,119 @@ class BoostDevelopmentView(CalendarView):
123123
template_name = "boost_development.html"
124124

125125

126+
class CommunityView(V3Mixin, TemplateView):
127+
template_name = "community.html"
128+
v3_template_name = "v3/community.html"
129+
130+
def get_v3_context_data(self, **kwargs):
131+
ctx = super().get_v3_context_data(**kwargs)
132+
ctx["help_options"] = [
133+
{
134+
"quote": "I'm stuck on an error",
135+
"description": "Visit the CPPLang Slack for fast responses, quick debugging and real-time conversation",
136+
"cta_text": "Join Slack 24,000+ members",
137+
"cta_url": "https://cppalliance.org/slack/",
138+
"author": {
139+
"name": "Character Name",
140+
"role": "Contributor",
141+
"avatar_url": "/static/img/v3/community-page/avatar-beaver-character.png",
142+
},
143+
},
144+
{
145+
"quote": "I have a proposal for a new feature",
146+
"description": "Propose libraries, participate in the formal review and submit major features on the mailing list",
147+
"cta_text": "Subscribe now",
148+
"cta_url": "https://lists.boost.org/mailman3/lists/boost.lists.boost.org/",
149+
"author": {
150+
"name": "Character Name",
151+
"role": "Author",
152+
"avatar_url": "/static/img/v3/community-page/avatar-mouse-character.png",
153+
},
154+
},
155+
{
156+
"quote": "I found a bug",
157+
"description": "Find the library you're looking for on GitHub, follow the reporting template and let the author know",
158+
"cta_text": "Report it on GitHub",
159+
"cta_url": "https://github.com/boostorg",
160+
"author": {
161+
"name": "Character Name",
162+
"role": "Maintainer",
163+
"avatar_url": "/static/img/v3/community-page/avatar-cheetah-character.png",
164+
},
165+
},
166+
{
167+
"quote": "I have a general question",
168+
"description": "Post on Reddit and engage in casual chat with fellow Boost enthusiasts",
169+
"cta_text": "Visit Reddit",
170+
"cta_url": "https://www.reddit.com/r/boost/",
171+
"author": {
172+
"name": "Character Name",
173+
"role": "Contributor",
174+
"avatar_url": "/static/img/v3/community-page/avatar-fish-character.png",
175+
},
176+
},
177+
]
178+
ctx["libraries"] = [
179+
{
180+
"name": "Beast",
181+
"url": "/library/latest/beast/",
182+
"description": "A collection of useful generic algorithms.",
183+
"categories": ["Concurrent", "IO"],
184+
"cpp_version": "C++ 11",
185+
},
186+
{
187+
"name": "Cobalt",
188+
"url": "/library/latest/cobalt/",
189+
"description": "Coroutines. Basic Algorithms & Types",
190+
"categories": [
191+
"Concurrent",
192+
"Coroutines",
193+
"Awaitables",
194+
"Asynchronous",
195+
],
196+
"cpp_version": "C++ 20",
197+
},
198+
{
199+
"name": "JSON",
200+
"url": "/library/latest/json/",
201+
"description": "JSON parsing, serialization, and DOM",
202+
"categories": ["Containers", "Data", "IO"],
203+
"cpp_version": "C++ 11",
204+
},
205+
{
206+
"name": "Lib Name",
207+
"url": "#",
208+
"description": "Lib Description",
209+
"categories": ["Containers", "Data", "IO"],
210+
"cpp_version": "C++ 11",
211+
},
212+
{
213+
"name": "Lib Name",
214+
"url": "#",
215+
"description": "Lib Description",
216+
"categories": ["Containers", "Data", "IO"],
217+
"cpp_version": "C++ 11",
218+
},
219+
]
220+
ctx["posts"] = SharedResources.demo_posts[:4]
221+
ctx["slack_member_count"] = "30,000"
222+
ctx["install_card_pkg_managers"] = SharedResources.install_card_pkg_managers
223+
ctx["install_card_system_install"] = SharedResources.install_card_system_install
224+
ctx["create_account_card_body_html"] = (
225+
"<p>Your contribution badges appear on your Boost profile with:</p>"
226+
"<ul>"
227+
"<li>Contribution statistics</li>"
228+
"<li>Progress towards next badge</li>"
229+
"<li>Recent activity feed</li>"
230+
"</ul>"
231+
)
232+
ctx["create_account_card_preview_url"] = (
233+
f"{settings.STATIC_URL}img/v3/community-page/"
234+
"community-create-account-preview.png"
235+
)
236+
return ctx
237+
238+
126239
class ClearCacheView(UserPassesTestMixin, View):
127240
http_method_names = ["get"]
128241
login_url = "/login/"

‎static/css/v3/card.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
font-style: normal;
7878
font-weight: var(--font-weight-medium);
7979
line-height: var(--line-height-tight);
80-
letter-spacing: var(--letter-spacing-display-regular);
80+
letter-spacing: var(--letter-spacing-tight);
8181
margin: 0;
8282
}
8383

@@ -101,6 +101,13 @@
101101
flex: 1 0 0;
102102
}
103103

104+
.card img {
105+
display: block;
106+
border-radius: var(--border-radius-l);
107+
object-fit: cover;
108+
width: 100%;
109+
}
110+
104111
/* Horizontal card — text + image side by side */
105112

106113
.horizontal-card {

‎static/css/v3/community.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/**
2+
* Community page layout.
3+
* BEM naming, semantic tokens with fallbacks.
4+
*/
5+
6+
/* ── Navbar overlays hero (matches homepage pattern) ──────────── */
7+
8+
body:has(.community-v3) .header {
9+
position: absolute;
10+
z-index: 10;
11+
left: 0;
12+
right: 0;
13+
}
14+
15+
/* ── Page container (below full-bleed hero) ───────────────────── */
16+
17+
.community-container {
18+
max-width: 1440px;
19+
margin: 0 auto;
20+
padding: var(--space-large) var(--space-large) var(--space-xxl);
21+
}
22+
23+
/* ── Masonry layout ───────────────────────────────────────────── */
24+
25+
.community-masonry {
26+
display: grid;
27+
grid-template-columns: repeat(3, 1fr);
28+
gap: var(--space-large);
29+
align-items: start;
30+
}
31+
32+
.community-masonry__help {
33+
grid-column: 1 / -1;
34+
}
35+
36+
.community-masonry__col {
37+
display: flex;
38+
flex-direction: column;
39+
gap: var(--space-large);
40+
}
41+
42+
/* ── Responsive: tablet (2-col) ────────────────────────────── */
43+
44+
@media (max-width: 1279px) {
45+
.community-masonry {
46+
--community-col-width: 458px;
47+
48+
grid-template-columns: repeat(2, 1fr);
49+
grid-template-areas:
50+
"A A"
51+
"B C"
52+
"D C"
53+
"D E"
54+
"D E"
55+
"F G"
56+
"F H";
57+
max-width: fit-content;
58+
margin-inline: auto;
59+
}
60+
61+
.community-masonry__cell--libraries .card-group__item:nth-child(n + 4) {
62+
display: none;
63+
}
64+
65+
.card,
66+
.card-group {
67+
max-width: var(--community-col-width);
68+
width: 100%;
69+
}
70+
71+
/* Flatten cols so cells become direct grid children (reshuffled via areas) */
72+
.community-masonry__col {
73+
display: contents;
74+
}
75+
76+
.community-masonry__help {
77+
grid-area: A;
78+
max-width: calc(var(--community-col-width) * 2 + var(--space-large));
79+
}
80+
.community-masonry__cell--install {
81+
grid-area: B;
82+
}
83+
.community-masonry__cell--libraries {
84+
grid-area: C;
85+
}
86+
.community-masonry__cell--posts {
87+
grid-area: D;
88+
}
89+
.community-masonry__cell--slack {
90+
grid-area: E;
91+
}
92+
.community-masonry__cell--contribute {
93+
grid-area: F;
94+
}
95+
.community-masonry__cell--mailing {
96+
grid-area: G;
97+
}
98+
.community-masonry__cell--threads {
99+
grid-area: H;
100+
}
101+
}
102+
103+
/* ── Responsive: mobile (1-col) ────────────────────────────── */
104+
105+
@media (max-width: 767px) {
106+
.community-masonry {
107+
grid-template-columns: 1fr;
108+
grid-template-areas:
109+
"A"
110+
"B"
111+
"C"
112+
"D"
113+
"E"
114+
"F"
115+
"G"
116+
"H";
117+
}
118+
119+
.community-masonry__help {
120+
max-width: var(--community-col-width);
121+
}
122+
}

‎static/css/v3/components.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
@import "./library-intro-card.css";
2727
@import "./learn-cards.css";
2828
@import "./terms-of-use.css";
29-
@import "./thread-archive-card.css";
3029
@import "./tab.css";
3130
@import "./install-card.css";
3231
@import "./banner.css";
@@ -51,3 +50,5 @@
5150
@import "downloads-table-card.css";
5251
@import "release-highlights-card.css";
5352
@import "./media-text-card.css";
53+
@import "./library-discovery-card.css";
54+
@import "./help-card.css";

‎static/css/v3/create-account-card.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@
4040
letter-spacing: -0.01em;
4141
}
4242

43+
.create-account-card__richtext li::marker {
44+
font-size: var(--font-size-xs);
45+
}
46+
4347
.create-account-card__richtext li + li {
4448
margin-top: var(--space-default, 8px);
4549
}

0 commit comments

Comments
 (0)