Url Composer Vorlagen

Themenkomponente
1

Obwohl es sich um eine recht spezialisierte Komponente für meine Seite handelt, teile ich sie hier, da sie nützlich sein könnte. Sie fügt dem Composer basierend auf einer Zeichenfolge in der URL eine Vorlage hinzu.

Es gab viele Diskussionen darüber, Composer-Vorlagen für Tags zu haben. Das funktionierte in meinem Anwendungsfall nicht, also habe ich stattdessen dies erstellt. Es kann im Notfall verwendet oder leicht modifiziert werden, um auch für Tags zu funktionieren.

Github: GitHub - focallocal/url-composer-templates: Reads url strings and adds template text to the composer if a match is found

URL Composer Templates

Eine Discourse-Themenkomponente, die den Composer automatisch mit Vorlagentext basierend auf URL-Parametern vorbefüllt. Entwickelt, um nahtlos mit Docuss zusammenzuarbeiten und kontextspezifische Vorlagen für verschiedene Arten von Interaktionen bereitzustellen.

Funktionen

  • Unterstützung für URL-Parameter: Erkennt automatisch ?composer_template=X in URLs und wendet die entsprechende Vorlage an
  • Mehrere Vorlagentypen: Konfigurieren Sie bis zu 6 verschiedene Vorlagen für unterschiedliche Zwecke (Bericht, Zusage, Einladung, benutzerdefinierte Vorlagen)
  • Composer automatisch öffnen: Öffnet optional den Composer automatisch, wenn ein Docuss-Link ohne vorhandene Threads aufgerufen wird
  • Flexible Anwendung: Vorlagen können nur auf den ersten Beitrag, alle Antworten oder beides angewendet werden
  • Sitzungspersistenz: Verwendet sessionStorage, um die Vorlagenauswahl über Seitenwechsel hinweg beizubehalten
  • Debug-Modus: Aktiviert detaillierte Konsolenprotokollierung zur Fehlerbehebung bei der Vorlagenanwendung

Installation

  1. Installieren Sie die Themenkomponente in Discourse:

    • Gehen Sie zu Admin → Anpassen → Themen
    • Klicken Sie auf „Installieren“ → „Aus einem Git-Repository“
    • Geben Sie ein: https://github.com/focallocal/url-composer-templates
    • Fügen Sie die Komponente Ihrem aktiven Thema hinzu

  2. Kein Plugin-Neustart erforderlich! Die Unterstützung für den Parameter composer_template ist bereits in dcs-discourse-plugin und dcs-client vorhanden.

  3. Stellen Sie Ihre React-App (fl-maps) bereit mit den aktualisierten DCSLink-Komponenten, die die Prop composerTemplate übergeben.

  4. Konfigurieren Sie Vorlagen in den Komponenteneinstellungen (Admin → Anpassen → Themen → Ihr Thema → url-composer-templates → Einstellungen).

Konfiguration

Vorlageneinstellungen

Jede Vorlage verfügt über drei Konfigurationsoptionen:

Vorlage 1 (Bericht)

  • template_1_id: report – Der URL-Parameterwert, der diese Vorlage auslöst
  • template_1_text: Der Text, der in den Composer vorbefüllt wird
  • template_1_use_for: first_post – Nur beim Erstellen neuer Themen anwenden

Vorlage 2 (Zusage)

  • template_2_id: going – Für Interaktionen vom Typ „Ich komme“
  • template_2_text: Vorbefüllter Text für Zusagen
  • template_2_use_for: all_replies – Auf alle Antworten anwenden (nicht auf erste Beiträge)

Vorlage 3 (Einladung)

  • template_3_id: invite – Für Einladungsinteraktionen
  • template_3_text: Vorbefüllter Text für Einladungen
  • template_3_use_for: all_replies – Auf alle Antworten anwenden

Vorlagen 4-6 (Benutzerdefiniert)

  • Standardmäßig deaktiviert
  • Können für spezifische Anwendungsfälle aktiviert und angepasst werden
  • ID, Text und Anwendungsumfang nach Bedarf konfigurieren

Auto-Open-Einstellungen

  • enable_auto_open_composer: true – Wenn aktiviert, wird der Composer automatisch geöffnet, wenn:
    • Ein Docuss-Link angeklickt wird (URL enthält ?composer_template=X)
    • Noch keine Threads für diese Tag-Kombination vorhanden sind
    • Hilft Benutzern, sofort Diskussionen zu beginnen

Debug-Modus

  • debug_mode: false – Aktivieren, um detaillierte Konsolenprotokolle mit Emoji-Präfixen anzuzeigen:
    • :artist_palette: Protokolle zur Vorlagenanwendung
    • :rocket: Protokolle zum automatischen Öffnen des Composers

Docuss-Integration

Automatische Integration

Die Komponente url-composer-templates wurde entwickelt, um automatisch mit Docuss zu funktionieren. Wenn Sie beides haben:

  • Diese Komponente ist auf Ihrer Discourse-Instanz installiert
  • Der aktualisierte Docuss-Client und das Plugin (mit composer_template-Unterstützung)

Vorlagen werden automatisch basierend auf Folgendem angewendet:

  1. Interaktionsmodus:
    • DISCUSS-Modus → Verwendet triggerId-Hinweise (going, invite) oder standardmäßig report
    • COMMENT-Modus → Verwendet die Vorlage report

Benutzerdefinierte Vorlagen über HTML-Attribute

Für eine präzisere Steuerung können Sie Vorlagen direkt in Ihrem HTML mit dem Attribut data-dcs-composer-template festlegen:

<!-- Beispiel: Melden-Schaltfläche -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="issue-report"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="report">
  Ein Problem melden
</div>

<!-- Beispiel: Zusage-Schaltfläche -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="event-rsvp"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="going">
  Ich komme!
</div>

<!-- Beispiel: Einladungs-Schaltfläche -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="invite-friends"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="invite">
  Freunde einladen
</div>

<!-- Beispiel: Benutzerdefinierte Vorlage -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="feedback"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="custom1">
  Feedback geben
</div>

Vorlagen-ID-Abgleich

Die Komponente gleicht Vorlagen-IDs aus dem URL-Parameter mit den konfigurierten Vorlagen-IDs ab:

URL-Parameter Vorlageneinstellung Standardzweck
?composer_template=report template_1_id Fehlerberichte, Probleme
?composer_template=going template_2_id Veranstaltungs-RSVPs
?composer_template=invite template_3_id Einladungen
?composer_template=custom1 template_4_id Benutzerdefinierte Verwendung
?composer_template=custom2 template_5_id Benutzerdefinierte Verwendung
?composer_template=custom3 template_6_id Benutzerdefinierte Verwendung

Funktionsweise

Ablauf der Vorlagenanwendung

  1. URL-Erkennung: Wenn ein Benutzer zu einer URL mit ?composer_template=X navigiert, speichert die Komponente die Vorlagen-ID in sessionStorage
  2. Composer-Abfangen: Wenn der Composer geöffnet wird, prüft die Komponente auf eine gespeicherte Vorlagen-ID
  3. Vorlagenabgleich: Findet die passende Vorlage basierend auf der ID
  4. Gültigkeitsprüfung des Umfangs: Prüft, ob die Vorlage angewendet werden soll (erster Beitrag, Antwort oder beides)
  5. Texteinfügung: Füllt den Composer mit dem Vorlagentext vor
  6. Bereinigung: Markiert die Vorlage als angewendet, um eine erneute Anwendung zu verhindern

Auto-Open-Ablauf

  1. Parametererkennung: Prüft, ob die URL ?composer_template=X enthält und Auto-Open aktiviert ist
  2. Themensuche: Sucht nach vorhandenen Themen mit der aktuellen Tag-Kombination
  3. Composer-Öffnung: Wenn keine Themen gefunden werden, wird der Composer automatisch geöffnet
  4. Vorlagenanwendung: Die Vorlage wird dann über den normalen Ablauf oben angewendet

Anwendungsbeispiele

Veranstaltungswebsite

# settings.yml
template_2_id: "going"
template_2_text: "Ich plane teilzunehmen! 🎉\n\nIch freue mich darauf, alle dort zu sehen."
template_2_use_for: "all_replies"

template_3_id: "invite"
template_3_text: "Ich möchte Freunde zu dieser Veranstaltung einladen.\n\nWen ich einlade:\n- \n\nWarum sie kommen sollten:\n"
template_3_use_for: "first_post"

Problemverfolgung

template_1_id: "bug"
template_1_text: "**Fehlerbeschreibung:**\n\n**Schritte zur Reproduktion:**\n1. \n2. \n3. \n\n**Erwartetes Verhalten:**\n\n**Tatsächliches Verhalten:**\n"
template_1_use_for: "first_post"

template_4_enabled: true
template_4_id: "feature"
template_4_text: "**Funktionsanfrage:**\n\n**Anwendungsfall:**\n\n**Vorgeschlagene Lösung:**\n"
template_4_use_for: "first_post"

Community-Beteiligung

template_1_id: "question"
template_1_text: "**Meine Frage:**\n\n**Was ich versucht habe:**\n\n**Zusätzlicher Kontext:**\n"
template_1_use_for: "first_post"

template_2_id: "answer"
template_2_text: "Hier ist, was für mich funktioniert hat:\n\n**Lösung:**\n\n**Warum es funktioniert:**\n"
template_2_use_for: "all_replies"

Fehlerbehebung

Vorlagen werden nicht angewendet

  1. URL-Parameter prüfen: Stellen Sie sicher, dass die URL ?composer_template=X enthält, wobei X mit einer Vorlagen-ID übereinstimmt
  2. Debug-Modus aktivieren: Schalten Sie debug_mode in den Einstellungen ein, um Konsolenprotokolle anzuzeigen
  3. Anwendungsumfang überprüfen: Prüfen Sie, ob die Einstellung use_for mit Ihrer Aktion übereinstimmt (Thema erstellen vs. antworten)
  4. SessionStorage löschen: Öffnen Sie die Browserkonsole und führen Sie Folgendes aus: sessionStorage.clear()

Auto-Open funktioniert nicht

  1. Einstellung prüfen: Stellen Sie sicher, dass enable_auto_open_composer auf true gesetzt ist
  2. URL überprüfen: Auto-Open funktioniert nur, wenn die URL ?composer_template=X enthält
  3. Vorhandene Themen prüfen: Auto-Open wird nur ausgelöst, wenn KEINE Themen mit der Tag-Kombination vorhanden sind
  4. Debug-Modus aktivieren: Suchen Sie nach Protokollen mit dem Emoji :rocket: in der Konsole

Falsche Vorlage wird angewendet

  1. Vorlagen-IDs prüfen: Stellen Sie sicher, dass Ihr URL-Parameter exakt mit der Vorlagen-ID übereinstimmt (Groß-/Kleinschreibung beachten)
  2. Priorität prüfen: Wenn mehrere Vorlagen übereinstimmen könnten, wird die zuerst übereinstimmende Vorlage verwendet
  3. Sitzung löschen: SessionStorage könnte alte Werte enthalten: sessionStorage.clear()

Probleme mit der Docuss-Integration

  1. Docuss aktualisieren: Stellen Sie sicher, dass Sie die neuesten Versionen von Folgendem haben:
    • dcs-client (mit composerTemplate-Unterstützung in HtmlBased.js)
    • dcs-discourse-plugin (mit URL-Parametergenerierung in DcsIFrame.js.es6)
  2. HTML-Attribute überprüfen: Vergewissern Sie sich, dass data-dcs-composer-template korrekt auf den Triggern gesetzt ist
  3. Netzwerk überprüfen: Überprüfen Sie die Registerkarte „Netzwerk“ der Browser-Entwicklertools, um zu sehen, ob URL-Parameter hinzugefügt werden

Versionsverlauf

v1.0.0 (Aktuell)

  • Erste Veröffentlichung
  • Unterstützung für 6 konfigurierbare Vorlagen
  • URL-Parameter-basierte Vorlagenauswahl
  • Auto-Open Composer für Docuss-Links
  • SessionStorage-Persistenz
  • Debug-Modus zur Fehlerbehebung

Mitwirkung

Einen Fehler gefunden oder einen Funktionswunsch? Bitte eröffnen Sie ein Issue im GitHub-Repository.

Lizenz

Diese Komponente ist Open Source und unter der MIT-Lizenz verfügbar.

Credits

Entwickelt von Andy@Focallocal zur Verwendung mit Docuss – einem System zum Einbetten von Discourse-Diskussionen in jede Website.