Synced Blocks

I’m using synced blocks, for now,* to consistently generate the end material on every page, which serves as both navigation and, thanks to CSS’s :visited, as a map of the docs you’ve read…or at least glanced at.

*There are multiple possibilities for implementing more “standard” web navigation with notion2svelte. For instance, navigation could be built at compile time using Svelte Kit’s load to scan the file system.

Some of your navigation might simply be hand-coded in your +layout.svelte. There’s probably room to incorporate some sort of Notion-driven Nav in notion2svelte, but for now, that’s out of scope.

1. Notion original

2. Notion API

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

{
      "object": "block",
      …
      "type": "synced_block",
      "synced_block": {
        "synced_from": null
      },
      "blocks": [
        {
          "object": "block",
          "id": "c9fa3a33-f652-4e81-bd97-6b9af4436111",
          "created_time": "2022-01-26T22:27:00.000Z",
          "last_edited_time": "2022-01-26T22:40:00.000Z",
          "has_children": false,
          "archived": false,
          "type": "paragraph",
          "paragraph": {
            "text": [
              {
                "type": "text",
                "text": {
                  "content": "I’m syncable!",
                  "link": null
                },
                "annotations": {
                  "bold": false,
                  "italic": false,
                  "strikethrough": false,
                  "underline": false,
                  "code": false,
                  "color": "default"
                },
                "plain_text": "I’m syncable!",
                "href": null
              }
            ]
          }
        }
      ]
    }
  javascript

3. Svelte output

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

<Paragraph
  blockProps={{
    pageId: 'b266b66cecc74e218f494f80f5c820cc',
    id: 'c9fa3a33-f652-4e81-bd97-6b9af4436111',
    created_time: '2022-01-26T22:27:00.000Z',
    last_edited_time: '2022-01-26T22:40:00.000Z'
  }}
>
  I’m syncable!
</Paragraph>
  html

At present, notion2svelte responds to Synced Blocks by simply rendering the enclosed content, stripping away the enclosing synced_block type