marek/guides
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Team3
2026-05-28 22:38:01 +02:00
parent 4594c2e372
commit 96536498d0
7 changed files with 219 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
templates/Format/Baustein.md
View File

@@ -20,7 +20,7 @@ STRUKTUR — STRIKT NUR DIESE 4 ELEMENTE
1. Titel (h1, fett, ohne Label, ohne Logo)
2. Beschreibung (ein knapper Satz)
3. Zweck (kursiv, grau, ein knapper Satz)
4. Code-Beispiele (untereinander, mit Mini-Label oben)
4. Code-Beispiel (das eine relevanteste, mit Mini-Label oben)
KEIN Logo, KEIN "Baustein"-Label, KEIN Sprach-Tag, KEINE Sektion-Überschriften ("Beschreibung", "Zweck", "Relevante Beispiele"), KEINE Info-Blöcke, KEINE Warn/Tip/Note-Boxen, KEINE Meta-Informationen, KEINE Trennlinien zwischen Sektionen.
@@ -53,27 +53,24 @@ INHALTLICHE PRINZIPIEN
- Beschreibung: 1 Satz, was es macht (mechanisch, neutral)
- Zweck: 1 Satz, wofür man es nutzt (Anwendungsfall)
- Beide Sätze knapp wie möglich, jedes überflüssige Wort raus
- Pro Beispiel ein knappes Label oben (2-4 Wörter, uppercase)
- Genau EIN Code-Beispiel: das relevanteste / häufigste / typischste
- Beispiel zeigt den Standard-Use-Case, nicht Edge-Cases
- Knappes Label über dem Beispiel (2-4 Wörter, uppercase)
LAYOUT-DETAILS
- Header und Body keine separaten Sektionen, alles in einer Card
- Titel zuerst, darunter direkt Beschreibung, darunter Zweck (mit margin-bottom)
- Margin-bottom Titel: 14px
- Margin-bottom Beschreibung: 6px (eng zum Zweck)
- Margin-bottom Zweck: 22px (Abstand zu Code)
- Margin-bottom Titel: 14px
- Code-Blöcke untereinander, gap 14px
- Code-Block padding: 14px 16px, border-radius 8px
CODE-BEISPIELE
- So viele wie nötig, so wenige wie möglich
- Untereinander gestapelt (grid-template-columns: 1fr)
- Jedes Beispiel zeigt eine sinnvolle Variante / Use-Case
CODE-BEISPIEL
- GENAU EIN Beispiel pro Card
- Das relevanteste, typischste, häufigste — nicht Edge-Cases
- Sehr kurz: ideal 3-6 Zeilen, max 8 Zeilen
- Mit kurzem Label was die Variante zeigt
- Mit kurzem Label oben (2-4 Wörter)
- Syntax-Highlighting durch span-Klassen (.k, .v, .s, etc.)
- Triviale Bausteine: 1-2 Beispiele
- Komplexere Bausteine: 4-6 Beispiele
- Anzahl ergibt sich aus dem Inhalt, nicht aus Vorgabe
VERMEIDEN
- Lange Erklärungstexte
@@ -83,22 +80,24 @@ VERMEIDEN
- Tabellen, Listen, Aufzählungen
- Icons, Emojis, Symbole
- Komplexe Code-Beispiele (über 8 Zeilen)
- Mehrere Beispiele (Varianten, Alternativen)
THEMENSPEZIFISCHE ANPASSUNGEN
- Bei anderen Sprachen: Syntax-Highlighting-Klassen anpassen
- Titel-Größe und Spacing bleiben gleich
- Card-Layout bleibt gleich
- Inhalte (Beschreibung, Zweck, Beispiele) sprachspezifisch
- Inhalte (Beschreibung, Zweck, Beispiel) sprachspezifisch
GENERIERUNG MIT FEEDBACK-LOOP
1. HTML schreiben
2. In Browser anzeigen (Playwright-Screenshot oder direkt)
3. Prüfen:
- Wirklich nur 4 Elemente (Titel, Beschreibung, Zweck, Beispiele)?
- Wirklich nur 4 Elemente (Titel, Beschreibung, Zweck, Beispiel)?
- Beschreibung und Zweck unter 15 Wörtern?
- Code-Beispiele unter 8 Zeilen?
- Labels über Code-Blöcken kurz und prägnant?
- Code-Beispiel unter 8 Zeilen?
- Label über Code-Block kurz und prägnant?
- Card kompakt, kein leerer Raum?
- Ist das gewählte Beispiel wirklich das typischste?
4. Wenn etwas zu viel: weglassen, nicht hinzufügen
5. Bei jeder Iteration prüfen: lässt sich noch was weglassen?
```

12
templates/Referenz/Baustein.md
View File

@@ -98,18 +98,6 @@ h1 {
<span class="k">echo</span> <span class="v">$i</span>;
}</div>
<div class="code-block"><span class="label">Rückwärts zählen</span><span class="k">for</span> (<span class="v">$i</span> = <span class="n">10</span>; <span class="v">$i</span> &gt; <span class="n">0</span>; <span class="v">$i</span>--) {
<span class="k">echo</span> <span class="v">$i</span>;
}</div>
<div class="code-block"><span class="label">In 2er-Schritten</span><span class="k">for</span> (<span class="v">$i</span> = <span class="n">0</span>; <span class="v">$i</span> &lt;= <span class="n">20</span>; <span class="v">$i</span> += <span class="n">2</span>) {
<span class="k">echo</span> <span class="v">$i</span>;
}</div>
<div class="code-block"><span class="label">Mit Array-Index</span><span class="k">for</span> (<span class="v">$i</span> = <span class="n">0</span>; <span class="v">$i</span> &lt; <span class="n">3</span>; <span class="v">$i</span>++) {
<span class="k">echo</span> <span class="v">$arr</span>[<span class="v">$i</span>];
}</div>
</div>
</div>