Skip to content

Commit 58b0c63

Browse files
jlchilders11jlchilders11
authored
Story 2127: Learn Page Implementation (#2243)
1 parent 5abc44a commit 58b0c63

File tree

13 files changed

+412
-24
lines changed

13 files changed

+412
-24
lines changed

‎config/urls.py‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
TermsOfUseView,
3232
PrivacyPolicyView,
3333
V3ComponentDemoView,
34+
LearnPageView,
3435
ModernizedDocsView,
3536
RedirectToDocsView,
3637
RedirectToHTMLDocsView,
@@ -251,6 +252,11 @@
251252
staff_member_required(V3ComponentDemoView.as_view()),
252253
name="v3-demo-components",
253254
),
255+
path(
256+
"v3/demo/learn-page/",
257+
staff_member_required(LearnPageView.as_view()),
258+
name="v3-learn-page",
259+
),
254260
path("libraries/", LibraryListDispatcher.as_view(), name="libraries"),
255261
path(
256262
"libraries/<boostversionslug:version_slug>/<str:library_view_str>/",

‎core/views.py‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
from textwrap import dedent
1010
from urllib.parse import urljoin
11+
from waffle import flag_is_active
1112

1213
import structlog
1314
from bs4 import BeautifulSoup
@@ -269,6 +270,179 @@ def get_v3_context_data(self, **kwargs):
269270
return {"last_updated": "2024-02-17"}
270271

271272

273+
class LearnPageView(V3Mixin, TemplateView):
274+
v3_template_name = "v3/learn_page.html"
275+
276+
def dispatch(self, request, *args, **kwargs):
277+
if not flag_is_active(request, "v3"):
278+
return HttpResponseNotFound()
279+
return super().dispatch(request, *args, **kwargs)
280+
281+
def get_v3_context_data(self, **kwargs):
282+
ctx = self.get_context_data(**kwargs)
283+
ctx["learn_card_data"] = [
284+
{
285+
"title": "I want to learn:",
286+
"text": "How to install Boost, use its libraries, build projects, and get help when you need it.",
287+
"links": [
288+
{
289+
"label": "Explore common use cases",
290+
"url": "https://www.example.com",
291+
},
292+
{"label": "Build with CMake", "url": "https://www.example.com"},
293+
{"label": "Visit the FAQ", "url": "https://www.example.com"},
294+
],
295+
"url": "https://www.example.com",
296+
"label": "Learn more about Boost",
297+
"image_src": f"{ settings.STATIC_URL }/img/v3/examples/Learn_Card_Image.png",
298+
"mobile_image_src": f"{ settings.STATIC_URL }/img/v3/examples/Cheetah_Mobile.png",
299+
},
300+
{
301+
"title": "I want to learn:",
302+
"text": "How to install Boost, use its libraries, build projects, and get help when you need it.",
303+
"links": [
304+
{
305+
"label": "Explore common use cases",
306+
"url": "https://www.example.com",
307+
},
308+
{"label": "Build with CMake", "url": "https://www.example.com"},
309+
{"label": "Visit the FAQ", "url": "https://www.example.com"},
310+
],
311+
"url": "https://www.example.com",
312+
"label": "Learn more about Boost",
313+
"image_src": f"{ settings.STATIC_URL}img/v3/examples/Learn_Octopus.png",
314+
"mobile_image_src": f"{ settings.STATIC_URL }/img/v3/examples/Octopus_Mobile.png",
315+
},
316+
]
317+
318+
demo_cards = [
319+
{
320+
"title": "Get help",
321+
"description": "Tap into quick answers, networking, and chat with 24,000+ members.",
322+
"cta_label": "Start here",
323+
"cta_href": reverse("community"),
324+
},
325+
{
326+
"title": "Documentation",
327+
"description": "Browse library docs, examples, and release notes in one place.",
328+
"cta_label": "View docs",
329+
"cta_href": reverse("docs"),
330+
},
331+
{
332+
"title": "Community",
333+
"description": "Mailing lists, GitHub, and community guidelines for contributors.",
334+
"cta_label": "Join",
335+
"cta_href": reverse("community"),
336+
},
337+
{
338+
"title": "Releases",
339+
"description": "Latest releases, download links, and release notes.",
340+
"cta_label": "Download",
341+
"cta_href": reverse("releases-most-recent"),
342+
},
343+
{
344+
"title": "Libraries",
345+
"description": "Explore the full catalog of Boost C++ libraries with docs and metadata.",
346+
"cta_label": "Browse libraries",
347+
"cta_href": reverse("libraries"),
348+
},
349+
{
350+
"title": "News",
351+
"description": "Blog posts, announcements, and community news from the Boost project.",
352+
"cta_label": "Read news",
353+
"cta_href": reverse("news"),
354+
},
355+
{
356+
"title": "Getting started",
357+
"description": "Step-by-step guides to build and use Boost in your projects.",
358+
"cta_label": "Get started",
359+
"cta_href": reverse("getting-started"),
360+
},
361+
{
362+
"title": "Resources",
363+
"description": "Learning resources, books, and other materials for Boost users.",
364+
"cta_label": "View resources",
365+
"cta_href": reverse("resources"),
366+
},
367+
{
368+
"title": "Calendar",
369+
"description": "Community events, meetings, and review schedule.",
370+
"cta_label": "View calendar",
371+
"cta_href": reverse("calendar"),
372+
},
373+
{
374+
"title": "Donate",
375+
"description": "Support the Boost Software Foundation and open-source C++.",
376+
"cta_label": "Donate",
377+
"cta_href": reverse("donate"),
378+
},
379+
]
380+
381+
ctx["library_cards"] = demo_cards
382+
ctx["why_boost_cards"] = demo_cards[:6]
383+
ctx["calendar_card"] = {
384+
"title": "Boost is released three times a year",
385+
"text": "Each release has updates to existing libraries, and any new libraries that have passed the rigorous acceptance process.",
386+
"primary_button_url": "www.example.com",
387+
"primary_button_label": "View the Release Calendar",
388+
"secondary_button_url": "www.example.com",
389+
"secondary_button_label": "Secondary Button",
390+
"image": f"{ settings.STATIC_URL }/img/v3/demo_page/Calendar.png",
391+
}
392+
ctx["info_card"] = {
393+
"title": "How we got here",
394+
"text": "Since 1998, Boost has been where C++ innovation happens. What started with three developers has grown into the foundation of modern C++ development.",
395+
"primary_button_url": "www.example.com",
396+
"primary_button_label": "Explore Our History",
397+
}
398+
ctx["post_cards_data"] = {
399+
"heading": "Posts from the Boost Community",
400+
"view_all_url": "#",
401+
"view_all_label": "View All Posts",
402+
"variant": "Content Card",
403+
"posts": 4
404+
* [
405+
{
406+
"title": "A talk by Richard Thomson at the Utah C++ Programmers Group",
407+
"url": "#",
408+
"description": "Lorem Ispum Sum Delores",
409+
"date": "03/03/2025",
410+
"category": "Issues",
411+
"tag": "beast",
412+
"author": {
413+
"name": "Richard Thomson",
414+
"role": "Contributor",
415+
"show_badge": True,
416+
"avatar_url": "/static/img/v3/demo_page/Avatar.png",
417+
},
418+
}
419+
],
420+
}
421+
ctx["boost_community_data"] = {
422+
"heading": "The Boost community",
423+
"view_all_url": "#",
424+
"view_all_label": "Explore the community",
425+
"posts": 3
426+
* [
427+
{
428+
"title": "A talk by Richard Thomson at the Utah C++ Programmers Group",
429+
"description": "Lorem Ispum Sum Delores",
430+
"url": "#",
431+
"date": "03/03/2025",
432+
"category": "Issues",
433+
"tag": "beast",
434+
"author": {
435+
"name": "Richard Thomson",
436+
"role": "Contributor",
437+
"show_badge": True,
438+
"avatar_url": "/static/img/v3/demo_page/Avatar.png",
439+
},
440+
}
441+
],
442+
}
443+
return ctx
444+
445+
272446
class ContentNotFoundException(Exception):
273447
pass
274448

‎static/css/v3/card.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
background: var(--color-surface-weak);
2121
padding-top: var(--space-large);
2222
padding-bottom: var(--space-large);
23+
height: fit-content;
2324
}
2425

2526
.basic-card {
@@ -135,7 +136,7 @@
135136
overflow:hidden;
136137
}
137138

138-
.square-card-image img {
139+
.square-card-image img, picture {
139140
width: 100%;
140141
height: 100%;
141142
object-fit: cover;

‎static/css/v3/header.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -416,7 +416,6 @@ html.dark .header__user-trigger .header__user-avatar-inner .fa-user {
416416
align-items: center;
417417
gap: var(--space-default, 8px);
418418
flex: 1;
419-
min-width: 360px;
420419
height: var(--header-height);
421420
padding: 0 var(--space-medium, 12px);
422421
border: var(--header-control-border);

‎static/css/v3/learn-cards.css‎

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,27 @@
99
.learn-card__row {
1010
display: flex;
1111
align-items: flex-start;
12-
gap: var(--space-large, 16px);
12+
gap: var(--space-large);
1313
align-self: stretch;
1414
flex-direction: row;
1515
}
1616

17-
@media (max-width: 696px) {
17+
.learn-card__link-column {
18+
gap: var(--space-s);
19+
}
20+
21+
@media (max-width: 1280px) {
1822
.learn-card__row {
1923
flex-direction: column;
2024
}
2125

2226
.learn-card .square-card-image {
2327
flex: 1 0 auto;
28+
aspect-ratio: 16/9;
29+
}
30+
31+
.learn-card__link-column {
32+
margin-bottom: var(--space-xxl);
2433
}
2534
}
2635

@@ -34,62 +43,66 @@
3443
}
3544

3645
.learn-card__title {
37-
color: var(--color-text-primary, #050816);
46+
color: var(--color-text-primary);
3847

39-
/* Display/Desktop/Medium/Large */
40-
font-family: var(--font-display, "Mona Sans Display SemiCondensed");
41-
font-size: var(--font-size-large, 24px);
48+
font-family: var(--font-display);
49+
font-size: var(--font-size-large);
4250
font-weight: var(--font-weight-medium);
43-
line-height: var(--tight);
44-
/* 24px */
51+
line-height: var(--line-height-tight);
4552
letter-spacing: -0.24px;
4653
}
4754

4855
.learn-card__text {
49-
color: var(--color-text-secondary, #585A64);
56+
color: var(--color-text-secondary);
5057

51-
/* Sans/Desktop/Regular/Base */
52-
font-family: var(--font-sans, "Mona Sans VF");
53-
font-size: var(--font-size-base, 16px);
54-
font-weight: var(--font-weight-regular);
55-
/* 19.2px */
58+
font-family: var(--font-sans);
59+
font-size: var(--font-size-base);
60+
font-weight: var(--font-weight-medium);
5661
letter-spacing: -0.16px;
5762
}
5863

5964
.learn-card__link-container {
6065
display: flex;
6166
min-width: 128px;
6267
align-items: center;
63-
gap: var(--space-s, 4px);
68+
gap: var(--space-s);
6469
}
6570

6671
.learn-card__link-icon {
6772
fill: var(--color-icon-primary);
6873
}
6974

75+
.learn-card__link-container:hover {
76+
color: var(--color-text-link-accent);
77+
}
78+
79+
.learn-card__link-container:hover .learn-card__link-icon {
80+
fill: var(--color-text-link-accent);
81+
}
82+
7083
.learn-card__link {
71-
font-size: var(--font-sizes-small, 14px);
84+
font-size: var(--font-size-small);
7285
font-weight: var(--font-weight-medium);
7386
line-height: 124%;
74-
/* 17.36px */
7587
letter-spacing: -0.14px;
7688
text-decoration-line: underline;
7789
text-decoration-style: solid;
7890
text-decoration-skip-ink: auto;
7991
text-decoration-thickness: 7.5%;
80-
/* 1.05px */
8192
text-underline-offset: 15.2%;
82-
/* 2.128px */
8393
text-underline-position: from-font;
8494
}
8595

96+
8697
.learn-card__link-tag {
8798
text-decoration: none;
8899
color: inherit;
89100
}
101+
90102
.learn-card__link-tag:focus-visible {
91103
outline: none;
92104
}
105+
93106
.learn-card__link-tag:focus-visible .learn-card__link-container {
94107
outline: 2px solid Highlight;
95108
outline: 2px solid -webkit-focus-ring-color;

0 commit comments

Comments
 (0)