Ho creato un bookmarklet per creare l'indice dei post del forum

[ShunS (Shun Sakurai)]

Indice:

• Sommario
  
• Come usare
      Installazione
              Cosa fa il codice
      Generazione ToC
      Utilizzo ToC
  
• Note tecniche per persone tecniche
  
• Screenshot
  

Ho creato un bookmarklet per generare un indice (ToC) pieghevole come quello mostrato sopra.
Spero che aiuti gli appassionati membri della community che scrivono testi lunghi!

Sommario

A volte scrivo argomenti/post lunghi e avevo bisogno di un ToC per una lettura più facile.
Ho trovato alcuni lavori esistenti, come DiscoTOC - automatic table of contents, ma avevo bisogno di uno strumento solo per me, senza dover installare qualcosa in tutta la community.

Dopo aver pubblicato un post strutturato, fai clic sul bookmarklet e il ToC verrà copiato negli appunti. Modifica il post e incolla il ToC in cima!

Come usare

Installazione

1. Salva una pagina come segnalibro.
2. Modifica il nome, ad esempio “ Copia ToC forum negli appunti”.
3. Modifica l’URL e incolla il seguente codice. Personalizza il codice se necessario, vedi le due voci “Opzionale” di seguito.

javascript:(function() {
	const copyForumTocToClipboard = function() {
		const urlMatch = window.location.href.match(/\/t\/[^\/]*\/\d+\/?(\d*)/);
		if (!urlMatch) return;

		const postIndex = urlMatch ? urlMatch[1] : 1;
		const anchors = document.querySelectorAll('#post_' + postIndex + ' div.cooked h6 a.anchor,h5 a.anchor,h4 a.anchor,h3 a.anchor,h2 a.anchor,h1 a.anchor');
		if (!anchors) return;

		let toc = '';
		anchors.forEach(anchor => {
			toc +=
				' '.repeat((anchor.parentNode.nodeName[1] - 1) * 4) +
				`<a href="${anchor.href}">${anchor.parentNode.textContent}</a><br>\n`;
		});
		if (!toc) return;

		navigator.clipboard.writeText('<details open><summary>Table of contents: </summary><ul>\n' + toc + '</ul></details>');
	};

	copyForumTocToClipboard();
})();

Cosa fa il codice

1. Verifica se l’URL sembra essere un post della community: https://{dominio}/t/{titolo}/{ID_argomento}(/{indice_post}).
2. Verifica se sono inclusi nel post gli ancoraggi (intestazioni come <h1> e # ).
3. Genera il codice HTML per il ToC.
4. Copia il codice negli appunti.

Generazione ToC

1. Pubblica un post con una struttura (HTML <h1>, <h2>, … e Markdown # , ## , …). Discourse assegnerà ancoraggi a ciascuna intestazione.
2. Assicurati che il tuo post sia selezionato guardando la barra di avanzamento (ad es. 1/22) o l’URL (ad es. /1).
3. Fai clic sul bookmarklet nella barra dei segnalibri.
4. Il ToC viene copiato negli appunti.

Utilizzo ToC

1. Fai clic sull’icona della matita per modificare il post.
2. Incolla il codice in cima.
3. Verifica se le voci del ToC sono visualizzate correttamente (Problema noto: il bookmarklet perde alcune emoji).
4. (Opzionale) Modifica/traduci “Table of contents”.
5. (Opzionale) Elimina open se desideri che il ToC sia compresso per impostazione predefinita.
6. Fai clic su “Salva Modifica”. Se lo fai pochi minuti dopo aver pubblicato il post, l’icona della matita “modificato” non verrà aggiunta al tuo post.

Note tecniche per persone tecniche

• Puoi anche copiare e incollare il codice JavaScript nella console degli sviluppatori.
  • Ho racchiuso il codice in una funzione perché return; non funziona quando viene utilizzato al di fuori delle funzioni.
• L’approccio '\u0026nbsp;'.repeat() sembra disordinato durante l’anteprima dell’argomento, ma secondo me ha un aspetto migliore nel post effettivo (rispetto all’uso di <li></li>) .
• Quando ho testato querySelectorAll, in qualche modo il primo elemento in h6 a.anchor,h5 a.anchor, ... non è stato trovato. Ho messo h6 all’inizio perché è probabilmente quello usato meno frequentemente.
• Il bookmarklet potrebbe smettere di funzionare se Discourse cambia la sua interfaccia utente/DOM. Per favore, rispondimi se trovi errori.

Screenshot

Essendo un nuovo utente su meta.discourse.org, non posso aggiungere più immagini, quindi ho raggruppato tutti gli screenshot in un’unica immagine:

[anderer]

Ohh bello, si potrebbe estendere per creare un indice di tutto il post con tutte le risposte?

[Lhc_fl (Linca)]

I post di solito vengono caricati circa 20 alla volta, immagino che sarebbe difficile creare un indice di tutti i post in una volta sola

[mcwumbly (Dave McClure)]

Fantastico! Grazie per aver condiviso @ShunS!

Mi piace molto come hai inquadrato il problema che stai risolvendo con questo strumento e come è progettato per soddisfare le esigenze di utenti importanti sui siti che potrebbero non avere i permessi per modificare le cose sul sito stesso, così come esistono oggi.

[ShunS (Shun Sakurai)]

Grazie per le risposte

Come dice @Lhc_fl, l’approccio DOM (HTML/JavaScript) è limitato nel numero di elementi che possiamo gestire. L’API di Discourse potrebbe aiutare per tali azioni.
Un altro problema nella creazione di un TOC per le risposte è che non è facile definire quale sarà il titolo dell’intestazione per ogni risposta. Potremmo usare informazioni come l’autore e la data, ma non sono sicuro di quanto sia più utile della barra di avanzamento dello scorrimento esistente.

Grazie @mcwumbly!

[Lilly (Lillian Louis)]

@ShunS questo è molto bello, grazie per aver condiviso. Benvenuto anche in Meta

[RBoy]

Questo è favoloso ed è esattamente quello che stavo cercando. Sembra risolvere questo problema

Automatic TOC inline/top of post

here is an alternative solution that’s very cool and outside the box

Perché non sottoporlo a Discourse per includerlo come plug-in o funzionalità ufficiale? Potrebbe essere incluso nella barra degli strumenti del composer/editor per inserire automaticamente un TOC nel post.

[RBoy]

Ho un suggerimento, è possibile aggiungere un punto all’inizio della riga del TOC? Nel mio caso, ogni intestazione è una riga lunga, quindi il punto aiuta a differenziare una voce dall’altra.

[ShunS (Shun Sakurai)]

Ciao @RBoy, grazie per il feedback e il suggerimento!

Un plugin per l’editor sarebbe fantastico, ma richiederebbe molto impegno per leggere il codice sorgente di discourse per capire la logica di gestione delle emoji e la definizione del testo/ancora dell’intestazione e creare un repository del plugin.

Un plugin (apparentemente) semplice come Spoiler Alert è un grande repository e non ho la larghezza di banda per impegnarmi completamente nello sviluppo. Quindi, spero che Discourse possa dare priorità alle richieste di funzionalità come Automatic Table of Contents generation e sviluppare una funzionalità nativa nel frattempo

---

Di seguito è riportata la versione con i punti elenco. Gli spazi tra <ul> e </ul> sono piuttosto grandi, quindi ho preferito la versione originale senza punti elenco.

Screenshot:

Codice:

javascript:(function() {
	const copyForumTocToClipboard = function() {
		const urlMatch = window.location.href.match(/\/t\/[^\/]*\/\d+\/?(\d*)/);
		if (!urlMatch) return;

		const postIndex = 1;
		const anchors = document.querySelectorAll('#post_' + postIndex + ' div.cooked h6 a.anchor,h5 a.anchor,h4 a.anchor,h3 a.anchor,h2 a.anchor,h1 a.anchor');

		let toc = '';
		let currentLevel = 1;
		anchors.forEach(anchor => {
			newLevel = anchor.parentNode.nodeName[1];
			levelChange = newLevel - currentLevel;
			toc +=
				((levelChange >= 0) ? '<ul>'.repeat(levelChange) : '</ul>'.repeat(levelChange * -1)) +
				`<li><a href="${anchor.href}">${anchor.parentNode.textContent}</a></li>`;
			currentLevel = newLevel;
		});
		if (newLevel > 1) toc += '</ul>'.repeat(newLevel - 1);
		toc = '<details open><summary>Table of contents: </summary><ul>\n' + toc + '</ul></details>';

		navigator.clipboard.writeText(toc);
	};

	copyForumTocToClipboard();
})();

[supermathie (Michael Brown)]

@RBoy

un plug-in o una funzione ufficiale

Abbiamo già un plug-in ToC e non è necessario mantenere il ToC nel corpo del post.

Lo consiglio vivamente se installato, poiché non può andare fuori sincronia.

Questo strumento sembra ottimo per quando DiscoToC non è disponibile. Buon lavoro!

[Lhc_fl (Linca)]

Questo può essere fatto usando un componente tema. Puoi dare un’occhiata al metodo decorateCookedElement dell’api, dovrebbe essere utile.

[ShunS (Shun Sakurai)]

Ciao @supermathie, grazie per la risposta.

quando DiscoToC non è disponibile

Sì, questa è la differenziazione. Ho creato il bookmarklet perché non sono nella posizione di decidere quale “componente tema” installare nel forum in cui mi trovo di solito, e solo poche persone scrivono testi lunghi che necessitano di un TOC.

---

Grazie @Lhc_fl, è molto utile!

Ho cercato nel repository GitHub e ho trovato quel metodo. Considererò di svilupparlo (solo) quando avrò molta banda e vedrò molta richiesta per la funzionalità.

Tuttavia, se un componente tema può essere aggiunto alla community, esiste già DiscoTOC come ha detto @supermathie

[RBoy]

Purtroppo quel plug-in è totalmente inutilizzabile quando l’intestazione ha più di poche parole, poiché crea un pasticcio completo. Se le intestazioni sono lunghe una o due righe (ad esempio una pagina FAQ), allora il plug-in Disco TOC crea un pasticcio completo della pagina, motivo per cui avevo sollevato questa richiesta per un TOC inline (che questo fornisce) ed è perfetto per tali pagine

Automatic TOC inline/top of post

Is it possible to have the TOC within the post itself at the very top (kind of like what Word does with generating an automatic TOC). The issue is that it’s making the side look very cluttered because the heading are actually long sentences in our case and that’s making the whole page unreadable. Having it embedded within the topic itself at the very top would solve this issue and still allow us easy updates to the Wiki while having the plugin automatically update the TOC and not clutter the si…

Con la quantità di genialità/talento tra i team che costruiscono discourse non dovrebbe essere così difficile includere questa straordinaria funzionalità come alternativa a DiscoTOC per darle una gamma di utilizzo molto più ampia.