feat: redesign homepage with new hero, themes bento grid, and features section#205
Merged
afonsojramos merged 5 commits intomainfrom Mar 6, 2026
Merged
feat: redesign homepage with new hero, themes bento grid, and features section#205afonsojramos merged 5 commits intomainfrom
afonsojramos merged 5 commits intomainfrom
Conversation
Deploying spicetify-docs with
|
| Latest commit: |
73864ae
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://033c3c1d.spicetify-docs.pages.dev |
| Branch Preview URL: | https://feat-homepage-redesign.spicetify-docs.pages.dev |
WalkthroughUse Astro.url.origin as a fallback for site base in SEO and replace the monolithic homepage with modular components: HeroSection, ThemesBento, FeaturesGrid, InstallSection; add ArrowIcon and font preconnect/fonts link. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 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.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/pages/index.astro (3)
1220-1229: Empty media query block can be removed.This
@media (prefers-reduced-motion: no-preference)block contains only a comment and no actual CSS rules. Since the animations are already defined inline on the elements themselves, this block serves no purpose and adds noise.🧹 Proposed removal
- `@media` (prefers-reduced-motion: no-preference) { - .hero-badge, - .hero h1, - .hero-subtitle, - .hero-actions, - .hero-stats, - .hero-showcase { - /* Animations defined inline above via animation property */ - } - } - `@media` (prefers-reduced-motion: reduce) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/index.astro` around lines 1220 - 1229, Remove the no-op media query block `@media (prefers-reduced-motion: no-preference)` that only contains a comment and no CSS rules; locate the block that lists selectors .hero-badge, .hero h1, .hero-subtitle, .hero-actions, .hero-stats, .hero-showcase and delete the entire media query wrapper so the stylesheet no longer contains an empty rule set (animations are already applied inline on the elements).
377-383: Clipboard fallback provides no user feedback.When
navigator.clipboard.writeText()fails, the fallback selects the text but doesn't notify the user to press Ctrl+C/Cmd+C. Users may not realize they need to complete the copy manually.This is a minor edge case since the Clipboard API has broad support. If you want to improve it:
💡 Optional: Add visual feedback for fallback
}).catch(function () { var range = document.createRange(); range.selectNodeContents(code); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); + // Optionally show a tooltip or update button text + btn.setAttribute('title', 'Press Ctrl+C to copy'); });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/index.astro` around lines 377 - 383, The fallback catch block for navigator.clipboard.writeText() currently only selects the code (range.selectNodeContents(code); sel.removeAllRanges(); sel.addRange(range);) but gives no user feedback; update the catch handler to show a transient, accessible instruction (e.g., a small tooltip/snackbar or alert) telling the user to press "Ctrl+C" or "⌘+C" to complete the copy, and dismiss it after a short timeout or when focus changes; ensure the UI element is ARIA-friendly and is created/removed in the same catch block so users trying the fallback receive clear guidance.
410-410: Consider moving font import to document head for better performance.Using
@importin CSS for external fonts can block rendering. Moving the font to the document<head>with preconnect allows parallel loading:<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&display=swap" rel="stylesheet">This is a minor optimization — the current approach works fine with
display=swap.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/index.astro` at line 410, The CSS `@import` line "@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&display=swap');" should be removed from the stylesheet and instead added to the document head: add preconnect links for "https://fonts.googleapis.com" and "https://fonts.gstatic.com" (with crossorigin) and include the Google Fonts stylesheet link for family=Syne with display=swap; update the Astro page template that renders the head (the file containing the `@import` in src/pages/index.astro) to emit these <link rel="preconnect"> and <link href=... rel="stylesheet"> entries so the font loads in parallel and the original `@import` line is deleted.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/index.astro`:
- Around line 387-405: The setupScrollReveal function is dead because no
elements use the 'reveal-on-scroll' class; either remove the unused function and
its invocation (remove setupScrollReveal() and the function definition) or add
the 'reveal-on-scroll' class to the elements you want animated; locate the
setupScrollReveal function and the call to setupScrollReveal() in the file and
apply one of these two fixes (delete both the function and the
setupScrollReveal() invocation if you don't need scroll reveals, or ensure
target elements include class="reveal-on-scroll" so observer.observe(...) sees
nodes).
---
Nitpick comments:
In `@src/pages/index.astro`:
- Around line 1220-1229: Remove the no-op media query block `@media
(prefers-reduced-motion: no-preference)` that only contains a comment and no CSS
rules; locate the block that lists selectors .hero-badge, .hero h1,
.hero-subtitle, .hero-actions, .hero-stats, .hero-showcase and delete the entire
media query wrapper so the stylesheet no longer contains an empty rule set
(animations are already applied inline on the elements).
- Around line 377-383: The fallback catch block for
navigator.clipboard.writeText() currently only selects the code
(range.selectNodeContents(code); sel.removeAllRanges(); sel.addRange(range);)
but gives no user feedback; update the catch handler to show a transient,
accessible instruction (e.g., a small tooltip/snackbar or alert) telling the
user to press "Ctrl+C" or "⌘+C" to complete the copy, and dismiss it after a
short timeout or when focus changes; ensure the UI element is ARIA-friendly and
is created/removed in the same catch block so users trying the fallback receive
clear guidance.
- Line 410: The CSS `@import` line "@import
url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&display=swap');"
should be removed from the stylesheet and instead added to the document head:
add preconnect links for "https://fonts.googleapis.com" and
"https://fonts.gstatic.com" (with crossorigin) and include the Google Fonts
stylesheet link for family=Syne with display=swap; update the Astro page
template that renders the head (the file containing the `@import` in
src/pages/index.astro) to emit these <link rel="preconnect"> and <link href=...
rel="stylesheet"> entries so the font loads in parallel and the original `@import`
line is deleted.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c9649860-8e47-4680-8f5f-a20f34013907
📒 Files selected for processing (2)
src/components/SEO.astrosrc/pages/index.astro
…ixes - Extract HeroSection, ThemesBento, FeaturesGrid, InstallSection components - Remove ~88 lines of dead CSS (.hero-stats) and dead JS (setupScrollReveal) - Remove empty prefers-reduced-motion: no-preference block - Remove redundant bento-2 through bento-6 grid declarations - Add keyboard navigation (Arrow/Home/End) to install tabs - Lazy-load 2nd and 3rd hero showcase images - Replace transition: all with specific properties on .btn and .feature-card - Alias --accent to var(--color-primary) for single source of truth - Tokenize hardcoded rgba accent colors into CSS variables - Deduplicate noise texture into --noise-bg CSS variable - Add light-mode overrides for hero orbs, showcase cards, install block - Expand prefers-reduced-motion to cover hover transitions - Remove backdrop-filter from labels (solid bg sufficient) - Add aria-labelledby to all section elements - Add clipboard fallback feedback in catch handler - Use ArrowIcon component instead of inline SVG duplicates
There was a problem hiding this comment.
🧹 Nitpick comments (4)
src/components/homepage/InstallSection.astro (2)
4-4: Remove unused empty Props type.The empty
Props = {}type serves no purpose and can be removed for cleaner code.♻️ Proposed fix
--- import DiscordIcon from '../icons/DiscordIcon.astro'; - -type Props = {}; ---🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/homepage/InstallSection.astro` at line 4, The file defines an unused empty type alias "Props = {}" in InstallSection.astro; remove that declaration and any references to "Props" if present so the component no longer includes an unnecessary empty type, keeping the component signature/exports clean and type-free where not needed.
153-161: Clipboard fallback could provide clearer feedback.The fallback updates the
titleattribute, but users may not notice this. Consider briefly changing the button's visual state or adding a small visible tooltip to indicate the fallback action.♻️ Enhanced fallback with visual feedback
}).catch(function () { // Fallback: select text so user can manually copy var range = document.createRange(); range.selectNodeContents(code); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); btn.setAttribute('title', 'Text selected — press Ctrl+C to copy'); + btn.style.outline = '2px solid var(--accent)'; + setTimeout(function () { + btn.style.outline = ''; + }, 2000); });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/homepage/InstallSection.astro` around lines 153 - 161, The clipboard fallback catch block currently only sets btn.setAttribute('title', ...) which is easy to miss; update the catch handler (the anonymous function in the Promise.catch where variables range, code, sel, btn are used) to provide visible feedback: change the button's visible label or add a temporary CSS class (e.g., "copied-fallback") to btn, optionally show a small inline tooltip element near the button, and then revert the label/class/tooltip after a short timeout (e.g., 2s); ensure you still select the code text (range.selectNodeContents(code)) and that the timeout cleanup removes the temporary class/tooltip and restores the original title/text.src/components/homepage/FeaturesGrid.astro (1)
27-49: Consider adding a fallback for unrecognized icon values.The conditional icon rendering silently shows nothing if an icon name doesn't match. While the current data uses valid names, a typo could cause a missing icon without any warning.
♻️ Add a default/fallback icon
{feature.icon === 'terminal' && ( <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> <polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" /> </svg> )} + {!['palette', 'puzzle', 'grid', 'terminal'].includes(feature.icon) && ( + <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> + <circle cx="12" cy="12" r="10" /> + </svg> + )} </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/homepage/FeaturesGrid.astro` around lines 27 - 49, The feature-icon block in FeaturesGrid.astro currently renders nothing when feature.icon doesn't match 'palette'|'puzzle'|'grid'|'terminal'; add a fallback so typos or unknown values show a default SVG (or an explicit placeholder) instead of blank output. Modify the JSX/templating around the {feature.icon === ...} checks to include an else-case (e.g., feature.icon unmatched) that renders a generic icon SVG inside the same div.feature-icon and/or logs a warning (using console.warn) referencing feature.icon so you can spot bad data; ensure the fallback uses the same sizing/stroke attributes so layout stays consistent.src/components/icons/ArrowIcon.astro (1)
10-10: Addaria-hidden="true"to decorative icon.This icon is used alongside text labels (e.g., "Get Started", "Browse all themes"), so it's decorative and should be hidden from screen readers to avoid redundant announcements.
♻️ Proposed fix
-<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width={strokeWidth}><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg> +<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width={strokeWidth} aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/icons/ArrowIcon.astro` at line 10, The SVG in the ArrowIcon.astro is purely decorative and should be hidden from screen readers; update the <svg> element in ArrowIcon.astro (the ArrowIcon component) to include aria-hidden="true" so assistive tech ignores it, keeping existing props like size and strokeWidth intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/homepage/FeaturesGrid.astro`:
- Around line 27-49: The feature-icon block in FeaturesGrid.astro currently
renders nothing when feature.icon doesn't match
'palette'|'puzzle'|'grid'|'terminal'; add a fallback so typos or unknown values
show a default SVG (or an explicit placeholder) instead of blank output. Modify
the JSX/templating around the {feature.icon === ...} checks to include an
else-case (e.g., feature.icon unmatched) that renders a generic icon SVG inside
the same div.feature-icon and/or logs a warning (using console.warn) referencing
feature.icon so you can spot bad data; ensure the fallback uses the same
sizing/stroke attributes so layout stays consistent.
In `@src/components/homepage/InstallSection.astro`:
- Line 4: The file defines an unused empty type alias "Props = {}" in
InstallSection.astro; remove that declaration and any references to "Props" if
present so the component no longer includes an unnecessary empty type, keeping
the component signature/exports clean and type-free where not needed.
- Around line 153-161: The clipboard fallback catch block currently only sets
btn.setAttribute('title', ...) which is easy to miss; update the catch handler
(the anonymous function in the Promise.catch where variables range, code, sel,
btn are used) to provide visible feedback: change the button's visible label or
add a temporary CSS class (e.g., "copied-fallback") to btn, optionally show a
small inline tooltip element near the button, and then revert the
label/class/tooltip after a short timeout (e.g., 2s); ensure you still select
the code text (range.selectNodeContents(code)) and that the timeout cleanup
removes the temporary class/tooltip and restores the original title/text.
In `@src/components/icons/ArrowIcon.astro`:
- Line 10: The SVG in the ArrowIcon.astro is purely decorative and should be
hidden from screen readers; update the <svg> element in ArrowIcon.astro (the
ArrowIcon component) to include aria-hidden="true" so assistive tech ignores it,
keeping existing props like size and strokeWidth intact.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 08b64acf-33a0-41ae-9388-4a0f19162d16
📒 Files selected for processing (7)
src/components/homepage/FeaturesGrid.astrosrc/components/homepage/HeroSection.astrosrc/components/homepage/InstallSection.astrosrc/components/homepage/ThemesBento.astrosrc/components/icons/ArrowIcon.astrosrc/layouts/BaseLayout.astrosrc/pages/index.astro
afonsojramos
force-pushed
the
feat/homepage-redesign
branch
from
7782b49 to
73864ae
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/homepage/InstallSection.astro (1)
4-4: UnusedPropstype definition.The
Propstype is defined but never used in the component. Consider removing it or using it withAstro.propsif props are planned for the future.♻️ Proposed fix
--- import DiscordIcon from '../icons/DiscordIcon.astro'; - -type Props = {}; ---🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/homepage/InstallSection.astro` at line 4, The file defines an unused type alias "Props" in the InstallSection.astro component; remove the unused "Props" declaration or consume it via Astro.props if you intend to accept props. Locate the "Props" type in InstallSection.astro and either delete the line "type Props = {}" or update the component to use the type with Astro.props (e.g., annotate the props object with Props) so the type is actually referenced.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/homepage/InstallSection.astro`:
- Around line 146-161: The clipboard call in InstallSection.astro should be
guarded because navigator.clipboard may be undefined in non-secure contexts;
before calling navigator.clipboard.writeText(...) check that window.navigator &&
navigator.clipboard && typeof navigator.clipboard.writeText === 'function', and
if not available immediately run the existing fallback flow that selects the
code (using code, range, sel) and updates the UI (btn title, iconCopy/iconCheck
toggles) so no exception is thrown; keep the success path unchanged when
clipboard is present.
---
Nitpick comments:
In `@src/components/homepage/InstallSection.astro`:
- Line 4: The file defines an unused type alias "Props" in the
InstallSection.astro component; remove the unused "Props" declaration or consume
it via Astro.props if you intend to accept props. Locate the "Props" type in
InstallSection.astro and either delete the line "type Props = {}" or update the
component to use the type with Astro.props (e.g., annotate the props object with
Props) so the type is actually referenced.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 4735efb8-a916-493a-82a9-f7a56fcc9e93
📒 Files selected for processing (1)
src/components/homepage/InstallSection.astro
Comment on lines
+146
to
+161
| navigator.clipboard.writeText(code.textContent.trim()).then(function () { | ||
| iconCopy.style.display = 'none'; | ||
| iconCheck.style.display = 'block'; | ||
| setTimeout(function () { | ||
| iconCopy.style.display = 'block'; | ||
| iconCheck.style.display = 'none'; | ||
| }, 2000); | ||
| }).catch(function () { | ||
| // Fallback: select text so user can manually copy | ||
| var range = document.createRange(); | ||
| range.selectNodeContents(code); | ||
| var sel = window.getSelection(); | ||
| sel.removeAllRanges(); | ||
| sel.addRange(range); | ||
| btn.setAttribute('title', 'Text selected — press Ctrl+C to copy'); | ||
| }); |
There was a problem hiding this comment.
Guard against navigator.clipboard being undefined in non-secure contexts.
navigator.clipboard is only available in secure contexts (HTTPS, localhost). In HTTP environments, accessing navigator.clipboard.writeText will throw an error before the .catch() can handle it.
🛡️ Proposed fix to add availability check
- navigator.clipboard.writeText(code.textContent.trim()).then(function () {
+ if (navigator.clipboard && navigator.clipboard.writeText) {
+ navigator.clipboard.writeText(code.textContent.trim()).then(function () {
- iconCopy.style.display = 'none';
- iconCheck.style.display = 'block';
- setTimeout(function () {
- iconCopy.style.display = 'block';
- iconCheck.style.display = 'none';
- }, 2000);
- }).catch(function () {
+ iconCopy.style.display = 'none';
+ iconCheck.style.display = 'block';
+ setTimeout(function () {
+ iconCopy.style.display = 'block';
+ iconCheck.style.display = 'none';
+ }, 2000);
+ }).catch(function () {
+ // Fallback: select text so user can manually copy
+ selectCodeText();
+ });
+ } else {
// Fallback: select text so user can manually copy
+ selectCodeText();
+ }
+
+ function selectCodeText() {
var range = document.createRange();
range.selectNodeContents(code);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
btn.setAttribute('title', 'Text selected — press Ctrl+C to copy');
- });
+ }📝 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
| navigator.clipboard.writeText(code.textContent.trim()).then(function () { | |
| iconCopy.style.display = 'none'; | |
| iconCheck.style.display = 'block'; | |
| setTimeout(function () { | |
| iconCopy.style.display = 'block'; | |
| iconCheck.style.display = 'none'; | |
| }, 2000); | |
| }).catch(function () { | |
| // Fallback: select text so user can manually copy | |
| var range = document.createRange(); | |
| range.selectNodeContents(code); | |
| var sel = window.getSelection(); | |
| sel.removeAllRanges(); | |
| sel.addRange(range); | |
| btn.setAttribute('title', 'Text selected — press Ctrl+C to copy'); | |
| }); | |
| if (navigator.clipboard && navigator.clipboard.writeText) { | |
| navigator.clipboard.writeText(code.textContent.trim()).then(function () { | |
| iconCopy.style.display = 'none'; | |
| iconCheck.style.display = 'block'; | |
| setTimeout(function () { | |
| iconCopy.style.display = 'block'; | |
| iconCheck.style.display = 'none'; | |
| }, 2000); | |
| }).catch(function () { | |
| // Fallback: select text so user can manually copy | |
| selectCodeText(); | |
| }); | |
| } else { | |
| // Fallback: select text so user can manually copy | |
| selectCodeText(); | |
| } | |
| function selectCodeText() { | |
| var range = document.createRange(); | |
| range.selectNodeContents(code); | |
| var sel = window.getSelection(); | |
| sel.removeAllRanges(); | |
| sel.addRange(range); | |
| btn.setAttribute('title', 'Text selected — press Ctrl+C to copy'); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/homepage/InstallSection.astro` around lines 146 - 161, The
clipboard call in InstallSection.astro should be guarded because
navigator.clipboard may be undefined in non-secure contexts; before calling
navigator.clipboard.writeText(...) check that window.navigator &&
navigator.clipboard && typeof navigator.clipboard.writeText === 'function', and
if not available immediately run the existing fallback flow that selects the
code (using code, range, sel) and updates the UI (btn title, iconCopy/iconCheck
toggles) so no exception is thrown; keep the success path unchanged when
clipboard is present.
Member
|
lemao ig it looks better |
Member
|
It didn't deploy btw |
Member
|
well - now it did lol |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Astro.siteconfigTest plan
Summary by CodeRabbit
New Features
Bug Fixes