Utiliser Discourse pour créer un blog ou une plateforme de défilement type Reddit, X ou Facebook

Je crée ce sujet pour documenter mon parcours dans ma tentative de transformer Discourse en une plateforme plus visuelle et à défilement continu — quelque chose de plus proche de l’expérience de navigation proposée par Reddit, X et Facebook.

J’utiliserai ce sujet pour partager ce que j’essaie, ce qui fonctionne, ce qui ne fonctionne pas, les composants que j’utilise et les problèmes auxquels je suis confronté. J’espère que cela aidera également toute autre personne intéressée à utiliser Discourse pour autre chose qu’une mise en page de forum traditionnelle.

Le point de départ de ce projet a été la règle 90–9–1.

Elle suggère que sur la plupart des réseaux sociaux, blogs, etc. :

  • 90 % des utilisateurs naviguent principalement et consomment du contenu.

  • 9 % réagissent, aiment, partagent ou commentent occasionnellement.

  • 1 % créent activement la majeure partie du contenu.

Bien sûr, les pourcentages exacts varieront d’une communauté à l’autre, mais le principe reste pertinent : la plupart des visiteurs sont des lecteurs, pas des contributeurs.

Discourse est excellent pour servir les 9 % et les 1 %. Il est construit autour des discussions, des réponses et de la participation active. Cependant, je souhaite le rendre tout aussi attrayant pour le groupe beaucoup plus important qui souhaite simplement ouvrir le site et parcourir du contenu frais et intéressant.

Ce que je tente de construire

Je souhaite utiliser Discourse pour créer un flux plus visuel et continu (défilement compulsif) similaire à celui de Reddit, X ou Facebook.

L’expérience ressemblerait idéalement à ceci :

  • Ouvrir la page d’accueil et voir immédiatement un flux de sujets pertinents.

  • Faire défiler continuellement d’un sujet à l’autre.

  • Prévisualiser le contenu du sujet sans ouvrir de page séparée.

  • Voir des images, des vidéos et des extraits directement dans le flux.

  • Aimer, mettre en signet ou répondre lorsque quelque chose attire votre attention.

  • Faire défiler automatiquement le contenu déjà consulté pour le mettre de côté.

  • Revenir plus tard et voir des sujets frais ou non vus plutôt que la même page d’accueil à chaque fois.

  • Personnaliser progressivement le flux en utilisant les catégories, les étiquettes et les sujets avec lesquels l’utilisateur interagit.

Certaines personnes appelleraient cela le « doom scrolling », mais c’est aussi simplement la façon dont un très grand nombre de personnes consomment désormais le contenu en ligne. Elles peuvent lire des dizaines de publications sans jamais commenter, et pourtant elles restent de vrais utilisateurs générant des vues, partageant des liens et potentiellement revenant chaque jour.

Pourquoi le construire avec Discourse ?

Discourse fournit déjà la plupart des parties difficiles :

  • Comptes et profils utilisateurs

  • Catégories et étiquettes

  • J’aime, signets et notifications

  • Niveaux de confiance et modération

  • Création de sujets et réponses

  • Suivi des sujets lus et non lus

  • Sujets suggérés et connexes

  • Un système mature de plugins et de composants de thème

Ce qui semble manquer, c’est un flux conçu principalement autour de la découverte et de la consommation passive. (Discourse n’a évidemment pas été conçu pour cela)

Où j’en suis pour l’instant

  1. J’ai commencé avec le formidable thème Redditish de @awesomerobot, que j’ai dû forker pour pouvoir modifier divers aspects, tels que la suppression de la barre latérale personnalisée. J’ai également beaucoup modifié le CSS pour le concevoir comme nous le souhaitions.
  2. L’activation des Vues imbriquées était indispensable, car cela couvre le style nécessaire pour ce type de site.
  3. J’ai créé et ajouté un menu défilable de style YouTube qui affiche toutes les catégories et les liens personnalisés. J’ai utilisé Custom Top Navigation Links pour personnaliser et ajouter des liens.
  4. Une modale d’aperçu des sujets était indispensable et j’ai commencé à la concevoir, mais la légende @Don a construit une meilleure version qui peut être trouvée ici
  5. Une barre latérale droite statique et mise en cache partout était indispensable, j’ai donc commencé avec right sidebar blocks, puis j’ai créé un composant de thème pour l’afficher sur les sujets, etc.
  6. En utilisant des liens d’en-tête personnalisés (icônes), j’ai ajouté un bouton « Créer une publication » dans l’en-tête pour rendre le conteneur plus propre.
  7. Les images sur les publications sont centrées avec un arrière-plan flou pour un rendu plus net (similaire à Reddit)
  8. Définir les extraits de sujets à 150 caractères et les afficher entre le titre et l’image sur les cartes de sujet était indispensable (similaire à Facebook et X)

Les prochaines étapes consisteraient à créer un flux dédié qui pourrait :

  1. Commencer avec du contenu récent d’une période définie, comme les 14 derniers jours.

  2. Prioriser les sujets des catégories et des étiquettes suivies par l’utilisateur.

  3. Mélanger des sujets populaires ou en tendance pour la découverte.

  4. Enregistrer quand un sujet a véritablement été consulté ou survolé.

  5. Réduire la priorité des sujets consultés sans les masquer définitivement.

  6. Permettre des réactions et des réponses directes depuis le flux.

Cela ne remplacerait pas les listes de sujets traditionnelles ou les discussions. Ce serait une manière supplémentaire de découvrir et de consommer le même contenu Discourse.

Suivez le parcours

Je continuerai à mettre à jour ce sujet au fur et à mesure de l’évolution du projet, y compris les composants que je teste, les modifications que j’apporte et les obstacles auxquels je suis confronté.

Je serais également intéressé d’entendre parler de quiconque a tenté quelque chose de similaire, en particulier concernant :

  • Si les données de suivi de lecture existantes pourraient soutenir cela.

  • Comment un flux pourrait fonctionner pour les utilisateurs anonymes et nouvellement inscrits.

  • Combien de personnalisation pourrait être obtenue sans introduire un algorithme de recommandation complexe.

  • Si les aperçus continus des sujets créeraient des problèmes de performance importants.

L’objectif est de reconnaître que les 90 % silencieux sont une partie importante d’une communauté et de leur offrir une expérience conçue autour de la façon dont ils utilisent réellement Internet.

Le site de test que j’utiliserai pour ce projet est

https://www.m8wtf.com/

11 « J'aime »

J’aime beaucoup cette idée — je suis au courant. J’ai jeté un coup d’œil rapide à votre démo et c’est super ! Je reviendrai quand j’aurai un peu de temps.

4 « J'aime »

Nous avons essayé d’utiliser la page Unified New de Discourse comme page d’accueil, car elle semblait offrir exactement le fil d’actualité que nous souhaitions, grâce à un plugin qui supprime les messages de /new lorsque l’utilisateur fait défiler au-delà du viewport. (@Don a réussi à le faire fonctionner)

La confusion est née du fait que j’ai toujours testé Discourse avec un compte établi et connecté, si bien que ma page Unified New était toujours remplie de messages. Je n’avais pas pleinement compris comment elle fonctionnait pour les tout nouveaux utilisateurs.

Après avoir créé un nouveau compte de test, nous avons découvert que Unified New était complètement vide, car les anciens sujets n’étaient pas considérés comme « nouveaux » pour cet utilisateur. Cela signifie qu’elle ne peut actuellement pas fournir le fil d’accueil peuplé que nous avions prévu.

Wow, merci beaucoup pour ton commentaire et tes retours positifs. Je sais que ce n’est pas vraiment ton truc et que ça va à l’encontre de l’objectif initial de Discourse.

@don travaille sur un nouveau plugin qui introduit un nouveau système de style /feed et une page d’accueil. Celui-ci affiche aux utilisateurs les nouveaux articles, puis les supprime si un utilisateur les défile (en utilisant le viewport). Si tous les articles ont été vus, il redirige vers /latest. Il s’agit d’un travail en cours.

1 « J'aime »

Un immense merci à @don et à son nouveau plugin non encore publié : le flux fonctionne désormais correctement, ce qui permet aux utilisateurs de toujours voir du contenu frais. Les réponses, en revanche, se comportent de la même manière qu’avant : elles ne disparaissent pas de la zone de visualisation.

Les nouveaux utilisateurs voient désormais tous les messages des 14 derniers jours lors de leur inscription, mais cette durée peut être ajustée dans l’intervalle par défaut de la page d’accueil.

2 « J'aime »

Le prochain point à l’ordre du jour est la création d’un composant/plugin pour personnaliser le flux, quelque chose comme :

Score du flux =

40 % d’intérêts
25 % de fraîcheur
15 % de comportement antérieur
10 % de popularité du site
10 % d’aléatoire/découverte

ainsi, un flux ressemblerait à ceci :

WARDOGS Early Access sort jeudi
Nouvelle mise à jour PS5 provoque un bug étrange sur la manette
Quelqu’un construit un scooter électrique à 112 km/h
Netflix confirme une nouvelle saison des Inbetweeners
Article WTF de Glasgow
Article populaire aléatoire sur la Cuisine et les Boissons

Pour un nouvel utilisateur, quelque chose comme :

25 % Jeux vidéo
15 % Télévision et Cinéma
15 % Actualités WTF
15 % Technologie
10 % Cuisine et Boissons
10 % Sports
10 % Véhicules et Sensations fortes

Ensuite, après avoir parcouru 30 à 50 publications, leur flux commence à s’adapter.

Ou j’ai aussi envisagé de créer un composant qui, lors de l’inscription, leur permet de choisir leurs centres d’intérêt, par exemple des catégories :

Qu’est-ce qui vous intéresse ?

:check_box_with_check: Jeux vidéo
:check_box_with_check: Actualités WTF
:check_box_with_check: Technologie
☐ Politique
:check_box_with_check: Télévision et Cinéma
☐ Sports
:check_box_with_check: Véhicules et Sensations fortes
☐ Cuisine et Boissons

Cela va prendre du temps et des tests.

1 « J'aime »

J’aime le fait qu’en version mobile, cliquer sur un sujet affiche un aperçu dans une feuille, et qu’on peut ensuite choisir d’aller plus loin ou de la fermer pour continuer à parcourir son fil. Beau travail !

1 « J'aime »

C’est dû au composant de thème de @don :wink: Topic Preview Modal

2 « J'aime »

Quel est l’objectif de ce projet ? Un thème, un composant ou quelque chose de plus unifié ? Un thème accompagné de composants, et ainsi de suite ?

C’est exactement le genre de chose que j’attendais depuis des années. L’expérience utilisateur de Discourse m’a toujours empêché de l’utiliser. Elle est… vraiment pas… à la hauteur de ce que Discourse est en soi.

Je vous souhaite bonne chance dans cette aventure.

Votre démo a l’air super sur mobile.

1 « J'aime »

Il y aura un guide :slight_smile: Je vais téléverser tous les composants que j’ai créés sur GitHub, accompagnés de liens vers des composants que d’autres ont déjà créés ou sont en train de créer. Il me semblerait mal de tout regrouper sous mon nom, étant donné que d’autres y ont largement contribué.

Exactement. Le socle est génial, c’est d’ailleurs la raison pour laquelle j’utilise Discourse afin de voir si je parviens à créer quelque chose de correct qui ne ressemble pas au Discourse habituel.

1 « J'aime »

Il existe certains thèmes qui regroupent des composants. Peut-être faudrait-il en tenir compte. Et, de manière universelle, utiliser peut-être des icônes Lucide ?

1 « J'aime »

Ça a vraiment l’air très bien. Il existe un theme-creator pour décorer les publications de l’auteur d’un sujet après sa première publication.

D’accord, en regardant un autre sujet avec des réponses, je vois que tu utilises peut-être déjà le badge TC Author de Don.

Très beau travail.

2 « J'aime »

Non, c’est du CSS personnalisé que j’utilisais avant de l’installer.

1 « J'aime »

Comme Topic List Previews (TLP)?

Bon exemple ici : https://www.starzen.space/

Pas vraiment, plutôt du côté du back-end que des aspects visuels.

1 « J'aime »

Oh d’accord, cette affirmation m’a orienté dans une certaine direction, et si je devais évaluer TLP par rapport à vos autres exigences :

  • Ouvrir la page d’accueil et voir immédiatement un fil de sujets pertinents.

    :white_check_mark:

  • Faire défiler en continu d’un sujet à l’autre.

    :white_check_mark:

  • Prévisualiser le contenu du sujet sans ouvrir une page séparée.

    :white_check_mark: (bien que cela pourrait être plus sophistiqué - j’ai travaillé sur une fourche de Discourse avec une version beaucoup plus sophistiquée de cette fonctionnalité)

  • Voir des images, des vidéos et des extraits directement dans le fil.

    2/3 :slight_smile: (j’ai travaillé sur une fourche de Discourse avec une version beaucoup plus sophistiquée de cette fonctionnalité qui lit des vidéos en direct dans la liste des sujets :+1:)

  • Aimer, mettre en signet ou répondre lorsqu’un élément attire votre attention.

    :white_check_mark:

  • Faire automatiquement disparaître le contenu déjà défilé.

    :white_check_mark:

  • Revenir plus tard et voir des sujets nouveaux ou non vus plutôt que la même page d’accueil à chaque fois.

    :white_check_mark:

  • Personnaliser progressivement le fil à l’aide des catégories, des balises et des sujets avec lesquels l’utilisateur interagit.

    :cross_mark: pas encore, mais côté back-end, c’est certain.

au fait, ce sujet est déjà revenu, par exemple :

J’ai maintenant tous les lus, mais personne ne l’a réellement fait.

1 « J'aime »

J’en connais au moins un, mais il est à code source fermé.