Major Website Update

.gitignore

@@ -11,4 +11,5 @@ examples/climate-processes-tobac_example_data-b3e69ee
 .ipynb_checkpoints
 .DS_Store
 *.egg-info
+doc/api/generated/*
 

doc/_static/custom.css

@@ -0,0 +1,216 @@
+/* Hero */
+
+
+#hero {
+  display: flex;
+  flex-direction: row;
+  min-height: min(calc(75vh), 1000px); /* Make hero fill up most of the page on load */
+}
+#hero-left {
+  max-width: 476px;
+  width: 40%;
+  margin: auto 0;
+}
+#hero-right {
+  min-width: 476px;
+  width: 60%;
+  margin: auto 0;
+}
+
+.homepage-button-container {
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+.homepage-button-container-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.homepage-button-container a {
+  transition: 0.1s;
+}
+.homepage-button {
+  min-width: 142px;
+  padding: 0.5em 2em;
+  border: 1px solid var(--pst-color-primary);
+  border-radius: 4px;
+  margin: 1em 0.5em 0.5em 0;
+}
+.primary-button {
+  background-color: var(--pst-color-primary);
+  color: var(--pst-color-background) !important;
+}
+.secondary-button {
+  background-color: var(--pst-color-background);
+  color: var(--pst-color-primary);
+}
+.homepage-button:hover {
+  text-decoration: none;
+  background-color: var(--pst-color-secondary);
+  color: var(--pst-color-background);
+  border: 1px solid var(--pst-color-secondary);
+}
+.homepage-button-link {
+  text-decoration: underline;
+}
+
+/* Key Features */
+#key-features .sd-card-body {
+  display: flex;
+}
+#key-features .sd-card img {
+  width: 140px;
+  height: 140px;
+}
+#key-features .sd-card-body .key-features-text {
+  min-width: 70%;
+  padding: 20px 10px;
+}
+
+/* Sponsors */
+#sponsors-and-institutional-partners p {
+  text-align: center;
+}
+#sponsors-and-institutional-partners img {
+  max-width: 200px;
+}
+
+/* Support ArviZ */
+#support-arviz .sd-col {
+  margin-bottom: 3rem;
+}
+#support-arviz p {
+  text-align: center;
+}
+.support-arviz-img-merch img {
+  height: 160px;
+}
+.support-arviz-img-donate img {
+  display: block;
+  width: 100%;
+  padding: 60px 40px 20px;
+}
+.support-arviz-img-donate-responsive img {
+  display: none;
+  margin: auto;
+  width: 80%;
+  min-width: 0px;
+  padding: 20px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  #hero {
+    display: block;
+  }
+  #hero-left,
+  #hero-right {
+    width: 100%;
+    min-width: 0px;
+  }
+  .support-arviz-img-donate img {
+    display: none;
+  }
+  .support-arviz-img-donate-responsive img {
+    display: block;
+  }
+}
+
+/* -------------------- HOMEPAGE + EXAMPLE GALLERY -------------------- */
+
+/* Homepage - grid layout */
+.home-flex-grid {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px 0px 40px;
+}
+
+/* Homepage + Example Gallery Body - Set dimensions */
+.home-img-plot,
+.bd-content div.sd-card.example-gallery .sd-card-body,
+.home-img-plot-overlay,
+.example-img-plot-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  padding: 10px;
+}
+.home-img-plot,
+.home-img-plot-overlay {
+  width: 235px;
+  height: 130px;
+}
+.bd-content div.sd-card.example-gallery .sd-card-body,
+.example-img-plot-overlay {
+  width: 100%;
+  height: 150px;
+}
+.home-img-plot img,
+.bd-content div.sd-card.example-gallery .sd-card-body img {
+  /* Images keep aspect ratio and fit in container */
+  /* To make images stretch/fill container, change to min-width */
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* Homepage + Example Gallery Body - Set color and hover */
+.home-img-plot.img-thumbnail,
+.bd-content div.sd-card.example-gallery .sd-card-body {
+  background-color: var(--pst-color-plot-background);  /* Same as img-thumbnail from pydata css, adjusted for dark mode */
+}
+.home-img-plot-overlay,
+.example-img-plot-overlay,
+.bd-content div.sd-card.example-gallery .sd-card-body {
+  border: 1px solid #dee2e6;  /* Same as img-thumbnail from pydata css */
+  border-radius: 0.25rem;  /* Same as img-thumbnail from pydata css */
+}
+.home-img-plot-overlay,
+.example-img-plot-overlay,
+.example-img-plot-overlay p.sd-card-text {
+  background: var(--pst-color-primary);
+  position: absolute;
+  color: var(--pst-color-background);
+  opacity: 0;
+  transition: .2s ease;
+  text-align: center;
+  padding: 10px;
+  z-index: 998;  /* Make sure overlay is above image...this is here to handle dark mode */
+}
+.home-img-plot-overlay:hover,
+.bd-content div.sd-card.example-gallery:hover .example-img-plot-overlay,
+.example-img-plot-overlay p.sd-card-text {
+  opacity: 90%;
+}
+
+/* Example Gallery Body - Set syntax highlighting for code on hover */
+.example-img-plot-overlay .sd-card-text code.code {
+  background-color: var(--pst-color-background);
+}
+.example-img-plot-overlay .sd-card-text .code span.pre {
+  color: var(--pst-color-primary);
+  font-weight: 700;
+}
+
+/* Example Gallery Footer - Plot titles goes here */
+.example-gallery .sd-card-footer {
+  height: 40px;
+  padding: 5px;
+  border-top: none !important;
+}
+.example-gallery .sd-card-footer p.sd-card-text {
+  color: var(--pst-color-text-muted);
+  font-size: 1rem;  /* This is font size for plot titles (below the chart) */
+  font-weight: 700;
+}
+.sd-card.example-gallery:hover .sd-card-footer p.sd-card-text {
+  color: var(--pst-color-primary);  /* Change text color on hover over card */
+}
+
+/* Overlapping */
+.example-gallery a.sd-stretched-link.reference.external {
+  z-index: 999;  /* Countermeasure where z-index = 998 */
+}

doc/_static/theme_overrides.css

@@ -16,3 +16,10 @@
     }
 
 }
+
+html[data-theme="dark"] {
+    /* tobac primary colors: #A2C2E5, #4D80BE, F6D94F*/
+    --pst-color-primary: #4D80BE;
+    --pst-color-secondary: #F6D94F;
+}
+

doc/_templates/autosummary/module.rst

@@ -0,0 +1,29 @@
+{{ fullname | escape | underline }}
+
+.. rubric:: Description
+
+.. automodule:: {{ fullname }}
+
+.. currentmodule:: {{ fullname }}
+
+{% if classes %}
+.. rubric:: Classes
+
+.. autosummary::
+    :toctree: .
+    {% for class in classes %}
+    {{ class }}
+    {% endfor %}
+
+{% endif %}
+
+{% if functions %}
+.. rubric:: Functions
+
+.. autosummary::
+    :toctree: .
+    {% for function in functions %}
+    {{ function }}
+    {% endfor %}
+
+{% endif %}

doc/api/index.rst

@@ -0,0 +1,25 @@
+.. _API-Reference:
+
+API Reference
+=============
+
+This guide provides documentation for all modules, function, methods,
+and classes within *tobac* for those in the public API.
+
+Documentation is broken down by directory and module.
+
+.. currentmodule:: tobac
+
+.. autosummary::
+   :toctree: generated/
+
+   feature_detection
+   tracking
+   segmentation
+   merge_split
+   utils.bulk_statistics
+   utils.general
+   plotting
+   analysis.cell_analysis
+   analysis.feature_analysis
+   analysis.spatial

doc/conf.py

@@ -3,14 +3,15 @@
 """
 
 # This is the standard readthedocs theme.
-import sphinx_rtd_theme
+import pydata_sphinx_theme
 import sys, os
 
 sys.path.insert(0, os.path.abspath("extensions"))
 
 # What Sphinx extensions do we need
 extensions = [
     "sphinx.ext.autodoc",
+    "sphinx.ext.autosummary",
     "sphinx.ext.doctest",
     "sphinx.ext.todo",
     "sphinx.ext.coverage",
@@ -20,13 +21,52 @@
     "sphinx.ext.napoleon",
     "nbsphinx",
     "sphinx_gallery.load_style",
+    "myst_parser",
+    "sphinx_design",
 ]
 
 
-html_theme = "sphinx_rtd_theme"
+html_theme = "pydata_sphinx_theme"
 
 html_static_path = ["_static"]
+html_css_files = ["custom.css", "theme_overrides.css"]
+
 exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
+source_suffix = {".rst": "restructuredtext", ".md": "restructuredtext"}
+myst_enable_extensions = ["colon_fence"]
+
+html_context = {
+    "api_dir": "api/generated",
+}
+
+
+# Generate the api documentation when building
+autoclass_content = "both"
+
+autosummary_generate = True
+autosummary_imported_members = True
+autodoc_typehints = "description"
+
+templates_path = ["_templates"]
+
+
+html_theme_options = {
+    "logo": {
+        "image_light": "images/tobac-logo-colors.png",
+        "image_dark": "images/tobac-logo-colors.png",
+    },
+    # https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/header-links.html#fontawesome-icons
+    "icon_links": [
+        {
+            "name": "GitHub",
+            "url": "https://github.com/tobac-project/tobac",
+            "icon": "fa-brands fa-github",
+        },
+    ],
+    "navbar_start": ["navbar-logo"],
+    "navbar_align": "content",
+    "header_links_before_dropdown": 5,
+}
 
 
 project = "tobac"
@@ -40,6 +80,7 @@
 # Include our custom CSS (currently for special table config)
 def setup(app):
     app.add_css_file("theme_overrides.css")
+    app.add_css_file("custom.css")
 
 
 # This should include all modules used in tobac. These are dummy imports,

doc/code_reviews.rst → doc/developer_guide/code_reviews.rst

@@ -1,3 +1,5 @@
+.. _code-reviews:
+
 Code reviews
 ------------------
 

doc/code_structure.rst → doc/developer_guide/code_structure.rst

@@ -1,4 +1,6 @@
-Code structure and key design concepts 
+.. _code_structure:
+
+Code structure and key design concepts
 --------------------------------------
 
 ==================================