# 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](https://notionic.dev/docs/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.