Skip to content

feat: add promotional website for GitHub Pages deployment#1

Merged
leeebo merged 1 commit into
mainfrom
website
Feb 26, 2026
Merged

feat: add promotional website for GitHub Pages deployment#1
leeebo merged 1 commit into
mainfrom
website

Conversation

@leeebo
Copy link
Copy Markdown
Owner

@leeebo leeebo commented Feb 26, 2026

Summary by CodeRabbit

  • New Features
    • Added a comprehensive landing page showcasing product capabilities and installation guidance. Features an animated terminal demonstration, parallel-flash progress visualization, product benefits overview, and copy-to-clipboard functionality for installation commands. Includes responsive design with visual effects optimized for all device sizes.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Feb 26, 2026

📝 Walkthrough

Walkthrough

A new static HTML documentation page for ESP Batch Flash has been added, featuring a hero section with installation UI, an interactive terminal simulation with typed commands, animated parallel-flash progress visualization, and a features showcase section with gradient styling and client-side interactivity.

Changes

Cohort / File(s) Summary
Documentation Landing Page
docs/index.html
New 325-line static HTML file with hero section, copy-to-clipboard installation UI, simulated terminal output, animated multi-bar progress visualization, features cards, inline CSS styling, and client-side JavaScript for terminal simulation, progress animation, and clipboard functionality.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A docs page hops into view,
With colors bright and gradients too,
Progress bars dance in motion free,
Terminal clicks with jubilee,
Copy commands with just one click! 📋✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: adding a promotional website (docs/index.html) for GitHub Pages deployment, which is the primary purpose of this changeset.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch website

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🧹 Nitpick comments (2)
docs/index.html (2)

183-183: Consider adding accessibility attributes to the copy button.

Adding an aria-label improves the experience for screen reader users.

♻️ Suggested improvement
-<button class="copy-btn" id="copy-trigger">Copy</button>
+<button class="copy-btn" id="copy-trigger" aria-label="Copy install command to clipboard">Copy</button>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/index.html` at line 183, The copy button with id "copy-trigger" and
class "copy-btn" lacks accessibility attributes; add an appropriate aria-label
(e.g., aria-label="Copy to clipboard" or a localized equivalent) to the <button
id="copy-trigger" class="copy-btn"> element so screen readers convey its
purpose, and ensure the label matches any visible text or dynamic state changes
handled by scripts that reference "copy-trigger" or "copy-btn".

42-48: Consider adding standard background-clip property for broader compatibility.

The gradient text effect uses only webkit-prefixed properties. While most modern browsers support these, adding the standard property improves future compatibility.

♻️ Suggested improvement
 .text-gradient {
     background: var(--accent-gradient);
     background-size: 200% auto;
+    background-clip: text;
     -webkit-background-clip: text;
+    color: transparent;
     -webkit-text-fill-color: transparent;
     animation: gradient-shift 4s linear infinite;
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/index.html` around lines 42 - 48, The .text-gradient rule only sets
-webkit-background-clip but not the standard property; update the .text-gradient
CSS to include the unprefixed background-clip: text (while keeping
-webkit-background-clip: text and -webkit-text-fill-color: transparent) so the
gradient-shift animation and gradient background are applied in browsers that
support the standard property as well as WebKit-prefixed implementations.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/index.html`:
- Around line 315-319: The click handler for the copy button uses
navigator.clipboard.writeText without handling failures, so update the listener
attached to document.getElementById('copy-trigger') to handle errors: check for
navigator.clipboard support (or catch the Promise), set the success text
("Copied!") only on successful resolution of navigator.clipboard.writeText, and
on rejection set an error state/message (e.g., "Copy failed") and optionally log
the error; ensure any existing setTimeout fallback to restore the button label
is retained for both success and failure paths and reference the same element
(this or a captured element variable) when updating text.
- Line 185: Update the broken GitHub link in the anchor element that renders
"View on GitHub" by replacing the href value pointing to
https://github.com/leebo/esp_batch_flash with the correct repository URL
https://github.com/leeebo/esp-batch-flash; locate the anchor element (the <a
href="...">View on GitHub</a> instance) in docs/index.html and change only the
href string to the corrected URL.

---

Nitpick comments:
In `@docs/index.html`:
- Line 183: The copy button with id "copy-trigger" and class "copy-btn" lacks
accessibility attributes; add an appropriate aria-label (e.g., aria-label="Copy
to clipboard" or a localized equivalent) to the <button id="copy-trigger"
class="copy-btn"> element so screen readers convey its purpose, and ensure the
label matches any visible text or dynamic state changes handled by scripts that
reference "copy-trigger" or "copy-btn".
- Around line 42-48: The .text-gradient rule only sets -webkit-background-clip
but not the standard property; update the .text-gradient CSS to include the
unprefixed background-clip: text (while keeping -webkit-background-clip: text
and -webkit-text-fill-color: transparent) so the gradient-shift animation and
gradient background are applied in browsers that support the standard property
as well as WebKit-prefixed implementations.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 870556f and 5b7ecb6.

📒 Files selected for processing (1)
  • docs/index.html

Comment thread docs/index.html
<code>pip install esp-batch-flash</code>
<button class="copy-btn" id="copy-trigger">Copy</button>
</div>
<a href="https://github.com/leebo/esp_batch_flash" class="btn">View on GitHub</a>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Test the URL mentioned in the code
echo "Testing: leebo/esp_batch_flash"
curl -s -o /dev/null -w "HTTP Status: %{http_code}\n" "https://api.github.com/repos/leebo/esp_batch_flash"

# Also check the alternative with double 'e' (matching PR author)
echo "Testing: leeebo/esp_batch_flash"
curl -s -o /dev/null -w "HTTP Status: %{http_code}\n" "https://api.github.com/repos/leeebo/esp_batch_flash"

# Check with hyphenated name
echo "Testing: leeebo/esp-batch-flash"
curl -s -o /dev/null -w "HTTP Status: %{http_code}\n" "https://api.github.com/repos/leeebo/esp-batch-flash"

Repository: leeebo/esp-batch-flash

Length of output: 211


Fix broken GitHub repository link.

The current URL https://github.com/leebo/esp_batch_flash returns 404. The correct repository is https://github.com/leeebo/esp-batch-flash (username with double 'e', repository name with hyphen).

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

In `@docs/index.html` at line 185, Update the broken GitHub link in the anchor
element that renders "View on GitHub" by replacing the href value pointing to
https://github.com/leebo/esp_batch_flash with the correct repository URL
https://github.com/leeebo/esp-batch-flash; locate the anchor element (the <a
href="...">View on GitHub</a> instance) in docs/index.html and change only the
href string to the corrected URL.

Comment thread docs/index.html
Comment on lines +315 to +319
document.getElementById('copy-trigger').addEventListener('click', function() {
navigator.clipboard.writeText("pip install esp-batch-flash");
this.textContent = "Copied!";
setTimeout(() => { this.textContent = "Copy"; }, 2000);
});
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Add error handling for clipboard API.

navigator.clipboard.writeText() can fail (unsupported browser, non-HTTPS context, permission denied). Without error handling, the button will show "Copied!" even when it fails.

🛡️ Proposed fix with error handling
 document.getElementById('copy-trigger').addEventListener('click', function() {
-    navigator.clipboard.writeText("pip install esp-batch-flash");
-    this.textContent = "Copied!";
-    setTimeout(() => { this.textContent = "Copy"; }, 2000);
+    const btn = this;
+    navigator.clipboard.writeText("pip install esp-batch-flash")
+        .then(() => {
+            btn.textContent = "Copied!";
+            setTimeout(() => { btn.textContent = "Copy"; }, 2000);
+        })
+        .catch(() => {
+            btn.textContent = "Failed";
+            setTimeout(() => { btn.textContent = "Copy"; }, 2000);
+        });
 });
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/index.html` around lines 315 - 319, The click handler for the copy
button uses navigator.clipboard.writeText without handling failures, so update
the listener attached to document.getElementById('copy-trigger') to handle
errors: check for navigator.clipboard support (or catch the Promise), set the
success text ("Copied!") only on successful resolution of
navigator.clipboard.writeText, and on rejection set an error state/message
(e.g., "Copy failed") and optionally log the error; ensure any existing
setTimeout fallback to restore the button label is retained for both success and
failure paths and reference the same element (this or a captured element
variable) when updating text.

@leeebo leeebo merged commit 312817f into main Feb 26, 2026
16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant