Docs menu
Guides
Resources
A compact list of the sources and links behind a page.
A resources list is where a page shares its sources, or any useful links, at the end. Unlike Footnotes, nothing in the text points at it. notionic renders each link as one row: the site's favicon, the link's text, and a muted description on one line.
- At the end of the page, add a heading named
Resources, at any level. - Under it, write one bulleted or numbered item per link, starting with the link:
[font-smooth](https://developer.mozilla.org/…) - MDN on font smoothing.
- The description is the rest of the item, after the link. Type any separator you like (
-,–,—,:or|): notionic draws its own. Formatting and links in it stay. - No description? The description of the linked page shows instead, when
fetchBlocksfound one. - Other blocks in the section, such as an intro paragraph or an item that doesn't start with a link, render as they are, between the lists.
- The heading stays a heading, in the table of contents. The section runs to the next heading of the same or a higher level; under a toggleable heading, it's the toggle's content.
- Nested blocks under an item render under its row.
fetchBlocks fetches the page behind each resource link, as it does for bookmarks, to read its favicon and description. Only links in the Resources section are fetched, and bookmarkPreviews: false turns these fetches off too. A link to a Notion page isn't fetched.
The favicon is the one linkFavicons fetched when it's on, then the one from the page, then a muted globe.
The heading is named Resources by default, so there's nothing to set up. To rename it, pass the same option to fetchBlocks, NotionRenderer and blocksToMarkdown:
const resources = { headings: ["Resources", "Recursos", "Further reading"] }const blocks = await fetchBlocks(notion, pageId, { resources })
<NotionRenderer blocks={blocks} resources={resources} />headings: the heading texts that start the section, matched ignoring case. Default["Resources"];[]turns resources off.- If a heading names both the footnotes and the resources section, footnotes win.
Each run of rows renders through Resources. Replace it with components.resources, which gets items, each with its block, href, title and description (rich text, or null) and the fetched preview:
import { RichText, type ResourcesProps } from "notionic"
function MyResources({ items, context }: ResourcesProps) { return ( <ul> {items.map((item) => ( <li key={item.block.id}> <a href={item.href}> <RichText text={item.title} context={context} /> </a> {item.description ? <RichText text={item.description} context={context} /> : item.preview?.description} </li> ))} </ul> )}
<NotionRenderer blocks={blocks} components={{ resources: MyResources }} />blocksToMarkdown(blocks, { resources }) writes resources as the list items they are, adding the fetched description, escaped, to an item without one.