refactor: simplify the cards used on community page

Author: julhoang

static/css/v3/components.css

@@ -26,7 +26,6 @@
 @import "./library-intro-card.css";
 @import "./learn-cards.css";
 @import "./terms-of-use.css";
-@import "./thread-archive-card.css";
 @import "./tab.css";
 @import "./install-card.css";
 @import "./banner.css";
@@ -52,4 +51,4 @@
 @import "release-highlights-card.css";
 @import "./media-text-card.css";
 @import "./library-discovery-card.css";
-@import "./help-cards.css";
+@import "./help-card.css";

static/css/v3/help-cards.css static/css/v3/help-card.cssstatic/css/v3/help-cards.css renamed to static/css/v3/help-card.css

@@ -1,11 +1,11 @@
 /**
- * Help cards: section wrapper with a grid of speech-bubble user cards.
- * Rendered by templates/v3/includes/_help_cards.html.
+ * Help card: section wrapper with a grid of speech-bubble user cards.
+ * Rendered by templates/v3/includes/_help_card.html.
  */
 
 /* ── Section wrapper ───────────────────────────────────────── */
 
-.community-help {
+.help-card-section {
   --chat-bubble-tail-padding: 60px;
 
   display: flex;
@@ -17,7 +17,7 @@
   border-radius: var(--border-radius-xl);
 }
 
-.community-help__heading {
+.help-card-section__heading {
   font-family: var(--font-display);
   font-size: var(--font-size-large);
   font-weight: var(--font-weight-medium);
@@ -29,7 +29,7 @@
   line-height: var(--line-height-tight);
 }
 
-.community-help__grid {
+.help-card-section__grid {
   display: grid;
   gap: var(--space-large);
   padding: var(--space-large);
@@ -102,12 +102,12 @@
 /* ── Responsive ────────────────────────────────────────────── */
 
 @media (max-width: 767px) {
-  .community-help {
+  .help-card-section {
     --chat-bubble-tail-padding: 48px;
     max-width: 458px;
   }
 
-  .community-help__grid {
+  .help-card-section__grid {
     grid-template-columns: 1fr;
     grid-template-rows: none;
     row-gap: calc(var(--space-large) * 2);

static/css/v3/thread-archive-card.css

@@ -12,17 +12,13 @@
     {% include "v3/includes/_hero_library.html" with title="A community built to help you go further" description="For newcomers and experienced engineers alike, Boost is a place to build real libraries, learn from experts and make contributions that matter." hero_image_url="/static/img/v3/Community-page/community-foreground.png" %}
     <div class="community-container">
       <div class="community-masonry">
-        {# Help spans full row at every breakpoint (see community.css) #}
-        {% include "v3/includes/_help_cards.html" with heading="What do you need help with?" items=help_options extra_classes="community-masonry__help" %}
-        {# Cols are real boxes at desktop; at tablet/mobile they use display:contents so cells become direct grid children and can be reshuffled via grid-template-areas. #}
+        {% include "v3/includes/_help_card.html" with heading="What do you need help with?" items=help_options extra_classes="community-masonry__help" %}
         <div class="community-masonry__col">
           <div class="community-masonry__cell community-masonry__cell--install">
             {% include "v3/includes/_install_card.html" with card_id="community-install" install_card_pkg_managers=install_card_pkg_managers install_card_system_install=install_card_system_install %}
           </div>
           <div class="community-masonry__cell community-masonry__cell--slack">
-            {% with member_count=slack_member_count|default:"30,000" %}
-              {% include "v3/includes/_vertical_card.html" with title="Join the discussion on Slack" image_url="/static/img/v3/Community-page/community-slack-preview.png" primary_button_url="https://cppalliance.org/slack/" primary_button_label="Chat with "|add:member_count|add:" members" only %}
-            {% endwith %}
+            {% include "v3/includes/_join_slack_card.html" %}
           </div>
           <div class="community-masonry__cell community-masonry__cell--contribute">
             {% include "v3/includes/_create_account_card.html" with heading="Contribute to earn badges, track your progress and grow your impact" body_html=create_account_card_body_html preview_image_url=create_account_card_preview_url cta_url="#" cta_label="Start contributing" %}

templates/v3/community.html

@@ -14,21 +14,26 @@
     aria_label     (string, optional)  — defaults to heading.
 
   Usage:
-    {% include "v3/includes/_help_cards.html" with heading="What do you need help with?" items=help_options extra_classes="community-masonry__help" %}
+    {% include "v3/includes/_help_card.html" with heading="What do you need help with?" items=help_options extra_classes="community-masonry__help" %}
 {% endcomment %}
-<section class="community-help{% if extra_classes %} {{ extra_classes }}{% endif %}"
+<section class="help-card-section {% if extra_classes %}{{ extra_classes }}{% endif %}"
          aria-label="{{ aria_label|default:heading }}">
-  <h2 class="community-help__heading">{{ heading }}</h2>
-  <hr class="card__hr" aria-hidden="true"/>
-  <div class="community-help__grid">
+  <h2 class="help-card-section__heading">{{ heading }}</h2>
+  <hr class="card__hr" aria-hidden="true" />
+  <div class="help-card-section__grid">
     {% for option in items %}
       <article class="help-card">
         <div class="help-card__bubble-wrap">
           <div class="help-card__bubble">
             <p class="help-card__quote">“{{ option.quote }}”</p>
           </div>
           <div class="help-card__tail-wrapper">
-            <svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <svg width="32"
+                 height="30"
+                 viewBox="0 0 32 30"
+                 fill="none"
+                 xmlns="http://www.w3.org/2000/svg"
+                 aria-hidden="true">
               <path class="help-card__tail" d="M0 0H32L3.41421 28.5858C2.15428 29.8457 0 28.9534 0 27.1716V0Z" />
             </svg>
           </div>

templates/v3/includes/_help_cards.html templates/v3/includes/_help_card.htmltemplates/v3/includes/_help_cards.html renamed to templates/v3/includes/_help_card.html

@@ -0,0 +1,9 @@
+{% comment %}
+  Join Slack card. Invites readers to join the Boost Slack workspace.
+
+  Variables (read from context):
+    slack_member_count (string, optional) — member count shown in the CTA. Defaults to "30,000".
+{% endcomment %}
+{% with member_count=slack_member_count|default:"30,000" %}
+  {% include "v3/includes/_vertical_card.html" with title="Join the discussion on Slack" image_url="/static/img/v3/community-page/community-slack-preview.png" image_alt="Preview of the Boost Slack workspace" primary_button_url="https://cppalliance.org/slack/" primary_button_label="Chat with "|add:member_count|add:" members" only %}
+{% endwith %}

templates/v3/includes/_join_slack_card.html

@@ -2,17 +2,4 @@
   Thread archive card. Links to the latest mailing list threads, as well as the archive.
 {% endcomment %}
 {% load static %}
-<div class="basic-card thread-archive-card card">
-  <div class="card__header">
-    <span class="card__title">Explore The Boost Developers Mailing List</span>
-  </div>
-  <hr class="card__hr" />
-  <div class="card__column px-large">
-    <img src="{% static 'img/v3/community-page/community-mailing-list-preview.png' %}" alt="">
-  </div>
-  <hr class="card__hr" />
-  <div class="card__cta_section">
-    {% include "v3/includes/_button.html" with style="primary" url="https://lists.boost.org/archives/list/boost@lists.boost.org/latest" label="Recent Threads" only %}
-    {% include "v3/includes/_button.html" with style="secondary" url="https://lists.boost.org/archives/list/boost@lists.boost.org/" label="View Archive" only %}
-  </div>
-</div>
+{% include "v3/includes/_vertical_card.html" with title="Explore The Boost Developers Mailing List" image_url="/static/img/v3/community-page/community-mailing-list-preview.png" image_alt="Preview of recent threads on the Boost developers mailing list" primary_button_url="https://lists.boost.org/archives/list/boost@lists.boost.org/latest" primary_button_label="Recent Threads" secondary_button_url="https://lists.boost.org/archives/list/boost@lists.boost.org/" secondary_button_label="View Archive" only %}

templates/v3/includes/_thread_archive_card.html

@@ -4,6 +4,7 @@
     Title: Required, text that appears bolded at the top of the card
     Text: optional, text that appears in the middle of the card
     image_url: optional, url of an image that should appear in the card
+    image_alt: optional, alt text for the image (defaults to "" — image treated as decorative)
     Primary Button Url, Label, and Style: Optional. Url is the destination of the button, label is the text of the button, style is from the style list
     Secondary Button Url, Label, and Style: Optional, same use as primary
 {% endcomment %}
@@ -14,7 +15,7 @@
   <hr class="card__hr" />
   <div class="card__column px-large">
     {% if text %}<span>{{ text }}</span>{% endif %}
-    {% if image_url %}<img class="card__image" src="{{ image_url }}" />{% endif %}
+    {% if image_url %}<img class="card__image" src="{{ image_url }}" alt="{{ image_alt|default:'' }}">{% endif %}
   </div>
   <hr class="card__hr" />
   <div class="card__cta_section">