Modelli Url Composer

Componente del tema
1

Il mio sito ha un componente piuttosto specializzato, ma lo condivido qui perché potrebbe essere utile. Aggiunge un modello al compositore basato su una stringa nell’URL.

Ci sono state molte discussioni sull’avere modelli di compositore per i tag. Questo non ha funzionato nel mio caso d’uso, quindi ho costruito questo invece. Può essere usato all’occorrenza, o modificato leggermente per funzionare anche per i tag.

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

URL Composer Templates

Un componente tema di Discourse che pre-compila il compositore con testo modello basato sui parametri dell’URL. Progettato per funzionare perfettamente con Docuss per fornire modelli specifici per il contesto per diversi tipi di interazioni.

Funzionalità

  • Supporto Parametri URL: Rileva automaticamente ?composer_template=X negli URL e applica il modello corrispondente
  • Tipi di Modello Multipli: Configura fino a 6 diversi modelli per scopi diversi (segnalazione, partecipazione, invito, modelli personalizzati)
  • Apertura Automatica Compositore: Opzionalmente apre automaticamente il compositore quando si visita un link Docuss senza thread esistenti
  • Applicazione Flessibile: I modelli possono essere applicati solo al primo post, a tutte le risposte o a entrambi
  • Persistenza Sessione: Utilizza sessionStorage per mantenere la selezione del modello attraverso la navigazione delle pagine
  • Modalità Debug: Abilita la registrazione dettagliata della console per la risoluzione dei problemi di applicazione del modello

Installazione

  1. Installa il componente tema su Discourse:

    • Vai su Admin → Customize → Themes (Amministrazione → Personalizza → Temi)
    • Clicca su “Install” → “From a Git repository” (Installa → Da un repository Git)
    • Inserisci: https://github.com/focallocal/url-composer-templates
    • Aggiungi il componente al tuo tema attivo

  2. Nessun rebuild del plugin richiesto! Il supporto per il parametro composer_template esiste già in dcs-discourse-plugin e dcs-client.

  3. Distribuisci la tua app React (fl-maps) con i componenti DCSLink aggiornati che passano la prop composerTemplate.

  4. Configura i modelli nelle impostazioni del componente (Admin → Customize → Themes → tuo tema → url-composer-templates → Settings).

Configurazione

Impostazioni Modello

Ogni modello ha tre opzioni di configurazione:

Modello 1 (Segnalazione)

  • template_1_id: report - Il valore del parametro URL per attivare questo modello
  • template_1_text: Il testo da pre-compilare nel compositore
  • template_1_use_for: first_post - Applica solo quando si creano nuovi argomenti

Modello 2 (Partecipazione)

  • template_2_id: going - Per interazioni di tipo “Vengo”
  • template_2_text: Testo pre-compilato per le conferme di partecipazione
  • template_2_use_for: all_replies - Applica a tutte le risposte (non al primo post)

Modello 3 (Invito)

  • template_3_id: invite - Per interazioni di invito
  • template_3_text: Testo pre-compilato per gli inviti
  • template_3_use_for: all_replies - Applica a tutte le risposte

Modelli 4-6 (Personalizzati)

  • Disabilitati di default
  • Possono essere abilitati e personalizzati per casi d’uso specifici
  • Configura ID, testo e ambito di applicazione secondo necessità

Impostazioni Apertura Automatica

  • enable_auto_open_composer: true - Quando abilitato, apre automaticamente il compositore se:
    • Viene cliccato un link Docuss (URL contiene ?composer_template=X)
    • Non esistono ancora thread per quella combinazione di tag
    • Aiuta gli utenti ad avviare discussioni immediatamente

Modalità Debug

  • debug_mode: false - Abilita per vedere i log dettagliati della console con prefissi emoji:
    • :artist_palette: Log di applicazione del modello
    • :rocket: Log di apertura automatica del compositore

Integrazione Docuss

Integrazione Automatica

Il componente url-composer-templates è progettato per funzionare automaticamente con Docuss. Quando hai entrambi:

  • Questo componente installato sulla tua istanza Discourse
  • Il client e il plugin Docuss aggiornati (con supporto per composer_template)

I modelli verranno applicati automaticamente in base a:

  1. Modalità Interazione:
    • Modalità DISCUSS → Utilizza suggerimenti triggerId (going, invite) o predefinito su report
    • Modalità COMMENT → Utilizza il modello report

Modelli Personalizzati tramite Attributi HTML

Per un controllo più preciso, puoi specificare i modelli direttamente nel tuo HTML utilizzando l’attributo data-dcs-composer-template:

<!-- Esempio: Pulsante Segnala -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="issue-report"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="report">
  Segnala un Problema
</div>

<!-- Esempio: Pulsante Vengo -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="event-rsvp"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="going">
  Vengo!
</div>

<!-- Esempio: Pulsante Invita -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="invite-friends"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="invite">
  Invita Amici
</div>

<!-- Esempio: Modello Personalizzato -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="feedback"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="custom1">
  Dai Feedback
</div>

Corrispondenza ID Modello

Il componente abbina gli ID modello dal parametro URL con gli ID modello configurati:

Parametro URL Impostazione Modello Scopo Predefinito
?composer_template=report template_1_id Segnalazioni bug, problemi
?composer_template=going template_2_id RSVP eventi
?composer_template=invite template_3_id Inviti
?composer_template=custom1 template_4_id Uso personalizzato
?composer_template=custom2 template_5_id Uso personalizzato
?composer_template=custom3 template_6_id Uso personalizzato

Come Funziona

Flusso di Applicazione del Modello

  1. Rilevamento URL: Quando un utente naviga verso un URL con ?composer_template=X, il componente memorizza l’ID del modello in sessionStorage
  2. Intercettazione Compositore: Quando il compositore si apre, il componente cerca un ID modello memorizzato
  3. Corrispondenza Modello: Trova il modello corrispondente in base all’ID
  4. Validazione Ambito: Verifica se il modello deve essere applicato (primo post, risposta o entrambi)
  5. Inserimento Testo: Pre-compila il compositore con il testo del modello
  6. Pulizia: Segna il modello come applicato per prevenirne la ri-applicazione

Flusso di Apertura Automatica

  1. Rilevamento Parametro: Verifica se l’URL contiene ?composer_template=X e se l’apertura automatica è abilitata
  2. Ricerca Argomento: Cerca argomenti esistenti con la combinazione di tag corrente
  3. Apertura Compositore: Se non vengono trovati argomenti, apre automaticamente il compositore
  4. Applicazione Modello: Il modello viene quindi applicato tramite il normale flusso sopra

Casi d’Uso Esempio

Sito Web Eventi

# settings.yml
template_2_id: "going"
template_2_text: "Ho intenzione di partecipare! 🎉\n\nNon vedo l'ora di vedere tutti lì."
template_2_use_for: "all_replies"

template_3_id: "invite"
template_3_text: "Vorrei invitare amici a questo evento.\n\nChi sto invitando:\n- \n\nPerché dovrebbero venire:\n"
template_3_use_for: "first_post"

Tracciamento Problemi

template_1_id: "bug"
template_1_text: "**Descrizione Bug:**\n\n**Passaggi per Riprodurre:**\n1. \n2. \n3. \n\n**Comportamento Atteso:**\n\n**Comportamento Effettivo:**\n"
template_1_use_for: "first_post"

template_4_enabled: true
template_4_id: "feature"
template_4_text: "**Richiesta Funzionalità:**\n\n**Caso d'Uso:**\n\n**Soluzione Proposta:**\n"
template_4_use_for: "first_post"

Coinvolgimento Comunità

template_1_id: "question"
template_1_text: "**La Mia Domanda:**\n\n**Cosa Ho Provato:**\n\n**Contesto Aggiuntivo:**\n"
template_1_use_for: "first_post"

template_2_id: "answer"
template_2_text: "Ecco cosa ha funzionato per me:\n\n**Soluzione:**\n\n**Perché funziona:**\n"
template_2_use_for: "all_replies"

Risoluzione dei Problemi

Modelli Non Applicati

  1. Controlla Parametro URL: Assicurati che l’URL contenga ?composer_template=X dove X corrisponde a un ID modello
  2. Abilita Modalità Debug: Attiva debug_mode nelle impostazioni per vedere i log della console
  3. Verifica Ambito Modello: Controlla se l’impostazione use_for corrisponde alla tua azione (creazione argomento vs risposta)
  4. Svuota SessionStorage: Apri la console del browser ed esegui: sessionStorage.clear()

Apertura Automatica Non Funzionante

  1. Controlla Impostazione: Assicurati che enable_auto_open_composer sia impostato su true
  2. Verifica URL: L’apertura automatica funziona solo quando l’URL contiene ?composer_template=X
  3. Controlla Argomenti Esistenti: L’apertura automatica si attiva solo quando NON esistono argomenti con la combinazione di tag
  4. Abilita Modalità Debug: Cerca i log con emoji :rocket: nella console

Viene Applicato il Modello Sbagliato

  1. Controlla ID Modello: Assicurati che il parametro URL corrisponda esattamente all’ID modello (sensibile alle maiuscole/minuscole)
  2. Verifica Priorità: Se più modelli potrebbero corrispondere, viene utilizzato il primo modello corrispondente
  3. Svuota Sessione: SessionStorage potrebbe contenere valori vecchi: sessionStorage.clear()

Problemi di Integrazione Docuss

  1. Aggiorna Docuss: Assicurati di avere le ultime versioni di:
    • dcs-client (con supporto composerTemplate in HtmlBased.js)
    • dcs-discourse-plugin (con generazione parametri URL in DcsIFrame.js.es6)
  2. Controlla Attributi HTML: Verifica che data-dcs-composer-template sia impostato correttamente sui trigger
  3. Ispeziona Rete: Controlla la scheda Rete degli Strumenti per Sviluppatori del browser per vedere se i parametri URL vengono aggiunti

Cronologia Versioni

v1.0.0 (Corrente)

  • Rilascio iniziale
  • Supporto per 6 modelli configurabili
  • Selezione modello basata su parametro URL
  • Apertura automatica compositore per link Docuss
  • Persistenza SessionStorage
  • Modalità Debug per la risoluzione dei problemi

Contribuzione

Hai trovato un bug o hai una richiesta di funzionalità? Apri un issue sul repository GitHub.

Licenza

Questo componente è open source e disponibile sotto la Licenza MIT.

Crediti

Sviluppato da Andy@Focallocal per l’uso con Docuss - un sistema per incorporare discussioni Discourse in qualsiasi sito web.