matrix-org / matrix-org/matrix-viewer
Use URL hash fragment anchor for message permalink, add `id` attribute of message to jump on it
- Dominant language
- JavaScript
- Stars
- 84
- Forks
- 10
- PR merge metrics
- No merged PRs in 30d
Description
Include the Matrix event ID in the URI hash, ex:
```
https://archive.matrix.org/r/securemessagingapps:matrix.org/date/2023/05/30#$5cQZRtG9bsleXZI2x-s6wEDfeZ5B1nC_jEvOwpA-VdI
```
To make this work, we would also need to set the `id` attribute of each timeline message to the respective value (instead of the current `data-event-id`) so the browser will jump to it upon loading. You can use the `:target` CSS selector to highlight the matching message on the timeline with a different background and add a mark on the side as well.
If the backend for some reason would also need to access the event ID (without JavaScript) to return messages for the given date, consider adding it to both the query and the hash.
There were restrictions in former versions of HTML on the syntax of the ID, but from HTML5, it should be non-empty and can contain basically anything except whitespace:
* https://mathiasbynens.be/notes/html5-id-class
Contributor guide
Research direction
Start by locating the timeline message rendering and permalink generation, then inspect how the current data-event-id is assigned. The work is done when the event ID is used in the URL hash and message id, the browser jumps to the message on load, and the matching message is highlighted with :target styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100