docs(demo): add demo.html page in English (no global.scss changes) #358
Conversation
…glish | chore: remove VSCode launch
WalkthroughReplaced a local stylesheet with the Gardevoir CDN, updated buttons to use explicit type="button", added/updated a docs demo HTML page, converted an accessibility comment to English in a SCSS file, and removed the VSCode launch configuration. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
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.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
docs/demo.html (1)
25-29: Minor a11y/semantics: use for/id, avoid
, add autocomplete.Improves label association and form UX without changing visuals.
- <form> - <label>Name: <input type="text" /></label><br><br> - <label>Email: <input type="email" /></label><br><br> - <button type="button">Submit</button> - </form> + <form> + <div> + <label for="name">Name</label> + <input id="name" name="name" type="text" autocomplete="name" /> + </div> + <div> + <label for="email">Email</label> + <input id="email" name="email" type="email" autocomplete="email" /> + </div> + <button type="button">Submit</button> + </form>(demo) use Gardevoir CDN; fix button type style comment in English chore remove VSCode launch (1)
1-2: Normalize line endings via .gitattributes to avoid LF↔CRLF churn.Optional, but prevents future noise.
# .gitattributes * text=auto eol=lf *.html text eol=lf *.scss text eol=lf
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
(demo) use Gardevoir CDN; fix button type style comment in English chore remove VSCode launch(1 hunks)docs/demo.html(1 hunks)
🔇 Additional comments (2)
(demo) use Gardevoir CDN; fix button type style comment in English chore remove VSCode launch (1)
20-21: LGTM: explicit button types avoid unintended form submission.Good defensive default.
Also applies to: 27-28
docs/demo.html (1)
7-7: Pin reseter.css to v2.0.0 and add SRIPin the CDN URL to the verified release (2.0.0) and add an integrity attribute; compute and insert the real SRI hash.
File: docs/demo.html — line 7
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css/reseter.min.css" /> + <link rel="stylesheet" + href="https://cdn.jsdelivr.net/npm/[email protected]/reseter.min.css" + integrity="sha384-REPLACE_WITH_REAL_HASH" + crossorigin="anonymous" />Compute the SRI (sha384) and replace the placeholder, e.g.:
curl -sL https://cdn.jsdelivr.net/npm/[email protected]/reseter.min.css | openssl dgst -sha384 -binary | openssl base64 -A
then set integrity="sha384-".
There was a problem hiding this comment.
Do not switch to Gardevoir; keep Reseter.css for this repo’s demo.
This change replaces Reseter.css with Gardevoir in the root demo.html, which conflicts with the project scope and the new docs page using Reseter.css. Revert to Reseter.css (preferably pinned + SRI).
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
+ <link rel="stylesheet"
+ href="https://cdn.jsdelivr.net/npm/[email protected]/reseter.min.css"
+ integrity="sha384-REPLACE_WITH_REAL_HASH"
+ crossorigin="anonymous" />📝 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.
| �[31m- <link rel="stylesheet" href="reseter.css" />�[m | |
| �[32m+�[m�[32m <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />�[m | |
| <link rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/[email protected]/reseter.min.css" | |
| integrity="sha384-REPLACE_WITH_REAL_HASH" | |
| crossorigin="anonymous" /> |
🤖 Prompt for AI Agents
In (demo) use Gardevoir CDN; fix button type style comment in English
chore remove VSCode launch around lines 11-12, revert the stylesheet change
that replaced reseter.css with the Gardevoir CDN; restore the original
reseter.css link, and prefer to reference a pinned version (specific versioned
URL) with an integrity (SRI) attribute and crossorigin attribute for security
and reproducibility.
There was a problem hiding this comment.
Out of scope: revert global.scss change.
PR description promises “No changes to global.scss”. Please drop this hunk or move it to a separate PR.
-// Accessibility: reduce motion for users who prefer less movement
+// Acessibilidade: reduz animações para usuários que preferem menos movimento📝 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.
| �[31m-// Acessibilidade: reduz animações para usuários que preferem menos movimento�[m | |
| �[32m+�[m�[32m// Accessibility: reduce motion for users who prefer less movement�[m | |
| // Acessibilidade: reduz animações para usuários que preferem menos movimento |
🤖 Prompt for AI Agents
In (demo) use Gardevoir CDN; fix button type style comment in English
chore remove VSCode launch around lines 40-41, the change to global.scss that
updates a comment from Portuguese to English is out of scope for this PR; either
remove this hunk so global.scss remains untouched in this branch or move the
comment-change into a new separate PR and revert the file in this branch before
merging.
| <h2>Listas</h2> | ||
| <ul><li>Item 1</li><li>Item 2</li></ul> | ||
| <ol><li>Item A</li><li>Item B</li></ol> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Formulário</h2> | ||
| <form> | ||
| <label>Nome: <input type="text" /></label><br><br> | ||
| <label>Email: <input type="email" /></label><br><br> | ||
| <button type="button">Enviar</button> | ||
| </form> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Botões e Tipografia</h2> | ||
| <button type="button">Clique Aqui</button> | ||
| <p>Texto comum</p> | ||
| <strong>Texto em negrito</strong> | ||
| <em>Texto em itálico</em> | ||
| </section> |
There was a problem hiding this comment.
Translate all user‑visible strings to English (PR claims “entirely in English”).
Several headings and labels remain in Portuguese. Please update to English for consistency.
- <h2>Listas</h2>
+ <h2>Lists</h2>
@@
- <h2>Formulário</h2>
+ <h2>Form</h2>
@@
- <label>Nome: <input type="text" /></label><br><br>
+ <label>Name: <input type="text" /></label><br><br>
@@
- <button type="button">Enviar</button>
+ <button type="button">Submit</button>
@@
- <h2>Botões e Tipografia</h2>
+ <h2>Buttons and Typography</h2>
@@
- <button type="button">Clique Aqui</button>
+ <button type="button">Click Here</button>
@@
- <p>Texto comum</p>
- <strong>Texto em negrito</strong>
- <em>Texto em itálico</em>
+ <p>Body text</p>
+ <strong>Bold text</strong>
+ <em>Italic text</em>📝 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.
| <h2>Listas</h2> | |
| <ul><li>Item 1</li><li>Item 2</li></ul> | |
| <ol><li>Item A</li><li>Item B</li></ol> | |
| </section> | |
| <section> | |
| <h2>Formulário</h2> | |
| <form> | |
| <label>Nome: <input type="text" /></label><br><br> | |
| <label>Email: <input type="email" /></label><br><br> | |
| <button type="button">Enviar</button> | |
| </form> | |
| </section> | |
| <section> | |
| <h2>Botões e Tipografia</h2> | |
| <button type="button">Clique Aqui</button> | |
| <p>Texto comum</p> | |
| <strong>Texto em negrito</strong> | |
| <em>Texto em itálico</em> | |
| </section> | |
| <h2>Lists</h2> | |
| <ul><li>Item 1</li><li>Item 2</li></ul> | |
| <ol><li>Item A</li><li>Item B</li></ol> | |
| </section> | |
| <section> | |
| <h2>Form</h2> | |
| <form> | |
| <label>Name: <input type="text" /></label><br><br> | |
| <label>Email: <input type="email" /></label><br><br> | |
| <button type="button">Submit</button> | |
| </form> | |
| </section> | |
| <section> | |
| <h2>Buttons and Typography</h2> | |
| <button type="button">Click Here</button> | |
| <p>Body text</p> | |
| <strong>Bold text</strong> | |
| <em>Italic text</em> | |
| </section> |
🤖 Prompt for AI Agents
In docs/demo.html around lines 18 to 38, several user-visible strings remain in
Portuguese; update them to English: change headings "Listas"→"Lists",
"Formulário"→"Form", "Botões e Tipografia"→"Buttons and Typography"; change form
labels "Nome"→"Name", "Email"→"Email" (ensure casing consistent), change form
button "Enviar"→"Submit"; change standalone button "Clique Aqui"→"Click Here";
and translate paragraph/inline texts "Texto comum"→"Regular text", "Texto em
negrito"→"Bold text", "Texto em itálico"→"Italic text". Ensure punctuation and
casing remain consistent with surrounding markup.
1 participant
This PR adds the demo.html page in English to showcase lists, forms, buttons, and typography.
Summary by CodeRabbit