gatsby-source-notion-contents

    1.1.3 • Public • Published

    gatsby-source-notion-contents

    Get gatsby sources from notion

    NPM npm bundle size (minified)

    Installation

    $ npm i -S gatsby-source-notion-contents

    ⚠️ Prerequisite

    You need a token to use this package if you want to get private contents. You can get it from Notion.so cookie. the key of it is token_v2.

    Options

    type Option = {
      token?: string; // Optional. need token when you need to get private contents.
      ids?: string[]; // Optional. to get contents that are out of scope.
      prefix?: string; // Optional. to add prefix into relative links.
      removeStyle?: boolean; // Optional. to remove inline styles.
    };

    ids

    If the URL is https://www.notion.so/Personal-Home-db45cd2e7c694c3493c97f2376ab184a, You need to add db45cd2e7c694c3493c97f2376ab184a into options.ids.

    How to use

    // In your gatsby-config.js
    {
      // other configs ...
      plugins: [
        // other plugins ...
        {
          resolve: `gatsby-source-notion-contents`,
          options: {
            token: '<<YOUR_NOTION_TOKEN>>',
            ids: ['<<ID_OF_NOTION_PAGE>>'],
            prefix: '/',
            removeStyle: false,
          },
        },
      ]
    }

    How to query

    • Get all posts
    query Notions {
      allNotionContent {
        edges {
          node {
            id
            contentType
            internal {
              # ... other properties of internal
              content
            }
          }
        }
      }
    }
    • Get a post
    query Notion {
      notionContent {
        id
        contentType
        internal {
          # ... other properties of internal
          content
        }
      }
    }
    • Get a specific post
    query Notion {
      notionContent(id: { eq: "ID_SPECIFIC_POST" }) {
        id
        contentType
        internal {
          # ... other properties of internal
          content
        }
      }
    }

    Example

    Sample project

    Example source

    const Component = {
      const data = useStaticQuery(graphql`
        query Notion {
          notionContent {
            internal {
              content
            }
          }
        }
      `);
     
      return (
        <div dangerouslySetInnerHTML={{ __html: data.notionContent.internal.content }} />
      );
    };

    Buy Me A Coffee

    Install

    npm i gatsby-source-notion-contents

    DownloadsWeekly Downloads

    37

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    5.94 kB

    Total Files

    6

    Last publish

    Collaborators

    • wonism