docs: ui improvements (#6317)

* use-yarn-not-npm

* swap-api-menu-items

* fix-errors

* force-sidebar-open

* increase-custom-css-values

DEVELOPMENT.md

@@ -168,8 +168,8 @@ In the *Documentation Terminal* (from the project root directory), run the follo
 
 ```bash
 cd docs
-npm install
+yarn install
-npm run start
+yarn start
 ```
 
 If the frontend service is running on port `3000` you might be prompted `Would you like to run the app on another port instead?`, in which case answer "yes". You will get output similar to:

docs/css/custom.css

@@ -205,32 +205,32 @@ body {
   height: auto;
   display: block;
   margin: 1rem auto;
-  max-height: 500px;
+  max-height: 600px;
   object-fit: contain;
 }
 
 /* Default size for most images */
 .markdown img:not(.resized-image) {
-  max-width: 500px;
+  max-width: 600px;
   width: auto;
 }
 
 .resized-image {
-  width: 250px;
+  width: 300px;
-  max-height: 400px;
+  max-height: 500px;
 }
 
 /* Responsive images on mobile devices */
 @media (max-width: 768px) {
   .markdown img:not(.resized-image) {
     max-width: 100%;
-    max-height: 400px;
+    max-height: 500px;
   }
   
   .resized-image {
     width: 100%;
-    max-width: 250px;
+    max-width: 300px;
-    max-height: 300px;
+    max-height: 400px;
   }
 }
 

docs/docs/Components/components-data.md

@@ -210,7 +210,7 @@ curl -X POST \
 To test the webhook component:
 
 1. Add a **Webhook** component to the flow.
-2. Connect the **Webhook** component's **Data** output to the **Data** input of a [Data to Message](/components-processing#parse-data-data-to-message) component.
+2. Connect the **Webhook** component's **Data** output to the **Data** input of a [Data to Message](/components-processing#data-to-message) component.
 3. Connect the **Data to Message** component's **Message** output to the **Text** input of a [Chat Output](/components-io#chat-output) component.
 4. To send a POST request, copy the code from the **Webhook cURL** tab in the **API** pane and paste it into a terminal.
 5. Send the POST request.

docs/docs/Components/components-processing.md

@@ -17,7 +17,7 @@ The component offers control over chunk size, overlap, and separator, which affe
 
 ## Alter metadata
 
-This component modifies metadata of input objects. It can add new metadata, update existing metadata, and remove specified metadata fields. The component works with both [Message](/concepts-objects#message-object) and [Data](/concepts-objects) objects, and can also create a new Data object from user-provided text.
+This component modifies metadata of input objects. It can add new metadata, update existing metadata, and remove specified metadata fields. The component works with both [Message](/concepts-objects#message-object) and [Data](/concepts-objects#data-object) objects, and can also create a new Data object from user-provided text.
 
 ### Inputs
 
@@ -164,7 +164,7 @@ This component transforms structured data into human-readable text formats, allo
 This component is in **Beta** as of Langflow version 1.1.3, and is not yet fully supported.
 :::
 
-This component filters a [Data](/concepts-objects#data-objects) object based on a list of keys.
+This component filters a [Data](/concepts-objects#data-object) object based on a list of keys.
 
 ### Inputs
 

docs/docs/Get-Started/get-started-quickstart.md

@@ -123,7 +123,7 @@ The [File](/components-data#file) component loads files from your local machine.
 3. Click **Processing**, select the **Split Text** component, and then drag it to the canvas.
 The [Split Text](/components-processing#split-text) component splits the loaded text into smaller chunks.
 4. Click **Processing**, select the **Parse Data** component, and then drag it to the canvas.
-The [Parse Data](/components-processing#parse-data) component converts the data from the **Astra DB** component into plain text.
+The [Data to Message](/components-processing#data-to-message) component converts the data from the **Astra DB** component into plain text.
 5. Click **Embeddings**, select the **OpenAI Embeddings** component, and then drag it to the canvas.
 The [OpenAI Embeddings](/components-embedding-models#openai-embeddings) component generates embeddings for the user's input, which are compared to the vector data in the database.
 6. Connect the new components into the existing flow, so your flow looks like this:

docs/docusaurus.config.js

@@ -40,7 +40,7 @@ const config = {
         docs: {
           routeBasePath: "/", // Serve the docs at the site's root
           sidebarPath: require.resolve("./sidebars.js"), // Use sidebars.js file
-          sidebarCollapsed: true,
+          sidebarCollapsed: false,
           beforeDefaultRemarkPlugins: [
             [
               remarkCodeHike,
@@ -255,7 +255,7 @@ const config = {
       },
       docs: {
         sidebar: {
-          hideable: true,
+          hideable: false,
         },
       },
     }),

docs/sidebars.js

@@ -140,16 +140,16 @@ module.exports = {
       type: "category",
       label: "API reference",
       items: [
-        {
-          type: "doc",
-          id: "API-Reference/api-reference-api-examples",
-          label: "API examples",
-        },
         {
           type: "link",
           label: "API documentation",
           href: "/api",
         },
+        {
+          type: "doc",
+          id: "API-Reference/api-reference-api-examples",
+          label: "API examples",
+        },
       ],
     },
     {