From 341895e9168226d73210dfb077bf1928f732cc0e Mon Sep 17 00:00:00 2001 From: Afonso Jorge Ramos Date: Fri, 6 Mar 2026 00:34:35 +0100 Subject: [PATCH 1/5] feat: redesign homepage with new hero, themes bento grid, and features section --- src/components/SEO.astro | 5 +- src/pages/index.astro | 1170 ++++++++++++++++++++++++++------------ 2 files changed, 807 insertions(+), 368 deletions(-) diff --git a/src/components/SEO.astro b/src/components/SEO.astro index bb20c31..04846b8 100644 --- a/src/components/SEO.astro +++ b/src/components/SEO.astro @@ -13,8 +13,9 @@ const { type = 'website', } = Astro.props; -const canonicalURL = new URL(Astro.url.pathname, Astro.site); -const ogImage = new URL(image, Astro.site); +const siteBase = Astro.site ?? Astro.url.origin; +const canonicalURL = new URL(Astro.url.pathname, siteBase); +const ogImage = new URL(image, siteBase); const fullTitle = title === 'Spicetify' ? title : `${title} | Spicetify`; --- diff --git a/src/pages/index.astro b/src/pages/index.astro index 5f221d0..578204f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -73,168 +73,245 @@ const heroShowcase = [ label: 'Extensions', }, ]; + +const features = [ + { + icon: 'palette', + title: 'Themes', + description: + 'Transform your Spotify with community color schemes, layouts, and visual overhauls.', + href: '/docs/customization/themes', + }, + { + icon: 'puzzle', + title: 'Extensions', + description: + 'Add keyboard shortcuts, playback controls, and integrations with other services.', + href: '/docs/customization/extensions', + }, + { + icon: 'grid', + title: 'Custom Apps', + description: + 'Build entirely new pages inside Spotify for lyrics, stats, and more.', + href: '/docs/customization/custom-apps', + }, + { + icon: 'terminal', + title: 'Powerful CLI', + description: + 'Full control from the command line. Apply, backup, restore, and update with ease.', + href: '/docs/getting-started', + }, +]; --- -
-
-
-
-
- - - - Open Source · {stats.githubStars} Stars on GitHub · {stats.downloads} Downloads +
+ +
+
+
+
+
+
-

Make Spotify yours.

-

- Customize themes, inject extensions, and unlock the full potential of your Spotify client. -

-
- - Get Started - - - - - GitHub - + +
+
+ + Open Source · {stats.githubStars} Stars · {stats.downloads} Downloads +
+ +

+ Make Spotify + truly yours. +

+ +

+ Themes. Extensions. Custom apps.
+ The ultimate Spotify customization toolkit. +

+ +
+ + Get Started + + + + + View on GitHub + +
-
-
-
- {heroShowcase.map((item) => ( -
- {item.alt} - {item.label} -
- ))} + +
+
+ {heroShowcase.map((item) => ( +
+ {item.alt} + {item.label} +
+ ))} +
+
+
+
+ + +
+
+ Showcase +

Themes for every taste

+

Browse community-made themes that completely transform Spotify.

-
-
- -
-
-

Themes for every taste

-

Explore community-made themes that transform your Spotify experience.

-
+ +
{themes.map((theme, i) => ( -
+
{theme.alt} - {theme.label} + {theme.label}
))}
-
+ +
Browse all themes - {stats.marketplaceItems} items in the Marketplace + {stats.marketplaceItems} items in the Marketplace
-
-
- -
-
-

Everything you need

-

Customize every corner of your Spotify client.

-
- -
- - - - -
-

Themes

-

Transform your Spotify client with community-made color schemes, layouts, and visual overhauls.

- - -
- - - -
-

Extensions

-

Add new features like keyboard shortcuts, playback controls, and integrations with other services.

- - -
- - - -
-

Custom Apps

-

Build entirely new pages inside Spotify for lyrics, stats, library management, and more.

- +
+ + +
+
+
+ Features +

Everything you need

+

A complete toolkit to customize every corner of Spotify.

+
+ +
+ {features.map((feature) => ( + +
+ {feature.icon === 'palette' && ( + + + + + )} + {feature.icon === 'puzzle' && ( + + + + )} + {feature.icon === 'grid' && ( + + + + )} + {feature.icon === 'terminal' && ( + + + + )} +
+

{feature.title}

+

{feature.description}

+ + + + + ))} +
+
+
+ + +
+
+
+
- -
- -
-
-
-

Install in seconds

-

One command to get started.

-

Join thousands of users who have made Spotify their own.

-
-
- - +
+
+ Quick Start +

Install in seconds

+

One command. That's it.

-
-
- iwr -useb https://raw.githubusercontent.com/spicetify/cli/main/install.ps1 | iex + +
+
+ +
- + +
+ + Read the Docs + + + + Join Discord +
-
- Get Started - - - Join Discord - -
-
-
+ + From 2ef257efbcae83a2523d6e84a7a7d1d27bcca5ca Mon Sep 17 00:00:00 2001 From: Afonso Jorge Ramos Date: Fri, 6 Mar 2026 11:08:58 +0100 Subject: [PATCH 2/5] refactor: extract reusable ArrowIcon component --- src/components/icons/ArrowIcon.astro | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/components/icons/ArrowIcon.astro diff --git a/src/components/icons/ArrowIcon.astro b/src/components/icons/ArrowIcon.astro new file mode 100644 index 0000000..77ee365 --- /dev/null +++ b/src/components/icons/ArrowIcon.astro @@ -0,0 +1,10 @@ +--- +interface Props { + size?: number; + strokeWidth?: number; +} + +const { size = 16, strokeWidth = 2 } = Astro.props; +--- + + From b7a8d2f7f7809bca467b1845a043e8195fc7256f Mon Sep 17 00:00:00 2001 From: Afonso Jorge Ramos Date: Fri, 6 Mar 2026 11:09:24 +0100 Subject: [PATCH 3/5] perf: replace render-blocking CSS @import with preconnect and link for Syne font --- src/layouts/BaseLayout.astro | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 7c4cf12..ce0d513 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -23,6 +23,9 @@ const fullTitle = title === 'Spicetify' ? title : `${title} | Spicetify`; + + + {fullTitle} + + diff --git a/src/components/homepage/ThemesBento.astro b/src/components/homepage/ThemesBento.astro new file mode 100644 index 0000000..c0a16e7 --- /dev/null +++ b/src/components/homepage/ThemesBento.astro @@ -0,0 +1,179 @@ +--- +import { Image } from 'astro:assets'; +import type { ImageMetadata } from 'astro'; +import ArrowIcon from '../icons/ArrowIcon.astro'; + +interface Props { + themes: { src: ImageMetadata; alt: string; label: string }[]; + marketplaceItems: string; +} + +const { themes, marketplaceItems } = Astro.props; +--- + +
+
+ Showcase +

Themes for every taste

+

Browse community-made themes that completely transform Spotify.

+
+ +
+ {themes.map((theme, i) => ( +
+ {theme.alt} + {theme.label} +
+ ))} +
+ +
+ + Browse all themes + + + {marketplaceItems} items in the Marketplace +
+
+ + diff --git a/src/pages/index.astro b/src/pages/index.astro index 578204f..258e468 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,5 +1,4 @@ --- -import { Image } from 'astro:assets'; import theme1 from '../assets/homepage/1.png'; import theme2 from '../assets/homepage/2.png'; import theme3 from '../assets/homepage/3.png'; @@ -9,8 +8,10 @@ import theme6 from '../assets/homepage/6.png'; import heroFullApp from '../assets/homepage/full-app-display.png'; import heroLyrics from '../assets/homepage/lyrics-plus.png'; import heroMarketplace from '../assets/homepage/marketplace.png'; -import DiscordIcon from '../components/icons/DiscordIcon.astro'; -import GitHubIcon from '../components/icons/GitHubIcon.astro'; +import FeaturesGrid from '../components/homepage/FeaturesGrid.astro'; +import HeroSection from '../components/homepage/HeroSection.astro'; +import InstallSection from '../components/homepage/InstallSection.astro'; +import ThemesBento from '../components/homepage/ThemesBento.astro'; import BaseLayout from '../layouts/BaseLayout.astro'; // Community stats — update these periodically @@ -108,333 +109,43 @@ const features = [
- -
-
-
-
-
-
-
- -
-
- - Open Source · {stats.githubStars} Stars · {stats.downloads} Downloads -
- -

- Make Spotify - truly yours. -

- -

- Themes. Extensions. Custom apps.
- The ultimate Spotify customization toolkit. -

- -
- - Get Started - - - - - View on GitHub - -
-
- -
-
- {heroShowcase.map((item) => ( -
- {item.alt} - {item.label} -
- ))} -
-
-
-
- - -
-
- Showcase -

Themes for every taste

-

Browse community-made themes that completely transform Spotify.

-
- -
- {themes.map((theme, i) => ( -
- {theme.alt} - {theme.label} -
- ))} -
- -
- - Browse all themes - - - {stats.marketplaceItems} items in the Marketplace -
-
- - -
-
-
- Features -

Everything you need

-

A complete toolkit to customize every corner of Spotify.

-
- -
- {features.map((feature) => ( - -
- {feature.icon === 'palette' && ( - - - - - )} - {feature.icon === 'puzzle' && ( - - - - )} - {feature.icon === 'grid' && ( - - - - )} - {feature.icon === 'terminal' && ( - - - - )} -
-

{feature.title}

-

{feature.description}

- - - - - ))} -
-
-
- - -
-
-
-
-
-
-
- Quick Start -

Install in seconds

-

One command. That's it.

-
- -
-
- - -
-
-
- $ - iwr -useb https://raw.githubusercontent.com/spicetify/cli/main/install.ps1 | iex -
- - -
-
- -
- - Read the Docs - - - - Join Discord - -
-
-
+ + + +
- - From 73864aec0726e433709378d9ad7a2b8ec18bdf29 Mon Sep 17 00:00:00 2001 From: Afonso Jorge Ramos Date: Fri, 6 Mar 2026 11:52:44 +0100 Subject: [PATCH 5/5] fix: prevent auto-scroll to install section on page load --- src/components/homepage/InstallSection.astro | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/homepage/InstallSection.astro b/src/components/homepage/InstallSection.astro index e6bd656..a9d0ac5 100644 --- a/src/components/homepage/InstallSection.astro +++ b/src/components/homepage/InstallSection.astro @@ -70,7 +70,7 @@ type Props = {}; var tabs = Array.from(document.querySelectorAll('.install-tab')); var panels = document.querySelectorAll('.install-panel'); - function activateTab(tab) { + function activateTab(tab, shouldFocus) { tabs.forEach(function (t) { t.classList.remove('active'); t.setAttribute('aria-selected', 'false'); @@ -84,7 +84,7 @@ type Props = {}; tab.classList.add('active'); tab.setAttribute('aria-selected', 'true'); tab.setAttribute('tabindex', '0'); - tab.focus(); + if (shouldFocus) tab.focus(); var panelId = tab.getAttribute('aria-controls'); var panel = document.getElementById(panelId); if (panel) { @@ -97,12 +97,12 @@ type Props = {}; var ua = navigator.userAgent.toLowerCase(); if (ua.includes('mac') || ua.includes('linux')) { var macTab = document.getElementById('tab-macos'); - if (macTab) activateTab(macTab); + if (macTab) activateTab(macTab, false); } tabs.forEach(function (tab) { tab.addEventListener('click', function () { - activateTab(tab); + activateTab(tab, true); }); }); @@ -125,7 +125,7 @@ type Props = {}; return; } e.preventDefault(); - activateTab(tabs[nextIndex]); + activateTab(tabs[nextIndex], true); }); } }