Tweets can be shared in many ways. The most common way is for other users to retweet them, but people can, and often do, quote Tweets that have Community Notes attached to them.
Notes are a large component, as they have a lot of work to do upfront: Provide helpful context about the Tweet's claim, tell the reader that it was written/approved by a group of people (not Twitter Inc., and not an individual user), how it works, and how they can contribute their voice to the system.
A challenge specific to Quote Tweets was to make sure notes could be correctly identified by the reader as being attached to the inner Tweet being quoted, not the author of the outer Tweet.
It was hard enough to fit all of these jobs in the card when it has all the space within the timeline to do so. It was even harder to do it in the narrower space inside a Quote Tweet.
We decided to shorten the title of the card, and trim the text of the note up to 3 the first 3 lines on narrower viewports. Upon a tap, users are taken to the Tweet Details or Note Details page, where they can read the full note and all its metadata.
Implementing this myself, being new to engineering and new to the Twitter codebase, was honestly a nightmare. The Tweet and Quote Tweet components are two of the oldest, largest, and most complicated pieces of code there are on the site, and it took me weeks of poking around to understand how they work, and how to make the changes I needed to make the notes appear.
Quote Tweets have the potential to multiply the positive impact of Community Notes on Twitter, and we're excited to see them in the wild.
This website was built using Obsidian, Eleventy and Vercel.
The text is set in Untitled by Klim Type Co.