Make new index page with hover CSS.

doc/_static/css/custom.css

@@ -0,0 +1,20 @@
+/* Center and make the title bold */
+.gallery-card .grid-item-card-title {
+    text-align: center;
+    font-weight: bold;
+}
+
+/* Default style for hover content (hidden) */
+.gallery-card .hover-content {
+    display: none;
+    text-align: center;
+}
+
+/* Show the hover content when hovering over the card */
+.gallery-card:hover .default-title {
+    display: none;
+}
+
+.gallery-card:hover .hover-content {
+    display: block;
+}

doc/conf.py

@@ -109,8 +109,10 @@
 # Add any paths that contain custom static files (such as style sheets) here,
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
-# html_static_path = ['_static']
-
+html_static_path = ['_static']
+html_css_files = [
+    'css/custom.css',
+]
 html_favicon = "images/favicon-32x32.png"
 
 

doc/index.rst

@@ -51,6 +51,7 @@ SpikeInterface is made of several modules to deal with different aspects of the
 
     overview
     get_started/index
+    tutorials_custom_index
     tutorials/index
     how_to/index
     modules/index

doc/tutorials_custom_index.rst

@@ -0,0 +1,254 @@
+.. This page provides a custom index to the 'Tutorials' page, rather than the default sphinx-gallery
+.. generated page. The benefits of this are flexibility in design and inclusion of non-sphinx files in the index.
+..
+.. To update this index with a new documentation page
+.. 1) Copy the grid-item-card and associated ".. raw:: html" section.
+.. 2) change :link: to a link to your page. If this is an `.rst` file, point to the rst file directly.
+..    If it is a sphinx-gallery generated file, format the path as separated by underscore and prefix `sphx_glr`,
+..    pointing to the .py file. e.g. `tutorials/my/page.py` -> `sphx_glr_tutorials_my_page.py
+.. 3) Change :img-top: to point to the thumbnail image of your choosing. You can point to images generated
+..    in the sphinx gallery page if you wish.
+.. 4) In the `html` section, change the `default-title` to your pages title and `hover-content` to the subtitle.
+
+:orphan:
+
+TutorialsNew
+============
+
+Longer form tutorials about using SpikeInterface. Many of these are downloadable as notebooks or Python scripts so that you can "code along" with the tutorials.
+
+If you're new to SpikeInterface, we recommend trying out the :ref:`get_started/quickstart:Quickstart tutorial` first.
+
+Updating from legacy
+--------------------
+
+.. toctree::
+   :maxdepth: 1
+
+   tutorials/waveform_extractor_to_sorting_analyzer
+
+Core tutorials
+--------------
+
+These tutorials focus on the :py:mod:`spikeinterface.core` module.
+
+.. grid:: 1 2 2 3
+   :gutter: 2
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_core_plot_1_recording_extractor.py
+      :img-top: /tutorials/core/images/thumb/sphx_glr_plot_1_recording_extractor_thumb.png
+      :img-alt: Recording objects
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Recording objects</div>
+         <div class="hover-content">Manage loaded recordings in SpikeInterface</div>
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_core_plot_2_sorting_extractor.py
+      :img-top: /tutorials/core/images/thumb/sphx_glr_plot_2_sorting_extractor_thumb.png
+      :img-alt: Sorting objects
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Sorting objects</div>
+         <div class="hover-content">Explore sorting extractor features</div>
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_core_plot_3_handle_probe_info.py
+      :img-top: /tutorials/core/images/thumb/sphx_glr_plot_3_handle_probe_info_thumb.png
+      :img-alt: Handling probe information
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Handling probe information</div>
+         <div class="hover-content">Handle and visualize probe information</div>
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_core_plot_4_sorting_analyzer.py
+      :img-top: /tutorials/core/images/thumb/sphx_glr_plot_4_sorting_analyzer_thumb.png
+      :img-alt: SortingAnalyzer
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">SortingAnalyzer</div>
+         <div class="hover-content">Analyze sorting results with ease</div>
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_core_plot_5_append_concatenate_segments.py
+      :img-top: /tutorials/core/images/thumb/sphx_glr_plot_5_append_concatenate_segments_thumb.png
+      :img-alt: Append/Concatenate segments
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Append and/or concatenate segments</div>
+         <div class="hover-content">Combine segments efficiently</div>
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_core_plot_6_handle_times.py
+      :img-top: /tutorials/core/images/thumb/sphx_glr_plot_6_handle_times_thumb.png
+      :img-alt: Handle time information
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Handle time information</div>
+         <div class="hover-content">Manage and analyze time information</div>
+
+Extractors tutorials
+--------------------
+
+The :py:mod:`spikeinterface.extractors` module is designed to load and save recorded and sorted data, and to handle probe information.
+
+.. grid:: 1 2 2 3
+   :gutter: 2
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_extractors_plot_1_read_various_formats.py
+      :img-top: /tutorials/extractors/images/thumb/sphx_glr_plot_1_read_various_formats_thumb.png
+      :img-alt: Read various formats
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Read various formats</div>
+         <div class="hover-content">Read different recording formats efficiently</div>
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_extractors_plot_2_working_with_unscaled_traces.py
+      :img-top: /tutorials/extractors/images/thumb/sphx_glr_plot_2_working_with_unscaled_traces_thumb.png
+      :img-alt: Unscaled traces
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Working with unscaled traces</div>
+         <div class="hover-content">Learn about managing unscaled traces</div>
+
+Quality metrics tutorial
+------------------------
+
+The :code:`spikeinterface.qualitymetrics` module allows users to compute various quality metrics to assess the goodness of a spike sorting output.
+
+.. grid:: 1 2 2 3
+   :gutter: 2
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_qualitymetrics_plot_3_quality_mertics.py
+      :img-top: /tutorials/qualitymetrics/images/thumb/sphx_glr_plot_3_quality_mertics_thumb.png
+      :img-alt: Quality Metrics
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Quality Metrics</div>
+         <div class="hover-content">Evaluate sorting quality using metrics</div>
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_qualitymetrics_plot_4_curation.py
+      :img-top: /tutorials/qualitymetrics/images/thumb/sphx_glr_plot_4_curation_thumb.png
+      :img-alt: Curation Tutorial
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Curation Tutorial</div>
+         <div class="hover-content">Learn how to curate spike sorting data</div>
+
+Comparison tutorial
+-------------------
+
+The :code:`spikeinterface.comparison` module allows you to compare sorter outputs or benchmark against ground truth.
+
+.. grid:: 1 2 2 3
+   :gutter: 2
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_comparison_plot_5_comparison_sorter_weaknesses.py
+      :img-top: /tutorials/comparison/images/thumb/sphx_glr_plot_5_comparison_sorter_weaknesses_thumb.png
+      :img-alt: Sorter Comparison
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Sorter Comparison</div>
+         <div class="hover-content">Compare sorter outputs and assess weaknesses</div>
+
+Widgets tutorials
+-----------------
+
+The :code:`widgets` module contains several plotting routines (widgets) for visualizing recordings, sorting data, probe layout, and more.
+
+.. grid:: 1 2 2 3
+   :gutter: 2
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_widgets_plot_1_rec_gallery.py
+      :img-top: /tutorials/widgets/images/thumb/sphx_glr_plot_1_rec_gallery_thumb.png
+      :img-alt: Recording Widgets
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">RecordingExtractor Widgets</div>
+         <div class="hover-content">Visualize recordings with widgets</div>
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_widgets_plot_2_sort_gallery.py
+      :img-top: /tutorials/widgets/images/thumb/sphx_glr_plot_2_sort_gallery_thumb.png
+      :img-alt: Sorting Widgets
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">SortingExtractor Widgets</div>
+         <div class="hover-content">Explore sorting data using widgets</div>
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_widgets_plot_3_waveforms_gallery.py
+      :img-top: /tutorials/widgets/images/thumb/sphx_glr_plot_3_waveforms_gallery_thumb.png
+      :img-alt: Waveforms Widgets
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Waveforms Widgets</div>
+         <div class="hover-content">Display waveforms using SpikeInterface</div>
+
+   .. grid-item-card::
+      :link-type: ref
+      :link: sphx_glr_tutorials_widgets_plot_4_peaks_gallery.py
+      :img-top: /tutorials/widgets/images/thumb/sphx_glr_plot_4_peaks_gallery_thumb.png
+      :img-alt: Peaks Widgets
+      :class-card: gallery-card
+
+      .. raw:: html
+
+         <div class="grid-item-card-title default-title">Peaks Widgets</div>
+         <div class="hover-content">Visualize detected peaks</div>
+
+Download All Examples
+---------------------
+
+- :download:`Download all examples in Python source code </tutorials/tutorials_python.zip>`
+- :download:`Download all examples in Jupyter notebooks </tutorials/tutorials_jupyter.zip>`