Add gallery

README.rst

@@ -20,6 +20,7 @@ Checkout our examples
 =====================
 
 Below is a gallery showing random examples of what UltraPlot can do, for more examples checkout our extensive `docs <https://ultraplot.readthedocs.io>`_.
+View the full gallery here: `Gallery <https://ultraplot.readthedocs.io/en/latest/gallery/index.html>`_.
 
 .. list-table::
    :widths: 33 33 33

docs/_scripts/fetch_releases.py

@@ -20,6 +20,8 @@ def format_release_body(text):
     # Convert Markdown to RST using m2r2
     formatted_text = convert(text)
 
+    formatted_text = _downgrade_headings(formatted_text)
+
     # Convert PR references (remove "by @user in ..." but keep the link)
     formatted_text = re.sub(
         r" by @\w+ in (https://github.com/[^\s]+)", r" (\1)", formatted_text
@@ -28,6 +30,35 @@ def format_release_body(text):
     return formatted_text.strip()
 
 
+def _downgrade_headings(text):
+    """
+    Downgrade all heading levels by one to avoid H1/H2 collisions in the TOC.
+    """
+    adornment_map = {
+        "=": "-",
+        "-": "~",
+        "~": "^",
+        "^": '"',
+        '"': "'",
+        "'": "`",
+    }
+    lines = text.splitlines()
+    for idx in range(len(lines) - 1):
+        title = lines[idx]
+        underline = lines[idx + 1]
+        if not title.strip():
+            continue
+        if not underline:
+            continue
+        char = underline[0]
+        if char not in adornment_map:
+            continue
+        if underline.strip(char):
+            continue
+        lines[idx + 1] = adornment_map[char] * len(underline)
+    return "\n".join(lines)
+
+
 def fetch_all_releases():
     """Fetches all GitHub releases across multiple pages."""
     releases = []

docs/_static/custom.css

@@ -136,6 +136,22 @@
     color: #606060;
 }
 
+.right-toc-subtoggle {
+    background: none;
+    border: none;
+    color: #2980b9;
+    cursor: pointer;
+    font-size: 0.9em;
+    margin-right: 0.3em;
+    padding: 0;
+}
+
+.right-toc-sublist {
+    list-style-type: none;
+    margin: 0.2em 0 0.4em 0;
+    padding-left: 1.2em;
+}
+
 /* Active TOC item highlighting */
 .right-toc-link.active {
     background-color: rgba(41, 128, 185, 0.15);
@@ -200,6 +216,183 @@
     max-height: calc(100vh - 150px);
 }
 
+.gallery-filter-controls {
+    margin: 1rem 0 2rem;
+    padding: 1rem 1.2rem;
+    border-radius: 16px;
+    background: linear-gradient(
+        135deg,
+        rgba(41, 128, 185, 0.08),
+        rgba(41, 128, 185, 0.02)
+    );
+    box-shadow:
+        0 10px 24px rgba(41, 128, 185, 0.18),
+        0 2px 6px rgba(41, 128, 185, 0.08);
+}
+
+.gallery-filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.gallery-filter-button {
+    border: 1px solid #c5c5c5;
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0.35rem 0.85rem;
+    border-radius: 999px;
+    font-size: 0.9em;
+    cursor: pointer;
+    transition:
+        background-color 0.2s ease,
+        color 0.2s ease,
+        border-color 0.2s ease;
+}
+
+.gallery-filter-button.is-active {
+    background-color: #2980b9;
+    border-color: #2980b9;
+    color: #ffffff;
+}
+
+.gallery-section-hidden {
+    display: none;
+}
+
+body.gallery-filter-active .sphx-glr-thumbnails:not(.gallery-unified) {
+    display: none;
+}
+
+body.gallery-filter-active .gallery-section-header,
+body.gallery-filter-active .gallery-section-description {
+    display: none;
+}
+
+body.whats_new .wy-menu-vertical li.toctree-l1.current > ul {
+    display: none;
+}
+
+body.whats_new .wy-menu-vertical li.toctree-l2,
+body.whats_new .wy-menu-vertical li.toctree-l3,
+body.whats_new .wy-menu-vertical li.toctree-l4 {
+    display: none;
+}
+
+body.whats_new .wy-menu-vertical a[href^="#"] {
+    display: none;
+}
+
+body.whats_new .wy-menu-vertical li:has(> a[href^="#"]) {
+    display: none;
+}
+
+/* Hide gallery subsections from left TOC - more specific selector */
+body.wy-body-for-nav .wy-menu-vertical .wy-menu-vertical-2 a[href="#layouts"],
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    a[href="#legends-and-colorbars"],
+body.wy-body-for-nav .wy-menu-vertical .wy-menu-vertical-2 a[href="#geoaxes"],
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    a[href="#plot-types"],
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    a[href="#colors-and-cycles"] {
+    display: none !important;
+}
+
+/* Also hide the nested lists under these sections - more specific selector */
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    a[href="#layouts"]
+    + ul,
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    a[href="#legends-and-colorbars"]
+    + ul,
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    a[href="#geoaxes"]
+    + ul,
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    a[href="#plot-types"]
+    + ul,
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    a[href="#colors-and-cycles"]
+    + ul {
+    display: none !important;
+}
+
+/* Hide the parent list items as well */
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    li[class*="toctree-l1"]:has(a[href="#layouts"]),
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    li[class*="toctree-l1"]:has(a[href="#legends-and-colorbars"]),
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    li[class*="toctree-l1"]:has(a[href="#geoaxes"]),
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    li[class*="toctree-l1"]:has(a[href="#plot-types"]),
+body.wy-body-for-nav
+    .wy-menu-vertical
+    .wy-menu-vertical-2
+    li[class*="toctree-l1"]:has(a[href="#colors-and-cycles"]) {
+    display: none !important;
+}
+
+/* Hide the section containers themselves */
+.gallery-section {
+    margin: 1.5em 0;
+}
+
+section#layouts > h1,
+section#layouts > p,
+section#legends-and-colorbars > h1,
+section#legends-and-colorbars > p,
+section#geoaxes > h1,
+section#geoaxes > p,
+section#plot-types > h1,
+section#plot-types > p,
+section#colors-and-cycles > h1,
+section#colors-and-cycles > p {
+    display: none;
+}
+
+/* Style for gallery section headers */
+.gallery-section-header {
+    font-size: 1.5em;
+    font-weight: bold;
+    display: block;
+    margin: 1.5em 0 0.5em 0;
+    border-bottom: 2px solid #2980b9;
+    padding-bottom: 0.3em;
+    color: #2980b9;
+}
+
+.gallery-section-description {
+    margin: 0 0 1em 0;
+    color: #555;
+}
+
 /* Responsive adjustments */
 @media screen and (max-width: 1200px) {
     .right-toc {