fix: Update demo data and template #2204

Expand demo libraries to match Figma, move tags
inside header, fix doc icon viewBox to 16x16.

Author: julioest

core/views.py

@@ -1732,9 +1732,25 @@ def get_context_data(self, **kwargs):
             context["example_library_slug"] = library_slug
 
         demo_library_items = []
-        demo_libs_qs = Library.objects.filter(
-            slug__in=["accumulators", "mysql", "asio", "geometry", "beast"]
-        ).prefetch_related("categories", "authors")
+        demo_libs_qs = (
+            Library.objects.filter(
+                slug__in=[
+                    "accumulators",
+                    "algorithm",
+                    "align",
+                    "any",
+                    "array",
+                    "asio",
+                    "assign",
+                    "atomic",
+                    "beast",
+                    "bimap",
+                    "bind",
+                ]
+            )
+            .prefetch_related("categories", "authors")
+            .order_by("name")
+        )
         for lib in demo_libs_qs:
             lv = (
                 LibraryVersion.objects.filter(version=latest, library=lib).first()

templates/v3/examples/_v3_example_section.html

@@ -259,7 +259,7 @@ <h3>{{ section_title }}</h3>
   {% with section_title="Library Item (Card)" %}
   <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
     <h3>{{ section_title }}</h3>
-    <div class="v3-examples-section__example-box" style="display: flex; gap: 16px; flex-wrap: wrap;">
+    <div class="v3-examples-section__example-box library-item-card-grid">
       {% for item in demo_library_items %}
         {% include "v3/includes/_library_item.html" with variant="card" library_name=item.library_name library_url=item.library_url description=item.description categories=item.categories cpp_version=item.cpp_version author=item.author doc_url=item.doc_url %}
       {% endfor %}

templates/v3/includes/_library_item.html

@@ -27,13 +27,12 @@
       <span class="library-item__name">{{ library_name }}</span>
     {% endif %}
     <p class="library-item__description">{{ description }}</p>
-  </div>
-
-  <div class="library-item__tags">
-    {% for cat in categories %}
-      {% include "v3/includes/_category_tag.html" with tag_label=cat.label url=cat.url variant=cat.variant %}
-    {% endfor %}
-    <span class="version-tag version-tag--default library-item__cpp-version">{{ cpp_version }}</span>
+    <div class="library-item__tags">
+      {% for cat in categories %}
+        {% include "v3/includes/_category_tag.html" with tag_label=cat.label url=cat.url variant=cat.variant %}
+      {% endfor %}
+      <span class="version-tag version-tag--default library-item__cpp-version">{{ cpp_version }}</span>
+    </div>
   </div>
 
   <div class="library-item__contributor">
@@ -42,7 +41,7 @@
 
   <div class="library-item__actions">
     <span class="version-tag version-tag--default library-item__cpp-version--desktop">{{ cpp_version }}</span>
-    {% include "v3/includes/_button.html" with url=doc_url label="" icon_name="documentation" icon_size=16 style="icon-library" aria_label="View documentation for "|add:library_name %}
+    {% include "v3/includes/_button.html" with url=doc_url label="" icon_name="documentation" icon_size=32 icon_viewbox="0 0 16 16" style="icon-library" aria_label="View documentation for "|add:library_name %}
   </div>
 
 {% if variant == "list" %}</li>{% else %}</div>{% endif %}