/* ===================================================================== NAMEN, DIE ZWEIMAL VERGEBEN SIND (17.09.2026) Filipe, zu einem Bildschirmfoto der Kopfleiste: „was soll das jetzt, wieso sieht das in gewissen seiten so scheisse aus?!" Der Teilen-Knopf stand dort doppelt so hoch wie seine Nachbarn, mit dem Zeichen ueber dem Wort statt daneben. Die Ursache war kein Gestaltungsfehler, sondern ein Name: `.teilen` gab es ZWEIMAL -- einmal in gate.css als Knopf der Kopfleiste (`inline-flex`, waagerecht), einmal in bereich.css als Layout der Teilen-Seite (`flex column`, 22 px Abstand, 44 rem breit). Auf den drei Seiten, die beide Dateien laden, gewann die spaeter geladene -- und der Knopf bekam das Layout einer ganzen Seite. DERSELBE NAME KOSTETE AUSSERDEM DEN KNOPF: kopf.js baut ihn nur ein, wenn es `getElementById('teilen')` NICHT findet -- ein Schutz gegen doppelten Einbau. Auf teilen.html steht `
` aber schon im HTML. Dort fehlte der Knopf damit vollstaendig, und niemand konnte das an einer Farbe oder einem Abstand sehen. ES IST DER ZWEITE NAMENSKONFLIKT AN EINEM TAG. Der erste (`.t-schritt` fuer zwei verschiedene Dinge auf der Talente-Seite) fiel nur auf, weil ich im Browser Elemente gezaehlt habe -- 13 gefunden, 12 erwartet. Beide waren gruen in jeder bestehenden Prueflinie. Deshalb diese Datei: Ein Kommentar, der vor einem Fehler warnt, verhindert ihn nicht; eine Pruefung schon. SIE BRAUCHT KEINEN SERVER und laeuft in unter einer Sekunde. Aufrufen mit: node server/pruef-namen.mjs ===================================================================== */ import { readFileSync, readdirSync } from "node:fs"; import { join, dirname } from "node:path"; import { fileURLToPath } from "node:url"; const HIER = dirname(fileURLToPath(import.meta.url)); const WS = join(HIER, "..", "workspace"); let fehler = 0, geprueft = 0; const melde = (t) => console.log(t); const ok = (b, t) => { geprueft++; console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; }; const seiten = readdirSync(WS).filter((f) => f.endsWith(".html")); const lies = (p) => readFileSync(p, "utf8"); /* Welche Dateien eine Seite laedt -- aus ihr selbst, nicht aus einer gepflegten Liste. Eine Liste, die niemand pflegt, kann nicht veralten. */ const cssVon = (t) => [...t.matchAll(/assets\/css\/([\w-]+\.css)/g)].map((m) => m[1]); const jsVon = (t) => [...t.matchAll(/assets\/js\/([\w-]+\.js)/g)].map((m) => m[1]); /* ======================================================================= 1. EIN SKRIPT VERGIBT EINE ID, DIE IM HTML SCHON STEHT ======================================================================= */ melde("=== 1. Doppelte Kennungen ==="); const jsIds = new Map(); for (const f of readdirSync(join(WS, "assets", "js")).filter((x) => x.endsWith(".js"))) { const t = lies(join(WS, "assets", "js", f)); const menge = new Set(); for (const m of t.matchAll(/\.id\s*=\s*['"]([\w-]+)['"]/g)) menge.add(m[1]); for (const m of t.matchAll(/setAttribute\(\s*['"]id['"]\s*,\s*['"]([\w-]+)['"]/g)) menge.add(m[1]); jsIds.set(f, menge); } ok(jsIds.size > 5, `${jsIds.size} Skripte durchgesehen`); { const alle = [...jsIds.values()].reduce((n, s) => n + s.size, 0); ok(alle > 0, `sie vergeben ${alle} Kennungen von Hand -- das ist die Menge, um die es geht`); } const idFunde = []; for (const s of seiten) { const t = lies(join(WS, s)); const imHtml = new Set([...t.matchAll(/\sid="([\w-]+)"/g)].map((m) => m[1])); for (const j of jsVon(t)) { for (const i of jsIds.get(j) || []) { if (imHtml.has(i)) idFunde.push(`${s}: #${i} steht im HTML und wird von ${j} vergeben`); } } } ok(idFunde.length === 0, idFunde.length ? `doppelte Kennung: ${idFunde.join(" | ")}` : "kein Skript vergibt eine Kennung, die auf seiner Seite schon steht"); /* UND DIE DOPPELTEN IM HTML SELBST -- dieselbe Krankheit, andere Quelle. getElementById liefert dann das erste Element, und welches das ist, entscheidet die Reihenfolge im Dokument. */ { const dop = []; for (const s of seiten) { const ids = [...lies(join(WS, s)).matchAll(/\sid="([\w-]+)"/g)].map((m) => m[1]); const zaehl = {}; for (const i of ids) zaehl[i] = (zaehl[i] || 0) + 1; for (const [i, n] of Object.entries(zaehl)) if (n > 1) dop.push(`${s}: #${i} (${n}x)`); } ok(dop.length === 0, dop.length ? `doppelt im HTML: ${dop.join(" | ")}` : "und keine Seite vergibt dieselbe Kennung zweimal im HTML"); } /* ======================================================================= 2. EIN WAECHTER, DER AUF FREMDEN INHALT TRIFFT kopf.js baut Elemente nur ein, wenn es sie nicht schon findet. Trifft so ein Waechter auf eine ID, die eine SEITE vergibt, baut er dort nichts -- ohne Fehlermeldung, ohne Spur. Genau so verschwand der Teilen-Knopf von teilen.html. ======================================================================= */ melde(""); melde("=== 2. Waechter, die auf Seiteninhalt treffen ==="); { const waechter = new Map(); // datei -> Set(id) for (const f of readdirSync(join(WS, "assets", "js")).filter((x) => x.endsWith(".js"))) { const t = lies(join(WS, "assets", "js", f)); const menge = new Set(); /* NUR DER POSITIVE WAECHTER. Gemessen an den beiden Faellen in kopf.js: Zeile 1472 if (gerufen || !document.getElementById('wer')) return; -> "ohne dieses Element gibt es nichts zu tun". Voellig richtig, kein Befund. Zeile 203 if (!leiste || document.getElementById('teilen')) return; -> "ist schon da, also nicht nochmal einbauen". DAS ist der gefaehrliche: Trifft er auf fremden Seiteninhalt, baut er stillschweigend nichts. Der Unterschied ist genau ein Ausrufezeichen. Ohne diese Unterscheidung meldete der Abschnitt 30 Seiten wegen `#wer` -- und eine Warnung, die immer kommt, ist keine Warnung mehr. */ for (const m of t.matchAll( /[^!]document\.getElementById\(\s*['"]([\w-]+)['"]\s*\)\s*\)\s*return/g)) { menge.add(m[1]); } if (menge.size) waechter.set(f, menge); } const alle = [...waechter.values()].reduce((n, s) => n + s.size, 0); ok(alle > 0, `${alle} solcher Waechter gefunden (in ${waechter.size} Dateien)`); const funde = []; for (const s of seiten) { const t = lies(join(WS, s)); const imHtml = new Set([...t.matchAll(/\sid="([\w-]+)"/g)].map((m) => m[1])); for (const j of jsVon(t)) { for (const i of waechter.get(j) || []) { if (imHtml.has(i)) { funde.push(`${s}: ${j} steigt aus, weil #${i} im HTML steht`); } } } } ok(funde.length === 0, funde.length ? `stiller Aussetzer: ${funde.join(" | ")}` : "kein Waechter wird von einer Seiten-Kennung ausgehebelt"); } /* ======================================================================= 3. DIESELBE KLASSE, ZWEI WIDERSPRECHENDE ANORDNUNGEN NICHT jede doppelte Regel ist ein Fehler. Gemessen am 17.09.: 2872 Klasse wird in zwei geladenen Dateien ueberhaupt erwaehnt 1887 davon mit einer eigenen Blockdefinition 12 davon mit widersprechendem `display` 6 davon ohne `display: none` auf einer Seite Die ersten beiden Zahlen sind Rauschen: module.css gewinnt absichtlich als letzte Datei, und `start.css -> seitendatei.css` ist die gewollte Kaskade (Grundform hier, Verfeinerung dort). Eine Warnung, die 1887-mal kommt, ist keine Warnung mehr. GEPRUEFT WIRD DER SCHARFE SCHNITT: beide Regeln setzen `display`, die Werte widersprechen sich, und keine davon ist `none` (das ist das verbreitete Muster "ausgeblendet, ausser auf ihrer Seite"). Genau dieser Schnitt haette `.teilen` gefunden. ======================================================================= */ melde(""); melde("=== 3. Widersprechende Anordnungen ==="); /* Was hier absichtlich so ist -- mit Grund, nicht als Sammelbecken. Jede Zeile ist eine Entscheidung, die jemand getroffen hat. */ const GEWOLLT = new Set([ /* Die Startseite baut die Willkommensreihe zu drei Spalten um; start.css hat die einfache Fassung fuer alle anderen. */ "willkommen__reihe", /* Der Bericht nutzt den Kachelnamen als kleine Unterzeile, ohne die mehrzeilige Abschneidung der grossen Kacheln. */ "kachel__name", /* Kalender: die Grundform steht in start.css (Tageskacheln auf der Startseite), die Vollansicht in kalender.css. */ "k-anlass", "k-pille", ]); { const bloecke = new Map(); for (const f of readdirSync(join(WS, "assets", "css")).filter((x) => x.endsWith(".css"))) { const t = lies(join(WS, "assets", "css", f)).replace(/\/\*[\s\S]*?\*\//g, ""); const karte = new Map(); for (const m of t.matchAll(/([^{}]+)\{([^{}]*)\}/g)) { const disp = m[2].match(/(?:^|;|\s)display\s*:\s*([\w-]+)/)?.[1]; if (!disp) continue; const richt = m[2].match(/flex-direction\s*:\s*([\w-]+)/)?.[1] || ""; for (const teil of m[1].split(",")) { const sel = teil.trim(); if (/^\.[a-zA-Z][\w-]*$/.test(sel)) karte.set(sel.slice(1), { disp, richt, datei: f }); } } bloecke.set(f, karte); } ok(bloecke.size > 10, `${bloecke.size} Gestaltungsdateien durchgesehen`); /* Die Pruefung als Funktion -- damit die Gegenprobe unten dieselbe benutzt und nicht eine nachgebaute zweite Meinung. */ const suche = (zusatz = null) => { const funde = []; for (const s of seiten) { const t = lies(join(WS, s)); const dateien = cssVon(t).filter((c) => c !== "module.css"); const gesehen = new Map(); for (const c of dateien) { const karte = new Map(bloecke.get(c) || []); if (zusatz && zusatz.datei === c) karte.set(zusatz.klasse, zusatz.wert); for (const [k, w] of karte) { const alt = gesehen.get(k); if (alt && !GEWOLLT.has(k) && alt.disp !== "none" && w.disp !== "none" && (alt.disp !== w.disp || alt.richt !== w.richt)) { funde.push(`${s}: .${k} ist in ${alt.datei} ${alt.disp} ${alt.richt}` + ` und in ${c} ${w.disp} ${w.richt}`); } gesehen.set(k, w); } } } return funde; }; const funde = suche(); ok(funde.length === 0, funde.length ? `zwei Dinge, ein Name: ${funde[0]}${funde.length > 1 ? ` (und ${funde.length - 1} weitere)` : ""}` : "keine Klasse wird auf einer Seite grundsaetzlich anders angeordnet als auf einer anderen"); /* GEGENPROBE: Eine Pruefung, die immer bestaetigt, bestaetigt nichts. ABGELEITET, NICHT GERATEN. Beim ersten Versuch stand hier ein fest gewaehlter Klassenname -- und die Gegenprobe fand nichts, weil die Klasse in der gewaehlten Datei gar kein `display` setzt. Eine Gegenprobe, die selbst danebenliegt, beweist so wenig wie gar keine. Jetzt wird eine Klasse genommen, von der GEMESSEN ist, dass sie in einer frueher geladenen Datei derselben Seite steht. */ const probeSeite = seiten.find((s) => cssVon(lies(join(WS, s))) .filter((c) => c !== "module.css").length >= 2); const probeDateien = cssVon(lies(join(WS, probeSeite))) .filter((c) => c !== "module.css"); const probeKlasse = [...(bloecke.get(probeDateien[0]) || new Map()).entries()] .find(([k, w]) => w.disp !== "none" && !GEWOLLT.has(k)); ok(!!probeKlasse, `Gegenprobe vorbereitet: .${probeKlasse?.[0]} aus ${probeDateien[0]} ` + `(${probeSeite} laedt ${probeDateien.length} Dateien)`); const erfunden = suche({ datei: probeDateien[1], klasse: probeKlasse[0], wert: { disp: probeKlasse[1].disp === "grid" ? "flex" : "grid", richt: "", datei: probeDateien[1] }, }); ok(erfunden.length > funde.length, `Gegenprobe: eine erfundene Kollision wird erkannt (${erfunden.length} statt ${funde.length})`); } /* ======================================================================= 4. DIE KOPFLEISTE HAT IHREN EIGENEN NAMENSRAUM Die Reparatur vom 17.09. war nicht "diesen einen Namen aendern", sondern eine Regel: Was kopf.js in die Leiste haengt, traegt `kopf-` davor. Eine Seite kann dann heissen, wie sie will -- auch `teilen`, `chat` oder `suchen`, und genau diese Woerter sind die, die als naechstes eine Seite braucht. Ohne diese Pruefung waere die Regel ein Kommentar, und Kommentare verhindern nichts (siehe 11.09., der Spaltenverlust neben der Warnung davor). ======================================================================= */ melde(""); melde("=== 4. Der Namensraum der Kopfleiste ==="); { const t = lies(join(WS, "assets", "js", "kopf.js")); const vergeben = [...t.matchAll(/\.id\s*=\s*['"]([\w-]+)['"]/g)].map((m) => m[1]); ok(vergeben.length > 0, `kopf.js vergibt ${vergeben.length} Kennungen`); const ohne = vergeben.filter((i) => !i.startsWith("kopf-")); ok(ohne.length === 0, ohne.length ? `ohne Namensraum: ${ohne.join(", ")}` : `alle tragen "kopf-" davor (${vergeben.join(", ")})`); } /* ------------------------------------------------------------------- */ melde(""); melde(`${geprueft} Pruefungen, ${fehler} Fehler`); melde(fehler ? "NICHT IN ORDNUNG" : "ALLES IN ORDNUNG"); process.exit(fehler ? 1 : 0);