feat: Code mit Farbe, Anleitung im Repo, Galerie mit Seitengroesse

CODE MIT FARBE, ohne Bibliothek. Ein Hervorheber wie highlight.js wiegt mehr als diese ganze Oberflaeche und kann fuenfzig Sprachen, von denen hier drei vorkommen. Was Code lesbar macht, sind drei Unterscheidungen -- Kommentar, Zeichenkette, Schluesselwort. Der Rest ist Zierde. Also ein Tokenizer in einem Ausdruck, der seine Grenzen kennt: verschachtelte Sonderfaelle faerbt er falsch, und bei zehn Zeilen Beispiel ist das der richtige Tausch. DIE ANLEITUNG liegt als docs/API.md IM REPO und damit unter Versionskontrolle, statt nur im Wiki zu stehen, wo niemand sieht, wann sie zuletzt stimmte. Sie nennt nicht nur die Endpunkte, sondern was schiefgehen kann und wie die Antwort dann aussieht -- samt der beiden Proxy-Fallen, die uns heute begegnet sind. Das Gitea-Wiki gibt es noch NICHT: Gitea legt das Wiki-Repo erst an, wenn die erste Seite ueber die Oberflaeche erstellt wird (davor antwortet der Klon mit 500). Die API-Seite verlinkt es trotzdem schon -- und sobald es existiert, schiebt ein Befehl docs/API.md hinein. GALERIE: die Seitengroesse ist waehlbar (30/60/120/200 statt fester 60), und die Ordnerspalte rueckt ab 1536 px nach LINKS AUS dem Hauptbereich heraus -- 15rem Spalte plus 1rem Abstand sind genau die 16rem, um die dort nach links gezogen wird. Damit steht das Raster auf derselben Breite wie jede andere Seite, statt um die Spaltenbreite schmaler zu sein. Darunter stapelt es wie bisher; auf einem 1280er Schirm gaebe es keinen Rand, in den etwas ruecken koennte. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-11 20:05:35 +02:00
parent 67d2f4ec93
commit 28404b78c2
5 changed files with 382 additions and 43 deletions
@@ -0,0 +1,86 @@
+import { Check, Copy } from 'lucide-react'
+import { useKopieren } from './Bausteine'
+import { useStore } from '../store'
+
+/** Code mit Farbe — ohne Bibliothek.
+ *
+ *  Ein Hervorheber wie highlight.js wiegt mehr als diese ganze Oberfläche und
+ *  kann fünfzig Sprachen, von denen hier drei vorkommen. Was man wirklich
+ *  braucht, um Code lesbar zu machen, sind drei Unterscheidungen: Kommentar,
+ *  Zeichenkette, Schlüsselwort. Der Rest ist Zierde.
+ *
+ *  Deshalb ein Tokenizer in einem Ausdruck. Er ist bewusst einfach und kennt
+ *  seine Grenzen — verschachtelte Sonderfälle färbt er falsch. Bei einem
+ *  Beispielblock von zehn Zeilen ist das der richtige Tausch. */
+
+type Sprache = 'lua' | 'bash' | 'json'
+
+const MUSTER: Record<Sprache, RegExp> = {
+    // Reihenfolge zählt: Kommentare zuerst, sonst frisst eine Zeichenkette
+    // das `--` einer Kommentarzeile.
+    lua: /(--[^\n]*)|('[^'\n]*'|"[^"\n]*")|(\b(?:local|function|end|if|then|else|elseif|return|for|in|do|while|nil|true|false|and|or|not)\b)|(\b\d+\b)/g,
+    bash: /(#[^\n]*)|('[^'\n]*'|"[^"\n]*")|(\b(?:curl|echo|export|cd|if|then|fi|for|do|done)\b)|(-{1,2}[A-Za-z][\w-]*)/g,
+    json: /()("(?:[^"\\]|\\.)*")|(\b(?:true|false|null)\b)|(-?\b\d+(?:\.\d+)?\b)/g,
+}
+
+const FARBEN = ['text-schrift-leise/70 italic', 'text-gut', 'text-akzent', 'text-warn']
+
+function faerben(text: string, sprache: Sprache) {
+    const muster = new RegExp(MUSTER[sprache].source, 'g')
+    const stuecke: React.ReactNode[] = []
+    let letzte = 0
+    let treffer: RegExpExecArray | null
+
+    while ((treffer = muster.exec(text)) !== null) {
+        // Ein leerer Treffer wuerde die Schleife anhalten — bei json steht
+        // eine leere Gruppe fuer "keine Kommentare".
+        if (treffer[0] === '') {
+            muster.lastIndex++
+            continue
+        }
+        if (treffer.index > letzte) stuecke.push(text.slice(letzte, treffer.index))
+
+        const gruppe = [1, 2, 3, 4].find((i) => treffer![i] !== undefined)
+        stuecke.push(
+            <span key={treffer.index} className={FARBEN[(gruppe ?? 1) - 1]}>
+                {treffer[0]}
+            </span>,
+        )
+        letzte = treffer.index + treffer[0].length
+    }
+    if (letzte < text.length) stuecke.push(text.slice(letzte))
+    return stuecke
+}
+
+export function Code({
+    text,
+    sprache = 'bash',
+    marke,
+}: {
+    text: string
+    sprache?: Sprache
+    marke: string
+}) {
+    const note = useStore((s) => s.note)
+    const { kopiert, kopieren } = useKopieren()
+
+    return (
+        <div className="group relative">
+            <pre className="overflow-x-auto rounded-md border border-rand bg-grund p-3 pr-12 font-mono text-xs leading-relaxed">
+                <code>{faerben(text, sprache)}</code>
+            </pre>
+            <button
+                onClick={async () => {
+                    if (!(await kopieren(text, marke)))
+                        note('fehler', 'Die Zwischenablage ist gesperrt.')
+                }}
+                className="absolute top-2 right-2 rounded border border-rand bg-flaeche px-2 py-1
+                           text-schrift-leise opacity-0 transition-opacity group-hover:opacity-100
+                           focus-visible:opacity-100 hover:bg-flaeche-hoch hover:text-schrift"
+                aria-label="Kopieren"
+            >
+                {kopiert === marke ? <Check size={13} className="text-gut" /> : <Copy size={13} />}
+            </button>
+        </div>
+    )
+}
@@ -53,7 +53,7 @@ export function Ordner({
    )

    return (
-        <aside className="w-full shrink-0 self-start rounded-lg border border-rand bg-flaeche p-2 lg:w-72">
+        <aside className="w-full shrink-0 self-start rounded-lg border border-rand bg-flaeche p-2 lg:w-60">
            <h2 className="px-2 py-1 text-xs font-semibold text-schrift-leise">Ordner</h2>

            {zeile(