Filtering cards by category (feature request)

[jhelvy]

This is such a great package! I don't know how difficult this would be to implement, but it would be really cool to be able to filter the cards based on categories, like how we have the showcase page setup on the Distillery. That example has a really specific implementation, so there might be a totally different approach for implementing something like that with this package. Anyway, just putting the idea out there. If I can figure something out I might make a PR myself!

[djnavarro]

oh that's a nice idea. I've been trying to work out what additional functionality the package should have: it feels a bit thin for CRAN right now, but allowing filtering and sorting would be nice

[jhelvy]

The challenge I'm finding is I don't know how to get this working without some javascript. Ideally everything should just work out of the box using the package functions, but maybe one of the functions could just drop in the JS code below the card html? Not 100% certain what that code should look like, but this seems like perhaps a good starting point.

I was also thinking some about the UI. I don't think you'd need too many changes to make this work. Like, you'll need something like a categories argument to the card() function to set the categories, so something like:

card(
  title = "A kitten card",
  image = "https://placekitten.com/300/200",
  text = "The image at the top of this card is from placekitten.com. It's very cute",
  categories = c("cute", "R") # This is the new argument
)

Then to add filter buttons to the grid, I think you might just need maybe one more argument to card_grid() so that the user can turn the filter on or off, maybe something like:

kitty_list <- list(
  sample_card(categories = c("cute", "R")), 
  sample_card(categories = c("cute", "fun")), 
  sample_card(categories = c("cute", "")),
)

card_grid(kitty_list, filter_buttons = TRUE)

If filter_buttons = TRUE, the card_grid() function would have to create the html for the buttons before the html for the actual card grid, and then drop in the JS code at the end (I think that's all that would be needed?). The list of categories could be obtained by just parsing through the categories in each card. Of course this is all just brainstorming, but I figured working out a plan for the UI might be a good idea before trying to actually implement anything in particular.

[jhelvy]

First of all, the "filter by tag" implementation is just spectacular. I absolutely love how easy it is to implement by structuring all of the information in a data frame.

I have implemented it on the projects page (source) on my {distill} website, and it works pretty great out of the box.

The one thing I've been trying to tweak but haven't figured out a solution for is how to get my list of tags centered on the page. I can't find a CSS approach that works, and I'm wondering if it might need to be done in the html itself?

[jhelvy]

Hi @djnavarro! I'm in the process of porting my distill site to a quarto site, and on my projects page (live here on the distill version) I've implemented {bs4cards}. In my quarto version, I have the same code but the filtering by tag no longer works. I'm struggling to figure out why. The strapless css is definitely loading. For now I've just removed the tags.