JSPM – @macpaw/notion-cms-tools@0.0.7

Package Exports

@macpaw/notion-cms-tools
@macpaw/notion-cms-tools/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@macpaw/notion-cms-tools) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Welcome to the notion-cms-tools wiki! (Alpha version, not recommended to use)

What is notion-cms tools?

It's a simple javascript library that allows you to create headless cms for your website very fast. It is recommended to use in projects that require SSG or SSR usage. You can also extend capabilities of tools pack with additional modules (in work).

For now you can use additional image loaders that process your images from notion page and serve them from CDN (AWS S3 + IMGIX or Cloud Flare Images).

How to install?

npm i @macpaw/notion-cms-tools@latest

and you are good to go

Main functions

Convenient Notion API Parsing
Image loaders (module) support (Cloud Flare Images or AWS S3 + IMGIX).
Utils

Before using

You should add these environment variables firstly.

NOTION_SECRET          # your notion access token
DATABASE_ID            # db id you want to acces

# cloud flare images (if you want to use this module)

ACCOUNT_ID             # your account id
API_TOKEN              # your api access token
DELIVERY_ID            # your delivery id

# aws s3 + imgix (if you want to use this module)

AWS_ACCESS_KEY         # aws s3 access key
AWS_SECRET_ACCESS_KEY  # aws s3 secret access key
BUCKET_NAME            # bucket name
IMGIX_DOMAIN           # your imgix domain

Example

###Code

import { getPages } from '../index.js';
import { parsePages } from '../parser/index.js';
import { getLoader } from '../image-loader/aws/index.js';
function getFilter() {
  return {
    property: 'Status',
    select: {
      equals: 'Published',
    },
  };
}

async function test() {
  const data = await getPages(getFilter()); // loads db props data with filter
  console.log('Data is loaded');
  const parsedData = await parsePages( // parsing page props
    data,
    {
      properties: [ // validation params
        'Title',
        'Date',
        'Topics',
        'Where',
        'Cost',
        'Head Image',
        'Applying link',
        'Status',
        'Colored Background',
        'Grey Background',
        'Pink Background',
      ],
    },
    { imageLoader: await getLoader() } // loader setting (image/aws s3)
  );
  return parsedData;
}

console.log(await test());

Output

Data is loaded
Size 73795d065fa338d1be7e1602a9508ad20f1183c12e0c36e8f0e6f2bd4fbb64e2: 
 original 152059 
 webp 51849 

Size dcd203a6338cbfdb39829bc30204059c242ad5063af1cf84ed724ba00541126a: 
 original 389440 
 webp 210071 

Validated!
[
  {
    id: '2f7ce682-a656-4836-96f1-646dc8930b76',
    properties: {
      coloredBackground: [Object],
      headImage: [Object],
      topics: [Object],
      cost: [Object],
      pinkBackground: [Object],
      status: [Object],
      greyBackground: [Object],
      applyingLink: [Object],
      where: [Object],
      date: [Object],
      title: [Object]
    }
  },
  ...
  {
    id: '487fdfc2-ae4a-457f-a421-486c3611c91b',
    properties: {
      coloredBackground: [Object],
      headImage: [Object],
      topics: [Object],
      cost: [Object],
      pinkBackground: [Object],
      status: [Object],
      greyBackground: [Object],
      applyingLink: [Object],
      where: [Object],
      date: [Object],
      title: [Object]
    }
  }
]