Notion and 11ty

The last modifications of this post were around 1 year ago, some information may be outdated!

Get a list of posts in a databse on Notion and parse it to the 11ty.

👉 Official Notion Developers site.

Follow Step 1 & Step 2 in this official tutorial. Note that, we don't use @notionhq/client, so you don't have to install it. Instead, install following packages,

npm install -D @11ty/eleventy-fetch
npm install -D dotenv

Create an .env file on the project directory + add ".env" to .gitignore!

NOTION_TOKEN="secret_cP45snd4S...nityXZ0xQq"
NOTION_DB_ID="67056f...a5d7522"
NOTION_VERSION="2022-06-28"

In your _data folder, create notion.js (or whatever you want).

const EleventyFetch = require("@11ty/eleventy-fetch");
require("dotenv").config();
const { get } = require("lodash");

module.exports = async function () {
  let url = `https://api.notion.com/v1/databases/${process.env.NOTION_TEST_ID}/query`;

  let json = await EleventyFetch(url, {
    duration: "1d",
    type: "json",
    fetchOptions: {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.NOTION_TOKEN}`,
        "Notion-Version": `${process.env.NOTION_VERSION}`,
        "Content-Type": "application/json",
      },
    },
  });

  json = json.results.map((post) => ({
    title: get(post, 'properties.Name.title[0].text.content', 'Untitled'),
  }));

  return {
    json,
  };
};

If you request the API within 1 day (duration: "1d" in the above codes), it keeps using the .cache and you may not see the newest changes from the API! In this case, you can remove .cache and try again!

👉 Read more about @11ty/eleventy-fetch.

Go to the official API site for more use cases.

You can use Postman or any other API platform to try the queries from Notion API first.

An example of the returned json (before the line json = json.),

{
  "object": "list",
  "results": [
    {
      // other fields....
      "properties": {
        // other fields....
        "Name": {
          // other fields....
          "title": [
            {
              // other fields....
              "text": {
                "content": "Testing 1",
                // other fields....
              },
              // other fields....
            }
          ]
        }
      },
      "url": "https://www.notion.so/url-of-testing-1"
    },
    {
      // other fields....
      "properties": {
        // other fields....
        "Name": {
          // other fields....
          "title": [
            {
              // other fields....
              "text": {
                "content": "Testing 2",
                // other fields....
              },
              // other fields....
            }
          ]
        }
      },
      "url": "https://www.notion.so/url-of-testing-2"
    },
  ],
  "next_cursor": null,
  "has_more": false,
  "type": "page",
  "page": {}
}

A return result will be stored in notion.json, you can use it in your template as {{ notion.json }}. Note that, the word "notion" is corresponding to the name of the file notion.js!

To show the list of titles from the returned json,

<div class="test-div">
  {% set notionPostTitles = notion.json %}
  {% for post in notionPostTitles %}
    <div>{{ post.title }}</div>
  {% endfor %}
</div>

The result will be,

<div class="test-div">
  <div>Testing 1</div>
  <div>Testing 2</div>
</div>