Add category gallery with featured projects and category-specific sub-galleries

doc/_static/css/custom.css

@@ -28,3 +28,70 @@ code.download.literal.xref.docutils {
   font-weight: inherit;
   font-size: inherit;
 }
+
+/* Style for filter buttons */
+
+#label-filters-container {
+  border: 1px solid #ddd;
+  padding: 10px;
+  border-radius: 5px;
+  background-color: #f9f9f9;
+  margin-bottom: 15px;
+}
+
+.filter-label {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+
+#label-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.filter-btn {
+  padding: 10px 15px;
+  margin: 5px;
+  border: none;
+  background-color: #f0f0f0;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+}
+
+.filter-btn:hover {
+  background-color: #459db9;
+}
+
+.filter-btn-active {
+  background-color: #459db9;
+  color: white;
+}
+
+
+/* Style for Cards and filter visibility */
+.sd-col[style*="display: none"] {
+  display: none !important;
+}
+
+.sd-col[style*="display: block"] {
+  display: block !important;
+}
+
+/* Ensuring consistent card height */
+.sd-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sd-card-body {
+  flex-grow: 1;
+  padding-bottom: 10px;
+}
+
+.sd-card-footer {
+  text-align: center;
+}

doc/_static/js/filter.js

@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const buttons = document.querySelectorAll('.filter-btn');
+    const cols = document.querySelectorAll('.sd-col');
+
+    // console.log('Filter buttons:', buttons);
+    // console.log('Grid columns (cards):', cols);
+
+    buttons.forEach(button => {
+        button.addEventListener('click', function () {
+            // Toggle the custom active class on the clicked button
+            this.classList.toggle('filter-btn-active');
+            // console.log('Button clicked:', this);
+            // console.log('Active state:', this.classList.contains('filter-btn-active'));
+
+            // Determine active labels
+            let activeLabels = Array.from(buttons)
+                                    .filter(btn => btn.classList.contains('filter-btn-active'))
+                                    .map(btn => btn.getAttribute('data-label'));
+
+            // console.log('Active labels:', activeLabels);
+
+            cols.forEach(col => {
+                const labels = col.querySelectorAll('.sd-card-footer img');
+                let matchedLabels = [];
+
+                labels.forEach(labelImg => {
+                    const src = labelImg.src.split('/').pop().split('.')[0]; // Get the filename without extension
+                    // console.log('Label src:', src);
+
+                    if (activeLabels.includes(src)) {
+                        matchedLabels.push(src);
+                    }
+                });
+
+                // console.log('Matched labels:', matchedLabels);
+
+                // Check if the col matches all active labels or if no labels are active
+                if (activeLabels.length === 0 || (matchedLabels.length === activeLabels.length && matchedLabels.length > 0)) {
+                    col.style.display = 'block';
+                    // console.log('Showing column:', col);
+                } else {
+                    col.style.display = 'none';
+                    // console.log('Hiding column:', col);
+                }
+            });
+        });
+    });
+});

doc/_templates/sidebar-nav-bs.html

@@ -1,12 +1,35 @@
-<nav class="bd-docs-nav">
+{# Displays the TOC-subtree for pages nested under the currently active top-level TOCtree element. #}
+<nav class="bd-docs-nav bd-links"
+      aria-label="{{ _('Section Navigation') }}">
+  <!-- <p class="bd-links__title" role="heading" aria-level="1">{{ _("Section Navigation") }}</p> -->
+  <div class="bd-toc-item navbar-nav">
+    {{- generate_toctree_html(
+      "sidebar",
+      startdepth=0,
+      show_nav_level=theme_show_nav_level | int,
+      maxdepth=theme_navigation_depth | int,
+      collapse=theme_collapse_navigation | tobool,
+      includehidden=theme_sidebar_includehidden | tobool,
+      titles_only=True
+      )
+    -}}
+  </div>
+</nav>
+
+<!-- Adapted from sidebar-nav-bs.html (1.15.2) with the following changes
+  - Commented out the tag that adds the "Section Navigation" title
+  - Call generate_toctree_html with startdepth=0
+-->
+
+<!-- <nav class="bd-docs-nav">
     <div class="bd-toc-item navbar-nav">{{ generate_toctree_html("sidebar",
       startdepth=2,
       show_nav_level=theme_show_nav_level|int,
       maxdepth=theme_navigation_depth|int,
       collapse=theme_collapse_navigation|tobool,
       includehidden=True,
       titles_only=True) }}</div>
-</nav>
+</nav> -->
 
   <!-- Original template below, from v0.13.0. Modified:
     - primarily to set the startdepth to 2 (not configurable at the time)

doc/category_descriptions/life_sciences.rst

@@ -0,0 +1,2 @@
+
+The Life Sciences category encompasses a range of projects focused on that deals with living things and life processes.

doc/conf.py

@@ -22,13 +22,18 @@
 copyright = '2023 ' + authors
 description = 'Domain-specific narrative examples using multiple open-source Python visualization tools.'
 long_description = ('Home for domain-specific narrative examples using '
-                    'multiple HoloViz projects. Each project is isolated and '
-                    'fully described. For information on how to use these projects, '
-                    'see how to `get started <getting_started>`_.')
+                    'multiple HoloViz projects. Each project is isolated '
+                    'and fully described. For information on how to use '
+                    'these projects, see how to `get started <getting_started.html>`_. '
+                    'We encourage new contributors to add their own examples, '
+                    'providing a valuable opportunity to learn the HoloViz tools '
+                    'and contribute to the open-source community, benefiting '
+                    'other users.')
 site = 'https://examples.holoviz.org'
 version = release = '0.1.0'
 
 html_static_path += ['_static']
+html_js_files = ['js/filter.js',]
 html_theme = 'pydata_sphinx_theme'
 html_logo = "_static/holoviz-logo-unstacked.svg"
 html_favicon = "_static/favicon.ico"
@@ -49,6 +54,7 @@
 
 extensions = [
     'gallery',  # local gallery extension
+    # 'category_gallery', # local category gallery extension 
     'nbheader',  # local nbheader extension
     'myst_nb',
     'sphinx_design',

doc/index.rst

@@ -10,5 +10,4 @@ Homepage
 
    gallery/index
    getting_started
-   contributing
-
+   contributing

doc/intro.rst

@@ -0,0 +1,13 @@
+Welcome to the `HoloViz.org <https://holoviz.org/>`_ Examples Gallery!
+
+Discover a curated collection of domain-specific narrative examples using various HoloViz projects. Each example is thoughtfully crafted and fully documented, providing a comprehensive guide to explore and learn from. Whether you're a newcomer or an experienced user, these examples are designed to inspire and educate.
+
+For information on how to use these projects, see how to `get started <../getting_started.html>`_. 
+
+.. dropdown:: Contributions Welcome!
+
+   1. **Choose Your Focus:** Think about a topic, question, API, or visualization that excites you.
+   2. **Draft Your Story:** Outline the narrative you want to tell.
+   3. **Learn and Create:** Utilize existing examples and documentation to craft a Jupyter notebook that explores your chosen focus.
+   4. **Contribute Your Work:** Follow our `contributing guide <../contributing.html>`_ to submit your example.
+   5. **Celebrate Your Contribution:** Gain knowledge, share your insights, and help others in the community.

doc/tags.yml

@@ -0,0 +1,72 @@
+attractors:
+  category: [Mathematics, Featured]
+gapminders:
+  category: [Economics, Featured]
+gerrymandering:
+  category: [Geospatial]
+glaciers:
+  category: [Geospatial, Featured]
+gull_tracking:
+  category: [Life Sciences]
+nyc_taxi:
+  category: [Geospatial, Featured]
+portfolio_optimizer:
+  category: [Finance, Featured]
+ship_traffic:
+  category: [Geospatial, Featured]
+iex_trading:
+  category: [Finance]
+nyc_buildings:
+  category: [Geospatial]
+census:
+  category: [Geospatial]
+heat_and_trees:
+  category: [Geospatial, Featured]
+opensky:
+  category: [Geospatial]
+seattle_lidar:
+  category: [Geospatial]
+carbon_flux:
+  category: [Life Sciences]
+datashader_dashboard:
+  category: [Geospatial]
+euler:
+  category: [Mathematics]
+goldbach_comet:
+  category: [Mathematics]
+landsat:
+  category: [Geospatial]
+landuse_classification:
+  category: [Geospatial]
+walker_lake:
+  category: [Geospatial]
+sri_model:
+  category: [Life Sciences]
+bay_trimesh:
+  category: [Geospatial]
+boids:
+  category: [Life Sciences]
+exoplanets:
+  category: [Geospatial, Featured]
+genetic_algorithm:
+  category: [Life Sciences]
+hipster_dynamics:
+  category: [Mathematics]
+landsat_clustering:
+  category: [Geospatial]
+lsystems:
+  category: [Life Sciences]
+ml_annotators:
+  category: [Geospatial]
+network_packets:
+  category: [Cybersecurity]
+osm:
+  category: [Geospatial]
+particle_swarms:
+  category: [Mathematics]
+penguin_crossfilter:
+  category: [Life Sciences]
+square_limit:
+  category: [Mathematics]
+uk_researchers:
+  category: [Life Sciences]