Conversation Map (A mini-map on Discourse timeline)

Customization Theme component

AI-generated summary

keegan introduced discourse-conversation-map, a theme component that adds a mini-map to Discourse timelines, allowing users to preview posts and navigate without losing their reading position. The feature supports desktop (hover-to-expand with drag-scrubbing) and mobile (bottom sheet interface), includes landmarks for bookmarks and accepted answers, and requires no backend plugin.

pmusaraj tested the component locally and noted several issues: assign/voted markers are not clickable, the map is difficult to dismiss (requiring multiple clicks due to suspected triple rendering), and images occupy excessive space in the preview. Canapin reported that thumbnails fail to appear when using the Theme Creator preview.

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.

10 Likes
2

very cool Keegan - nice work :star_struck:

1 Like
3

Nice!

I took this for a spin locally, it works well. A couple of comments or possible feature requests:

  • I kept trying to click on the assign/voted mini-markers, but they’re not clickable
  • once the mini-map is invoked and I click on a location, it stays visible. Clicks outside the map don’t close it, even clicking X takes a few tries before mini-map can be dismissed. Actually, it takes 3 clicks, I suspect the mini-map is rendered three times (I can see the drop shadow get softer after every click.)
  • this one is maybe a personal preference: it feels to me like the images take up too much room in the mini-map, I guess it depends on total number of images in a topic of course
1 Like
4

For some reasons thumbnails don’t appear when I try the component on the theme creator:

image
image1391×932 223 KB

2 Likes