Tutorial cards

js/filter-tutorial-tags.js

@@ -0,0 +1,61 @@
+window.filterTags = {
+  bind: function() {
+    var options = {
+      valueNames: [{ data: ["tags"] }],
+      page: "18"
+    };
+
+    var tutorialList = new List("tutorial-cards", options);
+
+    function filterSelectedTags(cardTags, selectedTags) {
+      return cardTags.some(function(tag) {
+        return selectedTags.some(function(selectedTag) {
+          return selectedTag == tag;
+        });
+      });
+    }
+
+    function updateList() {
+      var selectedTags = [];
+
+      $(".selected").each(function() {
+        selectedTags.push($(this).data("tag"));
+      });
+
+      tutorialList.filter(function(item) {
+        var cardTags;
+
+        if (item.values().tags == null) {
+          cardTags = [""];
+        } else {
+          cardTags = item.values().tags.split(",");
+        }
+
+        if (selectedTags.length == 0) {
+          return true;
+        } else {
+          return filterSelectedTags(cardTags, selectedTags);
+        }
+      });
+      $("[data-tags='null']").remove();
+    }
+
+    $(".filter-btn").on("click", function() {
+      if ($(this).data("tag") == "all") {
+        $(this).addClass("all-tag-selected");
+        $(".filter").removeClass("selected");
+      } else {
+        $(this).toggleClass("selected");
+        $("[data-tag='all']").removeClass("all-tag-selected");
+      }
+
+      // If no tags are selected then highlight the 'All' tag
+
+      if (!$(".selected")[0]) {
+        $("[data-tag='all']").addClass("all-tag-selected");
+      }
+
+      updateList();
+    });
+  }
+};

js/theme.js

@@ -286,3 +286,52 @@ if ($("p.caption:first").text() == "Notes") {
         $("p.caption:first").next("ul").toggle();
     }
 }
+
+// Get the card link from the card's link attribute
+
+$(".tutorials-card").on("click", function() {
+    window.location = $(this).attr("link");
+});
+
+// Build an array from each tag that's present
+
+var tagList = $(".tutorials-card-container").map(function() {
+    return $(this).data("tags").split(",").map(function(item) {
+        return item.trim();
+      });
+}).get();
+
+function unique(value, index, self) {
+      return self.indexOf(value) == index && value != ""
+    }
+
+// Only return unique tags
+
+var tags = tagList.filter(unique);
+
+// Add filter buttons to the top of the page for each tag
+
+function createTagMenu() {
+    tags.forEach(function(item){
+    $(".tutorial-filter-menu").append(" <div class='tutorial-filter filter-btn filter' data-tag='" + item + "'>" + item + "</div>")
+  })
+};
+
+createTagMenu();
+
+// Remove hyphens if they are present in the filter buttons
+
+$(".tags").each(function(){
+    var tags = $(this).text().split(",");
+    tags.forEach(function(tag, i ) {
+       tags[i] = tags[i].replace(/-/, ' ')
+    })
+    $(this).html(tags.join(", "));
+});
+
+// Remove hyphens if they are present in the card body
+
+$(".tutorial-filter").each(function(){
+    var tag = $(this).text();
+    $(this).html(tag.replace(/-/, ' '))
+})

pytorch_sphinx_theme/layout.html

@@ -315,6 +315,7 @@
 
   <script type="text/javascript" src="{{ pathto('_static/js/vendor/popper.min.js', 1) }}"></script>
   <script type="text/javascript" src="{{ pathto('_static/js/vendor/bootstrap.min.js', 1) }}"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
   <script type="text/javascript" src="{{ pathto('_static/js/theme.js', 1) }}"></script>
 
   <script type="text/javascript">
@@ -502,6 +503,10 @@ <h2>Resources</h2>
       scrollToAnchor.bind();
       highlightNavigation.bind();
       mainMenuDropdown.bind();
+      filterTags.bind();
+
+      // Remove any empty p tags that Sphinx adds
+      $("[data-tags='null']").remove();
 
       // Add class to links that have code blocks, since we cannot create links in code blocks
       $("article.pytorch-article a span.pre").each(function(e) {