From 7fe847c15832b28ffcf60152698b5862ff9812ce Mon Sep 17 00:00:00 2001
From: Vanshika <vanshikaa.1105@gmail.com>
Date: Tue, 23 Dec 2025 17:21:54 +0530
Subject: [PATCH] Fix documentation formatting, code clarity, and layout issues

---
 .../ReferenceDirectoryWithFilter/index.tsx    | 50 +++++++++----------
 .../en/contributor_guidelines.mdx             |  2 +-
 .../en/conditionals-and-interactivity.mdx     | 12 ++---
 src/content/tutorials/en/get-started.mdx      |  8 ++-
 .../tutorials/en/repeating-with-loops.mdx     | 28 +++++------
 5 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/components/ReferenceDirectoryWithFilter/index.tsx b/src/components/ReferenceDirectoryWithFilter/index.tsx
index 5ce59bcd73..ddd359f40c 100644
--- a/src/components/ReferenceDirectoryWithFilter/index.tsx
+++ b/src/components/ReferenceDirectoryWithFilter/index.tsx
@@ -206,34 +206,32 @@ export const ReferenceDirectoryWithFilter = ({
 
   return (
     <div>
-      <div class="h-0 overflow-visible">
-        <div class="content-grid-simple absolute -left-0 -right-0 -top-[60px] h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg ">
-          <div class="text-body col-span-2 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
-            <input
-              type="text"
-              id="search"
-              ref={inputRef}
-              class="w-full bg-transparent py-xs text-accent-type-color placeholder:text-accent-type-color focus:outline-0"
-              placeholder={uiTranslations["Filter by keyword"]}
-              onKeyUp={(e: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
-                const target = e.target as HTMLInputElement;
-                setSearchKeyword(target?.value);
-              }}
-            />
-            {searchKeyword.length > 0 && (
-              <button
-                type="reset"
-                class=""
-                onClick={clearInput}
-                aria-label="Clear search input"
-              >
-                <Icon kind="close" className="h-4 w-4" />
-              </button>
-            )}
-          </div>
+      <div class="content-grid-simple h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg">
+        <div class="text-body col-span-2 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
+          <input
+            type="text"
+            id="search"
+            ref={inputRef}
+            class="w-full bg-transparent py-xs text-accent-type-color placeholder:text-accent-type-color focus:outline-0"
+            placeholder={uiTranslations["Filter by keyword"]}
+            onKeyUp={(e: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
+              const target = e.target as HTMLInputElement;
+              setSearchKeyword(target?.value);
+            }}
+          />
+          {searchKeyword.length > 0 && (
+            <button
+              type="reset"
+              class=""
+              onClick={clearInput}
+              aria-label="Clear search input"
+            >
+              <Icon kind="close" className="h-4 w-4" />
+            </button>
+          )}
         </div>
       </div>
-      <div class="-top-[75px] mx-5 min-h-[50vh] md:mx-lg">
+      <div class="mx-5 min-h-[50vh] md:mx-lg">
         {renderCategoryData()}
       </div>
     </div>
diff --git a/src/content/contributor-docs/en/contributor_guidelines.mdx b/src/content/contributor-docs/en/contributor_guidelines.mdx
index ce7e9c3d36..34387b377f 100644
--- a/src/content/contributor-docs/en/contributor_guidelines.mdx
+++ b/src/content/contributor-docs/en/contributor_guidelines.mdx
@@ -65,7 +65,7 @@ The majority of the activity on p5.js' GitHub repositories (repo for short) happ
 
 While an issue can be opened for a wide variety of reasons, we usually only use issues to discuss the development of p5.js source code. Topics such as debugging your own code, inviting collaborators to your project, or other unrelated topics should be discussed
 
-either on the [forum](https://discourse.processing.com) or on other platforms such as [Discord](https://discord.gg/SHQ8dH25r9/).
+either on the [forum](https://discourse.processing.org) or on other platforms such as [Discord](https://discord.gg/SHQ8dH25r9).
 
 We have created easy-to-use issue templates to aid you in deciding whether a topic should be a GitHub issue or posted elsewhere!
 
diff --git a/src/content/tutorials/en/conditionals-and-interactivity.mdx b/src/content/tutorials/en/conditionals-and-interactivity.mdx
index 73766e6078..05267c1993 100644
--- a/src/content/tutorials/en/conditionals-and-interactivity.mdx
+++ b/src/content/tutorials/en/conditionals-and-interactivity.mdx
@@ -483,8 +483,8 @@ Add a grassy landscape to your sketch so that you can’t see the sun below the
 
     ```js
     //grass
-    fill("green"); 
-    rect(0, horizon, 400, 400);
+    fill("green"); 
+    rect(0, horizon, 400, 200);
     ```
 
 Your code should look like this:
@@ -520,11 +520,9 @@ function draw() {
   stroke('green');
   line(0,horizon,400,horizon);
 
-  //grass
-
-  fill("green");
-
-  rect(0, horizon, 400, 400);
+  //grass
+  fill("green");
+  rect(0, horizon, 400, 200);
 
 }
 ```
diff --git a/src/content/tutorials/en/get-started.mdx b/src/content/tutorials/en/get-started.mdx
index 0995f3329c..f9a5a4644c 100644
--- a/src/content/tutorials/en/get-started.mdx
+++ b/src/content/tutorials/en/get-started.mdx
@@ -175,7 +175,9 @@ Visit the p5.js reference pages for [background()](/reference/p5/background) and
 
 #### Tip
 
-Use [Google’s Color Picker](https://g.co/kgs/aCdbzD) to search for the code that can set the background to any color. Find the color you would like to use, copy the numbers in the box labeled RGB, and paste them into [`background()`](/reference/p5/background).
+Use any online color picker to search for the code that can set the background to any color.
+
+Find the color you would like to use, copy the numbers in the box labeled RGB, and paste them into [`background()`](/reference/p5/background).
 
 
 ## Step 5: Draw shapes on the canvas
@@ -278,7 +280,9 @@ The default value for [`fill()`](/reference/p5/fill) is white. This means that i
 
 - See [this sketch](https://editor.p5js.org/Msqcoding/sketches/k0zCPrquf) for an example.
 
-Visit [the color reference](/reference/p5/color) page to learn more about [`fill()`](/reference/p5/fill),` `[`stroke()`](/reference/p5/stroke), and [`strokeWeight()`](/reference/p5/strokeWeight). Use the p5.js Web Editor’s color tool or [Google’s Color Picker](https://g.co/kgs/aCdbzD) to search for color codes to use in [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`background()`](/reference/p5/background).
+Visit [the color reference](/reference/p5/color) page to learn more about [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`strokeWeight()`](/reference/p5/strokeWeight).
+
+Use the p5.js Web Editor's color tool or any online color picker to search for color codes to use in [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`background()`](/reference/p5/background).
 
 
 ## Step 7: Draw and color more shapes on your canvas
diff --git a/src/content/tutorials/en/repeating-with-loops.mdx b/src/content/tutorials/en/repeating-with-loops.mdx
index 18b05f2e3d..eb7f9eae69 100644
--- a/src/content/tutorials/en/repeating-with-loops.mdx
+++ b/src/content/tutorials/en/repeating-with-loops.mdx
@@ -199,7 +199,7 @@ Above `setup()`:
 In `draw()`:
 
 - After the code that draws the finish line, declare a new local variable `x` to position all the body segments: `let x = circX;`
-- Add a *for loop* using: `for (let i = 0; i < length; i += 1) { }`
+- Add a *for loop* using: `for (let i = 0; i < segments; i += 1) { }`
   - A *for loop* will repeat the code we write inside the curly brackets multiple times. 
   - Move the lines of code that draw the `circle()` into the curly brackets of the *for loop*.
 - After the for loop, add: `circX += spacing` 
@@ -933,11 +933,11 @@ Your function could look like this:
 
 ```js
 function moveCaterpillars() {
-  for (let i = 0; i < numCaterpillars; i += 1) {
-    //Give each caterpillar a
-    //random speed.
-    move = random(5, 30);
-    caterpillarEnds[i] += move;
+  for (let i = 0; i < numCaterpillars; i += 1) {
+    //Give each caterpillar a
+    //random speed.
+    let move = random(5, 30);
+    caterpillarEnds[i] += move;
   }
 }
 ```
@@ -998,13 +998,13 @@ function draw() {
 }
 
 function moveCaterpillars() {
-  for (let i = 0; i < numCaterpillars; i += 1) {
-    //Give each caterpillar a
-    //random speed.
-    move = random(5, 30);
+  for (let i = 0; i < numCaterpillars; i += 1) {
+    //Give each caterpillar a
+    //random speed.
+    let move = random(5, 30);
 
-    // Update caterpillars' x-coordinates
-    caterpillarEnds[i] += move;
+    // Update caterpillars' x-coordinates
+    caterpillarEnds[i] += move;
   }
 }
 
@@ -1359,8 +1359,8 @@ function drawCaterpillars() {
     // Update each caterpillar x-coordinate   
     let y = (i + 0.5) * padding;
 
-    // Update length of caterpillar.   
-    crawl = random(3, 6);
+    // Update length of caterpillar.   
+    let crawl = random(3, 6);
 
     // Draw caterpillars.
     drawCaterpillar(caterpillarEnds[i], y, crawl);