Understanding Notionpresso Structure and Customization

To effectively customize Notionpresso, it's essential to first understand its basic structure and data flow. This section examines the structure of Notion data and explains how to create custom components based on this understanding.

Understanding the Data Structure

The Notion data used by Notionpresso is structured in JSON format and includes page information and detailed content for each block. Understanding this structure is the first step towards effective customization.

Basic Data Structure

{
  "object": "page",
  "id": "page-id",
  "created_time": "2024-09-20T13:54:00.000Z",
  "last_edited_time": "2024-09-21T04:28:00.000Z",
  "cover": null,
  "icon": null,
  "parent": {
    "type": "page_id",
    "page_id": "parent-page-id"
  },
  "properties": {
    "title": {
      "id": "title",
      "type": "title",
      "title": [
        {
          "type": "text",
          "text": {
            "content": "Page Title",
            "link": null
          },
          "annotations": {
            "bold": false,
            "italic": false,
            "color": "default"
          },
          "plain_text": "Page Title"
        }
      ]
    }
  },
  "blocks": [
    {
      "object": "block",
      "id": "block-id-1",
      "type": "toggle",
      "toggle": {
        "rich_text": [
          {
            "type": "text",
            "text": {
              "content": "Toggle content",
              "link": null
            },
            "annotations": {
              "bold": false,
              "italic": false,
              "color": "default"
            },
            "plain_text": "Toggle content"
          }
        ],
        "color": "default"
      },
      "blocks": [
        {
          "object": "block",
          "id": "block-id-2",
          "type": "paragraph",
          "paragraph": {
            "rich_text": [
              {
                "type": "text",
                "text": {
                  "content": "Paragraph inside toggle",
                  "link": null
                },
                "annotations": {
                  "bold": false,
                  "italic": false,
                  "color": "default"
                },
                "plain_text": "Paragraph inside toggle"
              }
            ],
            "color": "default"
          }
        }
      ]
    }
  ]
}

Key Structural Elements

Page Metadata: Includes basic page information such as id, created_time, last_edited_time, parent, etc.
Cover and Icon: Information about the page's cover image and icon. This can be used when applying custom designs.
Properties: Page property information, mainly including the page title (title). This information can be used when creating custom headers.
Blocks: An array of blocks that make up the page content. Each block has the following structure:
- object: Always "block"
- id: Unique identifier for the block
- type: Block type (e.g., "toggle", "paragraph", "heading_1", etc.)
- [type]: A key corresponding to the block type, containing specific content for that block.
- blocks: An array of child blocks. This forms a recursive structure.
Recursive Structure: Each block within the blocks array can have its own blocks array, allowing for nested structures. This is important when customizing nested content such as toggles and lists.
rich_text: Most text content is represented as a rich_text array, including text style information (annotations). This allows for fine-grained customization of text styles.

Component Structure for Customization

The basic component structure of Notionpresso is as follows:

In this structure, the <Body> component occupies about 60% of the total width and is centered. You can customize each component based on this layout.

Customization Strategies

Custom Components for Each Block: Create custom components for each block type (paragraph, heading_1, toggle, etc.) to override default styles and behaviors.
Style Customization: Use CSS variables and classes to adjust the overall design.
Layout Modification: Adjust the width or alignment of the <Body> component to change the overall layout.
Utilize Recursive Rendering: Implement complex layouts or interactions using the nested block structure.
Leverage Metadata: Use page metadata, cover images, icons, etc. to create rich UIs.

Understanding these structures and strategies allows you to create highly customized Notion-based websites using Notionpresso. The next section will explore specific customization methods for each element.