Skip to content

Story 2127: Learn Page Implementation #2243

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
jlchilders11 wants to merge 14 commits into
base: develop
Choose a base branch
from
Open

Story 2127: Learn Page Implementation #2243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
09dee21
Init
jlchilders11 Mar 25, 2026
5ad3abe
Story 2127: Learn Page
jlchilders11 Mar 26, 2026
28610ec
Adjust indentation
jlchilders11 Mar 26, 2026
7725e9f
Update to use posts_cards component
jlchilders11 Mar 27, 2026
a9b9372
Undo changes to event cards
jlchilders11 Mar 27, 2026
bdd3c28
Undo changes to event cards
jlchilders11 Mar 27, 2026
1226495
Remove extra class
jlchilders11 Mar 27, 2026
3315fe5
Additional CSS tweaks for mobile and tablet
jlchilders11 Mar 27, 2026
2570cac
Fix margin bottom on learn card on unusual screen resolutions
jlchilders11 Mar 27, 2026
c72a2f8
Update learn card css and example images
jlchilders11 Mar 30, 2026
20c5bd7
PR feedback
jlchilders11 Mar 30, 2026
2f0b0f6
PR feedback: update demo content, remove extra comments
jlchilders11 Apr 1, 2026
0f68434
PR feedback: Adjust why card size, header width, and grid layout on t…
jlchilders11 Apr 2, 2026
8ae70da
Update learn card stylings
jlchilders11 Apr 2, 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
6 changes: 6 additions & 0 deletions config/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
TermsOfUseView,
PrivacyPolicyView,
V3ComponentDemoView,
LearnPageView,
ModernizedDocsView,
RedirectToDocsView,
RedirectToHTMLDocsView,
Expand Down Expand Up @@ -250,6 +251,11 @@
staff_member_required(V3ComponentDemoView.as_view()),
name="v3-demo-components",
),
path(
"v3/demo/learn-page/",
staff_member_required(LearnPageView.as_view()),
name="v3-learn-page",
),
path("libraries/", LibraryListDispatcher.as_view(), name="libraries"),
path(
"libraries/<boostversionslug:version_slug>/<str:library_view_str>/",
Expand Down
174 changes: 174 additions & 0 deletions core/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

from textwrap import dedent
from urllib.parse import urljoin
from waffle import flag_is_active

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


class LearnPageView(V3Mixin, TemplateView):
v3_template_name = "v3/learn_page.html"

def dispatch(self, request, *args, **kwargs):
if not flag_is_active(request, "v3"):
return HttpResponseNotFound()
return super().dispatch(request, *args, **kwargs)

def get_v3_context_data(self, **kwargs):
ctx = self.get_context_data(**kwargs)
ctx["learn_card_data"] = [
{
"title": "I want to learn:",
"text": "How to install Boost, use its libraries, build projects, and get help when you need it.",
"links": [
{
"label": "Explore common use cases",
"url": "https://www.example.com",
},
{"label": "Build with CMake", "url": "https://www.example.com"},
{"label": "Visit the FAQ", "url": "https://www.example.com"},
],
"url": "https://www.example.com",
"label": "Learn more about Boost",
"image_src": f"{ settings.STATIC_URL }/img/v3/examples/Learn_Card_Image.png",
"mobile_image_src": f"{ settings.STATIC_URL }/img/v3/examples/Cheetah_Mobile.png",
},
{
"title": "I want to learn:",
"text": "How to install Boost, use its libraries, build projects, and get help when you need it.",
"links": [
{
"label": "Explore common use cases",
"url": "https://www.example.com",
},
{"label": "Build with CMake", "url": "https://www.example.com"},
{"label": "Visit the FAQ", "url": "https://www.example.com"},
],
"url": "https://www.example.com",
"label": "Learn more about Boost",
"image_src": f"{ settings.STATIC_URL}img/v3/examples/Learn_Octopus.png",
"mobile_image_src": f"{ settings.STATIC_URL }/img/v3/examples/Octopus_Mobile.png",
},
]

demo_cards = [
{
"title": "Get help",
"description": "Tap into quick answers, networking, and chat with 24,000+ members.",
"cta_label": "Start here",
"cta_href": reverse("community"),
},
{
"title": "Documentation",
"description": "Browse library docs, examples, and release notes in one place.",
"cta_label": "View docs",
"cta_href": reverse("docs"),
},
{
"title": "Community",
"description": "Mailing lists, GitHub, and community guidelines for contributors.",
"cta_label": "Join",
"cta_href": reverse("community"),
},
{
"title": "Releases",
"description": "Latest releases, download links, and release notes.",
"cta_label": "Download",
"cta_href": reverse("releases-most-recent"),
},
{
"title": "Libraries",
"description": "Explore the full catalog of Boost C++ libraries with docs and metadata.",
"cta_label": "Browse libraries",
"cta_href": reverse("libraries"),
},
{
"title": "News",
"description": "Blog posts, announcements, and community news from the Boost project.",
"cta_label": "Read news",
"cta_href": reverse("news"),
},
{
"title": "Getting started",
"description": "Step-by-step guides to build and use Boost in your projects.",
"cta_label": "Get started",
"cta_href": reverse("getting-started"),
},
{
"title": "Resources",
"description": "Learning resources, books, and other materials for Boost users.",
"cta_label": "View resources",
"cta_href": reverse("resources"),
},
{
"title": "Calendar",
"description": "Community events, meetings, and review schedule.",
"cta_label": "View calendar",
"cta_href": reverse("calendar"),
},
{
"title": "Donate",
"description": "Support the Boost Software Foundation and open-source C++.",
"cta_label": "Donate",
"cta_href": reverse("donate"),
},
]

ctx["library_cards"] = demo_cards
ctx["why_boost_cards"] = demo_cards[:6]
ctx["calendar_card"] = {
"title": "Boost is released three times a year",
"text": "Each release has updates to existing libraries, and any new libraries that have passed the rigorous acceptance process.",
"primary_button_url": "www.example.com",
"primary_button_label": "View the Release Calendar",
"secondary_button_url": "www.example.com",
"secondary_button_label": "Secondary Button",
"image": f"{ settings.STATIC_URL }/img/v3/demo_page/Calendar.png",
}
ctx["info_card"] = {
"title": "How we got here",
"text": "Since 1998, Boost has been where C++ innovation happens. What started with three developers has grown into the foundation of modern C++ development.",
"primary_button_url": "www.example.com",
"primary_button_label": "Explore Our History",
}
ctx["post_cards_data"] = {
"heading": "Posts from the Boost Community",
"view_all_url": "#",
"view_all_label": "View All Posts",
"variant": "Content Card",
"posts": 4
* [
{
"title": "A talk by Richard Thomson at the Utah C++ Programmers Group",
"url": "#",
"description": "Lorem Ispum Sum Delores",
"date": "03/03/2025",
"category": "Issues",
"tag": "beast",
"author": {
"name": "Richard Thomson",
"role": "Contributor",
"show_badge": True,
"avatar_url": "/static/img/v3/demo_page/Avatar.png",
},
}
],
}
ctx["boost_community_data"] = {
"heading": "The Boost community",
"view_all_url": "#",
"view_all_label": "Explore the community",
"posts": 3
* [
{
"title": "A talk by Richard Thomson at the Utah C++ Programmers Group",
"description": "Lorem Ispum Sum Delores",
"url": "#",
"date": "03/03/2025",
"category": "Issues",
"tag": "beast",
"author": {
"name": "Richard Thomson",
"role": "Contributor",
"show_badge": True,
"avatar_url": "/static/img/v3/demo_page/Avatar.png",
},
}
],
}
return ctx


class ContentNotFoundException(Exception):
pass

Expand Down
3 changes: 2 additions & 1 deletion static/css/v3/card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
background: var(--color-surface-weak);
padding-top: var(--space-large);
padding-bottom: var(--space-large);
height: fit-content;
}

.basic-card {
Expand Down Expand Up @@ -133,7 +134,7 @@
overflow:hidden;
}

.square-card-image img {
.square-card-image img, picture {
width: 100%;
height: 100%;
object-fit: cover;
Expand Down
51 changes: 32 additions & 19 deletions static/css/v3/learn-cards.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,27 @@
.learn-card__row {
display: flex;
align-items: flex-start;
gap: var(--space-large, 16px);
gap: var(--space-large);
align-self: stretch;
flex-direction: row;
}

@media (max-width: 696px) {
.learn-card__link-column {
gap: var(--space-s);
}

@media (max-width: 1280px) {
.learn-card__row {
flex-direction: column;
}

.learn-card .square-card-image {
flex: 1 0 auto;
aspect-ratio: 16/9;
}

.learn-card__link-column {
margin-bottom: var(--space-xxl);
}
}

Expand All @@ -34,62 +43,66 @@
}

.learn-card__title {
color: var(--color-text-primary, #050816);
color: var(--color-text-primary);

/* Display/Desktop/Medium/Large */
font-family: var(--font-display, "Mona Sans Display SemiCondensed");
font-size: var(--font-size-large, 24px);
font-family: var(--font-display);
font-size: var(--font-size-large);
font-weight: var(--font-weight-medium);
line-height: var(--tight);
/* 24px */
line-height: var(--line-height-tight);
letter-spacing: -0.24px;
}

.learn-card__text {
color: var(--color-text-secondary, #585A64);
color: var(--color-text-secondary);

/* Sans/Desktop/Regular/Base */
font-family: var(--font-sans, "Mona Sans VF");
font-size: var(--font-size-base, 16px);
font-weight: var(--font-weight-regular);
/* 19.2px */
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
letter-spacing: -0.16px;
}

.learn-card__link-container {
display: flex;
min-width: 128px;
align-items: center;
gap: var(--space-s, 4px);
gap: var(--space-s);
}

.learn-card__link-icon {
fill: var(--color-icon-primary);
}

.learn-card__link-container:hover {
color: var(--color-text-link-accent);
}

.learn-card__link-container:hover .learn-card__link-icon {
fill: var(--color-text-link-accent);
}

.learn-card__link {
font-size: var(--font-sizes-small, 14px);
font-size: var(--font-size-small);
Copy link
Copy Markdown
Collaborator

@julhoang julhoang Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be out-of-scope but I think this link should be its own component, see Figma here. Feel free to leave this to a separate ticket if you don't feel like adding it here!

This current link is just missing font-weight 500 and a hover color.

Image

Copy link
Copy Markdown
Collaborator Author

@jlchilders11 jlchilders11 Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It did need some updating on styling, but I'm not sure it is used elsewhere? If it is, happy to spin it off as a separate item!

font-weight: var(--font-weight-medium);
line-height: 124%;
/* 17.36px */
letter-spacing: -0.14px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: 7.5%;
/* 1.05px */
text-underline-offset: 15.2%;
/* 2.128px */
text-underline-position: from-font;
}


.learn-card__link-tag {
text-decoration: none;
color: inherit;
}

.learn-card__link-tag:focus-visible {
outline: none;
}

.learn-card__link-tag:focus-visible .learn-card__link-container {
outline: 2px solid Highlight;
outline: 2px solid -webkit-focus-ring-color;
Expand Down
Loading
Loading