Move download links to top of examples

docs/_static/custom.css

@@ -1,96 +1,121 @@
-/*
-Sphinx-Gallery has compatible CSS to fix default sphinx themes
-Tested for Sphinx 1.3.1 for all themes: default, alabaster, sphinxdoc,
-scrolls, agogo, traditional, nature, haiku, pyramid
-Tested for Read the Docs theme 0.1.7 */
-
-html[data-theme="light"] div.sphx-glr-download a {
-  background-color: rgb(255, 255, 255) !important;
-  background-image: linear-gradient(to bottom, rgb(255, 255, 255), #ffffff) !important;
+/* ── Buttons for homepage and gallery ───────────────────────────────────── */
+
+.button-primary,
+.button-alt,
+.napari-gallery-downloads .sphx-glr-download a {
+  background-image: none !important;
   border-radius: 4px;
-  border: 1px solid #ffffff !important;
-  color: #000;
-  display: inline-block;
-  font-weight: bold;
-  padding: 1ex;
   text-align: center;
+  text-decoration: none;
 }
 
-html[data-theme="light"] div.sphx-glr-download a:hover {
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 1px 5px rgba(0, 0, 0, 0.25);
-  text-decoration: none;
-  background-image: none;
-  background-color: #ffffff !important;
+/* makes homepage button take up width of column */
+.button-primary {
+  display: block;
 }
 
-html[data-theme="dark"] div.sphx-glr-download a {
-  background-color: #222832 !important;
-  background-image: linear-gradient(to bottom, #222832, #222832) !important;
-  border-radius: 4px;
-  border: 1px solid #222832 !important;
-  color: #000;
+/* Allow border override to show through on example buttons */
+.napari-gallery-downloads .sphx-glr-download a {
+  border: 1px solid transparent;
   display: inline-block;
-  font-weight: bold;
-  padding: 1ex;
-  text-align: center;
+  padding: 0.45rem 0.8rem;
 }
 
-html[data-theme="dark"] div.sphx-glr-download a:hover {
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 1px 5px rgba(0, 0, 0, 0.25);
-  text-decoration: none;
-  background-image: none;
-  background-color: #222832 !important;
+/* force sphinx-gallery download code to inherit text color */
+.napari-gallery-downloads .sphx-glr-download a code.download {
+  color: inherit !important;
 }
 
-/* Version warning banner color */
-#bd-header-version-warning {
-  background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 30%);
+/* horizontally align and reduce lower margin of container */
+.napari-gallery-downloads {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0 0 0.35rem;
 }
 
-#bd-header-version-warning .pst-button-link-to-stable-version {
-  background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 0%);
-  border-color: var(--pst-color-secondary-bg);
-  color: var(--napari-color-text-base);
-  font-weight: 700;
+/* remove spacing around download buttons */
+.napari-gallery-downloads .sphx-glr-download {
+  margin: 0;
 }
 
-#bd-header-version-warning .pst-button-link-to-stable-version:hover {
-  background-color: var(--pst-color-secondary-bg);
-  border-color: var(--pst-color-secondary-bg);
-  color: var(--napari-color-text-base);
-  font-weight: 700;
+/* Remove the sphinx-gallery downloads note and buttons */
+.sphx-glr-download-link-note,
+.sphx-glr-download-jupyter,
+.sphx-glr-download-python,
+.sphx-glr-download-zip {
+  display: none;
 }
 
-/* ── Homepage accent cards ───────────────────────────────────────────
-   Install, Download cards with theme-aware napari blue.
-   sphinx-design marks every property !important, so we must too.     */
+html[data-theme="light"] .button-primary,
+html[data-theme="light"] .napari-gallery-downloads .sphx-glr-download a {
+  background-color: var(--napari-primary-blue) !important;
+  border-color: var(--napari-primary-blue) !important;
+  color: var(--napari-color-text-base) !important;
+}
 
-.homepage-button {
-  display: block;
+html[data-theme="dark"] .button-primary,
+html[data-theme="dark"] .napari-gallery-downloads .sphx-glr-download a {
+  background-color: var(--napari-purple) !important;
+  border-color: var(--napari-purple) !important;
+  color: var(--napari-color-text-base) !important;
 }
 
-html[data-theme="light"] .homepage-button {
-  background-color: var(--napari-primary-blue) !important;
+html[data-theme="light"] .button-primary:hover,
+html[data-theme="light"] .napari-gallery-downloads .sphx-glr-download a:hover {
+  background-color: color-mix(in srgb, var(--napari-primary-blue), transparent 25%) !important;
+  text-decoration: underline;
+}
+
+html[data-theme="dark"] .button-primary:hover,
+html[data-theme="dark"] .napari-gallery-downloads .sphx-glr-download a:hover {
+  background-color: color-mix(in srgb, var(--napari-purple), transparent 25%) !important;
+  text-decoration: underline;
+}
+
+html[data-theme="light"] .button-alt {
+  background-color: var(--pst-color-background) !important;
   border-color: var(--napari-primary-blue) !important;
   color: var(--napari-color-text-base) !important;
 }
 
-html[data-theme="dark"] .homepage-button {
-  background-color: var(--napari-purple) !important;
+html[data-theme="dark"] .button-alt {
+  background-color: var(--pst-color-background) !important;
   border-color: var(--napari-purple) !important;
   color: var(--napari-color-text-base) !important;
 }
 
-html[data-theme="light"] .homepage-button:hover {
+html[data-theme="light"] .button-alt:hover {
+  background-color: var(--pst-color-background) !important;
+  border-color: var(--napari-primary-blue) !important;
+  color: var(--napari-color-text-base) !important;
   text-decoration: underline;
-  background-color: color-mix(in srgb, var(--napari-primary-blue), transparent 25%) !important;
 }
 
-html[data-theme="dark"] .homepage-button:hover {
+html[data-theme="dark"] .button-alt:hover {
+  background-color: var(--pst-color-background) !important;
+  border-color: var(--napari-purple) !important;
+  color: var(--napari-color-text-base) !important;
   text-decoration: underline;
-  background-color: color-mix(in srgb, var(--napari-purple), transparent 25%) !important;
+}
+
+/* Version warning banner color */
+#bd-header-version-warning {
+  background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 30%);
+}
+
+#bd-header-version-warning .pst-button-link-to-stable-version {
+  background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 0%);
+  border-color: var(--pst-color-secondary-bg);
+  color: var(--napari-color-text-base);
+  font-weight: 700;
+}
+
+#bd-header-version-warning .pst-button-link-to-stable-version:hover {
+  background-color: var(--pst-color-secondary-bg);
+  border-color: var(--pst-color-secondary-bg);
+  color: var(--napari-color-text-base);
+  font-weight: 700;
 }
 
 /* ── Homepage quicklinks (icon columns) ──────────────────────────────── */
@@ -223,8 +248,3 @@ html[data-theme="dark"] .homepage-quicklinks a {
 html[data-theme="dark"] img#homepage-featured-example-image {
   background-color: var(--pst-color-background) !important;
 }
-
-.homepage-example-button:hover {
-  background-color: var(--pst-color-background) !important;
-  color: var(--napari-color-text-base) !important;
-}

docs/conf.py

@@ -396,22 +396,57 @@ def napari_scraper(block, block_vars, gallery_conf):
     return scrapers.figure_rst(img_paths, gallery_conf['src_dir'])
 
 
+GALLERY_TITLE_RE = re.compile(r'^.+\n=+\n', re.MULTILINE)
+
+
+def add_gallery_download_buttons(app, docname, source):
+    """Add compact top-of-page download links to generated gallery examples.
+
+    The title of the example is used to determine where to insert the download links,
+    which are only added to generated gallery examples.
+    The links are added after the title.
+    """
+    if not docname.startswith('gallery/'):
+        return
+    if docname.endswith('/index') or docname.endswith('sg_execution_times'):
+        return
+
+    content = source[0]
+    if 'THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.' not in content:
+        return
+
+    example_name = Path(docname).name
+    title_match = GALLERY_TITLE_RE.search(content)
+    if title_match is None:
+        return
+
+    download_block = f"""
+.. only:: html
+
+    .. container:: napari-gallery-downloads
+
+        .. container:: sphx-glr-download
+
+            :download:`Python (.py) <{example_name}.py>`
+
+        .. container:: sphx-glr-download
+
+            :download:`Notebook (.ipynb) <{example_name}.ipynb>`
+"""
+    source[0] = (
+        content[: title_match.end()]
+        + download_block
+        + content[title_match.end() :]
+    )
+
+
 gen_rst.EXAMPLE_HEADER = """
 .. DO NOT EDIT.
 .. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
 .. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
 .. "{0}"
 .. LINE NUMBERS ARE GIVEN BELOW.
 
-.. only:: html
-
-    .. note::
-        :class: sphx-glr-download-link-note
-
-        :ref:`Go to the end <sphx_glr_download_{1}>`
-        to download the full example as a Python script or as a
-        Jupyter notebook.{2}
-
 .. rst-class:: sphx-glr-example-title
 
 .. _sphx_glr_{1}:
@@ -549,6 +584,7 @@ def setup(app):
     """
     app.registry.source_suffix.pop('.ipynb', None)
     app.connect('source-read', add_google_calendar_secrets)
+    app.connect('source-read', add_gallery_download_buttons)
     app.connect('linkcheck-process-uri', rewrite_github_anchor)
     app.connect('autodoc-process-docstring', qt_docstrings)
 

docs/gallery.md

@@ -4,9 +4,17 @@
 
 Examples of napari usage.
 
-All examples in this gallery can be downloaded as Python scripts or Jupyter
-notebooks to be executed locally. Check out [](launch-jupyter) for more details
-on using napari in Jupyter notebooks.
+Each example page includes downloads for both the source `.py` file and a
+generated Jupyter notebook. If you download the Python script, you can run it
+with `napari path/to/my_example.py` or drag the `.py` file onto a running napari viewer
+to execute it there. Some examples may require additional dependencies beyond
+napari itself, so be sure to check the example's source code for any additional
+requirements if you see an error when trying to run it.
+Check out [](launch-jupyter) for more details on using
+napari in Jupyter notebooks.
+
+Use the tag index below to browse examples by topic, or jump straight into the
+gallery grid.
 
 ```{note}
 

docs/index.md

@@ -64,7 +64,7 @@ theme:
 :color: primary
 :ref-type: myst
 :shadow:
-:class: homepage-button
+:class: button-primary
 
 {material-regular}`arrow_forward;1.2em` **Get started**
 ```
@@ -133,8 +133,8 @@ A standalone installer for when you want napari without setting up Python first.
       Display an image in napari and explore the viewer with a minimal example.
     </p>
     <div class="homepage-featured-example__actions">
-      <a class="sd-btn sd-btn-primary sd-shadow-sm homepage-button" href="gallery.html">Examples gallery</a>
-      <button class="sd-btn sd-btn-outline-primary sd-shadow-sm homepage-example-button" id="homepage-featured-example-reroll" type="button">Show another example</button>
+      <a class="sd-btn sd-btn-primary sd-shadow-sm button-primary" href="gallery.html">Examples gallery</a>
+      <button class="sd-btn sd-btn-outline-primary sd-shadow-sm button-alt" id="homepage-featured-example-reroll" type="button">Show another example</button>
     </div>
   </div>
   <a class="homepage-featured-example__media" href="gallery/add_image.html" aria-label="View the featured napari example">