Gatsby Source Notion Article

A Gatsby source plugin for importing articles made in Notion into your Gatsby application using Notion API.

⚠️ The Notion API being still in beta, some limitations may exist. Feel free to open a discussion or ask for a new feature.

Install

# using npm
npm install gatsby-source-notion-article

# using yarn
yarn add gatsby-source-notion-article

How to configure

1. Create your integration

Create a new integration. It will give you access to a token that will be used in Gatsby Source Notion Article. Once it's created, copy your token and keep it for the next step.

2. Duplicate Notion database

Duplicate this article database template to ensure your articles follows the same format as this plugin. Don't forget to share this new database with the integration you just created.

3. Set your environment variables in a .env file

Create an .env file at the root of your Gatsby project. You can copy-paste the .env.example from this Github repository.

https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
                                  |--------- Database ID --------|

NOTION_KEY=<your-notion-token>
NOTION_DATABASE_ID=<your-notion-database-id>

4. Add plugin to your gatsby config

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-notion-article`,
      options: {
        // Learn about environment variables: https://gatsby.dev/env-vars
        token: process.env.NOTION_KEY, // required
        databaseId: process.env.NOTION_DATABASE_ID, // required
        params: {
          page_size: 3, // optional, default is 100
          filter: {} // optional
          sort: {

          } // optional
        }
      }
    },
  ],
}

Options

Name	Type	Default	Description
`token`	string		[required] The `token` from Notion could be find on your integration
`databaseId`	string		[required] The `databaseId` is the alphanumerical value following the name of your workspace in the sharing URL.
`params`	object		The `params` object
`params.page_size`	number	100	How many articles you want Notion to query
`params.filter`	object		An object with filters passed to Notion
`params.sort`	object		An option with sort options passed to Notion
`debug`	boolean	false	Enable the debug mode for Notion
`unsupported`	boolean	false	Shows in the body a message if the block is not supported. This can be enable only in development mode.

Type of blocks currently supported

The Notion API being in beta, only some block elements are currently supported:

Headings (1, 2, 3)
Paragraphs
Bullet and numbered list
To do
Toggle
Child page

How to query

Get all articles from your notion database

{
  allNotionArticles {
    edges {
      node {
        id
        title
        body
        createdAt
        updatedAt
      }
    }
  }
}

Get an article from your notion database

{
  notionArticles {
    id
    title
    body
    createdAt
    updatedAt
  }
}

Examples

Check our example project of the Gatsby plugin implementation.

// Quick example
const Component = {
  const data = useStaticQuery(graphql`
    query Notion {
      notionArticles {
        body
      }
    }
  `);

  return (
    <div dangerouslySetInnerHTML={{ __html: data.notionArticles.body }} />
  );
};

Contributing

If you've ever wanted to contribute to open source, and a great cause, now is your chance!

See the contributing docs for more information.

Feel free to open a discussion if you have any question or suggestion in regards to this plugin.

Contributors

Thanks goes to these wonderful people

_{David Dias}
💻 📖 🚇

⚠️

(emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

License

See MIT Licence, 2021 David Dias

The automated release is failing 🚨

🚨 The automated release from the `main` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

thedaviddias / gatsby-source-notion-article Goto Github PK