fix: filtering of families and tags (#804)

* fix: filtering of families and tags

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fix: dark theme

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

doc/source/_static/js/landing_page.js

@@ -117,14 +117,17 @@ function handleFamilySelection() {
     document.querySelectorAll(
       '#product-families-list input[type="checkbox"]:checked',
     ),
-  ).map((checkbox) => checkbox.id.replace("family-", "").toLowerCase());
+  ).map((checkbox) =>
+    checkbox.id.replace("family-", "").replace("\\ ", "-").toLowerCase(),
+  );
 
   console.log("Selected families:", selectedFamilies);
 
   const projectCards = document.querySelectorAll(".project-card");
 
   projectCards.forEach((card) => {
     const family = card.getAttribute("data-family").toLowerCase();
+    console.log("Family:", family);
     card.style.display =
       selectedFamilies.length === 0 || selectedFamilies.includes(family)
         ? "flex"
@@ -137,7 +140,9 @@ function handleTagSelection() {
     document.querySelectorAll(
       '#product-tags-list input[type="checkbox"]:checked',
     ),
-  ).map((checkbox) => checkbox.id.replace("tag-", "").toLowerCase());
+  ).map((checkbox) =>
+    checkbox.id.replace("tag-", "").replace("\\ ", "-").toLowerCase(),
+  );
 
   console.log("Selected tags:", selectedTags);
 

doc/source/index.rst

@@ -27,10 +27,12 @@ it is now a collection of many Python packages for using Ansys products through
             {% set family = metadata.get('family', 'other') | lower | replace(' ', '-') %}
             {% set tags = metadata.get('tags', 'other') | lower %}
 
-            <div class="project-card sd-shadow-sm sd-card-hover" data-family="{{ family }}" data-tags="{{ tags }}">
+            <div class="project-card sd-card sd-shadow-sm sd-card-hover" data-family="{{ family }}" data-tags="{{ tags }}">
                 <img class="project-thumbnail" src="{{ metadata['thumbnail'] }}" />
-                <p class="project-title"> {{ metadata['name'] }} </p>
-                <p class="project-description"> {{ metadata['description'] }} </p>
+                <div class="sd-card-body">
+                    <p class="sd-card-title sd-font-weight-bold"> {{ metadata['name'] }} </p>
+                    <p class="sd-card-body-text"> {{ metadata['description'] }} </p>
+                </div>
             </div>
 
             {% endfor %}