Homepage / feed

[asaunier]

This issue gives some details, suggestions and hypothesis concerning the homepage.

Goals of the homepage

• attract people and turn them into new users/contributors => attractive/modern layout
• give a good overview of the recent activity on the website
• provide social tools => see what "friends" have done, share contents, etc.
• display special messages from the Association ("announce")

  Guest vs authenticated users

A similar homepage is served for both types of users: a feed of activity, using a "cards" layout. The main differences are:

• auth users see a feed filtered on their preferences and "favorite" users/routes/regions/... Anonymous users see a non-filtered feed.
• anonymous users see a welcome block at the top of the feed with a short intro, buttons redirecting to the guidebook and forum, a big nice image as background.

  Questions

• What image to use for the anonymous welcome block? Should it be chosen randomly among a pool of nice images? How?
• Where do Association's "announces" come from?
• How to make the "welcome image" responsive?
• The feed gives news about the forum topics: do we have a way to mark threads as favorites in Discourse? => perhaps use the "bookmark this post" feature? Or any topic from some categories? How to configure this?
• Could we use varnish to cache the page, for instance for anonymous users (no customized content)?
• Will the feed always be loaded using AJAX? Or will the first entries added in the HTML using Mako (as for list pages)?

  Suggested simplifications

(for a first version?)

• remove the "announce" (we have no details about it).
• ask the Association to provide an image for the welcome block. This image will always be used (no random choice among a pool). Or even postpone the image integration.
• postpone forum topic support??

  Feed

See also list pages for common approaches:

• layout (cards) is similar
• the content of the cards might be similar as well (see declinations in wireframes)
• The feed uses a multi-column/multi-line card layout, each entry (outing, article, forum thread, etc.) being a card, whose layout depends on its type (colors and content).
• New cards are added using infinite scrolling technics.
• Possible cards:
  • outings from favorite users and/or in favorite regions (with activity filters)
  • last response from favorite/bookmarked forum theads
  • any "favorite" document that has just been edited
  • any document that has just been linked to a "favorite" document => the feed is based upon the "favorite/follow" system and advertise changes/new associations to favorite pages. What about comments made to those documents?

    Suggested implementation

The homepage must be fast. Even though its content will greatly vary for authenticated users. Anonymous users will see the same feed at a given time (could we then use Varnish and cache the page).

If the feed is loading using an AJAX request (+ some others when scrolling down), the main HTML page generated by Pyramid/Mako will be the same for all => dogpile/varnish cached? It depends if search engine indexing from the homepage is important.

Data must come from a dedicated "feed" table, to avoid making complicated SQL queries with joins etc.. Its attributes could be :

• type (sortie, iti, image, article, discussion, ...)
• date
• user_id (contributor that made the change)
• title
• overview
• document_id or topic_id
• activities
• lang
• point geom if possible (or region?)

Actions such as :

• creation of a document
• edition of a document
• association
• comment
• replies to a forum topic would add an entry (event) in the "feed" table.

  TODO

API:

• [ ] create the model for the "feed" table
• [ ] fill the "feed" table when actions are done on documents or in the forum
• [ ] create a view to get the last feed entries depending on the users settings (filters) or on a user id (for the personal feed in a user profile page).
• [ ] service for editing user preferences (filters on regions, activities, etc.)
• [ ] service for marking documents as "favorite"

UI:

• [ ] user preferences interface
• [ ] button to mark a document as favorite
• [ ] "welcome block" in homepage for anonymous users
• [ ] feed directive (with infinite scrolling) requesting the "feed" service of the API

[asaunier]

Could we inspire for instance from the Trello activity feed?

[tsauerwein]

I haven't started thinking about the implementation. But maybe it would make sense to use a framework to manage the activity feed, e.g. https://github.com/tschellenbach/Stream-Framework

[asaunier]

For infinite scrolling see https://github.com/c2corg/v6_ui/issues/21

[tsauerwein]

But maybe it would make sense to use a framework to manage the activity feed, e.g. https://github.com/tschellenbach/Stream-Framework

The Stream framework looks interesting: https://getstream.io/docs/#social-network Depending on what exactly we need, this might be a good option.

[asaunier]

Replaced by https://github.com/c2corg/v6_ui/issues/625