ChildPage

1. Notion original

2. Notion API

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

{
      "object": "block",
      …
      "type": "child_page",
      "child_page": {
        "title": "I’m a child page with 3 blocks: some Lorem, another child page, and a link to same"
      },
      "blocks": [
        {
          …
          "paragraph": {
                …
                "plain_text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.",
                …
          }
        },
        {
          "object": "block",
          …
          "type": "child_page",
          "child_page": {
            "title": "I’m the grandchild"
          }
        },
        {
          …
          "paragraph": {
            "text": [
                …
                "plain_text": "I’m the grandchild",
                "href": "https://www.notion.so/ebe7d6569bd440b18435d8f6f792227b"
              },
              {
                …
                "plain_text": " ",
                …
              }
            ]
          }
        }
      ]
    }
  javascript

3. Svelte output

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

<ChildPage
  title="I’m a child page with 3 blocks: some Lorem, another child page, and a link to same"
  >
  <Paragraph blockProps={{…}}>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
  </Paragraph>
  <p
    style="display: inline-block; background: floralwhite; padding: 1rem; margin: 0.25rem 0; border: 1px fuchsia solid; border-radius: 6px; "
    >⚠️ child_page: <span
      style="font-weight: 600; display: inline; padding: 3px; border-radius: 3px;"
      >I’m the grandchild.</span
    >&nbsp;has no content</p
  >
  <Error
    pageId="991f1062fc784019aea56e890ca04ca2"
    blockId="116422a3e16e4329b95d3f8575a43781"
    message="pageId is not defined"
    stack="ReferenceError: pageId is not defined
    at linkOrWarning (file:///Users/c/Documents/1-Due/notion2svelte/lib/decorators.js:124:40)
    at maybeLink (file:///Users/c/Documents/1-Due/notion2svelte/lib/decorators.js:132:14)
    at decorateInlineContent (file:///Users/c/Documents/1-Due/notion2svelte/lib/decorators.js:165:14)
    at file:///Users/c/Documents/1-Due/notion2svelte/lib/sveltifier.js:23:23
    at Array.map (<anonymous>)
    at richText (file:///Users/c/Documents/1-Due/notion2svelte/lib/sveltifier.js:23:12)
    at renderBlock (file:///Users/c/Documents/1-Due/notion2svelte/lib/sveltifier.js:298:35)
    at file:///Users/c/Documents/1-Due/notion2svelte/lib/sveltifier.js:208:20
    at Array.map (<anonymous>)
    at renderBlock (file:///Users/c/Documents/1-Due/notion2svelte/lib/sveltifier.js:206:10)"
  />
</ChildPage>
  html

By including a grandchild page and a link to the same grandchild page, we’ve generated two distinct errors. The first (⚠️) is a “warning” generated while rendering “annotated” spans of text. The second (the wiggly one below) is a catch-all for all uncaught errors thrown during notion2svelte execution.
See Error.

4. Example rendering

Rendered byChildPage.svelte

I’m a child page with 3 blocks: some Lorem, another child page, and a link to same

This is the first block. It’s just a simple paragraph. Next comes another sub-page — call it a grandchild? — which notion2svelte isn’t currently equipped to handle. The block after that, which also errors out, is an alias to the same grandchild page.

⚠️ child_page: I’m the grandchild. has no content

⚠️ l(t, type, url): I’m the grandchild. No slug found for mention w/text: I’m the grandchild'. Have you imported the target page with notion2svelte yet?

↑ About that Error

In a traditional file directory, there is a distinction between, well, files and directories. Not so with Notion, where the parent of any given page is either another page or the sidebar. This presents a challenge when mapping Notion pages to files in a directory tree, which is what’s required on the output side of notion2svelte.

For this first release, notion2svelte gives you more than you probably need when it comes to child pages…enough to render the entire page, in fact (minus the title/cover/icon…)! But this comes with a caveat: it’s not recursive. That means that you’ll get errors wherever notion2svelte encounters a child page inside another child page.

The demo component I made for this site goes the unusual route of inlining the child page. There’s no practical motivation behind this…it was fast and cheap to do.

This is one of the components most likely to change in future versions. Got a great idea for how this should work? Let me know!

🏠 Browse the docs ⚘

High-level Discussion

Where notion2svelte Fits

Configuring your .env

Turn-intoable Block Components

Paragraph (aka “Text”)

Toggle Headings (not yet implemented)

Layout-only Components

IndentGroup

Column & ColumnList

Page-level Components

Title (aka Name)

Cover (Image & Icon)

Annotation Components

bold → <strong>

italic → <em>

~~strikethrough~~ → <s>

Other Components