Fix css glitch and navigation in docs (#2856)

* fix css and navigation

* update changelog

* format backend

* fix css glitch in 3.14 docs

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

CHANGELOG.md

@@ -40,6 +40,7 @@ No changes to highlight.
 
 ## Full Changelog:
 * Fixed importing gradio can cause PIL.Image.registered_extensions() to break by `[@aliencaocao](https://github.com/aliencaocao)` in `[PR 2846](https://github.com/gradio-app/gradio/pull/2846)`
+* Fix css glitch and navigation in docs by [@aliabd](https://github.com/aliabd) in [PR 2856](https://github.com/gradio-app/gradio/pull/2856)
 * Added the ability to set `x_lim`, `y_lim` and legend positions for `gr.ScatterPlot` by  [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2807](https://github.com/gradio-app/gradio/pull/2807)  
 * Remove footers and min-height the correct way by [@aliabd](https://github.com/aliabd) in [PR 2860](https://github.com/gradio-app/gradio/pull/2860)
 

gradio/blocks.py

@@ -354,15 +354,17 @@ class class_or_instancemethod(classmethod):
         return descr_get(instance, type_)
 
 
+set_documentation_group("component-helpers")
+
+
 @document()
 def update(**kwargs) -> dict:
     """
-    Updates component properties.
+    Updates component properties. When a function passed into a Gradio Interface or a Blocks events returns a typical value, it updates the value of the output component. But it is also possible to update the properties of an output component (such as the number of lines of a `Textbox` or the visibility of an `Image`) by returning the component's `update()` function, which takes as parameters any of the constructor parameters for that component.
     This is a shorthand for using the update method on a component.
     For example, rather than using gr.Number.update(...) you can just use gr.update(...).
     Note that your editor's autocompletion will suggest proper parameters
     if you use the update method on the component.
-
     Demos: blocks_essay, blocks_update, blocks_essay_update
 
     Parameters:
@@ -397,6 +399,9 @@ def update(**kwargs) -> dict:
     return kwargs
 
 
+set_documentation_group("blocks")
+
+
 def skip() -> dict:
     return update()
 

gradio/routes.py

@@ -537,7 +537,6 @@ class Request:
     query parameters and other information about the request from within the prediction
     function. The class is a thin wrapper around the fastapi.Request class. Attributes
     of this class include: `headers`, `client`, `query_params`, and `path_params`,
-
     Example:
         import gradio as gr
         def echo(name, request: gr.Request):
@@ -551,6 +550,8 @@ class Request:
         """
         Can be instantiated with either a fastapi.Request or by manually passing in
         attributes (needed for websocket-based queueing).
+        Parameters:
+            request: A fastapi.Request
         """
         self.request: fastapi.Request = request
         self.kwargs: Dict = kwargs

website/homepage/src/docs/template.html

@@ -120,7 +120,6 @@
       {% for component in docs["component-helpers"] %}
         <a class="px-4 block thin-link" href="#{{ component['name'].lower() }}">{{ component['name'] }}</a>
       {% endfor %}
-      <a class="thin-link px-4 block" href="#update">Update</a>
       <a class="link px-4 my-2 block" href="#routes">Routes
         {% for component in docs["routes"] %}
           <a class="px-4 block thin-link" href="#{{ component['name'].lower() }}">{{ component['name'] }}</a>
@@ -247,28 +246,14 @@
             add common functionality to your app without having to repeatedly create the same components and event listeners.
           </p>
         </div>
-        {% for component in docs["component-helpers"] %}
-          {% with obj=component, is_class=True, parent="gradio" %}
-            {% include "docs/obj_doc_template.html" %}
-          {% endwith %}
-        {% endfor %}
-      </section>
-      <section id="update" class="pt-2 flex flex-col gap-10">
-          <h3 class="text-3xl font-light my-4" id="update-section-header">Update</h3>
-          <p class="mb-12 text-lg">When a function passed into a Gradio Interface or 
-            a Blocks events returns a typical value, it updates the value of the 
-            output component. But it is also possible to update the <em>properties</em> 
-            of an output component (such as the number of lines of a `Textbox` or 
-            the visibility of an `Image`) by returning the component's `update()` function, 
-            which takes as parameters any of the constructor parameters for that component.
-            Here's an example:
-          </p>
-          <div class="flex flex-col gap-10">
-            {% with obj=find_cls("update"), parent="gradio" %}
+        <section class="pt-2">
+          {% for component in docs["component-helpers"] %}
+            {% with obj=component, is_class=True, parent="gradio" %}
               {% include "docs/obj_doc_template.html" %}
             {% endwith %}
-          </div>
+          {% endfor %}
         </section>
+      </section>
         <section id="routes" class="pt-2 flex flex-col gap-10">
           <div>
             <h2 id="routes-header"
@@ -342,8 +327,8 @@
       mainNavLinks.forEach(link => {
         let section = document.querySelector(link.hash);
         if (
-          section.offsetTop <= fromTop*1.01 &&
-          section.offsetTop + section.offsetHeight > fromTop*1.01
+          section.offsetTop <= fromTop &&
+          section.offsetTop + section.offsetHeight > fromTop
         ) {
           link.classList.add("current-nav-link");
         } else {
@@ -361,8 +346,8 @@
         let section = document.querySelector(hash);
 
         if (
-          section.offsetTop <= fromTop*1.01 &&
-          section.offsetTop + section.offsetHeight > fromTop*1.01
+          section.offsetTop <= fromTop &&
+          section.offsetTop + section.offsetHeight > fromTop
         ) {
           subLinkDiv.classList.remove("hidden");
         } else {

website/homepage/src/docs/v3.14.0_template.html

@@ -36994,7 +36994,7 @@ if __name__ == "__main__":
           </p>
           <div class="flex flex-col gap-10">
             
-              
+<section class="pt-2">
 <div class="obj" id="update">
 
 
@@ -37258,6 +37258,7 @@ gr.Interface(
   
   
 </div>
+</section>              
 
 <script>
   function load_gradio(FILE_URL) {