Awesome
Render your Notion content through your Angular application as a CMS. Possible uses:
- 💡 Write your blog
- 🚀 Showcase your projects
- 📄 Write documentation
Huge thanks to react-notion, this library simulates much of what they have previously created with React. ❤️
This package doesn't handle the communication with the API. Check out notion-api-worker for an easy solution.
<sub>Created by <a href="https://www.threads.net/@borjamrd">Borja Muñoz</a> with the help of all <a href="https://github.com/borjamrd/notion-workspace/graphs/contributors">contributors</a> </sub>
Table of Contents
Type of content
You can display any content you want and configure your style to your liking. But we offer you these two options by default:
- Post: which allows you to use all the potential of Notion to write your best articles.
- Project: to showcase your projects in an attractive visual format.
For both, only the styles change, the components are the same:
- Notion databases: display multiple items
- Notion pages: display the content in blocks for each item.
Get started
npm install ngx-notion-cms
Import the providers in your app.config.ts
import { globalSettingsProvider } from 'ngx-notion-cms';
import { provideHttpClient } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
globalSettingsProvider({}), //you can pass global settings here,
],
};
If you want to use the default Tailwind classes you must import this in your styles.css
@import 'ngx-notion-cms/styles';
Code Highlight
If you are going to use code blocks ``ngx-notion-cmsuses
ngx-hightlightsjs` under the hood. Here is the configuration:
npm install ngx-highlightjs
import { globalSettingsProvider } from 'ngx-notion-cms';
import { provideHttpClient } from '@angular/common/http';
import { provideHighlightOptions } from 'ngx-highlightjs';
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
globalSettingsProvider({}), //you can pass global settings here,
provideHighlightOptions({
fullLibraryLoader: () => import('highlight.js'),
lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'),
}),
],
};
Example
Add database component
Add page component
Global Options
By default, global options are configured that are easily modified. For example, in case we want the images of the articles in the databases to not be displayed:
import { globalSettingsProvider } from 'ngx-notion-cms';
export const appConfig: ApplicationConfig = {
providers: [
// ....
globalSettingsProvider({
cacheOptions: {
stateTime: 100000,
storeInCache: true,
},
database: {
showImage: false,
},
page: {
showTableOfContents: true,
},
}),
],
};
Supported Blocks
Most common block types are supported. We happily accept pull requests to add support for the missing blocks.
Block Type | Supported | Notes |
---|---|---|
Table Of Contents | ✅ Yes | |
Text | ✅ Yes | |
Heading | ✅ Yes | |
Image | ✅ Yes | |
Image Caption | ❌ Missing | |
Bulleted List | ✅ Yes | |
Numbered List | ✅ Yes | |
Quote | ✅ Yes | |
Callout | ✅ Yes | |
Column | ✅ Yes | |
iframe | ✅ Yes | |
Video | ✅ Yes | Only embedded videos |
Divider | ✅ Yes | |
Link | ✅ Yes | |
Code | ✅ Yes | |
Web Bookmark | ✅ Yes | |
Toggle List | ❌ Missing | |
Page Links | ✅ Yes | |
Header | ❌ Missing | |
Databases | ❌ Missing | |
Checkbox | ❌ Missing |