Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/borjamrd/ngx-notion-cms
Unnoficial Notion renderer for Angular: display your posts, docs or proyects easily from Notion
https://github.com/borjamrd/ngx-notion-cms
angular blogging cms notion
Last synced: 20 days ago
JSON representation
Unnoficial Notion renderer for Angular: display your posts, docs or proyects easily from Notion
- Host: GitHub
- URL: https://github.com/borjamrd/ngx-notion-cms
- Owner: borjamrd
- Created: 2024-10-03T11:26:36.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-10-14T20:20:43.000Z (22 days ago)
- Last Synced: 2024-10-17T06:54:05.960Z (20 days ago)
- Topics: angular, blogging, cms, notion
- Language: TypeScript
- Homepage: https://ngx-notion-cms.vercel.app/
- Size: 9.83 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-notion-cms - Render your Notion content through your Angular application as a CMS. (Table of contents / Angular)
- fucking-awesome-angular - ngx-notion-cms - Render your Notion content through your Angular application as a CMS. (Table of contents / Angular)
README
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](https://github.com/splitbee/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](https://github.com/splitbee/notion-api-worker) for an easy solution_.
Created by Borja Muñoz with the help of all contributors
## Table of Contents
1. [Type of content](#type-of-content)
2. [Get started](#get-started)
3. [Global Options](#aditional-options)
4. [Supported blocks](#supported-blocks)
## 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
```bash
npm install ngx-notion-cms
```
Import the providers in your `app.config.ts`
```typescript
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`
```css
@import 'ngx-notion-cms/styles';
```
### Code Highlight
If you are going to use code blocks ``ngx-notion-cms` uses `ngx-hightlightsjs` under the hood. Here is the configuration:
```bash
npm install ngx-highlightjs
```
```typescript
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:
```typescript
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 |