Skip to content

⚡ Bolt: Optimize Section5 background image #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anyulled wants to merge 2 commits into
base: main
Choose a base branch
from
Open

⚡ Bolt: Optimize Section5 background image #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9917723
⚡ Bolt: Optimize Section5 background image
google-labs-jules[bot] Feb 25, 2026
ff3145c
⚡ Bolt: Optimize Section5 background image and fix Cypress test
google-labs-jules[bot] Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions components/sections/home8/section5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,10 @@ export default function Section5({ year, speakers, totalSpeakers }: Readonly<Sec
<div
className="team8-section-rea sp1"
style={{
backgroundImage: "url(/assets/img/bg/header-bg20.png)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
position: "relative",
}}
>
<Image src="/assets/img/bg/header-bg20.png" alt="" fill style={{ objectFit: "cover", zIndex: -1 }} quality={85} />
<div className="container">
Comment on lines +80 to 81
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using z-index: -1 can be brittle as it places the image behind its parent element. If the parent element ever gets a background color, the image will be hidden. A more robust approach is to establish a new stacking context for the content, placing it explicitly on top of the image without relying on a negative z-index.

Suggested change
<Image src="/assets/img/bg/header-bg20.png" alt="" fill style={{ objectFit: "cover", zIndex: -1 }} quality={85} />
<div className="container">
<Image src="/assets/img/bg/header-bg20.png" alt="" fill style={{ objectFit: "cover" }} quality={85} />
<div className="container" style={{ position: "relative" }}>

<div className="row">
<div className="col-lg-5">
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/home/home-editions.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ describe("Home Pages (2023-2026)", () => {
cy.visit(edition.path, { timeout: 120000 });

cy.get(".hero8-header", { timeout: 30000 }).within(() => {
cy.get("h5").should("have.length.at.least", 2);
cy.get(".hero8-header__event-line").should("have.length.at.least", 2);
cy.contains(edition.venue, { matchCase: false }).should("be.visible");
cy.contains(edition.date, { matchCase: false }).should("be.visible");
});
Expand Down
Binary file added verification_section5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 70 additions & 0 deletions verify_section5.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@

import time
import requests
from playwright.sync_api import sync_playwright, expect

def wait_for_server(url, timeout=120):
start_time = time.time()
print(f"Waiting for {url} to be responsive...")
while time.time() - start_time < timeout:
try:
response = requests.get(url)
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The requests.get call does not have a timeout specified. This could cause the script to hang if the server is slow to respond or hangs. It's a best practice to always include a timeout to prevent the script from blocking indefinitely.

Suggested change
response = requests.get(url)
response = requests.get(url, timeout=5)

if response.status_code == 200:
print("Server is ready!")
return True
except requests.exceptions.ConnectionError:
pass
except Exception as e:
print(f"Error checking server: {e}")
Comment on lines +11 to +18
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

find . -name "verify_section5.py" -type f

Repository: anyulled/devbcn-nextjs

Length of output: 86

🏁 Script executed:

cat -n verify_section5.py

Repository: anyulled/devbcn-nextjs

Length of output: 2954

🏁 Script executed:

#!/bin/bash
# Quick verification: check if there are other requests calls without timeout in this file
rg -n 'requests\.' verify_section5.py

Repository: anyulled/devbcn-nextjs

Length of output: 164

Add timeout to request and narrow exception handling.

Line 11 can block indefinitely without a timeout parameter on requests.get(), and line 17 catches overly broad exceptions.

Suggested patch 
-            response = requests.get(url)
+            response = requests.get(url, timeout=5)
             if response.status_code == 200:
                 print("Server is ready!")
                 return True
         except requests.exceptions.ConnectionError:
             pass
-        except Exception as e:
+        except requests.exceptions.RequestException as e:
             print(f"Error checking server: {e}")
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
response = requests.get(url)
if response.status_code == 200:
print("Server is ready!")
return True
except requests.exceptions.ConnectionError:
pass
except Exception as e:
print(f"Error checking server: {e}")
response = requests.get(url, timeout=5)
if response.status_code == 200:
print("Server is ready!")
return True
except requests.exceptions.ConnectionError:
pass
except requests.exceptions.RequestException as e:
print(f"Error checking server: {e}")
🧰 Tools
🪛 Ruff (0.15.2)

[error] 11-11: Probable use of requests call without timeout

(S113)

[warning] 17-17: Do not catch blind exception: Exception

(BLE001)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@verify_section5.py` around lines 11 - 18, In verify_section5.py update the
requests.get call to include a timeout (e.g. timeout=5) and replace the broad
"except Exception as e" with narrower requests exception handlers: catch
requests.exceptions.Timeout and requests.exceptions.ConnectionError (already
used) and/or requests.exceptions.RequestException for other HTTP-related errors,
log or print the error message, and ensure the function returns False on those
failures instead of swallowing or catching Base Exception; specifically modify
the block around requests.get(url) and the exception handlers to use these
requests.* exceptions and an explicit timeout.

time.sleep(1)
print("Server failed to start within timeout.")
return False

def verify_section5():
url = "http://localhost:3000/2026"
if not wait_for_server(url):
return
Comment on lines +25 to +26
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Fail with non-zero exit code when verification fails.

Right now, failed checks only log and return, so CI can report success even when the verification fails.

Suggested patch 
+import sys
@@
-def verify_section5():
+def verify_section5() -> bool:
@@
-    if not wait_for_server(url):
-        return
+    if not wait_for_server(url):
+        return False
@@
-        if bg_image.count() > 0:
+        if bg_image.count() > 0:
             print("Background image found!")
             expect(bg_image.first).to_be_visible()
@@
             section = page.locator(".team8-section-rea").first
             section.screenshot(path="verification_section5.png")
             print("Screenshot saved to verification_section5.png")
+            browser.close()
+            return True
         else:
             print("Background image NOT found!")
             # Take screenshot of the whole page for debugging
             page.screenshot(path="verification_failure.png")
-
-        browser.close()
+            browser.close()
+            return False
@@
 if __name__ == "__main__":
-    verify_section5()
+    raise SystemExit(0 if verify_section5() else 1)

Also applies to: 62-66, 69-70

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@verify_section5.py` around lines 25 - 26, The verification currently returns
silently on failures (e.g., the check using wait_for_server(url) and other
failure branches around lines referenced) which lets CI succeed; change these to
fail the process with a non-zero exit code by replacing the plain return with a
termination call (e.g., call sys.exit(1) or raise SystemExit(1)) so that
functions like wait_for_server failures and the other verification failure
branches (the blocks around the referenced lines 62-66 and 69-70) cause the
script to exit with an error status visible to CI.


with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()

print(f"Navigating to {url}")
page.goto(url)

# Wait for the section to be visible
print("Waiting for 'Meet Our Speakers' section...")
# Scroll down to ensure images load
page.evaluate("window.scrollTo(0, document.body.scrollHeight)")

# Locate the section header
header = page.get_by_text("Meet Our Speakers").first
header.scroll_into_view_if_needed()
expect(header).to_be_visible()

print("Found section header. Checking background image...")

# Locate the background image by src
# Since it's optimized, src will contain `_next/image` and `url` param containing the original path
# Use partial match on src attribute
bg_image = page.locator('img[src*="header-bg20.png"]')

# Check if the image is visible
if bg_image.count() > 0:
print("Background image found!")
expect(bg_image.first).to_be_visible()

# Take screenshot of the section
# Find the section container
section = page.locator(".team8-section-rea").first
section.screenshot(path="verification_section5.png")
print("Screenshot saved to verification_section5.png")
else:
print("Background image NOT found!")
# Take screenshot of the whole page for debugging
page.screenshot(path="verification_failure.png")

browser.close()

if __name__ == "__main__":
verify_section5()