Skip to contentnotionic
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.

Write resources in Notion

  1. At the end of the page, add a heading named Resources, at any level.
  2. 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 fetchBlocks found 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.

Favicons and descriptions

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.

Options

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:

TypeScript
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.

Change the list

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:

TypeScript
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 }} />

Markdown

blocksToMarkdown(blocks, { resources }) writes resources as the list items they are, adding the fetched description, escaped, to an item without one.