{"id":17434565,"url":"https://github.com/borjamrd/ngx-notion-cms","last_synced_at":"2026-03-13T18:06:06.375Z","repository":{"id":257979097,"uuid":"867056612","full_name":"borjamrd/ngx-notion-cms","owner":"borjamrd","description":"Unnoficial Notion renderer for Angular: display your posts, docs or proyects easily from Notion","archived":false,"fork":false,"pushed_at":"2024-11-05T09:55:54.000Z","size":10312,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-05T10:40:50.713Z","etag":null,"topics":["angular","blogging","cms","notion"],"latest_commit_sha":null,"homepage":"https://ngx-notion-cms.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/borjamrd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-03T11:26:36.000Z","updated_at":"2024-11-05T09:55:58.000Z","dependencies_parsed_at":"2024-10-17T06:54:18.325Z","dependency_job_id":"cc895165-0899-41ef-9385-30d4a8ecd5ef","html_url":"https://github.com/borjamrd/ngx-notion-cms","commit_stats":{"total_commits":62,"total_committers":1,"mean_commits":62.0,"dds":0.0,"last_synced_commit":"de46f6eaa5b925bf1e8acf975e41a894c9719f0e"},"previous_names":["borjamrd/ngx-notion-cms"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borjamrd%2Fngx-notion-cms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borjamrd%2Fngx-notion-cms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borjamrd%2Fngx-notion-cms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borjamrd%2Fngx-notion-cms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/borjamrd","download_url":"https://codeload.github.com/borjamrd/ngx-notion-cms/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228549984,"owners_count":17935438,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","blogging","cms","notion"],"created_at":"2024-10-17T09:07:00.847Z","updated_at":"2026-03-13T18:06:06.369Z","avatar_url":"https://github.com/borjamrd.png","language":"TypeScript","funding_links":[],"categories":["Framework Interoperability"],"sub_categories":["External Integration"],"readme":"![Alt text](public/ngx-notion-cms-rounded.png)\n\nRender your Notion content through your Angular application as a CMS.\nPossible uses:\n\n-   💡 Write your blog\n-   🚀 Showcase your projects\n-   📄 Write documentation\n\nHuge thanks to [react-notion](https://github.com/splitbee/react-notion), this library simulates much of what they have previously created with React. ❤️\n\n_This package *handles communication with the Notion API internally* by using [notion-api-worker](https://github.com/splitbee/notion-api-worker) Consumers do not need to interact with the Notion API directly_.\n\n\u003csub\u003eCreated by \u003ca href=\"https://www.threads.net/@borjamrd\"\u003eBorja Muñoz\u003c/a\u003e with the help of all \u003ca href=\"https://github.com/borjamrd/notion-workspace/graphs/contributors\"\u003econtributors\u003c/a\u003e \u003c/sub\u003e\n\n## Table of Contents\n\n1.  [Type of content](#type-of-content)\n2.  [Get started](#get-started)\n3.  [Global Options](#aditional-options)\n4.  [Supported blocks](#supported-blocks)\n\n## Type of content\n\nYou can display any content you want and configure your style to your liking. But we offer you these two options by default:\n\n-   Post: which allows you to use all the potential of Notion to write your best articles.\n-   Project: to showcase your projects in an attractive visual format.\n\nFor both, only the styles change, the components are the same:\n\n-   Notion databases: display multiple items\n-   Notion pages: display the content in blocks for each item.\n\n## Get started\n\n```bash\nnpm install ngx-notion-cms\n```\n\nImport the providers in your `app.config.ts`\n\n```typescript\nimport { globalSettingsProvider } from 'ngx-notion-cms';\nimport { provideHttpClient } from '@angular/common/http';\n\nexport const appConfig: ApplicationConfig = {\n    providers: [\n        provideHttpClient(),\n        globalSettingsProvider({}), //you can pass global settings here,\n    ],\n};\n```\n\nIf you want to use the default Tailwind classes you must import this in your `styles.css`\n\n```css\n@import 'ngx-notion-cms/styles';\n```\n\n### Code Highlight\n\nIf you are going to use code blocks ``ngx-notion-cms` uses `ngx-hightlightsjs` under the hood. Here is the configuration:\n\n```bash\nnpm install ngx-highlightjs\n```\n\n\n```typescript\nimport { globalSettingsProvider } from 'ngx-notion-cms';\nimport { provideHttpClient } from '@angular/common/http';\nimport { provideHighlightOptions } from 'ngx-highlightjs';\n\nexport const appConfig: ApplicationConfig = {\n    providers: [\n        provideHttpClient(),\n        globalSettingsProvider({}), //you can pass global settings here,\n        provideHighlightOptions({\n            fullLibraryLoader: () =\u003e import('highlight.js'),\n            lineNumbersLoader: () =\u003e import('ngx-highlightjs/line-numbers'),\n        }),\n    ],\n};\n```\n\n## Example\n\n### Add database component\n\n### Add page component\n\n### Global Options\n\nBy 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:\n\n```typescript\nimport { globalSettingsProvider } from 'ngx-notion-cms';\n\nexport const appConfig: ApplicationConfig = {\n    providers: [\n        // ....\n        globalSettingsProvider({\n            cacheOptions: {\n                stateTime: 100000,\n                storeInCache: true,\n            },\n            database: {\n                showImage: false,\n            },\n            page: {\n                showTableOfContents: true,\n            },\n        }),\n    ],\n};\n```\n\n## Supported Blocks\n\nMost common block types are supported. We happily accept pull requests to add support for the missing blocks.\n\n| Block Type        | Supported  | Notes                |\n| ----------------- | ---------- | -------------------- |\n| Table Of Contents | ✅ Yes     |\n| Text              | ✅ Yes     |                      |\n| Heading           | ✅ Yes     |                      |\n| Image             | ✅ Yes     |                      |\n| Image Caption     | ❌ Missing |                      |\n| Bulleted List     | ✅ Yes     |                      |\n| Numbered List     | ✅ Yes     |                      |\n| Quote             | ✅ Yes     |                      |\n| Callout           | ✅ Yes     |                      |\n| Column            | ✅ Yes     |                      |\n| iframe            | ✅ Yes     |                      |\n| Video             | ✅ Yes     | Only embedded videos |\n| Divider           | ✅ Yes     |                      |\n| Link              | ✅ Yes     |                      |\n| Code              | ✅ Yes     |                      |\n| Web Bookmark      | ✅ Yes     |                      |\n| Toggle List       | ❌ Missing |                      |\n| Page Links        | ✅ Yes     |                      |\n| Header            | ❌ Missing |                      |\n| Databases         | ❌ Missing |\n| Checkbox          | ❌ Missing |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fborjamrd%2Fngx-notion-cms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fborjamrd%2Fngx-notion-cms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fborjamrd%2Fngx-notion-cms/lists"}