Webpage Integration: Post Detail Page

[henryajisegiri]

Goal

Render a published post with its full content pulled from Wagtail, surface next and related posts, and expose edit/delete controls for the post author.

Figma Link
Delete Post Link

---

Background

Posts are created through the post creation form and approved via Wagtail's moderation pipeline. The detail page is the canonical view of a published post.

---

Scope

Full-stack: Wagtail data fetching, next/related post logic, and author-specific controls.

---

Acceptance Criteria

Post content

The following fields are fetched from Wagtail and rendered on the page:

• Post type
• Post title
• Body content
• Image (if provided)
• Related library tags (if provided)
• Publish date

The following fields are fetched from the database:

• Author name
• Author avatar
• Author role/badge

Next post

• Surface the single next post by publish date relative to the current post's publish date.
• Displayed as a card with title, excerpt, publish date, related library tags, author avatar, and author name.

Related posts

• Display up to 3 posts that share at least one related library tag with the current post.
• If no library tag match, fall back to posts in the same category
• If no related posts exist, the section is not displayed.
• Each post is displayed as a card with title, description, publish date, related library tags, author avatar, and author name.

Author controls

Edit and delete controls are shown only when the authenticated user is the author of the post.

Edit

• Clicking Edit routes the user to the post creation page with all existing post fields pre-populated.
• DEV NOTE: Add a new route for the create a post page which accepts a post ID. This will be used to determine if and which post data should be pre loaded in the form for editing.
• On submission of the edited post, the same success and failure dialog flow applies as post creation.

Delete

• Clicking Delete triggers a confirmation dialog with the copy:

  "Are you sure you want to delete this post? This can't be undone."

• Confirming deletion deletes the post and routes the user to the posts feed page.
• Dismissing the dialog returns the user to the post detail page with no changes.

---

BE/FE Actions

Description	URL
Fetch post content from Wagtail
Fetch author name, avatar, and role/badge
Fetch the next post by publish date
Fetch up to 3 related posts by shared library tag
Delete the post

---

Out of Scope

• Post moderation workflow
• Post creation page
• Posts feed page