Link

1. Notion original

2. Notion API

Partial output of src/routes/[slug]/notion-export.js

{
      …
            "plain_text": "Internal page mention",
      …
    {
      …
      "bulleted_list_item": {
        "text": [
          {
            "type": "mention",
            "mention": {
              "type": "page",
              "page": {
                "id": "57ec9a2d-b854-4bf6-94a4-5f0e2a0b68d1"
              }
            },
            "annotations": {…},
            "plain_text": "Writing Good Slugs",
            "href": "https://www.notion.so/57ec9a2db8544bf694a45f0e2a0b68d1"
          }
        ]
      }
    },
    {
      …
            "plain_text": "Internal alias",
      …
    },
    {
      …
      "bulleted_list_item": {
        "text": [
          {
            "type": "text",
            "text": {
              "content": "Writing Good Snails",
              "link": {
                "url": "/57ec9a2db8544bf694a45f0e2a0b68d1"
              }
            },
            "annotations": {…},
            "plain_text": "Writing Good Snails",
            "href": "/57ec9a2db8544bf694a45f0e2a0b68d1"
          }
        ]
      }
    },
    {
      …
            "plain_text": "External link",
      …
    },
    {
      …
      "bulleted_list_item": {
        "text": [
          {
            "type": "text",
            "text": {
              "content": "Writing Good Puppy Dog Tales",
              "link": {
                "url": "https://en.wikipedia.org/wiki/What_Are_Little_Boys_Made_Of%3F"
              }
            },
            "annotations": {…},
            "plain_text": "Writing Good Puppy Dog Tales",
            "href": "https://en.wikipedia.org/wiki/What_Are_Little_Boys_Made_Of%3F"
          }
        ]
      }
    }
  json

There’s so much going on here, it can be a bit overwhelming!

Without even getting into bookmarks and user mentions, et al, things are already kinda complex:

We have 2 types of object but 3 different styles of link!

type:mention

1 link style

page mention

text+url

2 link styles

relative to root (starts with /)

absolute (starts with protocol: http, mailto, et al)

I suspect this situation is the result of some more general structure needed to accommodate Turn-intoable blocks, but maybe it’s just an oversight when they could have just been explicit and had three types: mention, alias, and external. That’s my opinion…and that’s why notion2svelte does just that! 😎

There’s duplicate data:

As far as I can tell, text[n].text.link.url is always identical to the adjacent text[n].href

text[n].mention.page.id is just text[n].href without the host — https://www.notion.so/ — sliced off

notion2svelte reduces these duplications to a single href prop.

3. Svelte output

Partial output of src/routes/[slug].svelte

…
  Internal page mention
…
<BulletedListItem>
  <Link type="mention" href="/rules-for-writing-good-slugs">
    Writing Good Slugs
  </Link>
</BulletedListItem>
…
  Internal alias
…
<BulletedListItem>
  <Link type="alias" href="/rules-for-writing-good-slugs">
    Writing Good Snails
  </Link>
</BulletedListItem>
…
  External link
…
<BulletedListItem>
  <Link type="absolute" href="https://en.wikipedia.org/wiki/What_Are_Little_Boys_Made_Of%3F">
    Writing Good Puppy Dog Tales
    </Link>
</BulletedListItem>
  html

The type prop can be either mention, alias or external.

4. Example rendering

Rendered byLink.svelte

The Link component lets you differentiate between ⑴ internal page mentions, ⑵ links to internal pages — I like to think of these as aliased mentions — and ⑶ links to external pages:

Internal page mention

Writing Good Slugs

Internal alias

Writing Good Snails

External link

Writing Good Puppy Dog Tales

A word about links with “annotations”