fix reference links for documentation pages with multiple elements (fixes #2495)

website/documentation/reference.py

@@ -6,10 +6,10 @@ import docutils.core
 
 from nicegui import binding, ui
 
-from ..style import subheading
+from ..style import create_anchor_name, subheading
 
 
-def generate_class_doc(class_obj: type) -> None:
+def generate_class_doc(class_obj: type, part_title: str) -> None:
     """Generate documentation for a class including all its methods and properties."""
     mro = [base for base in class_obj.__mro__ if base.__module__.startswith('nicegui.')]
     ancestors = mro[1:]
@@ -22,14 +22,14 @@ def generate_class_doc(class_obj: type) -> None:
     methods = {name: attribute for name, attribute in attributes.items() if callable(attribute)}
 
     if properties:
-        subheading('Properties')
+        subheading('Properties', anchor_name=create_anchor_name(part_title.replace('Reference', 'Properties')))
         with ui.column().classes('gap-2'):
             for name, property_ in sorted(properties.items()):
                 ui.markdown(f'**`{name}`**`{_generate_property_signature_description(property_)}`')
                 if property_.__doc__:
                     _render_docstring(property_.__doc__).classes('ml-8')
     if methods:
-        subheading('Methods')
+        subheading('Methods', anchor_name=create_anchor_name(part_title.replace('Reference', 'Methods')))
         with ui.column().classes('gap-2'):
             for name, method in sorted(methods.items()):
                 decorator = ''
@@ -41,7 +41,7 @@ def generate_class_doc(class_obj: type) -> None:
                 if method.__doc__:
                     _render_docstring(method.__doc__).classes('ml-8')
     if ancestors:
-        subheading('Inherited from')
+        subheading('Inheritance', anchor_name=create_anchor_name(part_title.replace('Reference', 'Inheritance')))
         ui.markdown('\n'.join(f'- `{ancestor.__name__}`' for ancestor in ancestors))
 
 

website/documentation/rendering.py

@@ -50,7 +50,7 @@ def render_page(documentation: DocumentationPage, *, with_menu: bool = True) ->
             if part.demo:
                 demo(part.demo.function, lazy=part.demo.lazy, tab=part.demo.tab)
             if part.reference:
-                generate_class_doc(part.reference)
+                generate_class_doc(part.reference, part.title)
             if part.link:
                 ui.markdown(f'See [more...]({part.link})').classes('bold-links arrow-links')
     with ui.column().classes('w-full p-8 lg:p-16 max-w-[1250px] mx-auto'):

website/style.py

@@ -61,9 +61,9 @@ def side_menu() -> ui.left_drawer:
         .style('height: calc(100% + 20px) !important')
 
 
-def subheading(text: str, *, link: Optional[str] = None, major: bool = False) -> None:
+def subheading(text: str, *, link: Optional[str] = None, major: bool = False, anchor_name: Optional[str] = None) -> None:
     """Render a subheading with an anchor that can be linked to with a hash."""
-    name = create_anchor_name(text)
+    name = anchor_name or create_anchor_name(text)
     ui.html(f'<div id="{name}"></div>').style('position: relative; top: -90px')
     with ui.row().classes('gap-2 items-center relative'):
         classes = 'text-3xl' if major else 'text-2xl'