DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Badges kräftiger für bessere Lesbarkeit + Admin-Install-Icon endlich zuverlässig

Browse Source 
Badges ("NEU", "HANDGEMACHT" ...) sitzen direkt auf Produktfotos mit
unterschiedlichsten Hintergründen — die alte, sehr transparente Pille
ging auf manchen Fotos optisch unter. Gleiche Farben/gleicher Stil,
aber kräftigerer (deutlich weniger transparenter) Hintergrund + eigener
Rand + dezenter Schlagschatten hinterm Text für Kontrast auf jedem
Untergrund.

Den eigentlichen Grund für das wacklige Verhalten beim Installieren des
Admin-Bereichs gefunden: Sveltia CMS liest selbst den "logo"-Eintrag in
config.yml (eigentlich nur fürs Branding IN der CMS-Oberfläche gedacht)
und fügt daraus automatisch EIGENE Icon-/Manifest-Verknüpfungen in den
<head> ein — u.a. ein live generiertes, eigenes Manifest als blob:-URL
— NACH unseren eigenen. Zwei "rel=manifest"-Links gleichzeitig sind
technisch erlaubt, aber welcher beim Installieren gewinnt, war nicht
zuverlässig vorhersagbar. Das erklärt, warum es mal geklappt hat und
mal nicht, unabhängig vom Icon-Inhalt selbst.

Fix: ein MutationObserver entfernt Sveltias eigene, automatisch
eingefügte Icon-/Manifest-Verknüpfungen sofort wieder, sobald sie
auftauchen — übrig bleiben ausschließlich unsere eigenen (Favicon =
echtes Logo, Install-Icon = lila V). Verifiziert: nach vollständigem
Laden inkl. Sveltia sind nur noch unsere 5 eigenen Verknüpfungen im
<head> vorhanden, 0 Installability-Errors.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 01:24:40 +02:00
co-authored by Claude Sonnet 5
parent 8da322699b
commit 1b55604cba
2 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin/index.html
+26
View File
@@ -99,6 +99,32 @@
<button type="button" id="install-btn" title="Admin als App installieren">⬇️ Installieren</button>
<script>
// WICHTIG gefundener Grund für das wacklige Installations-Icon bisher: Sveltia CMS liest
// selbst den "logo"-Eintrag oben in config.yml (der eigentlich nur fürs Branding IN der
// CMS-Oberfläche gedacht ist) und fügt daraus automatisch EIGENE <link rel="icon">,
// <link rel="apple-touch-icon"> und sogar ein eigenes, live generiertes
// <link rel="manifest"> (als blob:-URL) in den <head> ein — NACH unseren eigenen, fest
// im HTML stehenden Verknüpfungen. Zwei "rel=manifest"-Links gleichzeitig sind erlaubt,
// aber welcher davon beim Installieren gewinnt, ist nicht zuverlässig vorhersagbar —
// genau das erklärt, warum es mal geklappt hat und mal nicht. Fix: ein MutationObserver
// entfernt Sveltias eigene Icon-/Manifest-Verknüpfungen SOFORT wieder, sobald sie
// auftauchen, damit ausschließlich unsere eigenen (mit dem lila "V") übrig bleiben.
(function () {
var eigeneManifestUrl = location.origin + "/admin/manifest.webmanifest";
var beobachter = new MutationObserver(function (mutationen) {
mutationen.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.nodeName !== "LINK") return;
var rel = node.getAttribute("rel");
if (rel === "manifest" && node.href !== eigeneManifestUrl) node.remove();
if (rel === "icon" && node.href.indexOf("/logo.png") !== -1) node.remove();
if (rel === "apple-touch-icon" && node.href.indexOf("data:") === 0) node.remove();
});
});
});
beobachter.observe(document.head, { childList: true });
})();
// Gleiches Prinzip wie auf der Hauptseite: Button nur zeigen, wenn der Browser die
// Installation wirklich anbietet, und nicht mehr, sobald bereits als App installiert.
(function () {