From b888e682d837efb6c042738927960276b66d9c39 Mon Sep 17 00:00:00 2001 From: qcigano Date: Mon, 3 Aug 2026 19:50:02 +0200 Subject: [PATCH] =?UTF-8?q?Musik-Button=20(Van-Van=20Spotify)=20unten=20re?= =?UTF-8?q?chts,=20seitenweit=20persistent=20+=20Cham=C3=A4leon-Farben?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Vorschau-Umschalter (🎭) nach unten links verschoben, damit unten rechts Platz für den neuen Musik-Button ist. Astro ClientRouter (View Transitions) eingeführt, damit der Spotify-Player beim Seitenwechsel als echtes, unverändertes DOM-Element bestehen bleibt (transition:persist) statt neu zu laden — die Musik läuft beim Weiterklicken einfach weiter. Der Button-Farbverlauf passt sich per Canvas-Farbanalyse an das Hauptbild der jeweiligen Seite an, mit einem seiten-spezifischen Fallback-Farbpaar für bildlose Seiten (Warenkorb, Rechtstexte, ...). Da Astro Skripte bei Client-seitigen Übergängen nicht automatisch neu ausführt, musste das komplette Header-Skript (Warenkorb-Zähler, Konto-Menü, Hamburger, Installations- Button) auf das "astro:page-load"-Ereignis umgestellt werden; echte Dauer-Listener (document/window) wurden dabei bewusst nur einmal registriert, um Duplikate bei jeder Navigation zu vermeiden. Ausführlich mit einem headless-Chrome-Testskript verifiziert: Iframe-Persistenz über mehrere Navigationen hinweg, keine doppelten Klick-Listener, keine Konsolenfehler. Co-Authored-By: Claude Sonnet 5 --- src/layouts/Layout.astro | 323 ++++++++++++++++++++++++++++++--------- src/styles/global.css | 101 +++++++++++- 2 files changed, 347 insertions(+), 77 deletions(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index d453651..605ca5b 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -4,6 +4,13 @@ import { categories } from "../data/categories"; import { defaultLocale, localeMeta, localePrefix, type Locale } from "../i18n/config"; import { useTranslations } from "../i18n/ui"; import LanguageSwitcher from "../components/LanguageSwitcher.astro"; +// ClientRouter (Astros eingebaute View-Transitions-Technik) ausschließlich für EIN Ziel aktiviert: +// den Musik-Button unten rechts (siehe transition:persist weiter unten) soll beim Seitenwechsel +// nicht neu erzeugt werden, damit ein einmal gestarteter Spotify-Player weiterläuft, statt bei +// jedem Klick auf einen Link neu zu laden — genau wie beim Dogfather-Universe-Projekt, nur mit +// Astros nativer, offiziell unterstützter Lösung dafür statt eines selbstgebauten PJAX-Systems +// (das mit Astros gebündelten, gehashten Skript-Dateien nicht zuverlässig zusammenspielen würde). +import { ClientRouter } from "astro:transitions"; interface Props { title: string; @@ -56,6 +63,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`; +
🩵 {t.topbar}
@@ -194,13 +202,49 @@ const p = (href: string) => `${localePrefix(lang)}${href}`; + {/* Musik-Button: schwebt rechts unten auf JEDER Seite, spielt Van-Vans Musik von Spotify + (genau wie beim Dogfather-Universe-Projekt — gleiche Spotify-Artist-ID, gleiches Grund- + prinzip). transition:persist sorgt dafür, dass dieses Element (inkl. laufendem Spotify- + iframe) beim Seitenwechsel NICHT neu erzeugt wird, sondern unverändert in die neue Seite + übernommen wird — die Musik läuft also beim Klicken durch die Seite einfach weiter, statt + bei jeder Navigation neu zu starten. Die Farbe des Knopfs passt sich "chamäleonartig" an + die jeweilige Seite an (siehe adaptMusicColors() im Skript unten). */} +
+ + +
+