Conversation Map (A mini-map on Discourse timeline)

Customization Theme component

AI-generated summary

This discussion introduces Conversation Map, a Discourse theme component by keegan that adds a mini-map to the topic timeline. The feature allows users to preview and explore topics without losing their reading position, supporting both desktop and mobile interfaces.

On desktop, hovering over the timeline expands the map to show post previews (text, images, or galleries). Users can click landmarks or drag to scrub through the topic. On mobile, tapping the post count opens a bottom sheet where users can drag a rail or tap landmarks to preview posts; navigation only occurs when explicitly confirmed, preserving the original reading position otherwise. A “Return to #…” feature restores the previous location after navigating.

Key features include support for text, image, and gallery previews, landmarks for bookmarks and accepted answers (if available), keyboard navigation, reduced-motion support, and native dark mode compatibility. No backend plugin is required, though optional integration with Discourse Solved and Assign is supported. Configuration options include minimum_posts (default 12) to control when the map appears and sample_posts (default 12) to limit inspected posts. Lilly praised the component as “very cool.”

1
:information_source: Summary Preview and explore topics without losing your reading position
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository GitHub - keegangeorge/discourse-conversation-map: A hover-expanding conversation minimap for the Discourse topic timeline · GitHub
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Conversation map adds a mini-map to Discourse’s topic timeline, making it easier to find a reply, peek at an image, or explore another part of a discussion without losing your place. The timeline stays compact while you’re reading, with different interactions for desktop and mobile.

Preview

Desktop

Mobile

How it works

On desktop, hover over the timeline to expand the map and preview posts without moving the topic. Previews can include an excerpt, an image, or a small gallery. Click the map or a landmark to jump directly to that post, or hold and drag to scrub through the topic.

On mobile, tap the existing post count to open the map in a bottom sheet. Drag the rail or tap a landmark to preview a post. The selection box follows your finger, but the topic stays where it is until you tap Open post. Closing the sheet without navigating leaves your reading position unchanged.

After navigating, Return to #… brings you back to your original post and reading offset.

Features

  • Text, image, and gallery previews.
  • Landmarks for bookmarks, accepted answers, and assignments when that information is available.
  • Keyboard navigation and reduced-motion support.
  • Native Discourse colors, including dark mode.
  • No backend plugin required. Discourse Solved and Discourse Assign are optional for their respective landmarks.

Settings

Setting Default Description
minimum_posts 12 Keep the native timeline on topics with fewer posts than this.
sample_posts 12 Maximum number of evenly spaced posts inspected when opening the map. Set to 0 to disable this sampling.

Up to eight known landmark posts may still be inspected when sampling is disabled.

4 Likes
2

very cool Keegan - nice work :star_struck:

1 Like