docs: add the list of component using a directive

docs/_extension/component_directive.py

@@ -0,0 +1,98 @@
+"""A directive to generate the list of all the built-in components.
+
+Read the content of the component folder and generate a list of all the components.
+This list will display some informations about the component and a link to the
+GitHub file.
+"""
+import re
+from pathlib import Path
+from typing import Any, Dict, List
+
+from docutils import nodes
+from sphinx.application import Sphinx
+from sphinx.util import logging
+from sphinx.util.docutils import SphinxDirective
+
+logger = logging.getLogger(__name__)
+
+
+class ComponentListDirective(SphinxDirective):
+    """A directive to generate the list of all the built-in components.
+
+    Read the content of the component folder and generate a list of all the components.
+    This list will display some informations about the component and a link to the
+    GitHub file.
+    """
+
+    name = "component-list"
+    has_content = True
+    required_arguments = 0
+    optional_arguments = 0
+    final_argument_whitespace = True
+
+    def run(self) -> List[nodes.Node]:
+        """Create the list."""
+        # get the list of all th jinja templates
+        # not that to remain compatible with sphinx they are labeled as html files
+        root = Path(__file__).parents[2]
+        component_dir = (
+            root
+            / "src"
+            / "pydata_sphinx_theme"
+            / "theme"
+            / "pydata_sphinx_theme"
+            / "components"
+        )
+        if not component_dir.is_dir():
+            raise FileNotFoundError(
+                f"Could not find component folder at {component_dir}."
+            )
+        components = sorted(component_dir.glob("*.html"))
+
+        # create the list of all the components description using bs4
+        # at the moment we use dummy information
+        docs = []
+        pattern = re.compile(r"(?<={#).*?(?=#})", flags=re.DOTALL)
+        for c in components:
+            comment = pattern.findall(c.read_text())
+            docs.append(comment[0].strip() if comment else "No description available.")
+
+        # get the urls from the github repo latest branch
+        github_url = "https://github.com/pydata/pydata-sphinx-theme/blob/main"
+        urls = [
+            f"{github_url}/{component.relative_to(root)}" for component in components
+        ]
+
+        # build the list of all the components
+        items = []
+        for component, url, doc in zip(components, urls, docs):
+            items.append(
+                nodes.list_item(
+                    "",
+                    nodes.paragraph(
+                        "",
+                        "",
+                        nodes.reference("", component.stem, internal=False, refuri=url),
+                        nodes.Text(f": {doc}"),
+                    ),
+                )
+            )
+
+        return [nodes.bullet_list("", *items)]
+
+
+def setup(app: Sphinx) -> Dict[str, Any]:
+    """Add custom configuration to sphinx app.
+
+    Args:
+        app: the Sphinx application
+
+    Returns:
+        the 2 parallel parameters set to ``True``.
+    """
+    app.add_directive("component-list", ComponentListDirective)
+
+    return {
+        "parallel_read_safe": True,
+        "parallel_write_safe": True,
+    }

docs/conf.py

@@ -34,6 +34,9 @@
     "sphinx_design",
     "sphinx_copybutton",
     "autoapi.extension",
+    # custom extentions
+    "_extension.gallery_directive",
+    "_extension.component_directive",
     # For extension examples and demos
     "myst_parser",
     "ablog",
@@ -44,8 +47,6 @@
     "sphinx_togglebutton",
     "jupyterlite_sphinx",
     "sphinx_favicon",
-    # custom extentions
-    "_extension.gallery_directive",
 ]
 
 # Add any paths that contain templates here, relative to this directory.

docs/user_guide/layout.rst

@@ -517,29 +517,12 @@ Below is a list of built-in templates that you can insert into any section.
 Note that some of them may have CSS rules that assume a specific section (and
 will be named accordingly).
 
-.. refer to files in: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/
-
-- ``breadcrumbs.html``
-- ``copyright.html``
-- ``edit-this-page.html``
-- ``footer-article/prev-next.html``
-- ``icon-links.html``
-- ``last-updated.html``
-- ``navbar-icon-links.html``
-- ``navbar-logo.html``
-- ``navbar-nav.html``
-- ``page-toc.html``
-- ``searchbox.html``
-- ``search-button.html``
-- ``search-field.html``
-- ``sidebar-ethical-ads.html``
-- ``sidebar-nav-bs.html``
-- ``sourcelink.html``
-- ``sphinx-version.html``
-- ``theme-switcher.html``
-- ``version-switcher.html``
-- ``indices.html``
-- ``theme-version.html``
+.. note::
+
+    When adding/changing/overwritting a component, the ".html" suffix is optional.
+    That's why all of them are displayed without it in the following list.
+
+.. component-list::
 
 
 Add your own HTML templates to theme sections

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html

@@ -1,3 +1,4 @@
+{# Displays (and links to) the parent section(s) of the currently viewed page. #}
 {%- block breadcrumbs %}
 {#
   If we have more than 3 parents (excluding the home page) then we remove

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/copyright.html

@@ -1,3 +1,4 @@
+{# Displays the copyright information (which is defined in conf.py). #}
 {% if show_copyright and copyright %}
   <p class="copyright">
     {% if hasdoc('copyright') %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html

@@ -1,3 +1,4 @@
+{# Displays a link to the edit interface of the page source in the specified Version Control System. #}
 {% if sourcename is defined and theme_use_edit_page_button==true and page_source_suffix %}
   {% set src = sourcename.split('.') %}
   <div class="tocsection editthispage">

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html

@@ -1,3 +1,4 @@
+{# Displays icon-links as list items. #}
 {%- macro icon_link_nav_item(url, icon, name, type, attributes='') -%}
   {%- if url | length > 2 %}
         <li class="nav-item">

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/indices.html

@@ -1,3 +1,4 @@
+{# Displays links to the Sphinx-generated indices (genindex, modindex, py-modindex). #}
 <nav class="sidebar-indices-items">
   <p class="sidebar-indices-items__title" role="heading" aria-level="1">{{ _("Indices") }}</p>
   <ul class="indices-link">

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/last-updated.html

@@ -1,3 +1,4 @@
+{# Displays the date and time that the documentation was last built. #}
 {%- if last_updated -%}
 <p class="last-updated">
   {% trans last_updated=last_updated|e %}Last updated on {{ last_updated }}.{% endtrans %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-icon-links.html

@@ -1,3 +1,4 @@
+{# Displays icon-links in the header navbar. #}
 {%- block icon_links -%}
   {%- include "icon-links.html" with context -%}
 {%- endblock icon_links %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-logo.html

@@ -1,3 +1,4 @@
+{# Displays the logo of your documentation site, in the header navbar. #}
 {# Logo link generation -#}
 {% if not theme_logo.get("link") %}
   {% set href = pathto(root_doc) %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-nav.html

@@ -1,3 +1,4 @@
+{# Displays links to the top-level TOCtree elements, in the header navbar. #}
 <nav class="navbar-nav">
   <p class="sidebar-header-items__title"
      role="heading"

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html

@@ -1,3 +1,4 @@
+{# Displays the current page's Table of Contents.  #}
 {% set page_toc = generate_toc_html() %}
 {%- if page_toc | length >= 1 %}
   <div class="page-toc tocsection onthispage">

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/prev-next.html

@@ -1,4 +1,4 @@
-<!-- Previous / next buttons -->
+{# Displays links to the previous and next page in the TOCtree order. #}
 <div class="prev-next-area">
   {%- if prev %}
     <a class="left-prev"

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button-field.html

@@ -1,7 +1,5 @@
-{# Behaves the same as `search-button.html` but looks more like a search field.
-  #
-  # As this function will only work when JavaScript is enabled, we add it through JavaScript.
-  #}
+{# Displays a search field image that opens a search overlay when clicked. #}
+{# As this function will only work when JavaScript is enabled, we add it through JavaScript. #}
  <script>
  document.write(`
    <button class="btn navbar-btn search-button-field search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button.html

@@ -1,7 +1,5 @@
-{# A button that, when clicked, will trigger a search popup overlay.
- #
- # As this function will only work when JavaScript is enabled, we add it through JavaScript.
- #}
+{# Displays a magnifying glass icon that opens a search overlay when clicked. #}
+{# As this function will only work when JavaScript is enabled, we add it through JavaScript. #}
 <script>
 document.write(`
   <button class="btn btn-sm navbar-btn search-button search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-field.html

@@ -1,4 +1,4 @@
-{# A bootstrap-styled field that will direct to the `search.html` page when submitted #}
+{# Displays an interactive search field directly on the page. #}
 <form class="bd-search d-flex align-items-center"
       action="{{ pathto('search') }}"
       method="get">

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/searchbox.html

@@ -1,2 +1,2 @@
-{# div#searchbox hosts the "Hide Search Matches" link #}
+{# An empty container that holds the "Hide Search Matches" button when it's needed. #}
 <div id="searchbox"></div>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sidebar-ethical-ads.html

@@ -1,3 +1,4 @@
+{# For sites hosted on ReadTheDocs, displays "ethical ads". #}
 {% if READTHEDOCS %}
   <div id="ethical-ad-placement"
        class="flat"

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sidebar-nav-bs.html

@@ -1,3 +1,4 @@
+{# 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>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sourcelink.html

@@ -1,3 +1,4 @@
+{# Displays a link to the .rst source of the current page. #}
 {% if show_source and has_source and sourcename %}
   <div class="tocsection sourcelink">
     <a href="{{ pathto('_sources/' + sourcename, true)|e }}">

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sphinx-version.html

@@ -1,3 +1,4 @@
+{# Display the version of Sphinx used to build your documentation. #}
 {% if show_sphinx %}
   <p class="sphinx-version">
     {% trans sphinx_version=sphinx_version|e %}Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}.{% endtrans %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html

@@ -1,5 +1,5 @@
-{# As the theme switcher will only work when JavaScript is enabled, we add it through JavaScript.
- #}
+{# Displays an icon to switch between light mode, dark mode, and auto (use browser's setting). #}
+{# As the theme switcher will only work when JavaScript is enabled, we add it through JavaScript. #}
 <script>
 document.write(`
   <button class="btn btn-sm navbar-btn theme-switch-button" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-version.html

@@ -1,3 +1,4 @@
+{# Displays the version of pydata-sphinx-theme used to build the documentation. #}
 <p class="theme-version">
   {% trans theme_version=theme_version|e %}Built with the <a href="https://pydata-sphinx-theme.readthedocs.io/en/stable/index.html">PyData Sphinx Theme</a> {{ theme_version }}.{% endtrans %}
 </p>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html

@@ -1,3 +1,4 @@
+{# Displays a dropdown box for switching among different versions of your documentation. #}
 {%- set button_id = unique_html_id("pst-version-switcher-button") -%}
 {%- set dropdown_id = unique_html_id("pst-version-switcher-list") -%}
 {# As the version switcher will only work when JavaScript is enabled, we add it through JavaScript. #}