⚡ Bolt: Optimize README assets and fix malformed URL - #37
Conversation
- Optimize header GIF and LinkedIn badge for LCP/CLS using HTML tags. - Fix malformed Medium URL in project list. - Update Bolt journal with learnings. Co-authored-by: Alex10007 <169648653+Alex10007@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
📝 WalkthroughWalkthroughThe PR updates ChangesREADME Image Optimization and URL Fix
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.github.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@README.md`:
- Line 5: The img element displaying the banner GIF with
src="images/Colorful%20Futuristic%20Technology%20Poster.gif" is missing an alt
attribute, which is required for accessibility and SEO. Add a descriptive alt
attribute to this img tag that accurately describes the content of the banner
image, such as something that conveys it's a colorful futuristic technology
poster used as a banner.
- Line 5: The fetchpriority attribute on the img tag with src
"images/Colorful%20Futuristic%20Technology%20Poster.gif" is being stripped by
GitHub's markdown sanitizer and has no effect. Remove the fetchpriority="high"
attribute from this img tag to eliminate the ineffective optimization attempt.
Keep all other attributes (src, width, height, style) intact.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
| ***500 AI Machine learning Deep learning Computer vision NLP Projects with code* !!!** | ||
|
|
||
|  | ||
| <img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908" fetchpriority="high" style="max-width: 100%; height: auto;"> <!-- ⚡ Bolt Optimization: Improve LCP and eliminate CLS --> |
There was a problem hiding this comment.
Add missing alt text to the banner GIF for accessibility.
The banner image is missing an alt attribute, which is essential for screen readers and SEO. While the LinkedIn badge on line 7 includes alt="LinkedIn Badge", the primary banner GIF should also have descriptive alt text.
🖼️ Proposed fix to add alt text
-<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908" fetchpriority="high" style="max-width: 100%; height: auto;"> <!-- ⚡ Bolt Optimization: Improve LCP and eliminate CLS -->
+<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908" fetchpriority="high" alt="Colorful Futuristic Technology Poster - AI Projects Showcase" style="max-width: 100%; height: auto;"> <!-- ⚡ Bolt Optimization: Improve LCP and eliminate CLS -->🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 5-5: Images should have alternate text (alt text)
(MD045, no-alt-text)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@README.md` at line 5, The img element displaying the banner GIF with
src="images/Colorful%20Futuristic%20Technology%20Poster.gif" is missing an alt
attribute, which is required for accessibility and SEO. Add a descriptive alt
attribute to this img tag that accurately describes the content of the banner
image, such as something that conveys it's a colorful futuristic technology
poster used as a banner.
Source: Linters/SAST tools
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Verify GitHub preserves fetchpriority attribute in rendered markdown
# Fetch the README from GitHub and check if fetchpriority attribute is present in raw/rendered output
# This checks both the raw markdown and rendered HTML
echo "Checking raw markdown for fetchpriority attribute..."
git show HEAD:README.md | grep -o 'fetchpriority=[^ >]*' || echo "fetchpriority not found in markdown"
# Check if the attribute would survive GitHub's HTML sanitizer by inspecting common patterns
echo -e "\nChecking for non-standard attributes in HTML img tags..."
git show HEAD:README.md | grep -E '<img[^>]*fetchpriority' || echo "No fetchpriority in HTML context detected"Repository: Alex10007/500-AI-Machine-learning-Deep-learning-Computer-vision-NLP-Projects-with-code
Length of output: 476
🌐 Web query:
GitHub markdown renderer fetchpriority attribute preservation HTML sanitizer
💡 Result:
The GitHub markdown renderer does not preserve the fetchpriority attribute in user-supplied content [1][2]. GitHub utilizes an aggressive HTML sanitization pipeline for all user-rendered content to prevent injection attacks and ensure security [1][3]. This pipeline operates on an explicit whitelist basis, meaning only pre-approved HTML tags and attributes are permitted [2][4]. The fetchpriority attribute (used to influence resource loading priority, such as for images or scripts) is not included in the standard GitHub HTML sanitizer whitelist [2][5][6]. Consequently, if you include a fetchpriority attribute within an HTML tag (e.g., ) in a GitHub-rendered markdown file, issue comment, or PR description, the attribute will be stripped by the sanitization filter during the rendering process [1][2]. This behavior is a deliberate security measure and is consistent with the broader "Safe Outputs" requirement that mandates strict sanitization for all user-facing content [7].
Citations:
- 1: https://github.com/github/markup
- 2: https://gist.github.com/kivikakk/622b5dcf395e26c49e2334f0eb19e6f9
- 3: github/markup@c7b5e14
- 4: https://github.com/github/html-pipeline/blob/master/lib/html/pipeline/sanitization_filter.rb
- 5: https://github.com/rhysd/marked-sanitizer-github
- 6: https://github.com/rhysd/marked-sanitizer-github/blob/master/index.ts
- 7: [Safe Outputs Conformance] SEC-004: Handlers with body fields missing content sanitization github/gh-aw#15805
🌐 Web query:
fetchpriority HTML attribute standard MDN web specification
💡 Result:
The fetchpriority attribute is a standard HTML attribute defined in the WHATWG HTML Standard [1][2][3]. It allows developers to provide a hint to the browser regarding the relative priority of fetching a resource, which can help optimize performance and Core Web Vitals by influencing the loading order of elements [4][5]. Key details of the fetchpriority attribute include: Elements: It can be applied to img, link, script, and iframe elements [4][2]. Values: high: Suggests that the resource has a higher priority and should be fetched sooner [4][5]. low: Suggests that the resource has a lower priority and should be fetched later [4][5]. auto: The default value, indicating no preference and leaving priority decisions to the browser's internal heuristics [4][6]. Functionality: The attribute acts as a hint rather than a strict command; the browser's actual loading behavior depends on its own internal priority logic [4][5]. It is intended to be used sparingly, as misuse can potentially degrade performance [4][6]. In addition to the HTML content attribute, the fetchPriority property is available via the DOM API for the corresponding elements (e.g., HTMLImageElement.fetchPriority), reflecting the value of the attribute in JavaScript [7]. The concept is also supported in the Fetch API as a priority property within RequestInit [3].
Citations:
- 1: https://html.spec.whatwg.org/
- 2: Add the Priority Hints changes to the html spec whatwg/html#8470
- 3: https://github.com/WICG/priority-hints/blob/main/EXPLAINER.md
- 4: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/fetchpriority
- 5: https://web.dev/articles/fetch-priority?authuser=3
- 6: https://github.com/mdn/content/blob/main/files/en-us/web/html/reference/attributes/fetchpriority/index.md
- 7: https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/fetchPriority
Remove the fetchpriority attribute—GitHub's markdown sanitizer strips it.
The fetchpriority attribute is a standard HTML feature, but GitHub's markdown renderer does not preserve it. GitHub uses an explicit allowlist-based HTML sanitizer that strips non-whitelisted attributes, including fetchpriority, from all user-rendered content. This means the optimization will not work when the README is viewed on GitHub, making the attribute ineffective and misleading.
Either remove the attribute or use an alternative optimization that GitHub's renderer preserves.
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 5-5: Images should have alternate text (alt text)
(MD045, no-alt-text)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@README.md` at line 5, The fetchpriority attribute on the img tag with src
"images/Colorful%20Futuristic%20Technology%20Poster.gif" is being stripped by
GitHub's markdown sanitizer and has no effect. Remove the fetchpriority="high"
attribute from this img tag to eliminate the ineffective optimization attempt.
Keep all other attributes (src, width, height, style) intact.
1 participant
💡 What:
<img>tags.width(1284) andheight(908) attributes to the header GIF.fetchpriority="high"andstyle="max-width: 100%; height: auto;"to the header GIF.width(91) andheight(28) attributes to the LinkedIn badge.%20with-..jules/bolt.mdwith critical learnings regarding LCP/CLS in documentation.🎯 Why:
fetchpriority="high"improves Largest Contentful Paint (LCP) by prioritizing the main header GIF, which is the largest content element.📊 Impact:
🔬 Measurement:
PR created automatically by Jules for task 3899646490571207842 started by @Alex10007
Summary by CodeRabbit