tutorial index page with filterable list

docs/_static/css/override.css

@@ -0,0 +1,117 @@
+.hidden {
+    display: none;
+}
+
+.filter-btn {
+    pointer-events: auto;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0.5rem 1rem; /* Use relative padding */
+    border-radius: 0.5rem; /* Uniform border radius */
+    border: 1px solid var(--pst-color-border);
+    color: var(--pst-color-base);
+    font-size: 1rem; /* Relative font size */
+    transition: all 0.2s ease-in-out;
+    background-color: var(--pst-color-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for contrast */
+    white-space: nowrap; /* Prevent text wrapping */
+    overflow: hidden; /* Ensure content stays on one line */
+}
+
+.filter-btn:hover {
+    color: var(--pst-color-table-row-hover);
+    border-color: var(--pst-color-table-row-hover);
+    background-color: var(--pst-color-hover-background); /* Add hover background */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
+}
+
+.filter-btn.selected {
+    background-color: var(--pst-color-on-background);
+    color: var(--pst-color-text-muted);
+    font-weight: bold; /* Highlight selected button */
+}
+
+.filter-menu {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 0.5rem; /* Use relative spacing */
+    column-gap: 1rem;
+    justify-content: center;
+    max-width: 100%; /* Restrict width to page */
+    margin: 0 auto; /* Center the menu */
+    padding: 0 1rem; /* Add padding for spacing */
+    overflow: hidden;
+}
+
+.card a {
+    text-decoration: none;
+    }
+
+.card {
+    border-radius: 1rem; /* Uniform border radius */
+    border: 1px solid var(--pst-color-border);
+    transition: all 0.3s ease-in-out;
+    background-color: var(--pst-color-background);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Add shadow for contrast */
+    overflow: hidden; /* Prevent content overflow */
+}
+
+.card:hover {
+    border-color: var(--pst-color-secondary);
+    background-color: var(--pst-color-on-background);
+    color: var(--pst-color-text-base);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
+    transform: translateY(-2px); /* Add subtle lift effect */
+}
+
+.card-title-container {
+    color: var(--pst-color-text-base);
+    font-weight: bold; /* Emphasize title */
+    margin-bottom: 0.25rem; /* Reduce spacing below title */
+    margin-top: 0.25rem; /* Reduce spacing above title */
+}
+
+.card-description {
+    color: var(--pst-color-text-muted);
+    line-height: 1.5; /* Improve readability */
+}
+
+.model-group-name {
+    color: var(--pst-color-text-base);
+    font-size: 1.125rem; /* Standardize font size */
+    font-weight: bold; /* Emphasize group name */
+    margin-bottom: 0.25rem; /* Reduce spacing below group name */
+}
+
+#tab-menu {
+    display: flex;
+    row-gap: 0.5rem; /* Use relative spacing */
+    column-gap: 1rem;
+    justify-content: center; /* Center align tabs */
+}
+
+.tab {
+    pointer-events: auto;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0.5rem 1rem; /* Use relative padding */
+    border-radius: 0.5rem; /* Uniform border radius */
+    border: 1px solid var(--pst-color-border);
+    color: var(--pst-color-base);
+    font-size: 1.125rem; /* Relative font size */
+    transition: all 0.1s ease-in-out;
+    background-color: var(--pst-color-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for contrast */
+}
+
+.tab:hover {
+    background-color: var(--pst-color-hover-background); /* Add hover background */
+    color: var(--pst-color-table-row-hover);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
+}
+
+.tab.tab-selected {
+    border-bottom: none;
+    font-weight: bold; /* Highlight selected tab */
+    color: var(--pst-color-secondary); /* Use secondary color for emphasis */
+}

docs/_static/js/custom.js

@@ -0,0 +1,130 @@
+// Create a set of all unique tags that appear in the cards
+function getUniqueTags() {
+    let tagSet = new Set();
+
+    $(".card-container").each(function() {
+        let tags = $(this).attr('data-tags').split(",")
+        .map(tag => tag.trim()) // Get rid of whitespace
+        .filter(tag => tag !== ""); // Make sure there are no empty tags
+
+        tags.forEach(tag => tagSet.add(tag)); // Add tag to the set
+    });
+
+    let uniqueTags = Array.from(tagSet);
+    uniqueTags.sort();
+    return uniqueTags;
+}
+
+// Get all of the tutorial group names
+function getUniqueGroups() {
+    let groupSet = new Set();
+
+    $(".card-container").each(function() {
+        let group = $(this).attr('data-group')
+
+        if (group && group.trim() !== "") {
+            groupSet.add(group.trim());
+        }
+
+        groupSet.add(group)
+    });
+
+    let uniqueGroups = Array.from(groupSet);
+    uniqueGroups.sort();
+    return uniqueGroups;
+}
+
+// Create the tag button menu
+function createMenu() {
+    let tags = getUniqueTags();
+
+    tags.forEach(item => {
+        $(".filter-menu")
+        .append("<div class='filter filter-btn' data-tag='" + item + "'>" + item + "</div>")
+    });
+}
+
+// Populate the tab menu for tutorial groups
+function populateTabs() {
+    let groups = getUniqueGroups();
+
+    groups.forEach(item => {
+        $(".tab-menu")
+        .append("<div class='tab' data-group='" + item + "'>" + item + "</div>")
+    });
+}
+
+$(document).ready(function() {
+    createMenu();
+    populateTabs();
+});
+
+// Now add filtering functionality to the tag buttons
+
+let selectedTagSet = new Set();
+
+// Handle tag button selection and filtering
+$(document).on("click", ".filter-btn", function () {
+    console.log("button clicked!"); // for debugging
+    let parent = $(this).closest(".filter-menu");
+    let tag = $(this).attr("data-tag");
+
+    if (tag === "all") {
+        if (!parent.hasClass("all-tag-selected")) {
+            selectedTagSet.clear();
+            parent.addClass("all-tag-selected");
+            $(".filter-btn").removeClass("selected"); // Deselect all buttons
+        }
+    } else {
+        if (selectedTagSet.has(tag)) {
+            selectedTagSet.delete(tag);
+            $(this).removeClass("selected"); // Deselect button
+
+            if (selectedTagSet.size === 0) {
+                parent.addClass("all-tag-selected");
+            }
+        } else {
+            parent.removeClass("all-tag-selected");
+            selectedTagSet.add(tag);
+            $(this).addClass("selected"); // Highlight selected button
+        }
+    }
+
+    filterCards(); // Trigger filtering immediately
+});
+
+// Function to filter cards based on both tags and groups
+function filterCards() {
+    $(".card-container").each(function () {
+        let tagsData = $(this).attr("data-tags") || "";
+        let cardTags = tagsData.split(",").map(tag => tag.trim());
+        let groupName = $(this).attr("data-group");
+
+        let matchesTags = selectedTagSet.size === 0 || [...selectedTagSet].every(tag => cardTags.includes(tag));
+        let matchesGroup = selectedGroup === "all" || groupName === selectedGroup;
+
+        console.log("Card tags:", cardTags);  // Log card tags
+        console.log("Model group:", groupName) // group name
+        console.log("Selected tags:", selectedTagSet);  // Log selected tags
+        console.log("Matches tags:", matchesTags);  // Log matchesTags
+        console.log("Matches group:", matchesGroup);  // Log matchesGroup
+
+        $(this).toggleClass("hidden", !(matchesTags && matchesGroup));
+    });
+}
+
+// Add similar filtering functionality to the model group tabs (but only single select)
+let selectedGroup = "all"
+
+// Handle tab selection and filtering
+$(document).on("click", ".tab", function () {
+    let group = $(this).attr("data-group");
+
+    if (group !== selectedGroup) {
+        $(".tab").removeClass("tab-selected"); // deselect current tab
+        $(this).addClass("tab-selected");
+        selectedGroup = group
+    }
+
+    filterCards(); // Trigger filtering immediately
+});

docs/conf.py

@@ -156,6 +156,7 @@
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ["_static"]
 html_css_files = ["css/override.css"]
+html_js_files = ["js/custom.js"]
 html_show_sphinx = False