nast-util-to-html

nast-util-to-html

Render NAST to HTML.

NAST is an universal data structure to represent almost any document. It is under active development so there's no released documentation, but TypeScript definitions can be found here.

This repo is part of notajs project.

A demo page built with nast-util-from-notionapi.

Documentation

• Usage
• Example
• API Reference
• Notes

Usage

npm i nast-util-to-html

require this module,

const { renderToHTML } = require('nast-util-to-html')

Example

Download a Notion.so page and convert to HTML.

const fs = require('fs')

const NotionAgent = require('notionapi-agent')
const { getOnePageAsTree } = require('nast-util-from-notionapi')
const { renderToHTML } = require('nast-util-to-html')

/* Configure NotionAgent's options */
const agentOpts = {
  token: '',
  suppressWarning: false,
  verbose: true
}
const agent = new NotionAgent(options)

async function main() {
  try {
    /* Fill in a Notion.so page ID */
    let pageID = ''
    let tree = await getOnePageAsTree(pageID, agent)
    let html = renderToHTML(tree)
    fs.writeFileSync(
        'index.html',
        html,
        { encoding: 'utf-8' }
    )
  } catch (error) {
    console.error(error)
  }
}

main()

API Reference

renderToHTML(data, options)

Render static HTML from NAST.

• data - (required) Nast.Block Go to Definition | Notion.StyledString[]Go to Definition

• options - (optional) RenderOptions

  type RenderOptions = {
    /** Ignore the root node */
    contentOnly: boolean
    /** Skip bulleted list and numbered list analysis */
    bypassPreRenderTransform: boolean
  }
  

Returns :

A HTML string.

Notes

Supported Blocks (for Notion.so)

Fundamental

• Block Color
• Column & Column List

Basic Blocks

• Text
  • Color & Background
  • Style : Bold, Italic, Strike, Code, Link
  • Nested
• Embedded Sub-page
• Heading 1, 2, 3
• Bulleted List
• Numbered List
• Toggle List
• Quote
• Divider
• Callout

Inline

• Mention a Person (Directly renders id of the user)
• Mention a Page (Directly renders id of the page)
• Date or Reminder (Directly renders raw data)

Database

• Table
• Gallery
• List
• Calendar
• Board

Media

• Image
• Web Bookmark
• Video
• Audio
• Code
• File

Advanced Blocks

• Table of Contents
• Math Equation
• Template Button
• Breadcrumb

Code Structure

Generated by dependency-cruiser NPM package.