Conversation Map (A mini-map on Discourse timeline)

סיכום מבוסס בינה מלאכותית

keegan introduces Conversation Map, a Discourse theme component that adds a mini-map to the topic timeline. The tool allows users to preview and explore posts without losing their reading position. On desktop, hovering expands the map to show excerpts, images, or galleries, with click or drag interactions for navigation. On mobile, tapping the post count opens a bottom sheet for previewing and navigating. Key features include support for text/image/gallery previews, landmarks for bookmarks and answers, keyboard navigation, dark mode compatibility, and optional integration with Discourse Solved and Assign plugins. Configuration settings include minimum_posts and sample_posts to control when the map appears and how many posts are inspected.

The component received positive feedback, with Lilly praising the work. pmusaraj tested it locally and provided detailed feedback, noting that assign/voted mini-markers were not clickable, the mini-map required multiple clicks to dismiss (suggesting a rendering issue), and images in the mini-map felt too large.

In response, keegan addressed the issues:

  • Clickable Markers: Fixed to ensure assign/voted markers are interactive.
  • Dismissal Behavior: Keegan could not reproduce the multiple-click issue, noting it closes immediately upon clicking outside or pressing ‘X’, though clicking near the timeline might cause confusion.
  • Image Size: Clarified that feedback on image size could refer to either the pop-out preview or the map itself, offering to adjust the pop-out.
  • Thumbnail Display: Canapin reported missing thumbnails in the Theme Creator. Keegan explained this was due to filtering that only allowed images from the site’s domain, excluding CDN-served uploads in the creator environment. This was fixed to allow uploads from the site’s CDN.

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.

12 לייקים

very cool Keegan - nice work :star_struck:

לייק 1

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
2 לייקים

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

3 לייקים

Thanks for the feedback!

This should now be fixed :link:

I can’t seem to repro this. It closes for me right away on pressing X or clicking outside. Though if I do click too close to the timeline i see it doesn’t close. Could that be why?

Are you referring to the popout next to the minimap or the minimap itself? I can make the images smaller in the pop-out if that’s what you mean

Yes, the component only loaded images if the images came from the site’s own domain. It looks like theme creator serves uploads from a CDN so it got filtered out. I updated the component so now it allows the site’s upload CDN. :link: Thanks for the catch!

3 לייקים