Bookmarks are useful for providing a short summary of a linked website, or a nice preview.

Example

GitHub: Let’s build from here

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...

https://github.com/

Carbon Design System

Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

https://carbondesignsystem.com/

Notes

Bookmarks will be missing one ingredient, namely the favicon that is rendered in front of the URL in Notion.

We are also using a somewhat home-made solution to pull in the details about the page, so the text displayed in the bookmark may be different from what Notion displays.

To allow supporting bookmarks, we retrieve the linked page on the backend, and use various queries in the DOM to find the title, a suitable image, and a description.

To find the title and image, we search for OpenGraph, then Twitter meta tags. Finally we fall back to the HTML title and first image of the body if nothing can be found. For the description, we search OpenGraph and Twitter tags first.

Styling

The bookmark is a link with a bookmark class. Inside, you will find an img tag, an h4 tag, and two paragraphs with classes description and url.