Error

Motivation

While in the middle of developing notion2svelte, I became frustrated whenever some uncaught error would crash notion2svelte. First there would be the confusion of “why isn’t it rendering as I expected?”. Then there was an inevitable scramble to look in various consoles for an error.
So I added a top-level catch-all for unexpected rendering errors that allows you to present them in-context and with as much (or as little!) visual presence as desired.

Demo

In the Notion database that hosts my source files for this site, I have a page called README (For Visitors). I don’t ever intend to publish that file here, and so it has no slug, nor have I marked it Publishable before running notion2svelte. Point being, notion2svelte doesn’t recognize it, and so it throws an error.
Rather than bring the entire process to a halt or hoping that you notice an error in the Console, notion2svelte handles the error by rendering it right into your document using the Error component. There, you can simply render something hideous and obviously wrong that you couldn’t possibly ship on accident, or you could maybe use the component to pass such errors through to a notification system, or to collate errors into a single report.
Ok, enough with the hypotheticals. Time for that demo.
Ready?
Here we go.

1. Notion original

Because ↓ this page has never been marked Publishable during a local run of notion2svelte…
…attempts to link to it fail because notion2svelte recognizes it as an internal site link, but can’t find a mapping for it in notion2svelte_id-to-slug.json. You don’t need to understand it. The point is, it’s enough to trigger a rendering error.

2. Example rendering

Rendered by Error.svelte

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

 
Fancy horizontal divider

🏠 Browse the docs ⚘

High-level Discussion

Turn-intoable Block Components

Toggle Headings (not yet implemented)

Layout-only Components

Page-level Components

Annotation Components

bold → <strong>

italic → <em>

strikethrough → <s>

Other Components