update
This commit is contained in:
Team3
1
.gitignore
vendored
1
.gitignore
vendored
@@ -7,3 +7,4 @@ __pycache__/
|
||||
*.pyc
|
||||
.claude-data/
|
||||
.env
|
||||
.staging/
|
||||
|
||||
5
Makefile
5
Makefile
@@ -48,7 +48,8 @@ remove: stop
|
||||
@echo "Fertig."
|
||||
|
||||
sync:
|
||||
@mkdir -p storage/html
|
||||
@mkdir -p storage/guides storage/bausteine
|
||||
rsync -avz --progress root@178.104.67.87:/var/www/creator/storage/creator.db storage/
|
||||
rsync -avz --progress --delete root@178.104.67.87:/var/www/creator/storage/html/ storage/html/
|
||||
rsync -avz --progress --delete root@178.104.67.87:/var/www/creator/storage/guides/ storage/guides/
|
||||
rsync -avz --progress --delete root@178.104.67.87:/var/www/creator/storage/bausteine/ storage/bausteine/
|
||||
@echo "Sync abgeschlossen."
|
||||
|
||||
@@ -44,9 +44,10 @@ def provider_available(provider: str) -> bool:
|
||||
return True
|
||||
|
||||
|
||||
def kill_process(agent_key: str) -> None:
|
||||
process = _active_processes.get(agent_key)
|
||||
if process and process.returncode is None:
|
||||
def kill_process(agent_key_prefix: str) -> None:
|
||||
"""Killt alle aktiven Prozesse, deren Key mit dem Prefix beginnt (deckt -plan/-w1… ab)."""
|
||||
for key, process in list(_active_processes.items()):
|
||||
if key.startswith(agent_key_prefix) and process.returncode is None:
|
||||
process.kill()
|
||||
|
||||
|
||||
|
||||
@@ -7,12 +7,6 @@ FRONTEND_DIST = PROJECT_ROOT / "frontend" / "dist"
|
||||
DB_PATH = STORAGE_DIR / "creator.db"
|
||||
PROJECTS_DIR = PROJECT_ROOT / "projects"
|
||||
|
||||
FORMAT_META = {
|
||||
"OnePager": {"pages": "1 Seite", "time": "~5 Min"},
|
||||
"MiniGuide": {"pages": "3-5 Seiten", "time": "~15-25 Min"},
|
||||
"Guide": {"pages": "10-30 Seiten", "time": "variabel"},
|
||||
}
|
||||
|
||||
AGENT_TIMEOUT = 3600
|
||||
|
||||
MAX_CONCURRENT_GENERATIONS = 10
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import asyncio
|
||||
import json
|
||||
import re
|
||||
import uuid
|
||||
from datetime import datetime, timezone
|
||||
from pathlib import Path
|
||||
@@ -11,7 +13,7 @@ from config import (
|
||||
MAX_CONCURRENT_GENERATIONS,
|
||||
)
|
||||
from database import update_guide
|
||||
from paths import final_html_path, project_dir
|
||||
from paths import bausteine_path, guide_content_path, project_dir
|
||||
|
||||
_semaphore = asyncio.Semaphore(MAX_CONCURRENT_GENERATIONS)
|
||||
_cancelled: set[str] = set()
|
||||
@@ -30,14 +32,6 @@ async def _set_progress(guide_id: str, progress: str) -> None:
|
||||
await update_guide(guide_id, progress=progress, updated_at=now)
|
||||
|
||||
|
||||
# Welche Baustein-Kategorien jedes Format abdeckt.
|
||||
FORMAT_COVERAGE = {
|
||||
"OnePager": "NUR die KERN-Bausteine, maximal verdichtet",
|
||||
"MiniGuide": "NUR die KERN-Bausteine",
|
||||
"Guide": "die KERN- und WICHTIG-Bausteine",
|
||||
}
|
||||
|
||||
|
||||
def _prompt(name: str, **kwargs) -> str:
|
||||
template = (TEMPLATES_DIR / "Prompt" / f"{name}.md").read_text(encoding="utf-8")
|
||||
return template.format(**kwargs)
|
||||
@@ -47,92 +41,8 @@ def _extra(instructions: str) -> str:
|
||||
return f"\n\nZUSÄTZLICHE ANWEISUNGEN VOM NUTZER:\n{instructions}\n" if instructions else ""
|
||||
|
||||
|
||||
def _build_bausteine_prompt(topic: str, bausteine_path: Path, instructions: str = "", project: Path | None = None) -> str:
|
||||
if project:
|
||||
source = _prompt("Bausteine-Quelle-Projekt", project=project)
|
||||
else:
|
||||
source = _prompt("Bausteine-Quelle-Thema", topic=topic)
|
||||
return _prompt(
|
||||
"Bausteine",
|
||||
topic=topic, source=source, bausteine_path=bausteine_path, extra=_extra(instructions),
|
||||
)
|
||||
|
||||
|
||||
def _build_guide_prompt(topic: str, format_name: str, html_path: Path, bausteine: str, instructions: str = "", project: Path | None = None) -> str:
|
||||
spec = (TEMPLATES_DIR / "Format" / f"{format_name}.md").read_text(encoding="utf-8")
|
||||
reference = (TEMPLATES_DIR / "Referenz" / f"{format_name}.md").read_text(encoding="utf-8")
|
||||
|
||||
if project:
|
||||
facts = _prompt("Guide-Fakten-Projekt", project=project)
|
||||
else:
|
||||
facts = _prompt("Guide-Fakten-Thema")
|
||||
|
||||
return _prompt(
|
||||
"Guide",
|
||||
topic=topic, format_name=format_name, html_path=html_path,
|
||||
bausteine=bausteine, coverage=FORMAT_COVERAGE[format_name],
|
||||
facts=facts, spec=spec, reference=reference, extra=_extra(instructions),
|
||||
)
|
||||
|
||||
|
||||
async def generate_guide(guide_id: str, topic: str, format_name: str, instructions: str = "", provider: str = DEFAULT_PROVIDER) -> None:
|
||||
async with _semaphore:
|
||||
now = datetime.now(timezone.utc).isoformat()
|
||||
await update_guide(guide_id, status="generating", progress="Ermittle Bausteine…", updated_at=now)
|
||||
|
||||
html_path = final_html_path(topic, format_name)
|
||||
bausteine_path = html_path.with_suffix(".bausteine.md")
|
||||
project = project_dir(topic) if project_dir(topic).is_dir() else None
|
||||
|
||||
try:
|
||||
if guide_id in _cancelled:
|
||||
return
|
||||
|
||||
# Step 1: Bausteine ermitteln (Thema: Websuche, Projekt: Dateien lesen)
|
||||
current_step = "Bausteine"
|
||||
bs_prompt = _build_bausteine_prompt(topic, bausteine_path, instructions, project)
|
||||
returncode, bs_out, bs_err = await run_agent(
|
||||
guide_id, bs_prompt, AGENT_TIMEOUT,
|
||||
provider=provider, role="fast", capabilities="files" if project else "full",
|
||||
)
|
||||
|
||||
if guide_id in _cancelled:
|
||||
return
|
||||
if returncode != 0:
|
||||
await _fail(guide_id, _claude_error("Baustein-Fehler", returncode, bs_out, bs_err))
|
||||
return
|
||||
if not bausteine_path.exists():
|
||||
await _fail(guide_id, "Baustein-Datei wurde nicht erstellt")
|
||||
return
|
||||
bausteine = bausteine_path.read_text(encoding="utf-8")
|
||||
|
||||
# Step 2: Generator-Agent erstellt HTML nach Bausteinen
|
||||
await _set_progress(guide_id, "Generiere HTML…")
|
||||
current_step = "Generierung"
|
||||
gen_prompt = _build_guide_prompt(topic, format_name, html_path, bausteine, instructions, project)
|
||||
returncode, stdout, stderr = await run_agent(guide_id, gen_prompt, AGENT_TIMEOUT, provider=provider, role="guide", capabilities="full")
|
||||
|
||||
if guide_id in _cancelled:
|
||||
return
|
||||
if returncode != 0:
|
||||
await _fail(guide_id, _claude_error("Generator-Fehler", returncode, stdout, stderr))
|
||||
return
|
||||
|
||||
if not html_path.exists():
|
||||
await _fail(guide_id, "HTML-Datei wurde nicht erstellt")
|
||||
return
|
||||
|
||||
now = datetime.now(timezone.utc).isoformat()
|
||||
await update_guide(
|
||||
guide_id, status="done", progress=None, updated_at=now,
|
||||
)
|
||||
|
||||
except asyncio.TimeoutError:
|
||||
await _fail(guide_id, f"Timeout bei {current_step} nach {AGENT_TIMEOUT}s")
|
||||
except Exception as e:
|
||||
await _fail(guide_id, str(e)[:2000])
|
||||
finally:
|
||||
_cancelled.discard(guide_id)
|
||||
def _log(topic: str, msg: str) -> None:
|
||||
print(f"[generator] {topic}: {msg}", flush=True)
|
||||
|
||||
|
||||
def _claude_error(label: str, returncode: int, stdout: str, stderr: str) -> str:
|
||||
@@ -145,11 +55,518 @@ def _claude_error(label: str, returncode: int, stdout: str, stderr: str) -> str:
|
||||
return f"{label} (exit {returncode}, ohne Ausgabe)"
|
||||
|
||||
|
||||
def _gather_error(label: str, results: list) -> str:
|
||||
for r in results:
|
||||
if isinstance(r, BaseException):
|
||||
return f"{label}: {type(r).__name__}: {r}"
|
||||
returncode, stdout, stderr = r
|
||||
if returncode != 0:
|
||||
return _claude_error(label, returncode, stdout, stderr)
|
||||
return f"{label}: kein verwertbares Ergebnis"
|
||||
|
||||
|
||||
async def _fail(guide_id: str, msg: str) -> None:
|
||||
now = datetime.now(timezone.utc).isoformat()
|
||||
await update_guide(guide_id, status="error", progress=None, error_msg=msg, updated_at=now)
|
||||
|
||||
|
||||
# --- Bausteine-Pipeline: 3x Recherche → Auswahl → 2x Einordnung → finale Einordnung ---
|
||||
|
||||
_bausteine_progress: dict[str, str] = {}
|
||||
_bausteine_errors: dict[str, str] = {}
|
||||
|
||||
_CATEGORIES = ("KERN", "WICHTIG", "REST")
|
||||
|
||||
|
||||
def bausteine_status(topic: str) -> dict:
|
||||
return {
|
||||
"ready": bausteine_path(topic).exists(),
|
||||
"generating": topic in _bausteine_progress,
|
||||
"progress": _bausteine_progress.get(topic),
|
||||
"error": _bausteine_errors.get(topic),
|
||||
}
|
||||
|
||||
|
||||
def active_bausteine() -> list[dict]:
|
||||
return [{"topic": t, "progress": p} for t, p in _bausteine_progress.items()]
|
||||
|
||||
|
||||
def reset_bausteine(topic: str) -> None:
|
||||
bausteine_path(topic).unlink(missing_ok=True)
|
||||
_bausteine_errors.pop(topic, None)
|
||||
|
||||
|
||||
def _build_recherche_prompt(topic: str, out_path: Path, instructions: str = "", project: Path | None = None) -> str:
|
||||
if project:
|
||||
source = _prompt("Bausteine-Quelle-Projekt", project=project)
|
||||
else:
|
||||
source = _prompt("Bausteine-Quelle-Thema", topic=topic)
|
||||
return _prompt(
|
||||
"Bausteine-Recherche",
|
||||
topic=topic, source=source, bausteine_path=out_path, extra=_extra(instructions),
|
||||
)
|
||||
|
||||
|
||||
def _parse_auswahl(text: str) -> dict[int, str]:
|
||||
"""Parst die konsolidierte Liste: `N. Titel — Kurzbeschreibung` pro Zeile."""
|
||||
entries: dict[int, str] = {}
|
||||
last = None
|
||||
for line in text.splitlines():
|
||||
m = re.match(r"\s*(\d+)[.)]\s+(.*\S)", line)
|
||||
if m:
|
||||
last = int(m.group(1))
|
||||
entries[last] = m.group(2)
|
||||
elif last is not None and line.strip():
|
||||
entries[last] += " " + line.strip()
|
||||
return entries
|
||||
|
||||
|
||||
def _parse_einordnung(text: str) -> dict[int, str]:
|
||||
"""Parst eine Einordnung (`KERN:` gefolgt von `N Titel`-Zeilen) zu Nummer→Kategorie."""
|
||||
mapping: dict[int, str] = {}
|
||||
current = None
|
||||
for line in text.splitlines():
|
||||
s = line.strip().lstrip("-*# ").strip()
|
||||
if not s:
|
||||
continue
|
||||
m = re.match(r"(KERN|WICHTIG|REST)\b[:\s]*(.*)$", s, re.IGNORECASE)
|
||||
if m:
|
||||
current = m.group(1).upper()
|
||||
for num in re.findall(r"\b\d+\b", m.group(2)):
|
||||
mapping.setdefault(int(num), current)
|
||||
continue
|
||||
if current:
|
||||
m = re.match(r"(\d+)\b", s)
|
||||
if m:
|
||||
mapping.setdefault(int(m.group(1)), current)
|
||||
return mapping
|
||||
|
||||
|
||||
def _build_final_bausteine(topic: str, entries: dict[int, str], mapping: dict[int, str]) -> str:
|
||||
"""Baut die finale Baustein-Datei aus konsolidierter Liste + finaler Zuordnung."""
|
||||
grouped: dict[str, list[str]] = {c: [] for c in _CATEGORIES}
|
||||
for num in sorted(entries):
|
||||
cat = mapping.get(num)
|
||||
if cat is None:
|
||||
_log(topic, f"Baustein {num} fehlt in finaler Einordnung → REST")
|
||||
cat = "REST"
|
||||
grouped[cat].append(entries[num])
|
||||
unknown = sorted(set(mapping) - set(entries))
|
||||
if unknown:
|
||||
_log(topic, f"finale Einordnung enthält unbekannte Nummern (ignoriert): {unknown}")
|
||||
parts = []
|
||||
for cat in _CATEGORIES:
|
||||
lines = "\n".join(f"{i}. {text}" for i, text in enumerate(grouped[cat], 1))
|
||||
parts.append(f"## {cat}\n{lines}")
|
||||
return "\n\n".join(parts) + "\n"
|
||||
|
||||
|
||||
async def generate_bausteine(topic: str, instructions: str = "", provider: str = DEFAULT_PROVIDER) -> None:
|
||||
if topic in _bausteine_progress:
|
||||
return
|
||||
_bausteine_progress[topic] = "Wartend…"
|
||||
_bausteine_errors.pop(topic, None)
|
||||
|
||||
final_path = bausteine_path(topic)
|
||||
project = project_dir(topic) if project_dir(topic).is_dir() else None
|
||||
stem = final_path.stem
|
||||
recherche_paths = [final_path.parent / f"{stem}.recherche-{i}.md" for i in (1, 2, 3)]
|
||||
auswahl_path = final_path.parent / f"{stem}.auswahl.md"
|
||||
|
||||
try:
|
||||
async with _semaphore:
|
||||
# Schritt 1: 3 Recherche-Agenten parallel (Thema: Websuche, Projekt: Dateien lesen)
|
||||
_bausteine_progress[topic] = "Recherche läuft (3 Agenten)…"
|
||||
caps = "files" if project else "full"
|
||||
results = await asyncio.gather(*[
|
||||
run_agent(
|
||||
f"bausteine-{topic}-recherche-{i}",
|
||||
_build_recherche_prompt(topic, path, instructions, project),
|
||||
AGENT_TIMEOUT, provider=provider, role="fast", capabilities=caps,
|
||||
)
|
||||
for i, path in enumerate(recherche_paths, 1)
|
||||
], return_exceptions=True)
|
||||
for i, (r, p) in enumerate(zip(results, recherche_paths), 1):
|
||||
if isinstance(r, BaseException):
|
||||
_log(topic, f"Recherche {i}: {type(r).__name__}: {r}")
|
||||
elif r[0] != 0:
|
||||
_log(topic, f"Recherche {i}: {_claude_error('Fehler', *r)}")
|
||||
elif not p.exists():
|
||||
_log(topic, f"Recherche {i}: keine Ausgabedatei erstellt")
|
||||
recherchen = [p.read_text(encoding="utf-8") for p in recherche_paths if p.exists()]
|
||||
if not recherchen:
|
||||
_bausteine_errors[topic] = _gather_error("Recherche-Fehler", results)
|
||||
return
|
||||
|
||||
# Schritt 2: Auswahl-Agent konsolidiert die Ergebnisse (ohne Quellen)
|
||||
_bausteine_progress[topic] = f"Konsolidiere Recherche ({len(recherchen)}/3 erfolgreich)…"
|
||||
results_block = "\n\n".join(f"### Recherche {i}\n\n{text}" for i, text in enumerate(recherchen, 1))
|
||||
returncode, stdout, stderr = await run_agent(
|
||||
f"bausteine-{topic}-auswahl",
|
||||
_prompt("Bausteine-Auswahl", topic=topic, results=results_block, out_path=auswahl_path),
|
||||
AGENT_TIMEOUT, provider=provider, role="fast", capabilities="files",
|
||||
)
|
||||
if returncode != 0 or not auswahl_path.exists():
|
||||
_bausteine_errors[topic] = _claude_error("Auswahl-Fehler", returncode, stdout, stderr)
|
||||
return
|
||||
flat = auswahl_path.read_text(encoding="utf-8")
|
||||
entries = _parse_auswahl(flat)
|
||||
if not entries:
|
||||
_bausteine_errors[topic] = "Auswahl-Liste nicht parsebar"
|
||||
return
|
||||
|
||||
# Schritt 3: 2 Einordnungs-Agenten parallel (antworten nur mit Nummer+Titel je Kategorie)
|
||||
_bausteine_progress[topic] = "Einordnung läuft (2 Agenten)…"
|
||||
results = await asyncio.gather(*[
|
||||
run_agent(
|
||||
f"bausteine-{topic}-einordnung-{i}",
|
||||
_prompt("Bausteine-Einordnung", topic=topic, bausteine=flat),
|
||||
AGENT_TIMEOUT, provider=provider, role="fast", capabilities="none",
|
||||
)
|
||||
for i in (1, 2)
|
||||
], return_exceptions=True)
|
||||
einordnungen = []
|
||||
for i, r in enumerate(results, 1):
|
||||
if isinstance(r, BaseException):
|
||||
_log(topic, f"Einordnung {i}: {type(r).__name__}: {r}")
|
||||
elif r[0] != 0:
|
||||
_log(topic, f"Einordnung {i}: {_claude_error('Fehler', *r)}")
|
||||
elif not _parse_einordnung(r[1]):
|
||||
_log(topic, f"Einordnung {i}: Antwort nicht parsebar")
|
||||
else:
|
||||
einordnungen.append(r[1].strip())
|
||||
if not einordnungen:
|
||||
_bausteine_errors[topic] = _gather_error("Einordnungs-Fehler", results)
|
||||
return
|
||||
|
||||
# Schritt 4: finale Einordnung — Python validiert und baut die Datei
|
||||
_bausteine_progress[topic] = f"Finale Einordnung ({len(einordnungen)}/2 erfolgreich)…"
|
||||
returncode, stdout, stderr = await run_agent(
|
||||
f"bausteine-{topic}-final",
|
||||
_prompt(
|
||||
"Bausteine-Einordnung-Final",
|
||||
topic=topic, bausteine=flat,
|
||||
einordnung_1=einordnungen[0], einordnung_2=einordnungen[-1],
|
||||
),
|
||||
AGENT_TIMEOUT, provider=provider, role="fast", capabilities="none",
|
||||
)
|
||||
if returncode != 0:
|
||||
_bausteine_errors[topic] = _claude_error("Finale-Einordnungs-Fehler", returncode, stdout, stderr)
|
||||
return
|
||||
mapping = _parse_einordnung(stdout)
|
||||
if not mapping:
|
||||
_bausteine_errors[topic] = "Finale Einordnung nicht parsebar"
|
||||
return
|
||||
final_path.write_text(_build_final_bausteine(topic, entries, mapping), encoding="utf-8")
|
||||
except Exception as e:
|
||||
_bausteine_errors[topic] = str(e)[:2000]
|
||||
finally:
|
||||
_bausteine_progress.pop(topic, None)
|
||||
for p in [*recherche_paths, auswahl_path]:
|
||||
p.unlink(missing_ok=True)
|
||||
|
||||
|
||||
# --- Guide-Generierung: Bausteine → (Plan) → Writer → JSON ---
|
||||
|
||||
# Welche Baustein-Kategorien jedes Format abdeckt.
|
||||
FORMAT_COVERAGE = {
|
||||
"OnePager": ("KERN",),
|
||||
"MiniGuide": ("KERN",),
|
||||
"Guide": ("KERN", "WICHTIG"),
|
||||
"FullGuide": ("KERN", "WICHTIG", "REST"),
|
||||
}
|
||||
|
||||
# Parallele Writer pro Format (OnePager hat einen eigenen Weg).
|
||||
WRITER_COUNT = {"MiniGuide": 1, "Guide": 2, "FullGuide": 4}
|
||||
|
||||
|
||||
def _parse_kategorien(text: str) -> dict[str, list[str]]:
|
||||
"""Parst die finale Baustein-Datei (## KERN/WICHTIG/REST mit nummerierten Einträgen)."""
|
||||
cats: dict[str, list[str]] = {}
|
||||
current = None
|
||||
for line in text.splitlines():
|
||||
s = line.strip()
|
||||
m = re.match(r"#+\s*(KERN|WICHTIG|REST)\b", s, re.IGNORECASE)
|
||||
if m:
|
||||
current = m.group(1).upper()
|
||||
cats.setdefault(current, [])
|
||||
continue
|
||||
m = re.match(r"(\d+)[.)]\s+(.*\S)", s)
|
||||
if m and current:
|
||||
cats[current].append(m.group(2))
|
||||
return cats
|
||||
|
||||
|
||||
def _titel(entry: str) -> str:
|
||||
return entry.split(" — ")[0].strip() or entry
|
||||
|
||||
|
||||
def _parse_gliederung(text: str, valid: set[int], topic: str) -> list[dict]:
|
||||
"""Parst die Gliederung (`KAPITEL: Titel` + `N Titel`-Zeilen) → [{"title", "nums"}]."""
|
||||
chapters: list[dict] = []
|
||||
seen: set[int] = set()
|
||||
for line in text.splitlines():
|
||||
s = line.strip().lstrip("-*# ").strip()
|
||||
if not s:
|
||||
continue
|
||||
m = re.match(r"KAPITEL\s*:\s*(.+)", s, re.IGNORECASE)
|
||||
if m:
|
||||
chapters.append({"title": m.group(1).strip(), "nums": []})
|
||||
continue
|
||||
m = re.match(r"(\d+)\b", s)
|
||||
if m and chapters:
|
||||
num = int(m.group(1))
|
||||
if num in valid and num not in seen:
|
||||
chapters[-1]["nums"].append(num)
|
||||
seen.add(num)
|
||||
missing = sorted(valid - seen)
|
||||
if missing:
|
||||
_log(topic, f"Gliederung: Bausteine {missing} fehlen → Kapitel 'Weitere Themen'")
|
||||
chapters.append({"title": "Weitere Themen", "nums": missing})
|
||||
return [c for c in chapters if c["nums"]]
|
||||
|
||||
|
||||
def _split_chunks(chapters: list[dict], n: int) -> list[list[dict]]:
|
||||
"""Teilt Kapitel in bis zu n zusammenhängende Chunks, balanciert nach Section-Anzahl."""
|
||||
n = max(1, min(n, len(chapters)))
|
||||
chunks: list[list[dict]] = []
|
||||
current: list[dict] = []
|
||||
count = 0
|
||||
remaining_total = sum(len(c["nums"]) for c in chapters)
|
||||
remaining_chunks = n
|
||||
for ch in chapters:
|
||||
current.append(ch)
|
||||
count += len(ch["nums"])
|
||||
if remaining_chunks > 1 and count >= remaining_total / remaining_chunks:
|
||||
chunks.append(current)
|
||||
remaining_total -= count
|
||||
remaining_chunks -= 1
|
||||
current = []
|
||||
count = 0
|
||||
if current:
|
||||
chunks.append(current)
|
||||
return chunks
|
||||
|
||||
|
||||
def _zuteilung_text(chunk: list[dict], entries: dict[int, str]) -> str:
|
||||
lines = []
|
||||
for ch in chunk:
|
||||
lines.append(f"KAPITEL: {ch['title']}")
|
||||
lines.extend(f"{num} {entries[num]}" for num in ch["nums"])
|
||||
return "\n".join(lines)
|
||||
|
||||
|
||||
_FRAGMENT_KAPITEL_RE = re.compile(r"<!--\s*kapitel\s*:\s*(.*?)\s*-->", re.IGNORECASE)
|
||||
_FRAGMENT_SECTION_RE = re.compile(r"<!--\s*section\s*:\s*(\d+)\s*(?:\|\s*(.*?))?\s*-->", re.IGNORECASE)
|
||||
|
||||
|
||||
def _parse_fragment(text: str) -> list[dict]:
|
||||
"""Parst eine Writer-Datei → [{"kapitel", "num", "title", "md"}] in Datei-Reihenfolge."""
|
||||
sections: list[dict] = []
|
||||
kapitel = None
|
||||
current = None
|
||||
for line in text.splitlines():
|
||||
s = line.strip()
|
||||
m = _FRAGMENT_KAPITEL_RE.match(s)
|
||||
if m:
|
||||
kapitel = m.group(1)
|
||||
current = None
|
||||
continue
|
||||
m = _FRAGMENT_SECTION_RE.match(s)
|
||||
if m:
|
||||
current = {"kapitel": kapitel, "num": int(m.group(1)), "title": (m.group(2) or "").strip(), "md": []}
|
||||
sections.append(current)
|
||||
continue
|
||||
if current is not None:
|
||||
current["md"].append(line)
|
||||
for sec in sections:
|
||||
sec["md"] = "\n".join(sec["md"]).strip()
|
||||
return sections
|
||||
|
||||
|
||||
def _section_json(sec: dict, entries: dict[int, str]) -> dict:
|
||||
return {"num": sec["num"], "title": sec["title"] or _titel(entries[sec["num"]]), "md": sec["md"]}
|
||||
|
||||
|
||||
async def _generate_onepager(guide_id: str, topic: str, entries: dict[int, str], instructions: str, provider: str) -> list[dict] | None:
|
||||
await _set_progress(guide_id, "Generiere OnePager…")
|
||||
bausteine_block = "\n".join(f"{i}. {t}" for i, t in entries.items())
|
||||
returncode, stdout, stderr = await run_agent(
|
||||
f"{guide_id}-onepager",
|
||||
_prompt("OnePager", topic=topic, bausteine=bausteine_block, extra=_extra(instructions)),
|
||||
AGENT_TIMEOUT, provider=provider, role="fast", capabilities="none",
|
||||
)
|
||||
if guide_id in _cancelled:
|
||||
return None
|
||||
if returncode != 0:
|
||||
await _fail(guide_id, _claude_error("OnePager-Fehler", returncode, stdout, stderr))
|
||||
return None
|
||||
merksaetze: dict[int, str] = {}
|
||||
for line in stdout.splitlines():
|
||||
m = re.match(r"\s*(\d+)\s*[:.\-–—]\s*(.*\S)", line)
|
||||
if m:
|
||||
merksaetze.setdefault(int(m.group(1)), m.group(2))
|
||||
sections = []
|
||||
for num, entry in entries.items():
|
||||
md = merksaetze.get(num)
|
||||
if md is None:
|
||||
_log(topic, f"OnePager: Merksatz für Baustein {num} fehlt")
|
||||
continue
|
||||
sections.append({"num": num, "title": _titel(entry), "md": md})
|
||||
if not sections:
|
||||
await _fail(guide_id, "OnePager-Antwort nicht parsebar")
|
||||
return None
|
||||
return [{"title": topic, "sections": sections}]
|
||||
|
||||
|
||||
async def _generate_sections(
|
||||
guide_id: str, topic: str, format_name: str, entries: dict[int, str],
|
||||
facts: str, instructions: str, provider: str,
|
||||
content_path: Path, fragment_paths: list[Path],
|
||||
) -> list[dict] | None:
|
||||
spec = (TEMPLATES_DIR / "Format" / "Section.md").read_text(encoding="utf-8")
|
||||
bausteine_block = "\n".join(f"{i}. {t}" for i, t in entries.items())
|
||||
|
||||
if format_name == "MiniGuide":
|
||||
# Ein Writer, gliedert selbst in Kapitel
|
||||
plan = None
|
||||
zuteilungen = [bausteine_block]
|
||||
else:
|
||||
await _set_progress(guide_id, "Plane Gliederung…")
|
||||
returncode, stdout, stderr = await run_agent(
|
||||
f"{guide_id}-plan",
|
||||
_prompt("Guide-Plan", topic=topic, format_name=format_name, bausteine=bausteine_block, extra=_extra(instructions)),
|
||||
AGENT_TIMEOUT, provider=provider, role="fast", capabilities="none",
|
||||
)
|
||||
if guide_id in _cancelled:
|
||||
return None
|
||||
if returncode != 0:
|
||||
await _fail(guide_id, _claude_error("Plan-Fehler", returncode, stdout, stderr))
|
||||
return None
|
||||
plan = _parse_gliederung(stdout, set(entries), topic)
|
||||
if not plan:
|
||||
await _fail(guide_id, "Gliederung nicht parsebar")
|
||||
return None
|
||||
chunks = _split_chunks(plan, WRITER_COUNT[format_name])
|
||||
zuteilungen = [_zuteilung_text(chunk, entries) for chunk in chunks]
|
||||
|
||||
writer_count = len(zuteilungen)
|
||||
await _set_progress(guide_id, f"Schreibe Sections ({writer_count} Writer)…" if writer_count > 1 else "Schreibe Sections…")
|
||||
paths = [content_path.parent / f"{content_path.stem}.chunk-{i}.md" for i in range(1, writer_count + 1)]
|
||||
fragment_paths.extend(paths)
|
||||
results = await asyncio.gather(*[
|
||||
run_agent(
|
||||
f"{guide_id}-w{i}",
|
||||
_prompt(
|
||||
"Guide-Writer",
|
||||
topic=topic, format_name=format_name, zuteilung=zuteilung,
|
||||
facts=facts, spec=spec, out_path=path, extra=_extra(instructions),
|
||||
),
|
||||
AGENT_TIMEOUT, provider=provider, role="guide", capabilities="full",
|
||||
)
|
||||
for i, (zuteilung, path) in enumerate(zip(zuteilungen, paths), 1)
|
||||
], return_exceptions=True)
|
||||
if guide_id in _cancelled:
|
||||
return None
|
||||
for i, (r, p) in enumerate(zip(results, paths), 1):
|
||||
if isinstance(r, BaseException):
|
||||
_log(topic, f"Writer {i}: {type(r).__name__}: {r}")
|
||||
elif r[0] != 0:
|
||||
_log(topic, f"Writer {i}: {_claude_error('Fehler', *r)}")
|
||||
elif not p.exists():
|
||||
_log(topic, f"Writer {i}: keine Ausgabedatei erstellt")
|
||||
fragments: list[dict] = []
|
||||
for p in paths:
|
||||
if p.exists():
|
||||
fragments.extend(_parse_fragment(p.read_text(encoding="utf-8")))
|
||||
if not fragments:
|
||||
await _fail(guide_id, _gather_error("Writer-Fehler", list(results)))
|
||||
return None
|
||||
|
||||
await _set_progress(guide_id, "Setze zusammen…")
|
||||
chapters: list[dict] = []
|
||||
if plan is None:
|
||||
# MiniGuide: Kapitel aus den Fragment-Markern in Datei-Reihenfolge
|
||||
seen: set[int] = set()
|
||||
for sec in fragments:
|
||||
if sec["num"] not in entries or sec["num"] in seen:
|
||||
continue
|
||||
seen.add(sec["num"])
|
||||
title = sec["kapitel"] or topic
|
||||
if not chapters or chapters[-1]["title"] != title:
|
||||
chapters.append({"title": title, "sections": []})
|
||||
chapters[-1]["sections"].append(_section_json(sec, entries))
|
||||
missing = sorted(set(entries) - seen)
|
||||
else:
|
||||
by_num = {sec["num"]: sec for sec in fragments if sec["num"] in entries}
|
||||
for ch in plan:
|
||||
sections = [_section_json(by_num[num], entries) for num in ch["nums"] if num in by_num]
|
||||
if sections:
|
||||
chapters.append({"title": ch["title"], "sections": sections})
|
||||
missing = sorted(set(entries) - set(by_num))
|
||||
if missing:
|
||||
_log(topic, f"Sections fehlen in der Writer-Ausgabe: {missing}")
|
||||
if not chapters:
|
||||
await _fail(guide_id, "Keine Sections in der Writer-Ausgabe gefunden")
|
||||
return None
|
||||
return chapters
|
||||
|
||||
|
||||
async def generate_guide(guide_id: str, topic: str, format_name: str, instructions: str = "", provider: str = DEFAULT_PROVIDER) -> None:
|
||||
async with _semaphore:
|
||||
now = datetime.now(timezone.utc).isoformat()
|
||||
await update_guide(guide_id, status="generating", progress="Lese Bausteine…", updated_at=now)
|
||||
|
||||
content_path = guide_content_path(topic, format_name)
|
||||
project = project_dir(topic) if project_dir(topic).is_dir() else None
|
||||
fragment_paths: list[Path] = []
|
||||
|
||||
try:
|
||||
if guide_id in _cancelled:
|
||||
return
|
||||
|
||||
cats = _parse_kategorien(bausteine_path(topic).read_text(encoding="utf-8"))
|
||||
selected: list[str] = []
|
||||
for cat in FORMAT_COVERAGE[format_name]:
|
||||
selected.extend(cats.get(cat, []))
|
||||
if not selected:
|
||||
await _fail(guide_id, "Keine passenden Bausteine gefunden")
|
||||
return
|
||||
entries = {i: text for i, text in enumerate(selected, 1)}
|
||||
|
||||
if format_name == "OnePager":
|
||||
chapters = await _generate_onepager(guide_id, topic, entries, instructions, provider)
|
||||
else:
|
||||
facts = _prompt("Guide-Fakten-Projekt", project=project) if project else _prompt("Guide-Fakten-Thema")
|
||||
chapters = await _generate_sections(
|
||||
guide_id, topic, format_name, entries,
|
||||
facts, instructions, provider, content_path, fragment_paths,
|
||||
)
|
||||
if chapters is None or guide_id in _cancelled:
|
||||
return
|
||||
|
||||
content_path.write_text(
|
||||
json.dumps({"topic": topic, "format": format_name, "chapters": chapters}, ensure_ascii=False, indent=1),
|
||||
encoding="utf-8",
|
||||
)
|
||||
|
||||
now = datetime.now(timezone.utc).isoformat()
|
||||
await update_guide(guide_id, status="done", progress=None, updated_at=now)
|
||||
|
||||
except asyncio.TimeoutError:
|
||||
await _fail(guide_id, f"Timeout bei Generierung nach {AGENT_TIMEOUT}s")
|
||||
except FileNotFoundError:
|
||||
await _fail(guide_id, "Bausteine fehlen")
|
||||
except Exception as e:
|
||||
await _fail(guide_id, str(e)[:2000])
|
||||
finally:
|
||||
_cancelled.discard(guide_id)
|
||||
for p in fragment_paths:
|
||||
p.unlink(missing_ok=True)
|
||||
|
||||
|
||||
# --- Tutor-Chat ---
|
||||
|
||||
def _build_guide_chat_prompt(topic: str, format_name: str, section: str, outline: str, messages: list[dict]) -> str:
|
||||
transcript = "\n".join(
|
||||
f"{'Nutzer' if m.get('role') == 'user' else 'Assistent'}: {m.get('content', '')}"
|
||||
|
||||
@@ -10,7 +10,8 @@ from routes import router
|
||||
|
||||
@asynccontextmanager
|
||||
async def lifespan(app: FastAPI):
|
||||
(STORAGE_DIR / "html").mkdir(parents=True, exist_ok=True)
|
||||
(STORAGE_DIR / "guides").mkdir(parents=True, exist_ok=True)
|
||||
(STORAGE_DIR / "bausteine").mkdir(parents=True, exist_ok=True)
|
||||
await init_db()
|
||||
yield
|
||||
await close_db()
|
||||
|
||||
@@ -5,6 +5,7 @@ FormatType = Literal[
|
||||
"OnePager",
|
||||
"MiniGuide",
|
||||
"Guide",
|
||||
"FullGuide",
|
||||
]
|
||||
|
||||
ProviderType = Literal["claude", "minimax"]
|
||||
@@ -17,6 +18,19 @@ class GuideCreateRequest(BaseModel):
|
||||
provider: ProviderType = "claude"
|
||||
|
||||
|
||||
class BausteineCreateRequest(BaseModel):
|
||||
topic: str = Field(min_length=1, max_length=100)
|
||||
instructions: str = Field(default="", max_length=2000)
|
||||
provider: ProviderType = "claude"
|
||||
|
||||
|
||||
class BausteineStatusResponse(BaseModel):
|
||||
ready: bool
|
||||
generating: bool
|
||||
progress: str | None = None
|
||||
error: str | None = None
|
||||
|
||||
|
||||
class ProjectResponse(BaseModel):
|
||||
name: str
|
||||
|
||||
|
||||
@@ -1,15 +1,30 @@
|
||||
import re
|
||||
from pathlib import Path
|
||||
|
||||
from config import STORAGE_DIR, PROJECTS_DIR
|
||||
|
||||
|
||||
def safe_basename(topic: str, format_name: str) -> str:
|
||||
clean = topic.replace("/", "_").replace("\x00", "")
|
||||
return f"{clean} - {format_name}"
|
||||
def _safe(name: str) -> str:
|
||||
return name.replace("/", "_").replace("\x00", "")
|
||||
|
||||
|
||||
def final_html_path(topic: str, format_name: str) -> Path:
|
||||
return STORAGE_DIR / "html" / f"{safe_basename(topic, format_name)}.html"
|
||||
def guide_content_path(topic: str, format_name: str) -> Path:
|
||||
return STORAGE_DIR / "guides" / f"{_safe(topic)} - {format_name}.json"
|
||||
|
||||
|
||||
def bausteine_path(topic: str) -> Path:
|
||||
return STORAGE_DIR / "bausteine" / f"{_safe(topic)}.md"
|
||||
|
||||
|
||||
def bausteine_topics() -> list[str]:
|
||||
"""Themen, für die eine finale Baustein-Datei existiert (ohne Zwischendateien)."""
|
||||
bdir = STORAGE_DIR / "bausteine"
|
||||
if not bdir.is_dir():
|
||||
return []
|
||||
return [
|
||||
p.stem for p in bdir.glob("*.md")
|
||||
if not re.search(r"\.(recherche-\d+|auswahl)$", p.stem)
|
||||
]
|
||||
|
||||
|
||||
def project_dir(name: str) -> Path:
|
||||
|
||||
@@ -7,32 +7,40 @@ from fastapi import APIRouter, HTTPException
|
||||
from fastapi.responses import FileResponse
|
||||
|
||||
from agents import provider_available
|
||||
from config import FORMAT_META, PROJECTS_DIR, PROVIDERS
|
||||
from config import PROJECTS_DIR, PROVIDERS
|
||||
from database import (
|
||||
create_guide, delete_guide, get_guide, list_guides,
|
||||
list_progress, set_progress, delete_progress,
|
||||
)
|
||||
from generator import generate_guide, cancel_guide, chat_with_guide
|
||||
from generator import (
|
||||
generate_guide, cancel_guide, chat_with_guide,
|
||||
generate_bausteine, bausteine_status, active_bausteine, reset_bausteine,
|
||||
)
|
||||
from models import (
|
||||
GuideCreateRequest, GuideResponse,
|
||||
BausteineCreateRequest, BausteineStatusResponse,
|
||||
GuideChatRequest, GuideChatResponse,
|
||||
ProgressUpdate, ProgressResponse, ProjectResponse, ProviderInfo,
|
||||
)
|
||||
from paths import final_html_path, project_dir
|
||||
from paths import bausteine_path, bausteine_topics, guide_content_path, project_dir
|
||||
|
||||
router = APIRouter(prefix="/api")
|
||||
|
||||
|
||||
@router.get("/formats")
|
||||
async def get_formats():
|
||||
return FORMAT_META
|
||||
|
||||
|
||||
@router.get("/providers", response_model=list[ProviderInfo])
|
||||
async def get_providers():
|
||||
return [{"id": pid, "available": provider_available(pid)} for pid in PROVIDERS]
|
||||
|
||||
|
||||
@router.get("/topics")
|
||||
async def list_topics():
|
||||
guides = await list_guides()
|
||||
topics = {g["topic"] for g in guides}
|
||||
topics.update(bausteine_topics())
|
||||
topics.update(job["topic"] for job in active_bausteine())
|
||||
return sorted(topics)
|
||||
|
||||
|
||||
def _safe_project_name(name: str) -> str:
|
||||
if not name or "/" in name or "\\" in name or ".." in name or "\x00" in name:
|
||||
raise HTTPException(400, "Ungültiger Projektname")
|
||||
@@ -56,8 +64,39 @@ async def remove_project(name: str):
|
||||
return {"ok": True}
|
||||
|
||||
|
||||
# --- Bausteine ---
|
||||
|
||||
@router.get("/bausteine/status", response_model=BausteineStatusResponse)
|
||||
async def get_bausteine_status(topic: str):
|
||||
return bausteine_status(topic)
|
||||
|
||||
|
||||
@router.get("/bausteine/active")
|
||||
async def get_active_bausteine():
|
||||
return active_bausteine()
|
||||
|
||||
|
||||
@router.post("/bausteine")
|
||||
async def create_bausteine(req: BausteineCreateRequest):
|
||||
topic = req.topic.strip()
|
||||
if bausteine_status(topic)["generating"]:
|
||||
return {"ok": True, "status": "already_generating"}
|
||||
asyncio.create_task(generate_bausteine(topic, req.instructions.strip(), req.provider))
|
||||
return {"ok": True}
|
||||
|
||||
|
||||
@router.delete("/bausteine")
|
||||
async def remove_bausteine(topic: str):
|
||||
reset_bausteine(topic)
|
||||
return {"ok": True}
|
||||
|
||||
|
||||
# --- Guides ---
|
||||
|
||||
@router.post("/guides", response_model=GuideResponse)
|
||||
async def create(req: GuideCreateRequest):
|
||||
if not bausteine_path(req.topic.strip()).exists():
|
||||
raise HTTPException(400, "Erst Bausteine erstellen")
|
||||
now = datetime.now(timezone.utc).isoformat()
|
||||
guide = {
|
||||
"id": str(uuid.uuid4()),
|
||||
@@ -87,17 +126,17 @@ async def get_one(guide_id: str):
|
||||
return guide
|
||||
|
||||
|
||||
@router.get("/guides/{guide_id}/html")
|
||||
async def download_html(guide_id: str):
|
||||
@router.get("/guides/{guide_id}/content")
|
||||
async def guide_content(guide_id: str):
|
||||
guide = await get_guide(guide_id)
|
||||
if guide is None:
|
||||
raise HTTPException(404, "Guide nicht gefunden")
|
||||
if guide["status"] != "done":
|
||||
raise HTTPException(404, "HTML nicht verfügbar")
|
||||
html_path = final_html_path(guide["topic"], guide["format"])
|
||||
if not html_path.exists():
|
||||
raise HTTPException(404, "Inhalt nicht verfügbar")
|
||||
path = guide_content_path(guide["topic"], guide["format"])
|
||||
if not path.exists():
|
||||
raise HTTPException(404, "Datei nicht gefunden")
|
||||
return FileResponse(html_path, media_type="text/html", content_disposition_type="inline")
|
||||
return FileResponse(path, media_type="application/json")
|
||||
|
||||
|
||||
@router.post("/guides/{guide_id}/chat", response_model=GuideChatResponse)
|
||||
@@ -126,9 +165,7 @@ async def remove(guide_id: str):
|
||||
guide = await get_guide(guide_id)
|
||||
if guide is None:
|
||||
raise HTTPException(404, "Guide nicht gefunden")
|
||||
html_path = final_html_path(guide["topic"], guide["format"])
|
||||
html_path.unlink(missing_ok=True)
|
||||
html_path.with_suffix(".bausteine.md").unlink(missing_ok=True)
|
||||
guide_content_path(guide["topic"], guide["format"]).unlink(missing_ok=True)
|
||||
await delete_progress(guide_id)
|
||||
await delete_guide(guide_id)
|
||||
return {"ok": True}
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { fetchGuides, createGuide as apiCreate, deleteGuide, cancelGuide as apiCancel, fetchProjects, deleteProject as apiDeleteProject, fetchProviders } from './api.js'
|
||||
import { fetchGuides, fetchTopics, createGuide as apiCreate, deleteGuide, cancelGuide as apiCancel, fetchBausteineStatus, fetchActiveBausteine, createBausteine as apiCreateBausteine, deleteBausteine as apiDeleteBausteine, fetchProjects, deleteProject as apiDeleteProject, fetchProviders } from './api.js'
|
||||
import TopicSidebar from './components/TopicSidebar.vue'
|
||||
import TopicDetail from './components/TopicDetail.vue'
|
||||
|
||||
const guides = ref([])
|
||||
const projects = ref([])
|
||||
const manualTopics = ref([])
|
||||
const manualTopics = ref(JSON.parse(localStorage.getItem('manualTopics') || '[]'))
|
||||
const backendTopics = ref([])
|
||||
|
||||
function persistManualTopics() {
|
||||
localStorage.setItem('manualTopics', JSON.stringify(manualTopics.value))
|
||||
}
|
||||
const selectedTopic = ref(null)
|
||||
const previewGuide = ref(null)
|
||||
const sidebarPinned = ref(localStorage.getItem('sidebarPinned') !== 'false')
|
||||
@@ -16,6 +21,9 @@ const darkMode = ref(
|
||||
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
: localStorage.getItem('darkMode') === 'true',
|
||||
)
|
||||
const EMPTY_BAUSTEINE = { ready: false, generating: false, progress: null, error: null }
|
||||
const bausteine = ref({ ...EMPTY_BAUSTEINE })
|
||||
const activeBausteine = ref([])
|
||||
const provider = ref(localStorage.getItem('provider') || 'claude')
|
||||
const providers = ref([])
|
||||
|
||||
@@ -75,9 +83,9 @@ const topics = computed(() => {
|
||||
topicDates[g.topic] = g.created_at
|
||||
}
|
||||
}
|
||||
for (const t of manualTopics.value) {
|
||||
for (const t of [...backendTopics.value, ...manualTopics.value]) {
|
||||
if (isProject.has(t)) continue
|
||||
if (!topicDates[t]) topicDates[t] = new Date().toISOString()
|
||||
if (!topicDates[t]) topicDates[t] = ''
|
||||
}
|
||||
return Object.keys(topicDates).sort((a, b) => topicDates[b].localeCompare(topicDates[a]))
|
||||
})
|
||||
@@ -109,6 +117,14 @@ const hasActiveGuides = computed(() =>
|
||||
guides.value.some((g) => g.status === 'queued' || g.status === 'generating'),
|
||||
)
|
||||
|
||||
async function loadTopics() {
|
||||
try {
|
||||
backendTopics.value = await fetchTopics()
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Laden der Themen:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadGuides() {
|
||||
try {
|
||||
guides.value = await fetchGuides()
|
||||
@@ -117,6 +133,20 @@ async function loadGuides() {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadBausteine() {
|
||||
try {
|
||||
activeBausteine.value = await fetchActiveBausteine()
|
||||
if (selectedTopic.value) {
|
||||
bausteine.value = await fetchBausteineStatus(selectedTopic.value)
|
||||
} else {
|
||||
bausteine.value = { ...EMPTY_BAUSTEINE }
|
||||
}
|
||||
if (activeBausteine.value.length && !pollTimer) startPolling()
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Laden der Bausteine:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadProjects() {
|
||||
try {
|
||||
projects.value = await fetchProjects()
|
||||
@@ -125,7 +155,7 @@ async function loadProjects() {
|
||||
}
|
||||
}
|
||||
|
||||
const FORMAT_ORDER = ['OnePager', 'MiniGuide', 'Guide']
|
||||
const FORMAT_ORDER = ['OnePager', 'MiniGuide', 'Guide', 'FullGuide']
|
||||
|
||||
function autoPreview() {
|
||||
const map = doneByFormat.value
|
||||
@@ -142,15 +172,25 @@ function selectTopic(topic) {
|
||||
selectedTopic.value = topic
|
||||
previewGuide.value = null
|
||||
sidebarSticky.value = false
|
||||
loadBausteine()
|
||||
nextTick(autoPreview)
|
||||
}
|
||||
|
||||
function createTopic(topic) {
|
||||
if (!manualTopics.value.includes(topic)) {
|
||||
manualTopics.value.push(topic)
|
||||
persistManualTopics()
|
||||
}
|
||||
selectedTopic.value = topic
|
||||
previewGuide.value = null
|
||||
loadBausteine()
|
||||
}
|
||||
|
||||
async function handleBausteineClick({ instructions }) {
|
||||
if (!selectedTopic.value) return
|
||||
await apiCreateBausteine(selectedTopic.value, instructions, provider.value)
|
||||
await loadBausteine()
|
||||
startPolling()
|
||||
}
|
||||
|
||||
async function handleFormatClick({ format, instructions }) {
|
||||
@@ -184,8 +224,8 @@ async function handleDeleteGuide(guideId) {
|
||||
function startPolling() {
|
||||
stopPolling()
|
||||
pollTimer = setInterval(async () => {
|
||||
await loadGuides()
|
||||
if (!hasActiveGuides.value) stopPolling()
|
||||
await Promise.all([loadGuides(), loadBausteine(), loadTopics()])
|
||||
if (!hasActiveGuides.value && !activeBausteine.value.length) stopPolling()
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
@@ -206,7 +246,10 @@ async function handleDeleteTopic(topic) {
|
||||
for (const g of topicGuides) {
|
||||
await deleteGuide(g.id)
|
||||
}
|
||||
await apiDeleteBausteine(topic)
|
||||
manualTopics.value = manualTopics.value.filter((t) => t !== topic)
|
||||
persistManualTopics()
|
||||
await loadTopics()
|
||||
if (selectedTopic.value === topic) {
|
||||
selectedTopic.value = null
|
||||
previewGuide.value = null
|
||||
@@ -219,12 +262,13 @@ function onVisibility() {
|
||||
stopPolling()
|
||||
} else {
|
||||
loadGuides()
|
||||
if (hasActiveGuides.value) startPolling()
|
||||
loadBausteine()
|
||||
if (hasActiveGuides.value || activeBausteine.value.length) startPolling()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadGuides(), loadProjects(), loadProviders()])
|
||||
await Promise.all([loadGuides(), loadTopics(), loadProjects(), loadProviders()])
|
||||
if (!selectedTopic.value && topics.value.length) {
|
||||
selectTopic(topics.value[0])
|
||||
}
|
||||
@@ -248,6 +292,8 @@ onUnmounted(() => {
|
||||
:doneByFormat="doneByFormat"
|
||||
:latestByFormat="latestByFormat"
|
||||
:allGuides="guides"
|
||||
:bausteine="bausteine"
|
||||
:activeBausteine="activeBausteine"
|
||||
:pinned="sidebarPinned"
|
||||
:dark="darkMode"
|
||||
:provider="provider"
|
||||
@@ -257,6 +303,7 @@ onUnmounted(() => {
|
||||
@select="selectTopic"
|
||||
@create="createTopic"
|
||||
@formatClick="handleFormatClick"
|
||||
@bausteineClick="handleBausteineClick"
|
||||
@deleteTopic="handleDeleteTopic"
|
||||
@deleteProject="handleDeleteProject"
|
||||
@cancelGuide="handleCancel"
|
||||
|
||||
@@ -14,6 +14,29 @@ export async function createGuide(topic, format, instructions = '', provider = '
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function fetchActiveBausteine() {
|
||||
const res = await fetch(`${BASE}/bausteine/active`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function fetchBausteineStatus(topic) {
|
||||
const res = await fetch(`${BASE}/bausteine/status?topic=${encodeURIComponent(topic)}`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function createBausteine(topic, instructions = '', provider = 'claude') {
|
||||
const res = await fetch(`${BASE}/bausteine`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ topic, instructions, provider }),
|
||||
})
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function deleteBausteine(topic) {
|
||||
await fetch(`${BASE}/bausteine?topic=${encodeURIComponent(topic)}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
export async function fetchProviders() {
|
||||
const res = await fetch(`${BASE}/providers`)
|
||||
return res.json()
|
||||
@@ -36,8 +59,15 @@ export async function deleteGuide(id) {
|
||||
await fetch(`${BASE}/guides/${id}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
export function htmlUrl(id) {
|
||||
return `${BASE}/guides/${id}/html`
|
||||
export async function fetchGuideContent(id) {
|
||||
const res = await fetch(`${BASE}/guides/${id}/content`)
|
||||
if (!res.ok) throw new Error(`Inhalt nicht verfügbar (${res.status})`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function fetchTopics() {
|
||||
const res = await fetch(`${BASE}/topics`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function fetchProgress(id) {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
|
||||
import { marked } from 'marked'
|
||||
import DOMPurify from 'dompurify'
|
||||
import { htmlUrl, chatGuide, fetchProgress, setProgress } from '../api.js'
|
||||
import { fetchGuideContent, chatGuide, fetchProgress, setProgress } from '../api.js'
|
||||
|
||||
marked.setOptions({ breaks: true, gfm: true })
|
||||
|
||||
@@ -16,200 +16,56 @@ const props = defineProps({
|
||||
provider: { type: String, default: 'claude' },
|
||||
})
|
||||
|
||||
const LANDSCAPE_FORMATS = ['OnePager']
|
||||
const isLandscape = computed(() => LANDSCAPE_FORMATS.includes(props.previewGuide?.format))
|
||||
const isOnePager = computed(() => props.previewGuide?.format === 'OnePager')
|
||||
|
||||
const frameEl = ref(null)
|
||||
// --- Inhalt laden ---
|
||||
const content = ref(null)
|
||||
const doneChapters = ref(new Set())
|
||||
const scrollEl = ref(null)
|
||||
|
||||
watch(() => props.previewGuide?.id, loadContent, { immediate: true })
|
||||
|
||||
async function loadContent() {
|
||||
content.value = null
|
||||
doneChapters.value = new Set()
|
||||
const g = props.previewGuide
|
||||
if (!g || g.status !== 'done') return
|
||||
try {
|
||||
content.value = await fetchGuideContent(g.id)
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Laden des Guides:', e)
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await fetchProgress(g.id)
|
||||
doneChapters.value = new Set(res.chapters || [])
|
||||
} catch { /* offline → leer */ }
|
||||
nextTick(scrollToFirstOpen)
|
||||
}
|
||||
|
||||
// Zum ersten noch offenen Kapitel springen — aber nur, wenn schon etwas erledigt ist.
|
||||
function scrollToFirstOpen() {
|
||||
if (!doneChapters.value.size || !content.value) return
|
||||
const chapters = Array.from(scrollEl.value?.querySelectorAll('section.chapter') || [])
|
||||
const firstOpen = chapters.find((el) => !el.classList.contains('ch-complete'))
|
||||
if (firstOpen && firstOpen !== chapters[0]) firstOpen.scrollIntoView({ block: 'start' })
|
||||
}
|
||||
|
||||
// --- Kapitel-Fortschritt ---
|
||||
function onFrameLoad(e) {
|
||||
const doc = e.target.contentDocument
|
||||
if (!doc) return
|
||||
injectStyles(doc)
|
||||
applyIframeTheme(doc)
|
||||
setupProgress(doc)
|
||||
// Klicks im iframe blubbern nicht zum Eltern-document → eigener Listener (same-origin)
|
||||
doc.addEventListener('mousedown', onFrameMouseDown)
|
||||
}
|
||||
|
||||
// Guide-Dokument folgt dem App-Theme über das data-theme-Attribut.
|
||||
// Guides definieren :root-Variablen (--ink, --muted, --line, --bg-soft);
|
||||
// der injizierte Dark-Block (s. injectStyles) greift nur mit gesetztem Attribut.
|
||||
function applyIframeTheme(doc) {
|
||||
if (props.dark) doc.documentElement.setAttribute('data-theme', 'dark')
|
||||
else doc.documentElement.removeAttribute('data-theme')
|
||||
}
|
||||
|
||||
watch(() => props.dark, () => {
|
||||
const doc = frameEl.value?.contentDocument
|
||||
if (doc) applyIframeTheme(doc)
|
||||
})
|
||||
|
||||
function onFrameMouseDown() {
|
||||
if (chatOpen.value) closeChat()
|
||||
}
|
||||
|
||||
function injectStyles(doc) {
|
||||
// Ohne viewport-meta rendert das iframe-Dokument mit Desktop-Breite und greift unsere max-width-Query nicht.
|
||||
if (!doc.querySelector('meta[name="viewport"]')) {
|
||||
const meta = doc.createElement('meta')
|
||||
meta.name = 'viewport'
|
||||
meta.content = 'width=device-width, initial-scale=1'
|
||||
doc.head?.appendChild(meta)
|
||||
}
|
||||
|
||||
const style = doc.createElement('style')
|
||||
const portrait = !isLandscape.value
|
||||
? `html { background: #f0f1f4; }
|
||||
body {
|
||||
zoom: 1.15;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 3.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
|
||||
}`
|
||||
: ''
|
||||
// Generischer Dark-Override: greift nur, wenn die App data-theme="dark" setzt.
|
||||
// Entfällt, wenn der Guide eigene Dark-Regeln mitbringt (neuere Templates).
|
||||
const hasOwnDark = (doc.head?.innerHTML || '').includes('data-theme="dark"')
|
||||
const darkOverride = hasOwnDark
|
||||
? ''
|
||||
: `html[data-theme="dark"] {
|
||||
--ink: #e6e8ee;
|
||||
--muted: #9aa3b2;
|
||||
--line: #2c3038;
|
||||
--bg-soft: #23262e;
|
||||
background: #0e1014;
|
||||
}
|
||||
html[data-theme="dark"] body {
|
||||
background: #1c1f26;
|
||||
color: var(--ink, #e6e8ee);
|
||||
}
|
||||
/* Callouts haben hartkodierte helle Hintergründe (#e8f4ea u. ä.) */
|
||||
html[data-theme="dark"] .callout {
|
||||
background: var(--bg-soft, #23262e);
|
||||
}`
|
||||
style.textContent = `@media screen {
|
||||
${portrait}
|
||||
${darkOverride}
|
||||
.ch-toggle {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 2.5rem 0 0.5rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1.5px dashed var(--line, #c7ccd6);
|
||||
border-radius: 10px;
|
||||
background: var(--bg-soft, #f8f9fb);
|
||||
color: var(--muted, #4b5563);
|
||||
font: 600 0.95rem/1.2 -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.ch-toggle:hover { border-color: #6366f1; color: #6366f1; background: transparent; }
|
||||
.ch-toggle.is-done {
|
||||
border-style: solid;
|
||||
border-color: #34d399;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
html[data-theme="dark"] .ch-toggle.is-done {
|
||||
border-color: #0f805e;
|
||||
background: #0f3a2e;
|
||||
color: #34d399;
|
||||
}
|
||||
section.chapter.ch-complete > :not(.ch-toggle) { opacity: 0.4; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
html { background: #fff; }
|
||||
body {
|
||||
zoom: 1 !important;
|
||||
max-width: 100% !important;
|
||||
padding: 1.25rem 1rem !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Cover/Part-Divider: feste mm-Höhen + flex-center fürs Print-A4. Auf Mobile läuft
|
||||
zentrierter Inhalt über die Box hinaus und überlappt das nächste Element.
|
||||
→ als normale Blöcke von oben fließen lassen. */
|
||||
.cover, .part-divider {
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
justify-content: flex-start !important;
|
||||
padding: 2.5rem 1.25rem !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cover h1 { font-size: 30pt !important; }
|
||||
.cover h1 .light { font-size: 22pt !important; }
|
||||
.cover .sub { font-size: 12pt !important; max-width: 100% !important; margin-bottom: 1.5rem !important; }
|
||||
.cover .meta-row { flex-wrap: wrap; gap: 0.75rem 1.5rem !important; }
|
||||
.cover-deco { font-size: 60pt !important; right: 1rem !important; }
|
||||
|
||||
.part-divider h1 { font-size: 26pt !important; }
|
||||
.part-divider .part-desc { max-width: 100% !important; }
|
||||
|
||||
.chapter-head h1 { font-size: 22pt !important; }
|
||||
|
||||
/* Print schneidet Code hart ab (overflow: hidden) → auf Mobile umbrechen + scrollbar */
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
word-break: break-word;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
/* Blocksatz erzeugt riesige Wortlücken in schmalen Spalten */
|
||||
p { text-align: left !important; }
|
||||
|
||||
/* Breite Tabellen horizontal scrollbar statt überlaufend */
|
||||
table { display: block; width: 100%; overflow-x: auto; }
|
||||
}`
|
||||
doc.head?.appendChild(style)
|
||||
}
|
||||
|
||||
async function setupProgress(doc) {
|
||||
const guideId = props.previewGuide?.id
|
||||
const chapters = Array.from(doc.querySelectorAll('section.chapter'))
|
||||
if (!guideId || !chapters.length) return
|
||||
|
||||
let done = new Set()
|
||||
async function toggleChapter(title) {
|
||||
const newState = !doneChapters.value.has(title)
|
||||
const optimistic = new Set(doneChapters.value)
|
||||
if (newState) optimistic.add(title)
|
||||
else optimistic.delete(title)
|
||||
doneChapters.value = optimistic
|
||||
try {
|
||||
const res = await fetchProgress(guideId)
|
||||
done = new Set(res.chapters || [])
|
||||
} catch { /* offline → leer */ }
|
||||
|
||||
chapters.forEach((section, i) => {
|
||||
if (section.querySelector(':scope > .ch-toggle')) return // Guard gegen Doppel-Inject
|
||||
const numEl = section.querySelector('.chapter-num')
|
||||
const key = (numEl?.textContent.match(/\d+/)?.[0]) || String(i + 1)
|
||||
|
||||
const toggle = doc.createElement('div')
|
||||
toggle.className = 'ch-toggle'
|
||||
const apply = (isDone) => {
|
||||
toggle.classList.toggle('is-done', isDone)
|
||||
section.classList.toggle('ch-complete', isDone)
|
||||
toggle.textContent = isDone ? '✓ Erledigt – rückgängig' : 'Kapitel als erledigt markieren'
|
||||
}
|
||||
apply(done.has(key))
|
||||
|
||||
toggle.addEventListener('click', async () => {
|
||||
const newState = !section.classList.contains('ch-complete')
|
||||
apply(newState)
|
||||
try {
|
||||
await setProgress(guideId, key, newState)
|
||||
const res = await setProgress(props.previewGuide.id, title, newState)
|
||||
doneChapters.value = new Set(res.chapters || [])
|
||||
} catch {
|
||||
apply(!newState) // Rollback bei Fehler
|
||||
}
|
||||
})
|
||||
section.appendChild(toggle)
|
||||
})
|
||||
|
||||
// Zum ersten noch offenen Kapitel springen — aber nur, wenn davor schon was erledigt ist.
|
||||
// Frischer Guide (nichts erledigt) bleibt oben beim Cover.
|
||||
const firstOpen = chapters.find((s) => !s.classList.contains('ch-complete'))
|
||||
if (firstOpen && firstOpen !== chapters[0]) {
|
||||
firstOpen.scrollIntoView({ block: 'start' })
|
||||
const rollback = new Set(doneChapters.value)
|
||||
if (newState) rollback.delete(title)
|
||||
else rollback.add(title)
|
||||
doneChapters.value = rollback
|
||||
}
|
||||
}
|
||||
|
||||
@@ -233,7 +89,6 @@ function closeChat() {
|
||||
input.value = ''
|
||||
}
|
||||
|
||||
// Klicks außerhalb des iframes (Sidebar, Ränder) — mousedown vermeidet die Open/Close-Race beim FAB
|
||||
function onDocMouseDown(e) {
|
||||
if (!chatOpen.value) return
|
||||
if (panelEl.value && panelEl.value.contains(e.target)) return
|
||||
@@ -264,35 +119,23 @@ onUnmounted(() => {
|
||||
})
|
||||
|
||||
function extractContext() {
|
||||
try {
|
||||
const doc = frameEl.value?.contentDocument
|
||||
if (!doc) return { section: '', outline: '' }
|
||||
const headings = Array.from(doc.querySelectorAll('h1, h2, h3'))
|
||||
if (!headings.length) return { section: '', outline: '' }
|
||||
if (!content.value) return { section: '', outline: '' }
|
||||
const outline = content.value.chapters
|
||||
.map((ch) => [ch.title, ...ch.sections.map((s) => ' ' + s.title)].join('\n'))
|
||||
.join('\n')
|
||||
.slice(0, 7000)
|
||||
|
||||
const outline = headings.map((h) => h.innerText.trim()).filter(Boolean).join('\n')
|
||||
|
||||
// Aktuelle Überschrift = letzte, die oben im sichtbaren Bereich oder darüber liegt
|
||||
let current = headings[0]
|
||||
for (const h of headings) {
|
||||
if (h.getBoundingClientRect().top <= 100) current = h
|
||||
// Aktuelle Section = letzte Karte, deren Oberkante oben im Viewport oder darüber liegt
|
||||
let section = ''
|
||||
const cards = Array.from(scrollEl.value?.querySelectorAll('.section-card') || [])
|
||||
let current = null
|
||||
for (const el of cards) {
|
||||
if (el.getBoundingClientRect().top <= 120) current = el
|
||||
else break
|
||||
}
|
||||
const level = Number(current.tagName[1])
|
||||
const idx = headings.indexOf(current)
|
||||
let end = null
|
||||
for (let i = idx + 1; i < headings.length; i++) {
|
||||
if (Number(headings[i].tagName[1]) <= level) { end = headings[i]; break }
|
||||
}
|
||||
const range = doc.createRange()
|
||||
range.setStartBefore(current)
|
||||
if (end) range.setEndBefore(end)
|
||||
else range.setEndAfter(doc.body.lastElementChild || doc.body)
|
||||
const section = range.toString().trim().slice(0, 18000)
|
||||
return { section, outline: outline.slice(0, 7000) }
|
||||
} catch {
|
||||
return { section: '', outline: '' }
|
||||
}
|
||||
if (!current && cards.length) current = cards[0]
|
||||
if (current) section = current.innerText.trim().slice(0, 18000)
|
||||
return { section, outline }
|
||||
}
|
||||
|
||||
async function scrollToBottom() {
|
||||
@@ -328,8 +171,37 @@ async function send() {
|
||||
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="preview" :class="{ landscape: isLandscape }" v-if="previewGuide">
|
||||
<iframe ref="frameEl" :src="htmlUrl(previewGuide.id)" class="preview-frame" :class="{ landscape: isLandscape }" title="Guide-Vorschau" @load="onFrameLoad"></iframe>
|
||||
<div v-if="previewGuide && content" ref="scrollEl" class="guide-scroll">
|
||||
<div class="guide-content" :class="{ onepager: isOnePager }">
|
||||
<header class="guide-head">
|
||||
<h1>{{ previewGuide.topic }}</h1>
|
||||
<span class="guide-format">{{ previewGuide.format }}</span>
|
||||
</header>
|
||||
<section
|
||||
v-for="ch in content.chapters"
|
||||
:key="ch.title"
|
||||
class="chapter"
|
||||
:class="{ 'ch-complete': doneChapters.has(ch.title) }"
|
||||
>
|
||||
<h2 class="chapter-title">{{ ch.title }}</h2>
|
||||
<div class="sections">
|
||||
<article v-for="s in ch.sections" :key="s.num" class="section-card">
|
||||
<h3>{{ s.title }}</h3>
|
||||
<div class="section-body markdown" v-html="renderMarkdown(s.md)"></div>
|
||||
</article>
|
||||
</div>
|
||||
<button
|
||||
v-if="!isOnePager"
|
||||
class="ch-toggle"
|
||||
:class="{ 'is-done': doneChapters.has(ch.title) }"
|
||||
@click="toggleChapter(ch.title)"
|
||||
>{{ doneChapters.has(ch.title) ? '✓ Erledigt – rückgängig' : 'Kapitel als erledigt markieren' }}</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="previewGuide" class="empty-preview">
|
||||
<p>Lade Inhalt…</p>
|
||||
</div>
|
||||
|
||||
<div class="empty-preview" v-else>
|
||||
@@ -368,58 +240,114 @@ async function send() {
|
||||
.detail {
|
||||
flex: 1;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview {
|
||||
.guide-scroll {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
background: var(--bg-preview);
|
||||
}
|
||||
|
||||
.preview.landscape {
|
||||
padding: 2rem;
|
||||
.guide-content {
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 2.5rem 5rem;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.4rem 1rem;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-actions {
|
||||
.guide-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-link {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
.guide-format {
|
||||
color: var(--text-faint);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-link:hover {
|
||||
text-decoration: underline;
|
||||
.chapter {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.preview-frame {
|
||||
.chapter-title {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.9rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 2px solid var(--accent-border);
|
||||
}
|
||||
|
||||
.chapter.ch-complete .sections {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
h3 {
|
||||
font-size: 1.02rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* OnePager: dichtes Karten-Grid */
|
||||
.guide-content.onepager .sections {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.guide-content.onepager .section-card {
|
||||
margin-bottom: 0;
|
||||
padding: 0.7rem 0.9rem;
|
||||
|
||||
h3 {
|
||||
font-size: 0.88rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.section-body {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ch-toggle {
|
||||
display: block;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: var(--bg-preview);
|
||||
}
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.8rem 1rem;
|
||||
border: 1.5px dashed var(--border-strong);
|
||||
border-radius: 10px;
|
||||
background: var(--panel-soft);
|
||||
color: var(--text-muted);
|
||||
font: 600 0.9rem/1.2 inherit;
|
||||
font-family: inherit;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
|
||||
.preview-frame.landscape {
|
||||
max-width: 1180px;
|
||||
box-shadow: 0 1px 8px var(--shadow);
|
||||
&:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.is-done {
|
||||
border-style: solid;
|
||||
border-color: var(--success-border);
|
||||
background: var(--success-soft);
|
||||
color: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-preview {
|
||||
@@ -430,6 +358,77 @@ async function send() {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* --- Markdown (Sections + Chat) --- */
|
||||
.markdown :deep(p) {
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
.markdown :deep(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown :deep(ul),
|
||||
.markdown :deep(ol) {
|
||||
margin: 0.3em 0;
|
||||
padding-left: 1.2em;
|
||||
}
|
||||
|
||||
.markdown :deep(li) {
|
||||
margin: 0.15em 0;
|
||||
}
|
||||
|
||||
.markdown :deep(code) {
|
||||
background: var(--border);
|
||||
padding: 1px 4px;
|
||||
border-radius: 4px;
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.markdown :deep(pre) {
|
||||
background: var(--code-bg, #1e2330);
|
||||
color: var(--code-fg, #e6e8ee);
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.markdown :deep(pre code) {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.markdown :deep(h1),
|
||||
.markdown :deep(h2),
|
||||
.markdown :deep(h3) {
|
||||
font-size: 0.95em;
|
||||
margin: 0.6em 0 0.3em;
|
||||
}
|
||||
|
||||
.markdown :deep(a) {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.markdown :deep(table) {
|
||||
border-collapse: collapse;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.markdown :deep(th),
|
||||
.markdown :deep(td) {
|
||||
border: 1px solid var(--border-strong);
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.section-body {
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* --- Chat --- */
|
||||
.chat-fab {
|
||||
position: fixed;
|
||||
right: 1.5rem;
|
||||
@@ -528,75 +527,15 @@ async function send() {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-msg.markdown {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.chat-typing {
|
||||
color: var(--text-faint);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(p) {
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(ul),
|
||||
.chat-msg.markdown :deep(ol) {
|
||||
margin: 0.3em 0;
|
||||
padding-left: 1.2em;
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(li) {
|
||||
margin: 0.15em 0;
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(code) {
|
||||
background: var(--border);
|
||||
padding: 1px 4px;
|
||||
border-radius: 4px;
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(pre) {
|
||||
background: #1e2330;
|
||||
color: #e6e8ee;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(pre code) {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-size: 0.78em;
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(h1),
|
||||
.chat-msg.markdown :deep(h2),
|
||||
.chat-msg.markdown :deep(h3) {
|
||||
font-size: 0.95em;
|
||||
margin: 0.4em 0 0.2em;
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(a) {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(table) {
|
||||
border-collapse: collapse;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.chat-msg.markdown :deep(th),
|
||||
.chat-msg.markdown :deep(td) {
|
||||
border: 1px solid var(--border-strong);
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
@@ -8,13 +8,15 @@ const props = defineProps({
|
||||
doneByFormat: { type: Object, default: () => ({}) },
|
||||
latestByFormat: { type: Object, default: () => ({}) },
|
||||
allGuides: { type: Array, default: () => [] },
|
||||
bausteine: { type: Object, default: () => ({ ready: false, generating: false, progress: null, error: null }) },
|
||||
activeBausteine: { type: Array, default: () => [] },
|
||||
pinned: { type: Boolean, default: true },
|
||||
dark: { type: Boolean, default: false },
|
||||
provider: { type: String, default: 'claude' },
|
||||
providers: { type: Array, default: () => [] },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['select', 'create', 'formatClick', 'deleteTopic', 'deleteProject', 'cancelGuide', 'deleteGuide', 'preview', 'togglePin', 'sidebarLeave', 'toggleDark', 'setProvider'])
|
||||
const emit = defineEmits(['select', 'create', 'formatClick', 'bausteineClick', 'deleteTopic', 'deleteProject', 'cancelGuide', 'deleteGuide', 'preview', 'togglePin', 'sidebarLeave', 'toggleDark', 'setProvider'])
|
||||
|
||||
function providerAvailable(id) {
|
||||
const p = props.providers.find((x) => x.id === id)
|
||||
@@ -27,14 +29,34 @@ const formats = [
|
||||
{ key: 'OnePager', label: 'OnePager' },
|
||||
{ key: 'MiniGuide', label: 'MiniGuide' },
|
||||
{ key: 'Guide', label: 'Guide' },
|
||||
{ key: 'FullGuide', label: 'FullGuide' },
|
||||
]
|
||||
|
||||
const BAUSTEINE_KEY = '__bausteine__'
|
||||
|
||||
const bausteineState = computed(() => {
|
||||
if (props.bausteine.generating) return 'generating'
|
||||
return props.bausteine.ready ? 'done' : 'none'
|
||||
})
|
||||
|
||||
const activeGenerations = computed(() => {
|
||||
return props.allGuides
|
||||
const bausteinLines = props.activeBausteine.map(
|
||||
(b) => `${b.topic} – Bausteine: ${b.progress || 'Wartend…'}`,
|
||||
)
|
||||
const guideLines = props.allGuides
|
||||
.filter((g) => g.status === 'generating' || g.status === 'queued')
|
||||
.map((g) => `${g.topic} – ${g.format}: ${g.progress || 'Wartend…'}`)
|
||||
return [...bausteinLines, ...guideLines]
|
||||
})
|
||||
|
||||
function handleBausteinePlay() {
|
||||
if (bausteineState.value === 'generating') return
|
||||
const text = activeInput.value === BAUSTEINE_KEY ? inputText.value.trim() : ''
|
||||
emit('bausteineClick', { instructions: text })
|
||||
activeInput.value = null
|
||||
inputText.value = ''
|
||||
}
|
||||
|
||||
function guideStatus(format) {
|
||||
if (props.doneByFormat[format]) return 'done'
|
||||
const latest = props.latestByFormat[format]
|
||||
@@ -149,6 +171,36 @@ function confirmDeleteProject(name) {
|
||||
<div class="progress-info" v-if="activeGenerations.length">
|
||||
<div v-for="(line, i) in activeGenerations" :key="i">{{ line }}</div>
|
||||
</div>
|
||||
<div :class="['format-row', 'bausteine-row', 'fmt-' + bausteineState]">
|
||||
<button class="format-name">
|
||||
<span class="format-label">Bausteine</span>
|
||||
</button>
|
||||
<div class="format-actions">
|
||||
<template v-if="bausteineState !== 'generating'">
|
||||
<button
|
||||
class="action-btn play"
|
||||
:title="bausteine.ready ? 'Bausteine neu erstellen' : 'Bausteine erstellen'"
|
||||
@click="handleBausteinePlay"
|
||||
>▶</button>
|
||||
<button
|
||||
class="action-btn pencil"
|
||||
:class="{ active: activeInput === BAUSTEINE_KEY }"
|
||||
title="Anweisungen"
|
||||
@click="toggleInput(BAUSTEINE_KEY)"
|
||||
>✎</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="bausteine.error" class="format-error">
|
||||
<span class="format-error-text">{{ bausteine.error }}</span>
|
||||
</div>
|
||||
<div v-if="activeInput === BAUSTEINE_KEY" class="format-input">
|
||||
<input
|
||||
v-model="inputText"
|
||||
placeholder="Anweisungen (optional)…"
|
||||
@keyup.enter="handleBausteinePlay"
|
||||
/>
|
||||
</div>
|
||||
<div v-for="f in formats" :key="f.key">
|
||||
<div :class="['format-row', 'fmt-' + guideStatus(f.key)]">
|
||||
<button class="format-name" @click="handleFormatClick(f.key)">
|
||||
@@ -162,7 +214,12 @@ function confirmDeleteProject(name) {
|
||||
</button>
|
||||
<div class="format-actions">
|
||||
<template v-if="guideStatus(f.key) !== 'generating' && guideStatus(f.key) !== 'queued'">
|
||||
<button class="action-btn play" title="Generieren" @click="handlePlay(f.key)">▶</button>
|
||||
<button
|
||||
class="action-btn play"
|
||||
:title="bausteine.ready ? 'Generieren' : 'Erst Bausteine erstellen'"
|
||||
:disabled="!bausteine.ready"
|
||||
@click="handlePlay(f.key)"
|
||||
>▶</button>
|
||||
<button
|
||||
class="action-btn pencil"
|
||||
:class="{ active: activeInput === f.key }"
|
||||
@@ -391,6 +448,15 @@ function confirmDeleteProject(name) {
|
||||
}
|
||||
|
||||
/* Format section */
|
||||
.format-row.bausteine-row {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.format-section {
|
||||
flex-shrink: 0;
|
||||
max-height: 60vh;
|
||||
|
||||
@@ -1,782 +0,0 @@
|
||||
# Guide Style System — Authoring & Build Specification
|
||||
|
||||
This document is a **complete, self-contained specification** for producing a polished, book-style guide as a single HTML file that renders to a clean A4 PDF. It is **topic-neutral**: use it for programming subjects (PHP, Godot, Blender) and equally for non-technical ones (nutrition, finance, psychology, communication, language learning, …).
|
||||
|
||||
You will normally be given two things: this specification and possibly one reference HTML file built with it. From those alone you must be able to:
|
||||
|
||||
1. Gather the subject knowledge yourself (research as needed).
|
||||
2. Decide a structure (parts → chapters).
|
||||
3. Write a single HTML file that embeds the CSS from this document verbatim.
|
||||
4. Convert that HTML to PDF.
|
||||
|
||||
Follow this spec exactly. The visual identity depends on small details (spacing, weights, the single accent color), so do not improvise the CSS. You **do** have full freedom over content, structure, length, and which optional building blocks you use.
|
||||
|
||||
---
|
||||
|
||||
## 1. Output contract
|
||||
|
||||
- **One HTML file**, self-contained: a single `<style>` block in `<head>`, no external CSS, no external JS, no web fonts. Fonts are system fonts only (see §3).
|
||||
- The HTML converts to PDF with **WeasyPrint**. The canonical build command is:
|
||||
```
|
||||
weasyprint guide.html guide.pdf
|
||||
```
|
||||
- Page size is **A4**. All page furniture (page numbers, running header, footer label) is produced by CSS `@page` rules — you never write headers/footers into the body.
|
||||
- The body is laid out as: **Cover → Table of Contents → Part 1 divider → its chapters → Part 2 divider → its chapters → …**
|
||||
|
||||
If WeasyPrint is unavailable, the HTML must still be a valid, good-looking standalone document; the layout is built so it degrades gracefully in a browser too.
|
||||
|
||||
---
|
||||
|
||||
## 2. Mental model of a guide
|
||||
|
||||
A guide is a short book. The structure is always the same three levels:
|
||||
|
||||
- **Part** — a major thematic section (e.g. "Fundamentals", "Advanced", "Pitfalls"). Each part gets a full-page **divider**. A guide typically has **3–8 parts**.
|
||||
- **Chapter** — one focused topic. Chapters flow continuously down the page (they do not force a page break); each is separated from the previous by spacing and its own heading block. **3–10 chapters per part**. Each chapter is numbered sequentially across the whole guide (Chapter 1, 2, 3 … regardless of part).
|
||||
- **Section** (`<h2>`) and **sub-section** (`<h3>`) — structure inside a chapter.
|
||||
|
||||
### Scope — coverage-driven (top tier)
|
||||
|
||||
**10–30 pages, covering all important building blocks of the topic** — everything a practical user needs in real work. Far broader than the MiniGuide tier ("core building blocks only"). How much that is depends on the topic.
|
||||
|
||||
A **topic inventory** is produced beforehand by a research agent and supplied to you. It is binding: every inventory item must appear in the guide as its own section — do not merge, trim, or drop items. Derive parts and chapters from the inventory; part/chapter counts follow from it, there is no default number. Page count is an outcome within the 10–30 range, never a target. State the resulting scope on the cover (parts · chapters).
|
||||
|
||||
### Voice and content rules (apply to every topic)
|
||||
|
||||
- Write in the **reader's language** (German request → German guide). This spec is in English, but that does not constrain the output language.
|
||||
- Open each chapter with a one- or two-sentence **lead** (`.lead`) that frames why the topic matters.
|
||||
- Explain each new term the first time it appears. Assume an intelligent reader who is new to *this* subject.
|
||||
- Prefer **short, concrete examples** over abstract description. For technical topics that means small code snippets; for non-technical topics it means worked examples, sample dialogues, before/after comparisons, small tables, checklists, or step lists.
|
||||
- **Explanations are short and simple**: max. 3 short main clauses per concept, no nested sentences. Plain language over precision-flexing.
|
||||
- Use **callouts** to highlight tips, warnings, side-notes, and deeper digressions — not more than one or two per chapter. Sentences like "Empfehlung: …", "In der Praxis problematisch: …", "Achtung: …" ALWAYS go into the matching callout (tip/warn/note), never into running explanation text.
|
||||
- Keep prose tight. This is a reference people skim and return to, not an essay.
|
||||
|
||||
---
|
||||
|
||||
## 3. The CSS — embed this verbatim
|
||||
|
||||
Paste the following into a single `<style>` element in `<head>`. **Do not rename classes, change spacing units, or restructure rules.** The only thing you customize is the small block of CSS variables in `:root` (see §4).
|
||||
|
||||
```css
|
||||
/* ============================================================
|
||||
GUIDE STYLE SYSTEM · Stylesheet (WeasyPrint)
|
||||
============================================================ */
|
||||
|
||||
/* ---------- PAGE ---------- */
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 20mm 18mm 18mm 18mm;
|
||||
@bottom-center {
|
||||
content: counter(page);
|
||||
font-family: -apple-system, "Segoe UI", sans-serif;
|
||||
font-size: 8pt;
|
||||
color: #888;
|
||||
}
|
||||
@bottom-right {
|
||||
content: var(--footer-label); /* set in :root, see §4 */
|
||||
font-family: -apple-system, "Segoe UI", sans-serif;
|
||||
font-size: 8pt;
|
||||
color: #888;
|
||||
}
|
||||
@top-right {
|
||||
content: string(chaptertitle);
|
||||
font-family: -apple-system, "Segoe UI", sans-serif;
|
||||
font-size: 8pt;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cover page: no header/footer */
|
||||
@page cover {
|
||||
margin: 0;
|
||||
@bottom-center { content: none; }
|
||||
@bottom-right { content: none; }
|
||||
@top-right { content: none; }
|
||||
}
|
||||
|
||||
/* Part-divider pages: no running header (the title is already prominent) */
|
||||
@page chapterstart {
|
||||
@top-right { content: none; }
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
/* ===== CUSTOMIZE PER TOPIC — see §4 ===== */
|
||||
--accent: #777BB4; /* main accent */
|
||||
--accent-dark: #4F5B93; /* darker shade for headings */
|
||||
--accent-darker: #2C3E66; /* darkest, for cover gradient + part titles */
|
||||
--footer-label: "Guide"; /* short title shown bottom-right of every page */
|
||||
|
||||
/* ===== USUALLY LEAVE THESE ALONE ===== */
|
||||
--ink: #1a1a1a;
|
||||
--muted: #5a6470;
|
||||
--line: #d8dde3;
|
||||
--bg-soft: #f5f5fb; /* tint this toward your accent if you like */
|
||||
--code-bg: #1e2a3a;
|
||||
--code-fg: #e6e6e6;
|
||||
--plus: #2c8a3e; /* tip / positive */
|
||||
--minus: #c0392b; /* warning / negative */
|
||||
--neutral: #b8860b; /* deep-dive / aside */
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: Charter, "Source Serif Pro", Georgia, serif;
|
||||
color: var(--ink);
|
||||
font-size: 10.5pt;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
COVER
|
||||
============================================================ */
|
||||
.cover {
|
||||
page: cover;
|
||||
page-break-after: always;
|
||||
height: 297mm;
|
||||
background: linear-gradient(150deg, var(--accent-darker) 0%, var(--accent-dark) 45%, var(--accent) 100%);
|
||||
color: white;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 22mm;
|
||||
}
|
||||
.cover-logo {
|
||||
width: 30mm; height: 30mm;
|
||||
background: rgba(255,255,255,0.14);
|
||||
border: 1.5pt solid rgba(255,255,255,0.5);
|
||||
border-radius: 7mm;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 20pt; font-weight: 800;
|
||||
margin-bottom: 14mm;
|
||||
letter-spacing: -1pt;
|
||||
}
|
||||
.cover h1 {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 42pt;
|
||||
font-weight: 800;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -1.5pt;
|
||||
margin-bottom: 6mm;
|
||||
}
|
||||
.cover h1 .light { font-weight: 300; display:block; font-size: 30pt; opacity: 0.85; }
|
||||
.cover .sub {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 13pt;
|
||||
font-weight: 400;
|
||||
opacity: 0.9;
|
||||
line-height: 1.5;
|
||||
max-width: 130mm;
|
||||
margin-bottom: 18mm;
|
||||
}
|
||||
.cover .meta-row {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 9.5pt;
|
||||
opacity: 0.85;
|
||||
border-top: 1pt solid rgba(255,255,255,0.3);
|
||||
padding-top: 5mm;
|
||||
display: flex;
|
||||
gap: 8mm;
|
||||
}
|
||||
.cover .meta-row b { font-weight: 700; }
|
||||
.cover-deco {
|
||||
position: absolute;
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
font-size: 120pt;
|
||||
font-weight: 800;
|
||||
opacity: 0.06;
|
||||
bottom: 10mm;
|
||||
right: 12mm;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
TABLE OF CONTENTS
|
||||
============================================================ */
|
||||
.toc {
|
||||
page-break-after: always;
|
||||
}
|
||||
.toc h2 {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 22pt;
|
||||
font-weight: 800;
|
||||
color: var(--accent-dark);
|
||||
margin-bottom: 8mm;
|
||||
border: none;
|
||||
}
|
||||
.toc-part {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 10pt;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5pt;
|
||||
color: var(--accent);
|
||||
margin: 6mm 0 2mm 0;
|
||||
padding-bottom: 1mm;
|
||||
border-bottom: 1pt solid var(--line);
|
||||
}
|
||||
.toc-part:first-of-type { margin-top: 0; }
|
||||
.toc-entry {
|
||||
display: flex;
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 9.5pt;
|
||||
margin: 1.6mm 0;
|
||||
align-items: baseline;
|
||||
}
|
||||
.toc-num {
|
||||
color: var(--accent-dark);
|
||||
font-weight: 700;
|
||||
width: 11mm;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toc-title { color: var(--ink); }
|
||||
.toc-dots {
|
||||
flex: 1;
|
||||
border-bottom: 1pt dotted var(--line);
|
||||
margin: 0 2mm;
|
||||
transform: translateY(-1mm);
|
||||
}
|
||||
.toc-page { color: var(--muted); font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* ============================================================
|
||||
PART DIVIDER
|
||||
============================================================ */
|
||||
.part-divider {
|
||||
page: chapterstart;
|
||||
page-break-before: always;
|
||||
page-break-after: always;
|
||||
height: 257mm;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: var(--bg-soft);
|
||||
border-radius: 4mm;
|
||||
padding: 0 20mm;
|
||||
}
|
||||
.part-divider .part-kicker {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 11pt;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3pt;
|
||||
color: var(--accent);
|
||||
margin-bottom: 4mm;
|
||||
}
|
||||
.part-divider h1 {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 34pt;
|
||||
font-weight: 800;
|
||||
color: var(--accent-darker);
|
||||
letter-spacing: -1pt;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 6mm;
|
||||
}
|
||||
.part-divider .part-desc {
|
||||
font-size: 12pt;
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
max-width: 120mm;
|
||||
}
|
||||
.part-divider .part-chapters {
|
||||
margin-top: 10mm;
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 9.5pt;
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
.part-divider .part-chapters span {
|
||||
display: block;
|
||||
margin: 1.5mm 0;
|
||||
padding-left: 5mm;
|
||||
border-left: 2pt solid var(--accent);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
CHAPTER
|
||||
============================================================ */
|
||||
.chapter {
|
||||
margin-top: 8mm; /* chapters flow continuously; no forced page break */
|
||||
}
|
||||
.chapter-head {
|
||||
string-set: chaptertitle content();
|
||||
margin-bottom: 6mm;
|
||||
padding-bottom: 3mm;
|
||||
border-bottom: 2pt solid var(--ink);
|
||||
}
|
||||
.chapter-num {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 9pt;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2pt;
|
||||
color: var(--accent);
|
||||
display: block;
|
||||
margin-bottom: 1.5mm;
|
||||
}
|
||||
.chapter-head h1 {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 24pt;
|
||||
font-weight: 800;
|
||||
color: var(--accent-dark);
|
||||
letter-spacing: -0.5pt;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
IN-FLOW HEADINGS
|
||||
============================================================ */
|
||||
h2 {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 14pt;
|
||||
font-weight: 700;
|
||||
color: var(--accent-dark);
|
||||
margin: 6mm 0 2.5mm 0;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
h3 {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 11pt;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
margin: 4mm 0 1.5mm 0;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 2.5mm;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
p b, li b { color: var(--accent-dark); }
|
||||
ul, ol { margin: 1.5mm 0 3mm 6mm; }
|
||||
li { margin-bottom: 1mm; }
|
||||
|
||||
/* ============================================================
|
||||
CODE (optional — technical topics only, see §7)
|
||||
============================================================ */
|
||||
pre {
|
||||
background: var(--code-bg);
|
||||
color: var(--code-fg);
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
font-size: 8.3pt;
|
||||
line-height: 1.5;
|
||||
padding: 3mm 4mm;
|
||||
border-radius: 2mm;
|
||||
margin: 2.5mm 0 3.5mm 0;
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.c { color: #6b8aae; font-style: italic; } /* comment / de-emphasized */
|
||||
.k { color: #ff79c6; } /* keyword / control word */
|
||||
.s { color: #f1c40f; } /* string / number / literal value */
|
||||
.f { color: #50fa7b; } /* function / callable name */
|
||||
.t { color: #8be9fd; } /* type / tag / class name */
|
||||
.v { color: #ffb86c; } /* variable / identifier */
|
||||
.a { color: #bd93f9; } /* attribute / annotation / decorator */
|
||||
|
||||
code.inline {
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
font-size: 9pt;
|
||||
background: var(--bg-soft);
|
||||
padding: 0.3mm 1.5mm;
|
||||
border-radius: 1mm;
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
CALLOUTS
|
||||
============================================================ */
|
||||
.callout {
|
||||
border-radius: 2mm;
|
||||
padding: 2.5mm 4mm;
|
||||
margin: 3mm 0;
|
||||
font-size: 10pt;
|
||||
page-break-inside: avoid;
|
||||
display: grid;
|
||||
grid-template-columns: 6mm 1fr;
|
||||
gap: 3mm;
|
||||
}
|
||||
.callout-icon {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 14pt;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.callout-body > b:first-child {
|
||||
font-family: -apple-system, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 8pt;
|
||||
letter-spacing: 1pt;
|
||||
display: block;
|
||||
margin-bottom: 1mm;
|
||||
}
|
||||
.callout.tip { background: #e8f4ea; border-left: 3pt solid var(--plus); }
|
||||
.callout.tip .callout-icon, .callout.tip .callout-body > b:first-child { color: var(--plus); }
|
||||
.callout.warn { background: #fdecea; border-left: 3pt solid var(--minus); }
|
||||
.callout.warn .callout-icon, .callout.warn .callout-body > b:first-child { color: var(--minus); }
|
||||
.callout.note { background: var(--bg-soft); border-left: 3pt solid var(--accent); }
|
||||
.callout.note .callout-icon, .callout.note .callout-body > b:first-child { color: var(--accent-dark); }
|
||||
.callout.deep { background: #fff8e8; border-left: 3pt solid var(--neutral); }
|
||||
.callout.deep .callout-icon, .callout.deep .callout-body > b:first-child { color: var(--neutral); }
|
||||
|
||||
/* ============================================================
|
||||
TABLES
|
||||
============================================================ */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 2.5mm 0 3.5mm 0;
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 9pt;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
th {
|
||||
background: var(--accent-dark);
|
||||
color: white;
|
||||
text-align: left;
|
||||
padding: 1.8mm 3mm;
|
||||
font-weight: 700;
|
||||
}
|
||||
td {
|
||||
padding: 1.5mm 3mm;
|
||||
border-bottom: 1pt solid var(--line);
|
||||
vertical-align: top;
|
||||
}
|
||||
tr:nth-child(even) td { background: var(--bg-soft); }
|
||||
td code, th code {
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
font-size: 8.2pt;
|
||||
}
|
||||
|
||||
/* small helpers */
|
||||
.lead {
|
||||
font-size: 11.5pt;
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
margin-bottom: 4mm;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. The only things you customize: `:root` variables
|
||||
|
||||
Change **four** values per guide; leave the rest unless you have a reason. The accent color is the entire brand: pick one that fits the topic, then derive a darker and darkest shade from it (roughly: accent at ~55% lightness, accent-dark ~40%, accent-darker ~28%, all at similar hue).
|
||||
|
||||
| Variable | What it is | Example (PHP) |
|
||||
|---|---|---|
|
||||
| `--accent` | main accent (kickers, links, code-inline, table tint sources) | `#777BB4` |
|
||||
| `--accent-dark` | headings, table header background | `#4F5B93` |
|
||||
| `--accent-darker` | cover gradient end + part titles | `#2C3E66` |
|
||||
| `--footer-label` | short title shown bottom-right every page; **must be a quoted CSS string** | `"PHP Komplett-Guide"` |
|
||||
|
||||
### Recommended accent palettes (free to ignore or replace)
|
||||
|
||||
These are starting points — three shades each (accent / dark / darker):
|
||||
|
||||
- **Programming / PHP** — `#777BB4` / `#4F5B93` / `#2C3E66` (violet)
|
||||
- **Godot / game dev** — `#478CBF` / `#3A6E97` / `#27496B` (blue)
|
||||
- **Blender / 3D / art** — `#E87D0D` / `#C2670A` / `#8A4906` (orange)
|
||||
- **Finance / business** — `#1F7A4D` / `#155C39` / `#0D3D26` (green)
|
||||
- **Nutrition / health** — `#D2603A` / `#A8492B` / `#74331E` (terracotta)
|
||||
- **Psychology / communication** — `#6A5ACD` / `#52459E` / `#372E6B` (indigo)
|
||||
- **Language learning** — `#C0392B` / `#992D22` / `#641E16` (warm red)
|
||||
- **Neutral / mixed topics** — `#3D5A73` / `#2E4557` / `#1E2E3B` (slate)
|
||||
|
||||
When you change the accent, optionally nudge `--bg-soft` toward the same hue (keep it very light, ~96% lightness) so tinted blocks feel cohesive. Everything else (`--ink`, `--muted`, `--line`, callout colors, code colors) stays fixed — those are deliberately topic-independent.
|
||||
|
||||
---
|
||||
|
||||
## 5. HTML skeleton
|
||||
|
||||
The body is a flat sequence of sections. There is no wrapper around chapters; the CSS handles page breaks. Order: cover, TOC, then for each part its divider immediately followed by its chapters.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="de"> <!-- set to the guide's language -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>… Guide title …</title>
|
||||
<style>
|
||||
/* paste the entire stylesheet from §3 here */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- COVER -->
|
||||
<section class="cover"> … </section>
|
||||
|
||||
<!-- TABLE OF CONTENTS -->
|
||||
<section class="toc"> … </section>
|
||||
|
||||
<!-- PART 1 -->
|
||||
<section class="part-divider"> … </section>
|
||||
<section class="chapter"> … </section>
|
||||
<section class="chapter"> … </section>
|
||||
<!-- … more chapters … -->
|
||||
|
||||
<!-- PART 2 -->
|
||||
<section class="part-divider"> … </section>
|
||||
<section class="chapter"> … </section>
|
||||
<!-- … etc … -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
You may generate this HTML however you like — by hand, or with a small script that concatenates strings. A script helps for long guides because it keeps each chapter in its own readable chunk. If you use a script, **the script is throwaway**; the deliverable is the HTML (and the PDF), not the script.
|
||||
|
||||
---
|
||||
|
||||
## 6. The building blocks
|
||||
|
||||
Below is the exact markup for every block. Copy these shapes; fill in content.
|
||||
|
||||
### 6.1 Cover
|
||||
|
||||
```html
|
||||
<section class="cover">
|
||||
<div class="cover-logo">LOGO</div>
|
||||
<h1>MAIN TITLE<span class="light">Subtitle line</span></h1>
|
||||
<div class="sub">One or two sentences describing what the guide covers and who it is for.</div>
|
||||
<div class="meta-row">
|
||||
<span><b>N Parts</b> · M Chapters</span>
|
||||
<span><b>Edition / version</b> · Year</span>
|
||||
<span>Focus: …</span>
|
||||
</div>
|
||||
<div class="cover-deco">◆</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
- **`.cover-logo`** — 1–4 characters or a single symbol that evokes the topic. Examples: `php`, `gd` (Godot), a Blender-style `b`, `€` (finance), `Ψ` (psychology), `EN` (English), `🍎` is **not** allowed (no emoji in the logo — keep it crisp). Prefer short letterforms or a geometric glyph (`◆ ● ▲ ■`).
|
||||
- **`.cover h1`** — the big title. The `<span class="light">` is an optional lighter, smaller second line (e.g. `PHP` then `The Complete Guide`). Drop the span for a single-line title.
|
||||
- **`.cover-deco`** — a giant, very faint background glyph in the bottom-right. Pick something topic-flavored: a code fragment (`<?php`, `{ }`, `def`), a symbol (`€`, `∑`, `Ψ`, `♪`), or a single bold letter. Keep it to a few characters; it is decorative and barely visible by design.
|
||||
- **`.meta-row`** — two to four short facts separated into `<span>`s. Use it to state scope (parts/chapters), edition/year, and the focus. This is where you set the reader's expectations about length and depth.
|
||||
|
||||
### 6.2 Table of contents
|
||||
|
||||
List every part, and under it every chapter, numbered sequentially across the whole guide. There are **no real page numbers** (WeasyPrint does not back-fill them here), so the `.toc-page` element is optional — omit it, or use it only if you maintain numbers yourself. The dotted leader still looks right without a trailing number.
|
||||
|
||||
```html
|
||||
<section class="toc">
|
||||
<h2>Contents</h2>
|
||||
|
||||
<div class="toc-part">Part 1 · Fundamentals</div>
|
||||
<div class="toc-entry">
|
||||
<span class="toc-num">1</span>
|
||||
<span class="toc-title">First chapter title</span>
|
||||
<span class="toc-dots"></span>
|
||||
</div>
|
||||
<div class="toc-entry">
|
||||
<span class="toc-num">2</span>
|
||||
<span class="toc-title">Second chapter title</span>
|
||||
<span class="toc-dots"></span>
|
||||
</div>
|
||||
|
||||
<div class="toc-part">Part 2 · Going Deeper</div>
|
||||
<div class="toc-entry">
|
||||
<span class="toc-num">3</span>
|
||||
<span class="toc-title">…</span>
|
||||
<span class="toc-dots"></span>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 6.3 Part divider
|
||||
|
||||
One full page that introduces a part. The chapter list mirrors the TOC entries for that part.
|
||||
|
||||
```html
|
||||
<section class="part-divider">
|
||||
<div class="part-kicker">Part 1</div>
|
||||
<h1>Fundamentals</h1>
|
||||
<div class="part-desc">Italic one-liner describing the arc of this part.</div>
|
||||
<div class="part-chapters">
|
||||
<span>1 · First chapter</span>
|
||||
<span>2 · Second chapter</span>
|
||||
<span>3 · Third chapter</span>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 6.4 Chapter
|
||||
|
||||
The `.chapter-head` is special: its text is captured into the **running header** at the top-right of every page in that chapter (via `string-set: chaptertitle content()`). Note that `content()` concatenates the text of **all** children, so the chapter-number span and the title run together in the header (e.g. "Chapter 1Title"). For a clean separator, end the `.chapter-num` text with a trailing separator such as `Chapter 1 · ` (trailing space + middot) — or accept the run-on; both are acceptable. Either way keep the chapter `<h1>` reasonably short so it fits on one header line.
|
||||
|
||||
```html
|
||||
<section class="chapter">
|
||||
<div class="chapter-head">
|
||||
<span class="chapter-num">Chapter 1</span>
|
||||
<h1>Chapter title</h1>
|
||||
</div>
|
||||
|
||||
<p class="lead">Framing sentence(s) — why this matters.</p>
|
||||
|
||||
<h2>A section</h2>
|
||||
<p>Body text. Use <b>bold</b> for the key term in a sentence. Inline monospace
|
||||
like <code class="inline">term</code> works for any short literal —
|
||||
a command, a key name, a nutrient, a chord, a German case.</p>
|
||||
|
||||
<h3>A sub-section</h3>
|
||||
<p>…</p>
|
||||
|
||||
<!-- tables, callouts, code, lists as needed -->
|
||||
</section>
|
||||
```
|
||||
|
||||
### 6.5 Callouts
|
||||
|
||||
Four flavors. Each has a short uppercase label as the **first `<b>`** inside `.callout-body`, then body text. The icon column holds one glyph.
|
||||
|
||||
```html
|
||||
<div class="callout tip">
|
||||
<div class="callout-icon">✓</div>
|
||||
<div class="callout-body"><b>LABEL</b>Body text giving a practical tip.</div>
|
||||
</div>
|
||||
|
||||
<div class="callout warn">
|
||||
<div class="callout-icon">!</div>
|
||||
<div class="callout-body"><b>LABEL</b>Body text warning about a trap.</div>
|
||||
</div>
|
||||
|
||||
<div class="callout note">
|
||||
<div class="callout-icon">i</div>
|
||||
<div class="callout-body"><b>LABEL</b>Body text for a neutral side note.</div>
|
||||
</div>
|
||||
|
||||
<div class="callout deep">
|
||||
<div class="callout-icon">◆</div>
|
||||
<div class="callout-body"><b>LABEL</b>Body text for an optional deeper dive.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Meaning of each flavor (topic-independent):
|
||||
|
||||
| Flavor | Color | Use for |
|
||||
|---|---|---|
|
||||
| `tip` | green, ✓ | best practice, a recommendation, a shortcut |
|
||||
| `warn` | red, ! | a common mistake, risk, or thing to avoid |
|
||||
| `note` | accent, i | a neutral aside, clarification, context |
|
||||
| `deep` | gold, ◆ | optional depth: history, edge case, advanced detail |
|
||||
|
||||
Standard icon entities: tip `✓` (✓), warn `!`, note `i`, deep `◆` (◆). You may substitute a more fitting single glyph, but keep it one character.
|
||||
|
||||
### 6.6 Tables
|
||||
|
||||
Plain `<table>` with a header row. The styling (accent header, zebra rows) is automatic. Keep tables to a few columns so they fit A4 width.
|
||||
|
||||
```html
|
||||
<table>
|
||||
<tr><th>Column A</th><th>Column B</th></tr>
|
||||
<tr><td>value</td><td>value</td></tr>
|
||||
<tr><td>value</td><td>value</td></tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
Tables are one of the most useful blocks for **non-technical** topics too: nutrient comparisons, vocabulary lists, pros/cons, decision matrices, dosage/timing, term glossaries.
|
||||
|
||||
---
|
||||
|
||||
## 7. Code blocks — optional, technical topics only
|
||||
|
||||
The dark `<pre>` block and the highlight span classes exist for subjects that genuinely involve code or other monospaced literal text (config, shell commands, formulas). **For non-technical guides, do not use `<pre>` blocks at all** — they would look out of place. Use tables, lists, callouts, and worked examples instead. (`code.inline` is fine everywhere for short literals.)
|
||||
|
||||
When you do use code, you **hand-write the highlighting** by wrapping tokens in spans. The classes are intentionally generic so they map onto any language:
|
||||
|
||||
| Class | Generic meaning | Typical use |
|
||||
|---|---|---|
|
||||
| `.c` | de-emphasized | comments |
|
||||
| `.k` | keyword / control word | `if`, `function`, `class`, `return` |
|
||||
| `.s` | literal value | strings, numbers |
|
||||
| `.f` | callable name | function / method names |
|
||||
| `.t` | type / tag / class | type names, HTML tags, class names |
|
||||
| `.v` | identifier | variables |
|
||||
| `.a` | annotation | attributes, decorators, directives |
|
||||
|
||||
Rules for code blocks:
|
||||
|
||||
- Keep snippets **short** (roughly 2–12 lines). They must fit on one page — `page-break-inside: avoid` is set, so an oversized block can overflow. Split long examples into several captioned blocks.
|
||||
- **Escape HTML inside code**: write `<`, `>`, `&`. This is the most common rendering bug.
|
||||
- Inside the dark block, a comment uses `<span class="c">`. Indentation is literal spaces (the block is `white-space: pre`).
|
||||
- You do not need to highlight every token — highlight the ones that aid reading (keywords, strings, names). Plain text inside `<pre>` is fine and renders in the default light color.
|
||||
|
||||
Example (PHP-flavored, but the pattern is language-agnostic):
|
||||
|
||||
```html
|
||||
<pre><span class="k">function</span> <span class="f">greet</span>(<span class="t">string</span> <span class="v">$name</span>): <span class="t">string</span> {
|
||||
<span class="k">return</span> <span class="s">"Hello, $name"</span>; <span class="c">// interpolation</span>
|
||||
}</pre>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Pitfalls — read before building (these caused real bugs)
|
||||
|
||||
1. **Escape `<`, `>`, `&` inside `<pre>` and `<code>`.** Unescaped angle brackets silently swallow content or break layout. Always `< > &`.
|
||||
2. **Typographic quotes in prose, straight quotes in attributes.** In body text use the target language's real quotation marks (German `„ … "`, English `" … "`). Never let a quote character inside running text collide with HTML attribute quotes. If you generate the HTML from a script, be careful that closing typographic quotes are not accidentally written as escaped ASCII quotes — that corrupts both the string and any nearby `class="…"`. The safe approach: type real `„ … "` / `" … "` glyphs in prose, and reserve `"` strictly for HTML attributes.
|
||||
3. **`--footer-label` must be a quoted CSS string**, e.g. `--footer-label: "Nutrition Guide";`. An unquoted value breaks the `@page` rule.
|
||||
4. **Keep code blocks and callouts short enough to fit one page.** `page-break-inside: avoid` prevents splitting but cannot shrink an oversized block; it will overflow the page. Break large blocks up.
|
||||
5. **Multibyte text is fine** (umlauts, accents, CJK, symbols) — the fonts and UTF-8 charset handle it. But if you ever measure string length in a generator script, count characters, not bytes.
|
||||
6. **Chapter `<h1>` feeds the running header.** Keep it short; a very long chapter title wraps awkwardly in the 8pt header.
|
||||
7. **Don't add web fonts or external assets.** The look depends on the system-font stack already specified. Adding fonts changes metrics and spacing.
|
||||
8. **One accent, three shades.** Don't introduce extra brand colors. Variety comes from the callout colors (green/red/gold), which are fixed and meaningful — not decorative.
|
||||
9. **Tables and code don't split** (`page-break-inside: avoid`). If a table is very long, either let it be its own short section or split it into two.
|
||||
|
||||
---
|
||||
|
||||
## 9. Build & verify
|
||||
|
||||
1. Write `guide.html` (single file, embedded `<style>`, UTF-8).
|
||||
2. Convert:
|
||||
```
|
||||
weasyprint guide.html guide.pdf
|
||||
```
|
||||
3. **Verify visually.** Render a few pages to images and look at them — do not trust the HTML alone:
|
||||
```
|
||||
pdftoppm -png -r 80 -f 1 -l 1 guide.pdf cover # cover
|
||||
pdftoppm -png -r 80 -f 2 -l 2 guide.pdf toc # contents
|
||||
pdftoppm -png -r 80 -f 5 -l 6 guide.pdf body # a content spread
|
||||
```
|
||||
Check: cover gradient and title; TOC alignment; a part divider; at least one callout; at least one table; (if technical) one code block with highlighting; the running header showing the chapter title; no block overflowing a page edge; quotes and special characters rendering as glyphs, not boxes.
|
||||
4. If something is off, fix the HTML and rebuild. Two or three iterations is normal.
|
||||
5. Deliver **both** `guide.html` and `guide.pdf`.
|
||||
|
||||
---
|
||||
|
||||
## 10. Quick checklist
|
||||
|
||||
- [ ] Single self-contained HTML, embedded `<style>`, no external assets
|
||||
- [ ] `:root` accent shades + `--footer-label` set for the topic
|
||||
- [ ] Cover: logo glyph, title, subtitle, meta-row, faint deco glyph
|
||||
- [ ] TOC lists every part and every chapter, sequential numbering
|
||||
- [ ] Each part has a divider; each chapter starts with `.chapter-head` + `.lead`
|
||||
- [ ] Callouts used sparingly (≤ ~2 per chapter), correct flavor
|
||||
- [ ] Explanations ≤ 3 short main clauses; recommendations/warnings live in callouts, not prose
|
||||
- [ ] Tables for comparisons/lists; code blocks only if technical, short, escaped
|
||||
- [ ] Prose in the reader's language; terms explained on first use
|
||||
- [ ] Built with WeasyPrint and **visually verified** by rendering pages
|
||||
- [ ] Both HTML and PDF delivered
|
||||
|
||||
## 11. Dark mode (required)
|
||||
|
||||
The app toggles dark mode by setting `data-theme="dark"` on `<html>` inside its preview. Print/PDF always stays light.
|
||||
|
||||
- Define every color through the `:root` variables only (`--ink`, `--muted`, `--line`, `--bg-soft`, accent trio).
|
||||
- Ship an additional override block:
|
||||
|
||||
```css
|
||||
@media screen {
|
||||
html[data-theme="dark"] {
|
||||
--ink: #e6e8ee; --muted: #9aa3b2; --line: #2c3038; --bg-soft: #23262e;
|
||||
/* lift accent shades so headings/links stay readable on dark */
|
||||
}
|
||||
html[data-theme="dark"] body { background: #15171c; }
|
||||
}
|
||||
```
|
||||
|
||||
- Do NOT use `prefers-color-scheme` — the app controls the attribute.
|
||||
- Do not hardcode callout/infobox backgrounds — or darken them explicitly in the dark block (e.g. to `var(--bg-soft)`); the colored border stays.
|
||||
- Keep dark rules inside `@media screen` only, so WeasyPrint/PDF renders the light theme.
|
||||
- Elements with light text on accent backgrounds (table headers, cover) may keep their light-theme background.
|
||||
@@ -1,170 +0,0 @@
|
||||
```
|
||||
MINI-GUIDE STYLE (HTML/CSS → PDF via WeasyPrint)
|
||||
|
||||
FORMAT
|
||||
- A4 portrait, 3-5 pages
|
||||
- @page { size: A4; margin: 18mm 18mm 16mm 18mm; }
|
||||
- Footer: page number center, guide title right
|
||||
|
||||
COVERAGE (lowest guide tier)
|
||||
- ALL core building blocks of the topic — what you need to get started.
|
||||
Which ones those are depends on the topic.
|
||||
- The topic inventory is produced beforehand by a research agent and
|
||||
supplied. It is binding: every item gets a section.
|
||||
- Sections without chapter structure; code examples very short (2-7 lines)
|
||||
- ~15-25 min reading time, 3-5 pages — this upper limit always applies
|
||||
|
||||
TARGET AUDIENCE — COMPACT BEGINNER INTRO
|
||||
- Real beginners with no programming experience in the topic
|
||||
- Assumes only general understanding ("what is programming")
|
||||
- Terms are explained on first appearance
|
||||
- NO language-character overview for experienced developers
|
||||
- NO advanced features (even if cool and short)
|
||||
|
||||
CONTENT PRINCIPLES
|
||||
- Show only absolute basics
|
||||
- Topics someone can reproduce themselves after 15 min
|
||||
- No tooling complexity (package managers, build systems, compilers)
|
||||
- No language specialties (type systems, decorators, generics)
|
||||
- No OOP if possible (or only the most trivial form)
|
||||
- Depth of explanation before breadth of features
|
||||
- Better 5 concepts thoroughly than 15 superficially
|
||||
|
||||
TYPICAL 5-SECTION STRUCTURE
|
||||
1. Starting the language — installation, first file, first program
|
||||
2. Variables — concept + 2-3 basic types
|
||||
3. Control flow — if/else with a simple example
|
||||
4. Lists + iteration — array + loop
|
||||
5. Functions — declaration + call + return value
|
||||
|
||||
(This order builds on itself and ends with something meaningful.)
|
||||
|
||||
STRUCTURE
|
||||
1. Compact head: logo left (16mm), title + subtitle center, badge + time right
|
||||
2. Gap opener: opening question, italic and framed, low-threshold
|
||||
3. 4-6 H2 sections with explanatory text + code example + optional callout
|
||||
|
||||
ELEMENTS
|
||||
- Body text: justify with hyphenation
|
||||
- Code blocks: dark background, syntax highlighting, very short (2-7 lines)
|
||||
- Inline code: light background, accent color
|
||||
- Tables: only if truly necessary (comparison operators etc.)
|
||||
- Callouts in 3 flavors: tip (green), warn (red), note (accent color)
|
||||
|
||||
TYPOGRAPHY
|
||||
- Body: 10.5pt serif (Charter), line-height 1.55
|
||||
- Head h1: 20pt sans-serif bold
|
||||
- H2 section: 13pt sans-serif bold
|
||||
- Code: 8.5pt monospace, line-height 1.5
|
||||
- Inline code: 9pt monospace
|
||||
- Callout labels: 8pt uppercase, letter-spacing 1pt
|
||||
|
||||
COLORS (max 3 + neutrals)
|
||||
- Accent color: strong, leaning on the topic's official color
|
||||
- Accent dark: darker variant for accents
|
||||
- Background soft: light variant of the accent color
|
||||
- Code background: #1e2a3a
|
||||
- Text: #1a1a1a / muted #5a6470 / line #d8dde3
|
||||
- Callout colors: green/red/accent
|
||||
|
||||
GAP OPENER (REQUIRED)
|
||||
- Italic, framed with an accent-color border
|
||||
- Low-threshold question that the guide answers
|
||||
- Sparks interest with a relevant statistic or practical angle
|
||||
- NO technical terms that have not been explained yet
|
||||
- Examples:
|
||||
- "PHP läuft hinter rund drei Viertel aller Webseiten..."
|
||||
- "JavaScript ist die Sprache des Webs – aber wie schreibt man das eigentliche Code..."
|
||||
- "Python ist die beliebteste Anfänger-Sprache..."
|
||||
|
||||
EXPLANATION DEPTH PER CONCEPT
|
||||
- Name the concept (e.g. "Variable")
|
||||
- Explain in one sentence what it is
|
||||
- Code example with comments
|
||||
- Mention language quirks (e.g. "in PHP beginnen Variablen mit $")
|
||||
- NO reference to concepts that come later
|
||||
|
||||
CALLOUT USAGE
|
||||
- tip (green): practice suggestion at the end, encouraging
|
||||
- warn (red): beginner pitfalls ("= vs ==", "vergessenes Semikolon")
|
||||
- note (accent): background info, explanation of a language quirk
|
||||
|
||||
CALLOUT CSS IMPORTANT
|
||||
- .callout-body > b:first-child with display:block for the label
|
||||
- NOT .callout-body b globally with display:block (destroys inline bold)
|
||||
|
||||
GAP CSS IMPORTANT
|
||||
- .gap > b:first-child with display:block for the "FRAGE ZUM EINSTIEG" label
|
||||
- NOT .gap b globally with display:block (destroys inline bold in the
|
||||
question text)
|
||||
|
||||
TOPIC-SPECIFIC ADJUSTMENTS (choose before generating)
|
||||
- Accent color: the topic's official color
|
||||
- Logo letter(s) or abbreviation
|
||||
- Welcome statistic in the gap opener
|
||||
- Choose 4-6 beginner topics (see standard structure)
|
||||
|
||||
REQUIRED ELEMENTS
|
||||
- 1 gap opener at the start
|
||||
- 5-7 code examples (short, 2-7 lines, beginner-friendly)
|
||||
- At least 1 callout (often: warn for a pitfall, tip for practice at the end)
|
||||
- Inline code for technical terms
|
||||
|
||||
AVOID
|
||||
- TOC or cover (oversized for 15 min)
|
||||
- Introductory filler ("In diesem Mini-Guide lernen wir...")
|
||||
- Claims of completeness (belongs in a larger guide)
|
||||
- Reference tables without explanatory text (belongs in a cheatsheet)
|
||||
- Recall or next-step at the end (a mini-guide ends with content)
|
||||
- Topics that are advanced (even if cool):
|
||||
- Type systems, type hints, generics
|
||||
- OOP features (except the most trivial form)
|
||||
- Tooling (package managers, build, linting)
|
||||
- Language specialties (PHP: strict_types, readonly, Composer, PSR-4)
|
||||
- page break in the middle of a code block or callout
|
||||
(page-break-inside: avoid)
|
||||
- More than 3 font sizes per section
|
||||
- Floats or absolute positioning (breaks in WeasyPrint)
|
||||
- Technical terms without explanation
|
||||
- References to concepts that come later
|
||||
- Edge cases and "but" sentences
|
||||
|
||||
GENERATION WITH FEEDBACK LOOP (max 3 iterations)
|
||||
1. Write the HTML
|
||||
2. weasyprint file.html file.pdf
|
||||
3. PDF to PNGs: convert all pages
|
||||
4. View all pages
|
||||
5. Check:
|
||||
- Head clean (logo does not overlap the title)?
|
||||
- Code blocks not torn across page breaks?
|
||||
- Callouts fully visible?
|
||||
- Inline bolds in callouts/gap correct (not rendered as blocks)?
|
||||
- Footer with page number correct?
|
||||
- Would a real beginner understand this?
|
||||
- Were all technical terms explained on first appearance?
|
||||
6. On problems: fix, repeat from step 2
|
||||
7. Output after max 3 iterations
|
||||
|
||||
INSTALLATION
|
||||
- pip install weasyprint pdf2image
|
||||
- apt install poppler-utils
|
||||
```
|
||||
|
||||
DARK MODE (REQUIRED)
|
||||
- Define all colors exclusively via :root variables
|
||||
(--ink, --muted, --line, --bg-soft, accent variables).
|
||||
- Additionally ship a dark-mode block:
|
||||
@media screen {
|
||||
html[data-theme="dark"] { ...dark variable values... }
|
||||
html[data-theme="dark"] body { background: #15171c; }
|
||||
}
|
||||
- The app enables it via data-theme="dark" on <html>.
|
||||
Do NOT use prefers-color-scheme.
|
||||
- Dark values: dark backgrounds (#15171c / #23262e), light text (#e6e8ee),
|
||||
muted lines (#2c3038). Lift accent colors so headings and links stay
|
||||
readable on a dark background (check contrast). Elements with light text on
|
||||
accent backgrounds (e.g. table headers) may keep their light background
|
||||
color.
|
||||
- Do not hardcode callout/infobox backgrounds — or darken them explicitly in
|
||||
dark mode (e.g. to var(--bg-soft)); the colored border stays.
|
||||
- Only inside @media screen — print/PDF stays light.
|
||||
@@ -1,115 +0,0 @@
|
||||
```
|
||||
ONEPAGER STYLE LANDSCAPE (HTML/CSS → PDF via WeasyPrint)
|
||||
|
||||
FORMAT
|
||||
- A4 landscape (297mm × 210mm)
|
||||
- @page { size: A4 landscape; margin: 0; }
|
||||
- Padding: 9mm 11mm 9mm 11mm
|
||||
|
||||
LAYOUT
|
||||
- Grid: hero+stats (auto) / divider / main (1fr, 3 columns) / footer (absolute)
|
||||
- Stats bar integrated into the hero (right), saves vertical space
|
||||
- Main: 3 equal-width columns, gap 4mm
|
||||
- Columns internally: flex-column, gap 4mm
|
||||
- 6 thematic blocks distributed (2 per column)
|
||||
|
||||
STRUCTURE (in this order)
|
||||
1. Hero: logo left (22mm), title + subtitle center, 4 stats right
|
||||
2. Divider: 1.5pt black line
|
||||
3. Main grid: 6 blocks in 3 columns
|
||||
4. Footer: colored box with key message + tag (absolute, bottom)
|
||||
|
||||
DIFFERENCES FROM PORTRAIT
|
||||
- 3 columns instead of 2 (more horizontal space)
|
||||
- 6 blocks instead of 4-5
|
||||
- Stats integrated into the hero instead of their own row
|
||||
- Smaller font sizes (9.5pt body instead of 10pt)
|
||||
- More compact code blocks (7pt instead of 7.5pt)
|
||||
|
||||
BLOCK STRUCTURE
|
||||
- Title: 9.5pt bold uppercase, icon left, accent-color underline 2pt
|
||||
- Content: visual, not plain text bullets
|
||||
- Variants: icon list, code block, tile grid, plus/minus columns, type grid
|
||||
|
||||
COLORS (max 3 + neutrals)
|
||||
- Accent color: lean on the topic's official color
|
||||
- Accent dark: for headings
|
||||
- Accent darker: for the footer
|
||||
- Accent color: contrasting
|
||||
- Background soft: light variant of the accent color
|
||||
- Code background: #1e2a3a
|
||||
- Text: #1a1a1a / muted #5a6470 / line #e5e5e5
|
||||
|
||||
TYPOGRAPHY
|
||||
- Body: 9.5pt, line-height 1.4
|
||||
- Hero h1: 20pt bold
|
||||
- Block title: 9.5pt bold uppercase, letter-spacing 0.5pt
|
||||
- Stats number: 14pt bold, label 6.5pt uppercase
|
||||
- Code: 7pt monospace, dark background
|
||||
- Feature text: 8.5pt
|
||||
- Max 3 font sizes per block
|
||||
|
||||
ICONS
|
||||
- SVG inline, stroke instead of fill
|
||||
- 4mm in block titles (smaller than portrait due to compact layout)
|
||||
- 2.8mm in tile icons
|
||||
- currentColor for automatic adaptation
|
||||
|
||||
TOPIC-SPECIFIC ADJUSTMENTS (choose before generating)
|
||||
- Accent color: the topic's official color
|
||||
- Logo letter(s) or abbreviation
|
||||
- 4 stats: topic-relevant numbers
|
||||
- Block selection: the 6 most important aspects for a first overview
|
||||
|
||||
REQUIRED VISUAL ELEMENTS
|
||||
- At least 1 code block
|
||||
- At least 1 tile grid with icons (ecosystem)
|
||||
- At least 1 plus/minus split (modern vs legacy etc.)
|
||||
- Footer as a colored box (visual anchor)
|
||||
- Stats bar in the hero
|
||||
|
||||
AVOID
|
||||
- Plain bullet lists in every block
|
||||
- More than 6 main blocks (landscape already has more space)
|
||||
- More than 3 font sizes
|
||||
- Marketing filler in the hero
|
||||
- Floats or absolute positioning (except for the footer)
|
||||
- Vertically very long blocks (would unbalance the columns)
|
||||
|
||||
GENERATION WITH FEEDBACK LOOP (max 3 iterations)
|
||||
1. Write the HTML
|
||||
2. weasyprint file.html file.pdf
|
||||
3. PDF to PNG: python -c "from pdf2image import convert_from_path; convert_from_path('file.pdf', dpi=120)[0].save('preview.png')"
|
||||
4. View the preview with the Read tool
|
||||
5. Check:
|
||||
- Stats bar does not overlap the title?
|
||||
- 3 columns balanced (similar height)?
|
||||
- Footer not cut off?
|
||||
- Code block readable?
|
||||
- All icons render?
|
||||
6. On problems: fix, repeat from step 2
|
||||
7. Output after max 3 iterations
|
||||
|
||||
INSTALLATION
|
||||
- pip install weasyprint pdf2image
|
||||
- apt install poppler-utils
|
||||
```
|
||||
|
||||
DARK MODE (REQUIRED)
|
||||
- Define all colors exclusively via :root variables
|
||||
(--ink, --muted, --line, --bg-soft, accent variables).
|
||||
- Additionally ship a dark-mode block:
|
||||
@media screen {
|
||||
html[data-theme="dark"] { ...dark variable values... }
|
||||
html[data-theme="dark"] body { background: #15171c; }
|
||||
}
|
||||
- The app enables it via data-theme="dark" on <html>.
|
||||
Do NOT use prefers-color-scheme.
|
||||
- Dark values: dark backgrounds (#15171c / #23262e), light text (#e6e8ee),
|
||||
muted lines (#2c3038). Lift accent colors so headings and links stay
|
||||
readable on a dark background (check contrast). Elements with light text on
|
||||
accent backgrounds (e.g. table headers) may keep their light background
|
||||
color.
|
||||
- Do not hardcode callout/infobox backgrounds — or darken them explicitly in
|
||||
dark mode (e.g. to var(--bg-soft)); the colored border stays.
|
||||
- Only inside @media screen — print/PDF stays light.
|
||||
24
templates/Format/Section.md
Normal file
24
templates/Format/Section.md
Normal file
@@ -0,0 +1,24 @@
|
||||
SECTION-AUFBAU
|
||||
|
||||
Jeder Baustein wird GENAU eine Section mit:
|
||||
1. Titel — der Baustein-Titel (kommt aus dem Marker, nicht in den Body schreiben)
|
||||
2. Beschreibung — was es ist, wozu es dient, worauf man achten muss
|
||||
3. Beispiel — kurzes, realistisches Code-/Anwendungsbeispiel mit 1 Satz Einordnung. Weglassen, wenn ein Beispiel für diesen Baustein keinen Mehrwert hat.
|
||||
|
||||
Umfang: so kurz wie möglich, so lang wie nötig — das entscheidet der Baustein, nicht eine Vorgabe. Ein simples Konzept = 2–3 Sätze, ein komplexes darf länger sein.
|
||||
|
||||
Tonalität: klares Deutsch, direkt, praxisorientiert. Fachbegriffe beim ersten Auftreten kurz erklären. Keine Füllsätze, keine Einleitungsfloskeln.
|
||||
|
||||
Markdown im Section-Body: normale Absätze, `inline-code` für Bezeichner, Codeblöcke mit Sprachangabe, **fett** sparsam für Kernaussagen. Keine eigenen Überschriften außer `### Beispiel` direkt vor dem Beispiel.
|
||||
|
||||
Beispiel einer fertigen Section (nur der Body):
|
||||
|
||||
Arrays speichern mehrere Werte unter einem Namen. PHP unterscheidet indizierte Arrays (`[0 => 'a']`) und assoziative Arrays (`['key' => 'wert']`) — intern sind beide geordnete Hashmaps.
|
||||
|
||||
### Beispiel
|
||||
```php
|
||||
$preise = ['apfel' => 1.20, 'birne' => 1.50];
|
||||
$preise['kirsche'] = 3.90; // ergänzen
|
||||
echo $preise['apfel']; // 1.2
|
||||
```
|
||||
Assoziative Arrays sind der Arbeitsalltag: Datenbankzeilen, Konfiguration, JSON.
|
||||
13
templates/Prompt/Bausteine-Auswahl.md
Normal file
13
templates/Prompt/Bausteine-Auswahl.md
Normal file
@@ -0,0 +1,13 @@
|
||||
Drei Recherche-Agenten haben unabhängig voneinander die Bausteine des Themas "{topic}" ermittelt. Konsolidiere ihre Ergebnisse zur endgültigen Baustein-Liste.
|
||||
|
||||
{results}
|
||||
|
||||
Regeln:
|
||||
- Vereinige die Listen: erkenne gleiche Konzepte unter verschiedenen Titeln und führe sie zu einem Baustein zusammen.
|
||||
- Verwirf Bausteine ohne Quelle oder die erfunden wirken. Behalte im Zweifel, was mindestens eine Recherche belegt.
|
||||
- KEINE Kategorien, KEINE Bewertung — eine flache, durchnummerierte Liste.
|
||||
- Lass die Quellen weg: pro Baustein nur Titel und Kurzbeschreibung (max. ~12 Wörter).
|
||||
|
||||
Schreibe NUR die Markdown-Datei nach: {out_path}
|
||||
|
||||
Format: GENAU eine Zeile pro Baustein: `N. Titel — Kurzbeschreibung`. Kein weiterer Text in der Datei.
|
||||
28
templates/Prompt/Bausteine-Einordnung-Final.md
Normal file
28
templates/Prompt/Bausteine-Einordnung-Final.md
Normal file
@@ -0,0 +1,28 @@
|
||||
Zwei Agenten haben die Bausteine des Themas "{topic}" unabhängig voneinander in KERN/WICHTIG/REST eingeordnet. Triff die finale Einordnung.
|
||||
|
||||
BAUSTEINE:
|
||||
{bausteine}
|
||||
|
||||
EINORDNUNG 1:
|
||||
{einordnung_1}
|
||||
|
||||
EINORDNUNG 2:
|
||||
{einordnung_2}
|
||||
|
||||
Kategorien:
|
||||
- KERN: ohne diese Bausteine kann man das Thema nicht verstehen oder benutzen
|
||||
- WICHTIG: in der echten Praxis nötig, aber nicht Teil des Einstiegs
|
||||
- REST: Spezialfälle, Randthemen, selten Gebrauchtes
|
||||
|
||||
Regeln:
|
||||
- Bei Übereinstimmung: Einordnung übernehmen. Bei Abweichung: entscheide selbst anhand der Kategorien-Definitionen.
|
||||
- Jeder Baustein landet in GENAU einer Kategorie. Keinen weglassen, keinen neuen erfinden.
|
||||
|
||||
Antworte AUSSCHLIESSLICH in diesem Format — pro Zeile Nummer und Titel des Bausteins, kein weiterer Text davor oder danach:
|
||||
KERN:
|
||||
1 Titel
|
||||
4 Titel
|
||||
WICHTIG:
|
||||
2 Titel
|
||||
REST:
|
||||
3 Titel
|
||||
23
templates/Prompt/Bausteine-Einordnung.md
Normal file
23
templates/Prompt/Bausteine-Einordnung.md
Normal file
@@ -0,0 +1,23 @@
|
||||
Ordne die Bausteine des Themas "{topic}" in drei Kategorien ein.
|
||||
|
||||
BAUSTEINE:
|
||||
{bausteine}
|
||||
|
||||
Kategorien:
|
||||
- KERN: ohne diese Bausteine kann man das Thema nicht verstehen oder benutzen
|
||||
- WICHTIG: in der echten Praxis nötig, aber nicht Teil des Einstiegs
|
||||
- REST: Spezialfälle, Randthemen, selten Gebrauchtes
|
||||
|
||||
Regeln:
|
||||
- Jeder Baustein landet in GENAU einer Kategorie. Keinen weglassen, keinen neuen erfinden.
|
||||
- Die Kategoriegrößen folgen aus dem Thema — gleich große Kategorien sind verdächtig.
|
||||
- Setzt ein Baustein einer Kategorie einen anderen voraus, gehört dieser in dieselbe oder eine höhere Kategorie.
|
||||
|
||||
Antworte AUSSCHLIESSLICH in diesem Format — pro Zeile Nummer und Titel des Bausteins, kein weiterer Text davor oder danach:
|
||||
KERN:
|
||||
1 Titel
|
||||
4 Titel
|
||||
WICHTIG:
|
||||
2 Titel
|
||||
REST:
|
||||
3 Titel
|
||||
@@ -1 +1 @@
|
||||
Recherchiere per Websuche die aktuelle Version und aktuelle Fakten zu "{topic}", damit die Bausteine vollständig und aktuell sind.
|
||||
Recherchiere per Websuche und gehe systematisch vor: arbeite die Struktur der offiziellen Dokumentation ab (Handbuch-Kapitel, Feature-Übersichten, Release Notes der letzten Versionen) und erfasse jeden Baustein, dem ein Anwender begegnen kann — von Grundlagen bis Spezialfälle. Achte darauf, dass Versionsangaben und Fakten aktuell sind.
|
||||
15
templates/Prompt/Bausteine-Recherche.md
Normal file
15
templates/Prompt/Bausteine-Recherche.md
Normal file
@@ -0,0 +1,15 @@
|
||||
Ermittle ALLE Bausteine (Konzepte/Funktionen/Features) des Themas "{topic}" für einen Lern-Guide.
|
||||
|
||||
{source}
|
||||
|
||||
Regeln:
|
||||
- KEINE Kategorien, KEINE Bewertung, KEINE Reihenfolge nach Wichtigkeit — nur eine flache, durchnummerierte Liste.
|
||||
- Es gibt KEINE Ziel-Anzahl. Ein kleines Thema hat wenige Bausteine, ein großes viele. Höre erst auf, wenn die Recherche nichts Neues mehr hergibt.
|
||||
- Erfinde nichts: nimm nur Bausteine auf, die du in der Recherche belegt hast. Notiere pro Baustein die Quelle (URL bzw. Dateipfad).
|
||||
- Nicht künstlich splitten, nicht zusammenfassen: ein Baustein = ein zusammenhängendes Konzept.
|
||||
- Halte die Beschreibung kurz: maximal ~12 Wörter.
|
||||
|
||||
Schreibe NUR die Markdown-Datei nach: {bausteine_path}
|
||||
|
||||
Format: GENAU eine Zeile pro Baustein: `N. Titel — Kurzbeschreibung — Quelle`
|
||||
{extra}
|
||||
@@ -1,13 +0,0 @@
|
||||
Ermittle die Bausteine (Konzepte/Funktionen/Features) des Themas "{topic}" für einen Lern-Guide.
|
||||
|
||||
{source}
|
||||
|
||||
Teile ALLE Bausteine des Themas in drei Kategorien:
|
||||
- KERN: ohne diese Bausteine kann man das Thema nicht verstehen oder benutzen
|
||||
- WICHTIG: in der echten Praxis nötig, aber nicht Teil des Einstiegs
|
||||
- REST: Spezialfälle, Randthemen, selten Gebrauchtes
|
||||
|
||||
Schreibe NUR die Markdown-Datei nach: {bausteine_path}
|
||||
|
||||
Aufbau der Datei: drei Abschnitte (## KERN, ## WICHTIG, ## REST), darunter je eine durchnummerierte Liste. Pro Baustein: Titel und 1–2 Sätze, was er umfasst.
|
||||
{extra}
|
||||
20
templates/Prompt/Guide-Plan.md
Normal file
20
templates/Prompt/Guide-Plan.md
Normal file
@@ -0,0 +1,20 @@
|
||||
Plane die Gliederung eines Lern-Guides zum Thema "{topic}" (Format: {format_name}).
|
||||
|
||||
BAUSTEINE (jeder wird genau eine Section des Guides):
|
||||
{bausteine}
|
||||
|
||||
Aufgabe: Gruppiere ALLE Bausteine in Kapitel und bringe sie in eine sinnvolle Lernreihenfolge — vom Fundament zum Speziellen.
|
||||
|
||||
Regeln:
|
||||
- Jeder Baustein landet in GENAU einem Kapitel. Keinen weglassen, keinen erfinden.
|
||||
- Die Reihenfolge innerhalb der Kapitel ist die Lese-Reihenfolge.
|
||||
- 3–10 Bausteine pro Kapitel sind ein guter Rahmen; die Kapitelzahl folgt aus dem Thema.
|
||||
- Kapiteltitel kurz und konkret.
|
||||
|
||||
Antworte AUSSCHLIESSLICH in diesem Format (Nummer und Titel je Baustein-Zeile, kein weiterer Text):
|
||||
KAPITEL: Titel
|
||||
3 Baustein-Titel
|
||||
7 Baustein-Titel
|
||||
KAPITEL: Titel
|
||||
1 Baustein-Titel
|
||||
{extra}
|
||||
23
templates/Prompt/Guide-Writer.md
Normal file
23
templates/Prompt/Guide-Writer.md
Normal file
@@ -0,0 +1,23 @@
|
||||
Schreibe Sections für einen Lern-Guide zum Thema "{topic}" (Format: {format_name}).
|
||||
|
||||
Dir zugeteilt sind folgende Kapitel und Bausteine — verbindlich: jede zugeteilte Section muss vorkommen, keine zusätzlichen erfinden:
|
||||
{zuteilung}
|
||||
|
||||
{facts}
|
||||
|
||||
SECTION-SPEZIFIKATION:
|
||||
{spec}
|
||||
|
||||
Schreibe NUR die Datei {out_path} in GENAU diesem Format — pro Kapitel ein kapitel-Marker, pro Baustein ein section-Marker, darunter der Markdown-Body:
|
||||
|
||||
<!-- kapitel: Kapiteltitel -->
|
||||
<!-- section: 3 | Baustein-Titel -->
|
||||
Beschreibung…
|
||||
|
||||
### Beispiel
|
||||
```sprache
|
||||
…
|
||||
```
|
||||
|
||||
Die Marker-Zeilen exakt so schreiben (Nummer = Baustein-Nummer aus der Zuteilung). Kein Text außerhalb der Sections, kein Dokument-Titel, kein Inhaltsverzeichnis.
|
||||
{extra}
|
||||
@@ -1,18 +0,0 @@
|
||||
Erstelle einen Lern-Guide zum Thema "{topic}" im Format "{format_name}".
|
||||
|
||||
Schreibe NUR die HTML-Datei nach: {html_path}
|
||||
Es wird KEINE PDF erzeugt — führe kein weasyprint aus, auch wenn die Spezifikation es erwähnt.
|
||||
|
||||
BAUSTEINE (von einem Recherche-Agenten erstellt, kategorisiert in KERN/WICHTIG/REST):
|
||||
{bausteine}
|
||||
|
||||
ABDECKUNG für dieses Format: Setze {coverage} um — jeder dieser Bausteine wird eine eigene Sektion. Nicht zusammenfassen, nichts weglassen. Die übrigen Kategorien ignorierst du komplett.
|
||||
|
||||
{facts}
|
||||
|
||||
FORMAT-SPEZIFIKATION:
|
||||
{spec}
|
||||
|
||||
REFERENZ-IMPLEMENTIERUNG (NUR Stil-Vorlage: Bausteine, CSS, Tonalität. Umfang und Struktur kommen aus den BAUSTEINEN, nicht aus der Referenz):
|
||||
{reference}
|
||||
{extra}
|
||||
11
templates/Prompt/OnePager.md
Normal file
11
templates/Prompt/OnePager.md
Normal file
@@ -0,0 +1,11 @@
|
||||
Erstelle einen OnePager — die kompakteste Übersicht — zum Thema "{topic}".
|
||||
|
||||
BAUSTEINE (der Kern des Themas):
|
||||
{bausteine}
|
||||
|
||||
Aufgabe: GENAU ein prägnanter Merksatz pro Baustein — das eine, was man im Kopf behalten muss. Maximal ~15 Wörter, `inline-code` wo es hilft. Den Baustein-Titel NICHT wiederholen, er steht schon fest.
|
||||
|
||||
Antworte AUSSCHLIESSLICH in diesem Format, eine Zeile pro Baustein, kein weiterer Text:
|
||||
3: Merksatz
|
||||
7: Merksatz
|
||||
{extra}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,395 +0,0 @@
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>PHP Mini-Guide</title>
|
||||
<style>
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 18mm 18mm 16mm 18mm;
|
||||
@bottom-center {
|
||||
content: counter(page) " / " counter(pages);
|
||||
font-family: -apple-system, "Segoe UI", sans-serif;
|
||||
font-size: 8pt;
|
||||
color: #888;
|
||||
}
|
||||
@bottom-right {
|
||||
content: "PHP Mini-Guide";
|
||||
font-family: -apple-system, "Segoe UI", sans-serif;
|
||||
font-size: 8pt;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--php: #777BB4;
|
||||
--php-dark: #4F5B93;
|
||||
--php-darker: #2C3E66;
|
||||
--ink: #1a1a1a;
|
||||
--muted: #5a6470;
|
||||
--line: #d8dde3;
|
||||
--bg-soft: #f5f5fb;
|
||||
--code-bg: #1e2a3a;
|
||||
--code-fg: #e6e6e6;
|
||||
--plus: #2c8a3e;
|
||||
--minus: #c0392b;
|
||||
}
|
||||
|
||||
/* Darkmode — die App setzt data-theme="dark" auf <html>; Druck/PDF bleibt hell */
|
||||
@media screen {
|
||||
html[data-theme="dark"] {
|
||||
--ink: #e6e8ee;
|
||||
--muted: #9aa3b2;
|
||||
--line: #2c3038;
|
||||
--bg-soft: #23262e;
|
||||
}
|
||||
html[data-theme="dark"] body { background: #15171c; }
|
||||
html[data-theme="dark"] .callout { background: var(--bg-soft); }
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: Charter, "Source Serif Pro", Georgia, serif;
|
||||
color: var(--ink);
|
||||
font-size: 10.5pt;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* ===== HEAD ===== */
|
||||
.head {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-bottom: 2pt solid var(--ink);
|
||||
padding-bottom: 4mm;
|
||||
margin-bottom: 5mm;
|
||||
}
|
||||
.head-logo, .head-title, .head-meta {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.head-logo {
|
||||
width: 20mm;
|
||||
padding-right: 5mm;
|
||||
}
|
||||
.head-logo-box {
|
||||
width: 16mm; height: 16mm;
|
||||
background: linear-gradient(135deg, var(--php) 0%, var(--php-dark) 100%);
|
||||
border-radius: 4mm;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 11pt; font-weight: 800;
|
||||
color: white;
|
||||
}
|
||||
.head-title h1 {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 20pt;
|
||||
font-weight: 800;
|
||||
color: var(--php-dark);
|
||||
letter-spacing: -0.5pt;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.head-title h1 .accent { color: var(--php); }
|
||||
.head-title .subtitle {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 10pt;
|
||||
color: var(--muted);
|
||||
margin-top: 1mm;
|
||||
}
|
||||
.head-meta {
|
||||
width: 35mm;
|
||||
text-align: right;
|
||||
font-family: -apple-system, sans-serif;
|
||||
}
|
||||
.head-meta .badge {
|
||||
display: inline-block;
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
padding: 1.2mm 3mm;
|
||||
border-radius: 1.5mm;
|
||||
font-size: 8.5pt;
|
||||
font-weight: 700;
|
||||
}
|
||||
.head-meta .time {
|
||||
display: block;
|
||||
font-size: 7.5pt;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1pt;
|
||||
margin-top: 1mm;
|
||||
}
|
||||
|
||||
/* ===== GAP-OPENER ===== */
|
||||
.gap {
|
||||
background: var(--bg-soft);
|
||||
border-left: 3pt solid var(--php);
|
||||
padding: 3.5mm 5mm;
|
||||
margin: 0 0 6mm 0;
|
||||
font-style: italic;
|
||||
font-size: 10.5pt;
|
||||
}
|
||||
.gap > b:first-child {
|
||||
font-style: normal;
|
||||
color: var(--php-dark);
|
||||
font-family: -apple-system, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 8pt;
|
||||
letter-spacing: 1pt;
|
||||
display: block;
|
||||
margin-bottom: 1.5mm;
|
||||
}
|
||||
|
||||
/* ===== SECTIONS ===== */
|
||||
h2 {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 13pt;
|
||||
font-weight: 700;
|
||||
color: var(--php-dark);
|
||||
margin: 6mm 0 2.5mm 0;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
h3 {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-size: 10.5pt;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
margin: 4mm 0 1.5mm 0;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 2.5mm;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
p b { color: var(--php-dark); }
|
||||
ul, ol { margin: 1.5mm 0 3mm 6mm; }
|
||||
li { margin-bottom: 1mm; }
|
||||
|
||||
/* ===== CODE ===== */
|
||||
pre {
|
||||
background: var(--code-bg);
|
||||
color: var(--code-fg);
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
font-size: 8.5pt;
|
||||
line-height: 1.5;
|
||||
padding: 3mm 4mm;
|
||||
border-radius: 2mm;
|
||||
margin: 2.5mm 0 3.5mm 0;
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.c { color: #6b8aae; font-style: italic; }
|
||||
.k { color: #ff79c6; }
|
||||
.s { color: #f1c40f; }
|
||||
.f { color: #50fa7b; }
|
||||
.t { color: #8be9fd; }
|
||||
.v { color: #ffb86c; }
|
||||
|
||||
code.inline {
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
font-size: 9pt;
|
||||
background: var(--bg-soft);
|
||||
padding: 0.3mm 1.5mm;
|
||||
border-radius: 1mm;
|
||||
color: var(--php-dark);
|
||||
}
|
||||
|
||||
/* ===== CALLOUT ===== */
|
||||
.callout {
|
||||
border-radius: 2mm;
|
||||
padding: 2.5mm 4mm;
|
||||
margin: 3mm 0;
|
||||
font-size: 10pt;
|
||||
page-break-inside: avoid;
|
||||
display: grid;
|
||||
grid-template-columns: 6mm 1fr;
|
||||
gap: 3mm;
|
||||
}
|
||||
.callout-icon {
|
||||
font-family: -apple-system, sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 14pt;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.callout-body > b:first-child {
|
||||
font-family: -apple-system, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 8pt;
|
||||
letter-spacing: 1pt;
|
||||
display: block;
|
||||
margin-bottom: 1mm;
|
||||
}
|
||||
.callout.tip { background: #e8f4ea; border-left: 3pt solid var(--plus); }
|
||||
.callout.tip .callout-icon, .callout.tip .callout-body > b:first-child { color: var(--plus); }
|
||||
.callout.warn { background: #fdecea; border-left: 3pt solid var(--minus); }
|
||||
.callout.warn .callout-icon, .callout.warn .callout-body > b:first-child { color: var(--minus); }
|
||||
.callout.note { background: var(--bg-soft); border-left: 3pt solid var(--php); }
|
||||
.callout.note .callout-icon, .callout.note .callout-body > b:first-child { color: var(--php-dark); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ===== HEAD ===== -->
|
||||
<header class="head">
|
||||
<div class="head-logo"><div class="head-logo-box">php</div></div>
|
||||
<div class="head-title">
|
||||
<h1><span class="accent">PHP</span> in 15 Minuten</h1>
|
||||
<div class="subtitle">Dein erstes PHP-Programm – Schritt für Schritt</div>
|
||||
</div>
|
||||
<div class="head-meta">
|
||||
<span class="badge">Mini-Guide</span>
|
||||
<span class="time">15 Min · von Null</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ===== GAP-OPENER ===== -->
|
||||
<div class="gap">
|
||||
<b>Frage zum Einstieg</b>
|
||||
PHP läuft hinter rund drei Viertel aller Webseiten – inklusive WordPress, Wikipedia und Facebook. Aber wie sieht PHP-Code überhaupt aus, und wie startet man? In 15 Minuten kannst du dein erstes Programm schreiben.
|
||||
</div>
|
||||
|
||||
<!-- ===== SEKTION 1 ===== -->
|
||||
<h2>PHP starten</h2>
|
||||
|
||||
<p>PHP ist eine Programmiersprache, die auf deinem Computer oder einem Webserver läuft. Im Gegensatz zu HTML oder CSS wird PHP nicht im Browser angezeigt – es <i>erzeugt</i> Ausgaben (zum Beispiel HTML), die dann ausgeliefert werden.</p>
|
||||
|
||||
<p>Um anzufangen, brauchst du PHP auf deinem Computer. Auf Mac: <code class="inline">brew install php</code>. Auf Ubuntu: <code class="inline">apt install php8.4-cli</code>. Auf Windows: am einfachsten WSL2 mit Ubuntu darin nutzen.</p>
|
||||
|
||||
<p>PHP-Code lebt in Dateien mit der Endung <code class="inline">.php</code>. Lege eine Datei <code class="inline">hallo.php</code> an mit diesem Inhalt:</p>
|
||||
|
||||
<pre><span class="t"><?php</span>
|
||||
|
||||
<span class="k">echo</span> <span class="s">"Hallo Welt!"</span>;</pre>
|
||||
|
||||
<p>Die erste Zeile <code class="inline"><?php</code> sagt PHP: "ab hier kommt mein Code". Das Wort <code class="inline">echo</code> heißt: "gib das aus, was danach kommt". Strings (also Text) stehen in Anführungszeichen. Jede Anweisung endet mit einem Semikolon.</p>
|
||||
|
||||
<p>Im Terminal ausführen mit:</p>
|
||||
|
||||
<pre>php hallo.php</pre>
|
||||
|
||||
<p>Du siehst "Hallo Welt!" – dein erstes PHP-Programm läuft.</p>
|
||||
|
||||
<!-- ===== SEKTION 2 ===== -->
|
||||
<h2>Variablen</h2>
|
||||
|
||||
<p>Eine <b>Variable</b> ist ein benannter Platz, an dem du einen Wert speicherst. In PHP beginnen Variablen immer mit einem Dollar-Zeichen <code class="inline">$</code>. Das macht sie im Code sofort erkennbar:</p>
|
||||
|
||||
<pre><span class="t"><?php</span>
|
||||
|
||||
<span class="v">$name</span> = <span class="s">"Marek"</span>;
|
||||
<span class="v">$alter</span> = <span class="s">34</span>;
|
||||
<span class="v">$istAktiv</span> = <span class="k">true</span>;
|
||||
|
||||
<span class="k">echo</span> <span class="v">$name</span>;</pre>
|
||||
|
||||
<p>Variablen können verschiedene Arten von Werten enthalten. Die drei wichtigsten:</p>
|
||||
|
||||
<ul>
|
||||
<li><b>Strings</b> – Text in Anführungszeichen, z.B. <code class="inline">"Hallo"</code></li>
|
||||
<li><b>Zahlen</b> – ganze Zahlen (<code class="inline">42</code>) oder Kommazahlen (<code class="inline">3.14</code>)</li>
|
||||
<li><b>Wahrheitswerte</b> – <code class="inline">true</code> (wahr) oder <code class="inline">false</code> (falsch)</li>
|
||||
</ul>
|
||||
|
||||
<p>Mit dem Punkt verbindest du Strings:</p>
|
||||
|
||||
<pre><span class="v">$gruss</span> = <span class="s">"Hallo, "</span> . <span class="v">$name</span> . <span class="s">"!"</span>;
|
||||
<span class="k">echo</span> <span class="v">$gruss</span>; <span class="c">// Hallo, Marek!</span></pre>
|
||||
|
||||
<!-- ===== SEKTION 3 ===== -->
|
||||
<h2>Bedingungen</h2>
|
||||
|
||||
<p>Programme müssen oft entscheiden: "wenn X zutrifft, mach Y, sonst Z". Dafür gibt es <code class="inline">if</code> und <code class="inline">else</code>:</p>
|
||||
|
||||
<pre><span class="v">$alter</span> = <span class="s">17</span>;
|
||||
|
||||
<span class="k">if</span> (<span class="v">$alter</span> >= <span class="s">18</span>) {
|
||||
<span class="k">echo</span> <span class="s">"Du bist erwachsen."</span>;
|
||||
} <span class="k">else</span> {
|
||||
<span class="k">echo</span> <span class="s">"Du bist noch minderjährig."</span>;
|
||||
}</pre>
|
||||
|
||||
<p>Die Klammer hinter <code class="inline">if</code> enthält die Bedingung. Die geschweiften Klammern <code class="inline">{ }</code> umschließen den Code, der ausgeführt wird, wenn die Bedingung wahr ist. <code class="inline">else</code> ist der Block, wenn sie falsch ist.</p>
|
||||
|
||||
<p>Wichtige Vergleichs-Operatoren:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="inline">==</code> gleich</li>
|
||||
<li><code class="inline">!=</code> ungleich</li>
|
||||
<li><code class="inline"><</code>, <code class="inline">></code> kleiner, größer</li>
|
||||
<li><code class="inline"><=</code>, <code class="inline">>=</code> kleiner-gleich, größer-gleich</li>
|
||||
</ul>
|
||||
|
||||
<div class="callout note">
|
||||
<div class="callout-icon">i</div>
|
||||
<div class="callout-body">
|
||||
<b>Ein Gleichheitszeichen reicht nicht</b>
|
||||
Zum Zuweisen nutzt du <code class="inline">=</code> (ein Gleichheitszeichen). Zum Vergleichen brauchst du <code class="inline">==</code> (zwei). Das ist eine häufige Verwechslung bei Anfängern.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== SEKTION 4 ===== -->
|
||||
<h2>Listen und Schleifen</h2>
|
||||
|
||||
<p>Mehrere Werte fasst du in einer <b>Liste</b> zusammen. In PHP heißen Listen <code class="inline">array</code>:</p>
|
||||
|
||||
<pre><span class="v">$obst</span> = [<span class="s">"Apfel"</span>, <span class="s">"Birne"</span>, <span class="s">"Kirsche"</span>];</pre>
|
||||
|
||||
<p>Über jede Liste kannst du mit <code class="inline">foreach</code> Schritt für Schritt gehen:</p>
|
||||
|
||||
<pre><span class="k">foreach</span> (<span class="v">$obst</span> <span class="k">as</span> <span class="v">$frucht</span>) {
|
||||
<span class="k">echo</span> <span class="v">$frucht</span> . <span class="s">"\n"</span>;
|
||||
}</pre>
|
||||
|
||||
<p>Das gibt "Apfel", "Birne", "Kirsche" untereinander aus. Das <code class="inline">\n</code> ist ein Zeilenumbruch. Die Variable <code class="inline">$frucht</code> bekommt bei jedem Durchlauf den nächsten Wert aus der Liste.</p>
|
||||
|
||||
<p>Listen müssen nicht aus Strings bestehen. Zahlen gehen genauso:</p>
|
||||
|
||||
<pre><span class="v">$zahlen</span> = [<span class="s">10</span>, <span class="s">20</span>, <span class="s">30</span>];
|
||||
<span class="v">$summe</span> = <span class="s">0</span>;
|
||||
|
||||
<span class="k">foreach</span> (<span class="v">$zahlen</span> <span class="k">as</span> <span class="v">$zahl</span>) {
|
||||
<span class="v">$summe</span> = <span class="v">$summe</span> + <span class="v">$zahl</span>;
|
||||
}
|
||||
|
||||
<span class="k">echo</span> <span class="v">$summe</span>; <span class="c">// 60</span></pre>
|
||||
|
||||
<!-- ===== SEKTION 5 ===== -->
|
||||
<h2>Funktionen</h2>
|
||||
|
||||
<p>Wenn du denselben Code mehrfach brauchst, packst du ihn in eine <b>Funktion</b>. Du gibst der Funktion einen Namen und kannst sie dann beliebig oft aufrufen:</p>
|
||||
|
||||
<pre><span class="k">function</span> <span class="f">begruessen</span>(<span class="v">$name</span>) {
|
||||
<span class="k">echo</span> <span class="s">"Hallo, "</span> . <span class="v">$name</span> . <span class="s">"!\n"</span>;
|
||||
}
|
||||
|
||||
<span class="f">begruessen</span>(<span class="s">"Marek"</span>);
|
||||
<span class="f">begruessen</span>(<span class="s">"Anna"</span>);
|
||||
<span class="f">begruessen</span>(<span class="s">"Tom"</span>);</pre>
|
||||
|
||||
<p>Die Funktion <code class="inline">begruessen</code> nimmt einen <b>Parameter</b> entgegen (<code class="inline">$name</code>). Beim Aufruf übergibst du den konkreten Wert in den Klammern.</p>
|
||||
|
||||
<p>Funktionen können auch Werte <b>zurückgeben</b>. Dafür gibt es <code class="inline">return</code>:</p>
|
||||
|
||||
<pre><span class="k">function</span> <span class="f">addiere</span>(<span class="v">$a</span>, <span class="v">$b</span>) {
|
||||
<span class="k">return</span> <span class="v">$a</span> + <span class="v">$b</span>;
|
||||
}
|
||||
|
||||
<span class="v">$ergebnis</span> = <span class="f">addiere</span>(<span class="s">3</span>, <span class="s">5</span>);
|
||||
<span class="k">echo</span> <span class="v">$ergebnis</span>; <span class="c">// 8</span></pre>
|
||||
|
||||
<p>Die Funktion macht ihre Berechnung und liefert das Ergebnis zurück. Du fängst es in einer Variable auf und kannst damit weiterarbeiten.</p>
|
||||
|
||||
<div class="callout tip">
|
||||
<div class="callout-icon">✓</div>
|
||||
<div class="callout-body">
|
||||
<b>Übung macht den Meister</b>
|
||||
Schreibe jetzt selbst ein kleines PHP-Programm. Zum Beispiel: eine Liste deiner Lieblings-Filme, die mit <code class="inline">foreach</code> ausgegeben werden. Oder eine Funktion, die das Doppelte einer Zahl zurückgibt. Praktisch ausprobieren ist der schnellste Weg, PHP zu lernen.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -1,538 +0,0 @@
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>PHP OnePager</title>
|
||||
<style>
|
||||
@page { size: A4 landscape; margin: 0; }
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--php: #777BB4;
|
||||
--php-dark: #4F5B93;
|
||||
--php-darker: #2C3E66;
|
||||
--accent: #F1C40F;
|
||||
--ink: #1a1a1a;
|
||||
--muted: #5a6470;
|
||||
--line: #e5e5e5;
|
||||
--bg-soft: #f5f5fb;
|
||||
}
|
||||
|
||||
/* Darkmode — die App setzt data-theme="dark" auf <html>; Druck/PDF bleibt hell */
|
||||
@media screen {
|
||||
html[data-theme="dark"] {
|
||||
--ink: #e6e8ee;
|
||||
--muted: #9aa3b2;
|
||||
--line: #2c3038;
|
||||
--bg-soft: #23262e;
|
||||
}
|
||||
html[data-theme="dark"] body { background: #15171c; }
|
||||
html[data-theme="dark"] .callout { background: var(--bg-soft); }
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
color: var(--ink);
|
||||
font-size: 9.5pt;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 297mm;
|
||||
height: 210mm;
|
||||
padding: 9mm 11mm 9mm 11mm;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ===== HERO ===== */
|
||||
.hero {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: 4mm;
|
||||
}
|
||||
.hero-logo, .hero-text, .hero-stats {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.hero-logo { width: 28mm; padding-right: 5mm; }
|
||||
.hero-logo-box {
|
||||
width: 22mm; height: 22mm;
|
||||
background: linear-gradient(135deg, var(--php) 0%, var(--php-dark) 100%);
|
||||
border-radius: 5mm;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 18pt; font-weight: 800;
|
||||
color: white;
|
||||
letter-spacing: -1pt;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 20pt;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5pt;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.hero h1 .accent { color: var(--php); }
|
||||
.hero p {
|
||||
font-size: 9.5pt;
|
||||
color: var(--muted);
|
||||
margin-top: 1mm;
|
||||
}
|
||||
.hero-stats {
|
||||
width: 110mm;
|
||||
text-align: right;
|
||||
}
|
||||
.stats-row {
|
||||
display: inline-table;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.stat-cell {
|
||||
display: table-cell;
|
||||
padding: 0 5mm;
|
||||
text-align: center;
|
||||
border-right: 0.5pt solid var(--line);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.stat-cell:last-child { border-right: none; padding-right: 0; }
|
||||
.stat-cell:first-child { padding-left: 0; }
|
||||
.stat-num {
|
||||
font-size: 14pt;
|
||||
font-weight: 800;
|
||||
color: var(--php);
|
||||
line-height: 1;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 6.5pt;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5pt;
|
||||
margin-top: 1mm;
|
||||
}
|
||||
|
||||
/* ===== Divider ===== */
|
||||
.divider {
|
||||
height: 1.5pt;
|
||||
background: var(--ink);
|
||||
margin-bottom: 4mm;
|
||||
}
|
||||
|
||||
/* ===== GRID 3-Spalten ===== */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 4mm;
|
||||
margin-bottom: 4mm;
|
||||
}
|
||||
.col { display: flex; flex-direction: column; gap: 4mm; }
|
||||
|
||||
.block { display: flex; flex-direction: column; gap: 1.5mm; }
|
||||
.block h2 {
|
||||
font-size: 9.5pt;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5pt;
|
||||
color: var(--php);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2mm;
|
||||
border-bottom: 2pt solid var(--php);
|
||||
padding-bottom: 1.2mm;
|
||||
}
|
||||
.block h2 .ico { width: 4mm; height: 4mm; flex-shrink: 0; }
|
||||
|
||||
/* ===== FEATURE LIST ===== */
|
||||
.feature-list { display: flex; flex-direction: column; gap: 1.5mm; }
|
||||
.feature-row {
|
||||
display: grid;
|
||||
grid-template-columns: 4.5mm 1fr;
|
||||
gap: 1.8mm;
|
||||
align-items: start;
|
||||
}
|
||||
.feature-row .dot {
|
||||
width: 4mm; height: 4mm; margin-top: 0.2mm;
|
||||
background: var(--php);
|
||||
border-radius: 1mm;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 6pt; font-weight: 800; color: white;
|
||||
}
|
||||
.feature-row .text { font-size: 8.5pt; line-height: 1.35; }
|
||||
.feature-row .text b { color: var(--php-dark); }
|
||||
.feature-row code {
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
font-size: 7.5pt;
|
||||
background: var(--bg-soft);
|
||||
padding: 0 1mm;
|
||||
border-radius: 1mm;
|
||||
color: var(--php-dark);
|
||||
}
|
||||
|
||||
/* ===== CODE ===== */
|
||||
.code {
|
||||
background: #1e2a3a;
|
||||
color: #e6e6e6;
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
font-size: 7pt;
|
||||
padding: 2.5mm 3mm;
|
||||
border-radius: 1.5mm;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.code .c { color: #6b8aae; font-style: italic; }
|
||||
.code .k { color: #ff79c6; }
|
||||
.code .s { color: #f1c40f; }
|
||||
.code .f { color: #50fa7b; }
|
||||
.code .t { color: #8be9fd; }
|
||||
.code .v { color: #ffb86c; }
|
||||
|
||||
/* ===== ECOSYSTEM ===== */
|
||||
.eco-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5mm;
|
||||
}
|
||||
.eco-item {
|
||||
background: var(--bg-soft);
|
||||
border-left: 1.5pt solid var(--php);
|
||||
border-radius: 1mm;
|
||||
padding: 1.5mm 2mm;
|
||||
display: flex; align-items: center; gap: 2mm;
|
||||
}
|
||||
.eco-ico {
|
||||
width: 5mm; height: 5mm; flex-shrink: 0;
|
||||
background: var(--php-dark);
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.eco-text { display: flex; flex-direction: column; gap: 0.2mm; }
|
||||
.eco-name { font-weight: 700; font-size: 8pt; color: var(--php-dark); }
|
||||
.eco-desc { font-size: 6.5pt; color: var(--muted); }
|
||||
|
||||
/* ===== TYPE TABLE ===== */
|
||||
.types {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5mm;
|
||||
}
|
||||
.type {
|
||||
background: var(--bg-soft);
|
||||
padding: 1.3mm 2mm;
|
||||
border-radius: 1mm;
|
||||
font-size: 7.5pt;
|
||||
}
|
||||
.type b {
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
color: var(--php-dark);
|
||||
display: block;
|
||||
font-size: 8pt;
|
||||
}
|
||||
.type span { color: var(--muted); font-size: 6.8pt; }
|
||||
|
||||
/* ===== SPLIT (composer/comparison) ===== */
|
||||
.split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2mm;
|
||||
}
|
||||
.split-col h4 {
|
||||
font-size: 7.5pt;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4pt;
|
||||
margin-bottom: 1mm;
|
||||
}
|
||||
.split-col.modern h4 { color: var(--php); }
|
||||
.split-col.legacy h4 { color: var(--muted); }
|
||||
.split-col ul { list-style: none; }
|
||||
.split-col li {
|
||||
font-size: 7.5pt;
|
||||
padding-left: 3mm;
|
||||
position: relative;
|
||||
margin-bottom: 0.8mm;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.split-col.modern li::before {
|
||||
content: "+";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--php);
|
||||
font-weight: 800;
|
||||
}
|
||||
.split-col.legacy li::before {
|
||||
content: "·";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--muted);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ===== FOOTER ===== */
|
||||
.footer {
|
||||
position: absolute;
|
||||
left: 11mm;
|
||||
right: 11mm;
|
||||
bottom: 9mm;
|
||||
background: var(--php-darker);
|
||||
color: white;
|
||||
padding: 3mm 5mm;
|
||||
border-radius: 1.5mm;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 4mm;
|
||||
align-items: center;
|
||||
}
|
||||
.footer-text { font-size: 8.5pt; line-height: 1.45; }
|
||||
.footer-text b { color: var(--accent); }
|
||||
.footer-tag {
|
||||
background: var(--php);
|
||||
color: white;
|
||||
padding: 1.5mm 3mm;
|
||||
border-radius: 1.5mm;
|
||||
font-weight: 800;
|
||||
font-size: 8.5pt;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
<!-- HERO -->
|
||||
<header class="hero">
|
||||
<div class="hero-logo"><div class="hero-logo-box">php</div></div>
|
||||
<div class="hero-text">
|
||||
<h1><span class="accent">PHP</span> – Server-Sprache des Web</h1>
|
||||
<p>Dynamische Webseiten · seit 1995 · 75% aller Websites · objektorientiert & funktional</p>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="stats-row">
|
||||
<div class="stat-cell">
|
||||
<div class="stat-num">8.4</div>
|
||||
<div class="stat-label">Aktuelle Version</div>
|
||||
</div>
|
||||
<div class="stat-cell">
|
||||
<div class="stat-num">1995</div>
|
||||
<div class="stat-label">Erstes Release</div>
|
||||
</div>
|
||||
<div class="stat-cell">
|
||||
<div class="stat-num">75%</div>
|
||||
<div class="stat-label">Aller Websites</div>
|
||||
</div>
|
||||
<div class="stat-cell">
|
||||
<div class="stat-num">300k+</div>
|
||||
<div class="stat-label">Composer-Pakete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- MAIN GRID -->
|
||||
<main class="grid">
|
||||
|
||||
<!-- ===== SPALTE 1 ===== -->
|
||||
<div class="col">
|
||||
|
||||
<section class="block">
|
||||
<h2>
|
||||
<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<polygon points="12,2 22,8 22,16 12,22 2,16 2,8"/>
|
||||
</svg>
|
||||
Kernkonzepte
|
||||
</h2>
|
||||
<div class="feature-list">
|
||||
<div class="feature-row">
|
||||
<div class="dot">1</div>
|
||||
<div class="text"><b>Server-seitig</b> – läuft auf Webservern, generiert HTML pro Request</div>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="dot">2</div>
|
||||
<div class="text"><b>Dynamisch typisiert</b> – Typen zur Laufzeit, optional mit Type-Hints prüfbar</div>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="dot">3</div>
|
||||
<div class="text"><b>OOP & funktional</b> – Klassen, Interfaces, Traits, Enums, First-Class-Funktionen</div>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="dot">4</div>
|
||||
<div class="text"><b>Composer</b> – moderner Paket-Manager für Dependencies und Autoloading</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="block">
|
||||
<h2>
|
||||
<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M3 6h18M3 12h18M3 18h18"/>
|
||||
</svg>
|
||||
Datentypen
|
||||
</h2>
|
||||
<div class="types">
|
||||
<div class="type"><b>int</b><span>Ganze Zahlen</span></div>
|
||||
<div class="type"><b>float</b><span>Kommazahlen</span></div>
|
||||
<div class="type"><b>string</b><span>Text in '' oder ""</span></div>
|
||||
<div class="type"><b>bool</b><span>true / false</span></div>
|
||||
<div class="type"><b>array</b><span>Liste oder Map</span></div>
|
||||
<div class="type"><b>object</b><span>Klassen-Instanz</span></div>
|
||||
<div class="type"><b>null</b><span>kein Wert</span></div>
|
||||
<div class="type"><b>callable</b><span>Funktion / Closure</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ===== SPALTE 2 ===== -->
|
||||
<div class="col">
|
||||
|
||||
<section class="block">
|
||||
<h2>
|
||||
<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/>
|
||||
</svg>
|
||||
Hello World
|
||||
</h2>
|
||||
<div class="code"><span class="t"><?php</span><br>
|
||||
<span class="k">declare</span>(strict_types=<span class="s">1</span>);<br>
|
||||
<br>
|
||||
<span class="k">function</span> <span class="f">greet</span>(<span class="t">string</span> <span class="v">$name</span>): <span class="t">string</span> {<br>
|
||||
<span class="k">return</span> <span class="s">"Hallo, </span><span class="v">$name</span><span class="s">!"</span>;<br>
|
||||
}<br>
|
||||
<br>
|
||||
<span class="k">echo</span> <span class="f">greet</span>(<span class="s">'Marek'</span>);<br>
|
||||
<span class="c">// Hallo, Marek!</span></div>
|
||||
</section>
|
||||
|
||||
<section class="block">
|
||||
<h2>
|
||||
<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
||||
</svg>
|
||||
Moderne vs. Legacy
|
||||
</h2>
|
||||
<div class="split">
|
||||
<div class="split-col modern">
|
||||
<h4>Modern (8.x)</h4>
|
||||
<ul>
|
||||
<li>strict_types</li>
|
||||
<li>Readonly Properties</li>
|
||||
<li>Enums & Match</li>
|
||||
<li>Named Arguments</li>
|
||||
<li>Promoted Constructor</li>
|
||||
<li>Composer + PSR</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="split-col legacy">
|
||||
<h4>Legacy (5.x)</h4>
|
||||
<ul>
|
||||
<li>magic_quotes</li>
|
||||
<li>register_globals</li>
|
||||
<li>mysql_* Funktionen</li>
|
||||
<li>kein Typ-System</li>
|
||||
<li>include/require Chaos</li>
|
||||
<li>Spaghetti-Code</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ===== SPALTE 3 ===== -->
|
||||
<div class="col">
|
||||
|
||||
<section class="block">
|
||||
<h2>
|
||||
<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9"/>
|
||||
<line x1="12" y1="3" x2="12" y2="9"/><line x1="12" y1="15" x2="12" y2="21"/>
|
||||
<line x1="3" y1="12" x2="9" y2="12"/><line x1="15" y1="12" x2="21" y2="12"/>
|
||||
</svg>
|
||||
Ökosystem
|
||||
</h2>
|
||||
<div class="eco-grid">
|
||||
<div class="eco-item">
|
||||
<div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
|
||||
<div class="eco-text">
|
||||
<span class="eco-name">Laravel</span>
|
||||
<span class="eco-desc">Full-Stack Framework</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eco-item">
|
||||
<div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
|
||||
<div class="eco-text">
|
||||
<span class="eco-name">Symfony</span>
|
||||
<span class="eco-desc">Enterprise-Framework</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eco-item">
|
||||
<div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
|
||||
<div class="eco-text">
|
||||
<span class="eco-name">Composer</span>
|
||||
<span class="eco-desc">Paket-Manager</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eco-item">
|
||||
<div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
|
||||
<div class="eco-text">
|
||||
<span class="eco-name">PHPUnit</span>
|
||||
<span class="eco-desc">Testing-Framework</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eco-item">
|
||||
<div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
|
||||
<div class="eco-text">
|
||||
<span class="eco-name">PHPStan</span>
|
||||
<span class="eco-desc">Static Analysis</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eco-item">
|
||||
<div class="eco-ico"><svg width="2.8mm" height="2.8mm" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20,6 9,17 4,12"/></svg></div>
|
||||
<div class="eco-text">
|
||||
<span class="eco-name">Shopware</span>
|
||||
<span class="eco-desc">E-Commerce-Plattform</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="block">
|
||||
<h2>
|
||||
<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
Einsatzgebiete
|
||||
</h2>
|
||||
<div class="feature-list">
|
||||
<div class="feature-row">
|
||||
<div class="dot">W</div>
|
||||
<div class="text"><b>Web-Backends</b> – REST/GraphQL APIs, MVC-Apps mit Laravel oder Symfony</div>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="dot">C</div>
|
||||
<div class="text"><b>CMS</b> – WordPress, Drupal, TYPO3 für Content-Management</div>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="dot">E</div>
|
||||
<div class="text"><b>E-Commerce</b> – Shopware, Magento, WooCommerce</div>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="dot">$</div>
|
||||
<div class="text"><b>CLI-Tools</b> – Symfony Console, Laravel Artisan für Automation</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">
|
||||
<div class="footer-text">
|
||||
<b>Wann PHP wählen?</b> Wenn du schnell ein Web-Backend brauchst, ein riesiges Ökosystem nutzen willst und eine reife Sprache mit großem Talent-Pool suchst. Moderne PHP 8 ist nicht das PHP von 2005.
|
||||
</div>
|
||||
<div class="footer-tag">php.net</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
Reference in New Issue
Block a user