Categories/tags with filter buttons on homepage

_data/categories.yaml

@@ -0,0 +1,15 @@
+- nom: "Monty"
+
+- nom: "Python"
+
+- nom: "Graham Chapman"
+
+- nom: "John Cleese"
+
+- nom: "Terry Gilliam"
+
+- nom: "Eric Idle"
+
+- nom: "Terry Jones"
+
+- nom: "Michael Palin"

_data/gallery.yaml

@@ -4,122 +4,176 @@
   repo_url: https://github.com/voila-gallery/voila-gallery-country-indicators
   ref: 7cd5df8169fe6acefe1d5a200f9878e441b9208a
   image_url: https://i.imgur.com/IeG75O3.png
+  category: 
+    - "Monty" 
+    - "Michael Palin"
 
 - title: gaussian-density
   description: Explore the normal distribution interactively with bqplot
   url: voila/render/index.ipynb
   repo_url: https://github.com/voila-gallery/gaussian-density
   ref: a643a1b180e1892840f4f692115f05a2b6df7bcb
   image_url: https://i.imgur.com/J1Mj6rc.png
+  category:
+    - "John Cleese"
+    - "Terry Jones"
 
 - title: render-stl
   description: Explore STL files with ipyvolume
   url: voila/render/index.ipynb
   repo_url: https://github.com/voila-gallery/render-stl
   ref: 8d24ce5e8c2b5d7b8b4e3a909290dee2eef84f57
   image_url: https://github.com/voila-gallery/render-stl/raw/master/thumbnail.png
+  category:
+    - "Terry Gilliam"
+    - "Graham Chapman"
 
 - title: cpp-xleaflet
   description: Interactive maps with xleaflet and the C++ kernel
   url: voila/render/index.ipynb
   repo_url: https://github.com/voila-gallery/cpp-xleaflet
   ref: c2f94cd85d2d07e8930a3582a840bbfad38c711b
   image_url: https://github.com/voila-gallery/cpp-xleaflet/raw/master/thumbnail.png
+  category:
+    - "John Cleese"
+    - "Terry Gilliam"
 
 - title: gpx-viewer
   description: GPX Viewer web app built with ipywidgets, ipyleaflet, bqplot and voila
   url: voila/render/app.ipynb
   repo_url: https://github.com/jtpio/voila-gpx-viewer
   ref: 70d1f64afdba917cb220c4326ca95cd956f55747
   image_url: https://user-images.githubusercontent.com/591645/60527710-0ff1c680-9cf3-11e9-87b5-8711fd3da344.gif
+  category:
+    - "Eric Idle"
+    - "Graham Chapman"
 
 - title: interactive-football-pitch
   description: Interactive football pitch build with voila, qgrid and bqplot.
   url: voila/render/Interactive-Football-Pitch.ipynb
   repo_url: https://github.com/seidlr/voila-interactive-football-pitch
   ref: 61799617090df7f9c6564927adc3823803f1670e
   image_url: https://i.imgur.com/yuWQZtL.png
+  category:
+    - "Michael Palin"
+    - "Monty"
 
 - title: codex-clustergrammer2
   description: CODEX Single Cell Multiplexed Imaging Dashboard
   url: voila/render/index.ipynb
   ref: b8c8fb820c918d4fc343cf6d8a25bd81cad837c9
   repo_url: https://github.com/ismms-himc/codex_dashboard
   image_url: https://raw.githubusercontent.com/ismms-himc/codex_dashboard/master/img/codex_screenshot.png
+  category:
+    - "Eric Idle"
+    - "Graham Chapman"
 
 - title: ipymaps
   description: Maps with configurable search queries
   url: voila/render/ipymaps.ipynb
   repo_url: https://github.com/deeplook/ipymaps
   ref: ae7e7b2d41405592d632dd5ee721718602a81e46
   image_url: https://raw.githubusercontent.com/deeplook/ipymaps/master/ipymaps.gif
+  category:
+    - "John Cleese"
+    - "Python"
 
 - title: machine-learning-visualization
   description: An interactive visualization of machine learning evaluation metrics
   url: voila/render/machine-learning-interactive-visualization.ipynb
   repo_url: https://github.com/dhaitz/machine-learning-interactive-visualization
   ref: 70b23f05c9e36be556e806996bab7face26b893d
   image_url: https://raw.githubusercontent.com/dhaitz/machine-learning-interactive-visualization/master/img/ml_visualization.gif
+  category:
+    - "Terry Jones"
+    - "Terry Gilliam"
 
 - title: borehole-lithology-viewer
   description: Descriptive lithology in borehole logs with ipyleaflet, ipysheet and voila
   url: voila/render/app.ipynb
   repo_url: https://github.com/csiro-hydrogeology/lithology-viewer
   ref: 30f3a3b9e3729c7f5848fa3cee6614c801e22ee7
   image_url: https://raw.githubusercontent.com/csiro-hydrogeology/lithology-viewer/master/img/canberra_litho.png
+  category:
+    - "Terry Gilliam"
+    - "Eric Idle"
 
 - title: gradient-descent-material
   description: A gradient descent computation using bqplot and the voila-material design template
   url: voila/render/gradient_descent.ipynb
   repo_url: https://github.com/voila-dashboards/voila-material
   ref: a45bdcdcdaaab7086e3f4f36b50e6f30f6bf7094
   image_url: https://raw.githubusercontent.com/voila-dashboards/voila-material/master/images/material_light.png
+  category:
+    - "Monty"
+    - "Michael Palin"
 
 - title: visium-clustergrammer2
   description: Visium Spatial Transcriptomics Data Visualization using Clustergrammer2
   url: voila/render/index.ipynb
   ref: 20343dd74a39edd1992ed4f26e3c9dcf120fd9e9
   repo_url: https://github.com/ismms-himc/visium-clustergrammer2
   image_url: https://raw.githubusercontent.com/ismms-himc/visium-clustergrammer2/master/img/small_visium_gif.gif
+  category:
+    - "Terry Jones"
+    - "Graham Chapman"
 
 - title: voila-ipympl
   description: Interactive matplotlib in a Voila dashboard
   url: voila/render/ipympl.ipynb
   repo_url: https://github.com/voila-gallery/ipympl
   ref: 488dd54eed412e8be19245e86c0542e2087dd91f
   image_url: https://github.com/voila-gallery/ipympl/raw/master/thumbnail.png
+  category:
+    - "Terry Jones"
+    - "Python"
 
 - title: voila-spotify
   description: Spotify activity viewer in a Github activity fashion, using ipympl
   url: voila/render/Spotify_viewer.ipynb
   repo_url: https://github.com/voila-gallery/voila-spotify
   ref: 625f0d3eb7472db4f355fdd8ab522c5bebf291c7
   image_url: https://github.com/voila-gallery/voila-spotify/raw/master/thumbnail.png
+  category:
+    - "Eric Idle"
+    - "Terry Jones"
 
 - title: citibike-clustergrammer2
   description: Citi Bike Data Visualization using Clustergrammer2 and Bqplot
   url: voila/render/index.ipynb
   ref: c3eccddc558722522ed5aa32afcbfc32ee7297d0
   repo_url: https://github.com/cornhundred/citibike-clustergrammer2
   image_url: https://raw.githubusercontent.com/cornhundred/citibike-clustergrammer2/master/img/small_gif.gif
+  category:
+    - "Graham Chapman"
+    - "Python"
 
 - title: jupyter-flex
   description: Easy interactive dashboards for Jupyter
   url: voila/render/examples/movie-explorer.ipynb
   ref: b202af9ea05029a39e667be9da1f72257a6a82b3
   repo_url: https://github.com/danielfrg/jupyter-flex
   image_url: https://jupyter-flex.extrapolations.dev/assets/img/screenshots/movie-explorer.png
+  category:
+    - "Python"
+    - "John Cleese"
 
 - title: covid-plots
   description: Explore lag between France’s and Italy’s coronavirus numbers
   url: voila/render/covid_it_fr_lag.ipynb
   ref: 4b4b45f419adc8e4e9e2a8983825f3ddff284211
   repo_url: https://github.com/mkcor/covid-plots
   image_url: https://raw.githubusercontent.com/mkcor/covid-plots/master/img/screenshot_covid_app.png
+  category:
+    - "Michael Palin"
+    - "Terry Jones"
 
 - title: covid-19-world-dashboard
   description: Interactive visualizations of the impact of covid-19 around the world
   url: voila/render/covid_19_dashboard.ipynb
   ref: 91b8046dfc51e0623700ece1372e64dc770ae71e
   repo_url: https://github.com/sunnysinghnitb/covid-19-world-dashboard
   image_url: https://raw.githubusercontent.com/sunnysinghnitb/covid-19-world-dashboard/master/thumbnail.png
+  category:
+    - "Terry Jones"
+    - "Eric Idle"

_layouts/default.html

@@ -7,14 +7,15 @@
   <meta name="description" content="Voila, ipywidgets and Jupyter display examples">
   <meta name="author" content="Voila Gallery contributors">
   <title>Voilà Gallery</title>
-  <link rel="icon" href="/favicon.ico" />
+  <link rel="icon" href="{{ '/favicon.ico' | absolute_url }}" />
 
-  <link rel="stylesheet" href="/vendor/bootstrap-4.0.0/css/bootstrap.min.css">
+  <link rel="stylesheet" href="{{ '/vendor/bootstrap-4.0.0/css/bootstrap.min.css' | absolute_url }}">
 
-  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="{{ '/css/style.css' | absolute_url }}">
 
-  <script src="/vendor/jquery-3.4.1.slim.min.js"></script>
-  <script src="/js/index.js"></script>
+  <script src="{{ '/vendor/jquery-3.4.1.slim.min.js' | absolute_url }}"></script>
+  <script src="{{ '/js/index.js' | absolute_url }}"></script>
+  <script src="{{ '/js/filter.js' | absolute_url }}"></script>
 </head>
 
 <body>

_layouts/home.html

@@ -3,6 +3,14 @@
 title: voila gallery
 ---
 
+ <!-- Control buttons -->
+<div id="myBtnContainer">
+  <button class="btn active" onclick="filterSelection('all')"> Montrer tout</button>
+  {% for category in site.data.categories %}
+  <button class="btn" onclick="filterSelection('{{ category.nom }}')"> {{ category.nom }}</button>
+  {% endfor %}
+</div>
+
 <div class="modal fade" id="loading_modal" tabindex="-1" role="dialog" aria-labelledby="spinner">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
@@ -16,14 +24,15 @@
 
 <div class="row no-gutters">
   {% for example in site.data.gallery %}
-  <div class="col-md-4" style="height: 400px; padding: 16px;">
+  <div class="col-md-4 filterDiv {{ example.category }} show" style="height: 400px; padding: 16px;">
     <input type="radio" name="example" id="example-{{ example.name }}" value="{{ example.name }}" class="d-none" />
-    <div class="gallery-item">
+    <div class="gallery-item {{ example.category }}">
       <div class="launch-item" style="height: 90%; padding: 8px;" id="example-{{ example.name }}"
            data-example-name="{{ example.title }}"
            data-example-url="{{ example.url }}"
            data-example-repo-url="{{ example.repo_url }}"
            data-example-ref="{{ example.ref }}"
+           data-example-category="{{ example.category }}"
       >
         <img style="height: 60%; width: 100%; object-fit: contain;" src="{{ example.image_url}}" />
         <div style="height: 40%; overflow: hidden;">
@@ -43,4 +52,4 @@ <h4 style="margin-top: .5rem; text-overflow: ellipsis; overflow: hidden; white-s
 
 <script type="text/javascript">
 const BINDERHUB_HOST = "{{ site.binderhub.host }}";
-</script>
+</script>

css/style.css

@@ -98,3 +98,44 @@
 .voila-spinner-color2 {
   fill: #f8e14b;
 }
+
+.container {
+  overflow: hidden;
+}
+
+.filterDiv {
+  /*float: left;*/
+  /*background-color: #2196F3;*/
+  /*color: #ffffff;*/
+  /*width: 100px;*/
+  /*line-height: 100px;*/
+  /*text-align: center;*/
+  /*margin: 2px;*/
+  display: none; /* Hidden by default */
+}
+
+/* The "show" class is added to the filtered elements */
+.show {
+  display: block;
+}
+
+/* Style the buttons */
+.btn {
+  border: none;
+  outline: none;
+  padding: 12px 16px;
+  background-color: #f1f1f1;
+  cursor: pointer;
+}
+
+/* Add a light grey background on mouse-over
+ * */
+.btn:hover {
+  background-color: #ddd;
+}
+
+/* Add a dark background to the active button */
+.btn.active {
+  background-color: #666;
+  color: white;
+}

js/filter.js

@@ -0,0 +1,48 @@
+filterSelection("all");
+
+function filterSelection(c) {
+  var x, i;
+  x = document.getElementsByClassName("filterDiv");
+  if (c == "all") c = "";
+  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
+  for (i = 0; i < x.length; i++) {
+    w3RemoveClass(x[i], "show");
+    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
+  }
+}
+
+// Show filtered elements
+function w3AddClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    if (arr1.indexOf(arr2[i]) == -1) {
+      element.className += " " + arr2[i];
+    }
+  }
+}
+
+// Hide elements that are not selected
+function w3RemoveClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    while (arr1.indexOf(arr2[i]) > -1) {
+      arr1.splice(arr1.indexOf(arr2[i]), 1);
+    }
+  }
+  element.className = arr1.join(" ");
+}
+
+// Add active class to the current control button (highlight it)
+var btnContainer = document.getElementById("myBtnContainer");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+  btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+  });
+}