Webpage Integration: Posts Feed

[henryajisegiri]

Goal

Wire up the posts feed with data from the database, implement search, filtering, and sorting, and render the user card and empty state.

Figma Link

---

Scope

Full-stack: data fetching, search and filter logic, feed header, user card, and empty state.

---

Acceptance Criteria

Posts list

• Posts are fetched from the database and rendered in the feed.
• Each post card displays: title, description, publish date, post type, related library tags, thumbnail (if available), author avatar, author name, and author role/badge.
• Thumbnails are pulled for posts with an image or video.

Search

• Search covers all post fields: title, body content, post type, author name, and library tags. Dev Note: @jlchilders11 on how wagtail supports search
• Wagtail support search natively on page queryset: https://docs.wagtail.org/en/latest/topics/search/index.html. While there may be some indexing/field discussion, the actual implementation should be as simple as qs.search('{{query}}')
• Results update on form submission.

Filters

• Post type filter: All, News, Blogs, Links, Videos. Discussions, Achievements, and Issues are deprioritized and out of scope for this ticket. Hot Posts triggers the new ranking algorithm that takes views and recency into account.
• Library filter: Filters the feed to posts tagged with the selected library. The dropdown is populated from the libraries list API.
• Applying any filter resets pagination to page 1.
• If no results based on search term or filters, display an empty state and show related posts based on library within the category searched

Feed header

• The feed header updates to reflect the active search or filter state.
• Template strings:
  • Search only: Results for "{search term}"
  • Post type filter only: {Post Type} Posts — e.g. News Posts
  • Post authored by: Posts by {Author Name}
  • Library filter only: {Library Name} Posts — e.g. Boost.Beast Posts
  • Both post type and library filters active: {Post Type} Posts — post type takes precedence, library name is not shown.
• Default header (no filters): Latest Posts

URL-driven filter state

• When the user arrives at the feed via a URL that includes filter parameters (e.g. from a library sub-page "View Posts" link), the feed header and filters are pre-populated to match.
• Example: navigating from the Boost.Beast library page sets the library filter to Boost.Beast and displays Boost.Beast Posts in the feed header.

User card

Logged in

• Displays: avatar, username, role/badge, member since date, and org affiliation.
• CTA: Create Post — routes to the post creation page.

Logged out

• Displays the card with the heading "Create an account" and the copy: "Advance your career, learn from experts, and help shape the future of Boost and C++."
• CTA: Sign Up Now — routes to the sign up page.
  Dev/QA Note: @jlchilders11 on how we can test the logged out state
  The logged out state can be tested by navigating to the admin (localhost:8000/admin/) and changing the flag for v3 from unknown to yes. This will cause all users on the site to experience the V3 version of the site. You can then either log out or open a private browsing window and navigate to the post feed to see the logged out version.

---

BE/FE Actions

Description	URL
Fetch paginated, filtered, and searched posts. Response includes results and total_count
Fetch library list for the library filter dropdown
Fetch logged-in user metadata for the user card

---

Out of Scope

• Discussions, Achievements, and Issues post type filters
• Pagination controls
• Post card component
• Post creation page
• Sign up page