Das Threads-Plugin bringt kollaborative Inline-Kommentare in Ihre Dokumentation. Wählen Sie Text aus, hinterlassen Sie einen Kommentar und starten Sie eine Diskussion. Alle Threads werden direkt in Ihren Markdown-Quelldateien gespeichert. Es ist keine Datenbank erforderlich.

Ursprünglicher Autor: @svallory

Konfiguration

Das Threads-Plugin ist ein optionales Plugin. Installieren Sie es über die CLI:

npx @docmd/core add threads

Aktivieren Sie es in Ihrer docmd.config.json.

Beispiel

{
  "plugins": {
    "threads": {
      "sidebar": true
    }
  }
}

Funktionsweise

1. Wählen Sie Text auf einer beliebigen Dokumentationsseite während npx @docmd/core dev aus.
2. Ein Kommentar-Popover erscheint. Schreiben Sie Ihren Kommentar und senden Sie ihn ab.
3. Der ausgewählte Text wird mit einer Thread-Markierung hervorgehoben.
4. Threads werden als ::: threads-Blöcke am Ende der Markdown-Datei gespeichert.
5. Keine Datenbank ist erforderlich. Ihre Markdown-Dateien bleiben die einzige Quelle der Wahrheit.

Vorschau

So sehen Threads auf einer Live-Seite aus. Text mit Diskussionen wird <span class=“threads-preview-highlight”>so hervorgehoben</span>. Thread-Karten erscheinen darunter.

<div class=“threads-preview-card”>
<div class=“threads-preview-comment”>
<div class=“threads-preview-avatar”>A</div>
<div class=“threads-preview-meta”><strong>Alice</strong> · 2d ago</div>
<div class=“threads-preview-body”>This section could use a diagram to explain the architecture. What do you think?</div>
</div>
<div class=“threads-preview-comment threads-preview-reply”>
<div class=“threads-preview-avatar”>B</div>
<div class=“threads-preview-meta”><strong>Bob</strong> · 1d ago</div>
<div class=“threads-preview-body”>Good idea - I’ll add a Mermaid flowchart. Does <code>sequenceDiagram</code> work here?</div>
<div class=“threads-preview-reactions”>
<div class=“threads-preview-reaction”>👍 <span>2</span></div>
<div class=“threads-preview-reaction”>🚀 <span>1</span></div>
</div>
</div>
<div class=“threads-preview-comment threads-preview-reply”>
<div class=“threads-preview-avatar”>A</div>
<div class=“threads-preview-meta”><strong>Alice</strong> · 12h ago</div>
<div class=“threads-preview-body”>Perfect. A simple flowchart would be ideal.</div>
</div>
<div class=“threads-preview-footer”>
<div class=“threads-preview-footer-btn”>+ New Comment</div>
</div>
</div>

Hier ist eine <span class=“threads-preview-highlight-blue”>zweite Hervorhebung mit anderer Farbe</span>. Threads durchlaufen automatisch eine Palette von Farben.

<div class=“threads-preview-card threads-preview-card-blue”>
<div class=“threads-preview-comment”>
<div class=“threads-preview-avatar”>C</div>
<div class=“threads-preview-meta”><strong>Charlie</strong> · 3d ago</div>
<div class=“threads-preview-body”>Should we mention backward compatibility here?</div>
</div>
<div class=“threads-preview-footer”>
<div class=“threads-preview-footer-btn”>+ New Comment</div>
</div>
</div>

Gelöste Threads werden abgedunkelt dargestellt:

<div class=“threads-preview-card threads-preview-card-resolved”>
<div class=“threads-preview-comment”>
<div class=“threads-preview-avatar”>A</div>
<div class=“threads-preview-meta”><strong>Alice</strong> · 5d ago  <span class=“threads-preview-resolved-badge”>✓ Resolved</span></div>
<div class=“threads-preview-body”>Fixed the typo in the config example.</div>
</div>
<div class=“threads-preview-footer”>
<div class=“threads-preview-footer-btn”>+ New Comment</div>
</div>
</div>

Ein schwebender Diskussions-Button <span class=“threads-preview-fab”>💬<span class=“threads-preview-fab-badge”>2</span></span> erscheint in der unteren rechten Ecke. Er zeigt die Anzahl der offenen Threads an. Klicken Sie darauf, um zum ersten Thread auf der Seite zu springen.

Speicherformat

Threads werden mit der Container-Syntax von docmd in Ihr Markdown eingebettet:

# My Documentation Page

Some content with ==highlighted text=={t-a1b2c3d4} that has a thread.

::: threads
  ::: thread t-a1b2c3d4
    ::: comment c-e5f6a7b8 "Alice" "2026-04-09"
      This text needs clarification.
    :::
    ::: comment c-d9e0f1a2 "Bob" "2026-04-09" reply-to c-e5f6a7b8
      Updated it - does this work?

      ::: reactions
        - 👍 Alice
      :::
    :::
  :::
:::

Die Syntax ==text=={threadId} verknüpft hervorgehobenen Text im Dokumentenkörper mit einem bestimmten Thread.

Funktionen

Actions-API

Das threads-Plugin stellt die folgenden Actions über das WebSocket-RPC-System bereit. Rufen Sie diese aus Browser-Plugins mit docmd.call() auf:

Autorenprofile

Autoreninformationen werden in <docsRoot>/.threads/authors.json gespeichert:

{
  "[email protected]": {
    "name": "Alice",
    "avatarUrl": "https://gravatar.com/avatar/..."
  }
}

Während der Entwicklung erkennt das Plugin automatisch Ihren Git-Benutzernamen und Ihre E-Mail-Adresse zur Autorenerkennung.