├── .browserslistrc ├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc ├── .vscode └── extensions.json ├── LICENSE ├── README.md ├── babel.config.js ├── dev ├── serve.js └── serve.vue ├── docs ├── README.md └── img │ └── vue-notion.png ├── example ├── .gitignore ├── .npmrc ├── README.md ├── app.vue ├── layouts │ └── default.vue ├── nuxt.config.ts ├── package-lock.json ├── package.json ├── pages │ ├── [slug].vue │ ├── index.vue │ ├── nuxt.vue │ ├── posts.vue │ └── vue.vue ├── plugins │ ├── vue-katex.ts │ └── vue-notion.ts ├── public │ └── favicon.ico └── tsconfig.json ├── jsconfig.json ├── nuxt ├── index.js └── plugin.js ├── package-lock.json ├── package.json ├── scripts └── postpublish.sh ├── src ├── blocks │ ├── bookmark.vue │ ├── callout.vue │ ├── code.vue │ ├── column.vue │ ├── decorator.vue │ ├── equation.vue │ ├── header.vue │ ├── helpers │ │ ├── asset.vue │ │ ├── column-spacer.vue │ │ ├── figure.vue │ │ ├── fragment.vue │ │ ├── image.vue │ │ ├── nested-list.vue │ │ ├── page-header.vue │ │ ├── page-icon.vue │ │ └── text-renderer.vue │ ├── list.vue │ ├── page.vue │ ├── quote.vue │ ├── sync-pointer.vue │ ├── table-row.vue │ ├── table.vue │ ├── text.vue │ ├── todo.vue │ └── toggle.vue ├── components │ ├── block.vue │ ├── index.js │ └── notion-renderer.vue ├── entry.js ├── lib │ ├── api.js │ ├── blockable.js │ └── utils.js └── styles.css ├── vercel.json └── vite.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | current node 2 | last 2 versions and > 2% 3 | ie > 10 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: janniks 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: janniks 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | yarn.lock 2 | 3 | # Created by https://www.toptal.com/developers/gitignore/api/yarn,Vuejs,Vue,Node,macOS 4 | # Edit at https://www.toptal.com/developers/gitignore?templates=yarn,Vuejs,Vue,Node,macOS 5 | 6 | ### macOS ### 7 | # General 8 | .DS_Store 9 | .AppleDouble 10 | .LSOverride 11 | 12 | # Icon must end with two \r 13 | Icon 14 | 15 | # Thumbnails 16 | ._* 17 | 18 | # Files that might appear in the root of a volume 19 | .DocumentRevisions-V100 20 | .fseventsd 21 | .Spotlight-V100 22 | .TemporaryItems 23 | .Trashes 24 | .VolumeIcon.icns 25 | .com.apple.timemachine.donotpresent 26 | 27 | # Directories potentially created on remote AFP share 28 | .AppleDB 29 | .AppleDesktop 30 | Network Trash Folder 31 | Temporary Items 32 | .apdisk 33 | 34 | ### Node ### 35 | # Logs 36 | logs 37 | *.log 38 | npm-debug.log* 39 | yarn-debug.log* 40 | yarn-error.log* 41 | lerna-debug.log* 42 | 43 | # Diagnostic reports (https://nodejs.org/api/report.html) 44 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 45 | 46 | # Runtime data 47 | pids 48 | *.pid 49 | *.seed 50 | *.pid.lock 51 | 52 | # Directory for instrumented libs generated by jscoverage/JSCover 53 | lib-cov 54 | 55 | # Coverage directory used by tools like istanbul 56 | coverage 57 | *.lcov 58 | 59 | # nyc test coverage 60 | .nyc_output 61 | 62 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 63 | .grunt 64 | 65 | # Bower dependency directory (https://bower.io/) 66 | bower_components 67 | 68 | # node-waf configuration 69 | .lock-wscript 70 | 71 | # Compiled binary addons (https://nodejs.org/api/addons.html) 72 | build/Release 73 | 74 | # Dependency directories 75 | node_modules/ 76 | jspm_packages/ 77 | 78 | # TypeScript v1 declaration files 79 | typings/ 80 | 81 | # TypeScript cache 82 | *.tsbuildinfo 83 | 84 | # Optional npm cache directory 85 | .npm 86 | 87 | # Optional eslint cache 88 | .eslintcache 89 | 90 | # Microbundle cache 91 | .rpt2_cache/ 92 | .rts2_cache_cjs/ 93 | .rts2_cache_es/ 94 | .rts2_cache_umd/ 95 | 96 | # Optional REPL history 97 | .node_repl_history 98 | 99 | # Output of 'npm pack' 100 | *.tgz 101 | 102 | # Yarn Integrity file 103 | .yarn-integrity 104 | 105 | # dotenv environment variables file 106 | .env 107 | .env.test 108 | .env*.local 109 | 110 | # parcel-bundler cache (https://parceljs.org/) 111 | .cache 112 | .parcel-cache 113 | 114 | # Next.js build output 115 | .next 116 | 117 | # Nuxt.js build / generate output 118 | .nuxt 119 | dist 120 | 121 | # Gatsby files 122 | .cache/ 123 | # Comment in the public line in if your project uses Gatsby and not Next.js 124 | # https://nextjs.org/blog/next-9-1#public-directory-support 125 | # public 126 | 127 | # vuepress build output 128 | .vuepress/dist 129 | 130 | # Serverless directories 131 | .serverless/ 132 | 133 | # FuseBox cache 134 | .fusebox/ 135 | 136 | # DynamoDB Local files 137 | .dynamodb/ 138 | 139 | # TernJS port file 140 | .tern-port 141 | 142 | # Stores VSCode versions used for testing VSCode extensions 143 | .vscode-test 144 | 145 | ### Vue ### 146 | # gitignore template for Vue.js projects 147 | # 148 | # Recommended template: Node.gitignore 149 | 150 | # TODO: where does this rule come from? 151 | docs/_book 152 | 153 | # TODO: where does this rule come from? 154 | test/ 155 | 156 | ### Vuejs ### 157 | # Recommended template: Node.gitignore 158 | 159 | dist/ 160 | npm-debug.log 161 | yarn-error.log 162 | 163 | ### yarn ### 164 | # https://yarnpkg.com/advanced/qa#which-files-should-be-gitignored 165 | 166 | .yarn/* 167 | !.yarn/releases 168 | !.yarn/plugins 169 | !.yarn/sdks 170 | !.yarn/versions 171 | 172 | # if you are NOT using Zero-installs, then: 173 | # comment the following lines 174 | !.yarn/cache 175 | 176 | # and uncomment the following lines 177 | # .pnp.* 178 | 179 | # End of https://www.toptal.com/developers/gitignore/api/yarn,Vuejs,Vue,Node,macOS 180 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Jannik Siebert 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- 24 | 25 | Inspired by and using partial code of https://github.com/splitbee/react-notion/ 26 | MIT License 27 | 28 | Copyright (c) 2020 Tobias Lins 29 | 30 | Permission is hereby granted, free of charge, to any person obtaining a copy 31 | of this software and associated documentation files (the "Software"), to deal 32 | in the Software without restriction, including without limitation the rights 33 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 34 | copies of the Software, and to permit persons to whom the Software is 35 | furnished to do so, subject to the following conditions: 36 | 37 | The above copyright notice and this permission notice shall be included in all 38 | copies or substantial portions of the Software. 39 | 40 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 41 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 42 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 43 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 44 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 45 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 46 | SOFTWARE. 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | vue-notion 3 |

An unofficial Notion renderer

4 |
5 | 6 |

7 | Features 8 | · 9 | Install 10 | · 11 | Docs 12 | · 13 | Examples 14 | · 15 | Credits 16 |

17 | 18 |

19 | 20 | Package version 21 | 22 | 23 | Compressed size 24 | 25 | 26 | MIT license 27 | 28 | 29 | Follow on Twitter 30 | 31 |

32 | 33 | --- 34 | 35 | ## Features 36 | 37 | 🎯 **Accurate** – Results are _almost_ identical 38 | 39 | 🎨 **Custom Styles** – Styles are easily adaptable. Optional styles included 40 | 41 | 🔮 **Syntax-Highlighting** – Beautiful themeable code highlighting using Prism.js 42 | 43 | 🌎 **SSR / Static Generation Support** – Functions to work with NuxtJS and other frameworks 44 | 45 | ## Install 46 | 47 | > **Warning** 48 | > This is the documentation for the upcoming Vue 3 compatible release of vue-notion. 49 | > For the Vue 2 version, check out the [vue2 branch](https://github.com/janniks/vue-notion/tree/vue2). 50 | 51 | ### Vue 52 | 53 | ```bash 54 | npm install vue-notion 55 | ``` 56 | 57 | ### NuxtJS Module 58 | 59 | Check out the `/example` folder for a full working example using Nuxt 3. 60 | 61 | ## Docs 62 | 63 | > **Note** 64 | > Potentially outdated -- 3.0.0 docs are a work-in-progress 65 | 66 | - `NotionRenderer`: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#notionrenderer) 67 | - Syntax-Highlighting in Code Blocks (with Prism.js): [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#syntax-highlighting) 68 | - Notion API: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#notion-api) 69 | - Nuxt: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#nuxtjs--server-side-rendering--static-site-generation) 70 | 71 | > Check out a full working demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨ 72 | > The code for the demo is in [`example/`](https://github.com/janniks/vue-notion/tree/main/example). 73 | 74 | ## Examples 75 | 76 | These examples use a simple wrapper around the [`notion-api-worker`](https://github.com/splitbee/notion-api-worker) to access the Notion page data. 77 | It is also possible to store a page received from the Notion API in `.json` and use it without the `async/await` part. 78 | 79 | > Use the `getPageBlocks` and `getPageTable` methods with caution! 80 | > They are based on the private Notion API. 81 | > We can NOT guarantee that it will stay stable. 82 | > The private API is warpped by [notion-api-worker](https://github.com/splitbee/notion-api-worker). 83 | > If you use these methods a lot, please consider hosting you own instance, as described in [`docs#notion-api`](https://github.com/janniks/vue-notion/tree/main/docs#notion-api). 84 | 85 | ### Basic Example for Vue 86 | 87 | This example is a part of [`example/`](https://github.com/janniks/vue-notion/tree/main/example) and is hosted at [vue-notion.now.sh/vue](https://vue-notion.now.sh/vue). 88 | 89 | ```vue 90 | 93 | 94 | 106 | 107 | 111 | ``` 112 | 113 | ### Basic Example for NuxtJS 114 | 115 | This example is a part of [`example/`](https://github.com/janniks/vue-notion/tree/main/example) and is hosted at [vue-notion.now.sh/nuxt](https://vue-notion.now.sh/nuxt). 116 | The page assumes a Nuxt plugin in `~/plugins/vue-notion.js` that registers via the `useNuxtApp` hook. 117 | 118 | ```vue 119 | 122 | 123 | 131 | 132 | 135 | ``` 136 | 137 | ## Sites using vue-notion 🌎 138 | 139 | List of pages that are using this library. 140 | 141 | - [HelpKit](https://www.helpkit.so) — Build Knowledge Bases in Notion 142 | - [StorePreviewer](https://www.storepreviewer.com) — Preview and optimize your app store presence 143 | - [Dominik Sobe's Personal Site](https://dominiksobe.com/) 144 | - [Bersihin Tech](https://tech.bersihin.co/) 145 | - [Wisata Diary](https://wisatabook.com/diary) 146 | - [AymaneMx's Blog](https://aymanemx.com/posts/) 147 | - [Notaku](https://notaku.website?ref=vue-notion) — Build docs and blog websites from Notion pages 148 | - _...if you're using `vue-notion`, we'd be happy to feature you here_ 149 | 150 | ## Supported Blocks 151 | 152 | Most common block types are supported. We happily accept pull requests to add support for the missing blocks. 153 | 154 | | Block Type | Supported | Notes | 155 | | ----------------- | -------------- | ---------------------- | 156 | | Text | ✅ Yes | | 157 | | Heading | ✅ Yes | | 158 | | Image | ✅ Yes | | 159 | | Image Caption | ✅ Yes | | 160 | | Bulleted List | ✅ Yes | | 161 | | Numbered List | ✅ Yes | | 162 | | Quote | ✅ Yes | | 163 | | Callout | ✅ Yes | | 164 | | Column | ✅ Yes | | 165 | | iframe | ✅ Yes | | 166 | | Video | ✅ Yes | Only embedded videos | 167 | | Divider | ✅ Yes | | 168 | | Link | ✅ Yes | | 169 | | Code | ✅ Yes | | 170 | | Web Bookmark | ✅ Yes | | 171 | | Toggle List | ✅ Yes | | 172 | | Page Links | ✅ Yes | | 173 | | Cover | ✅ Yes | Enable with `fullPage` | 174 | | Equations | ✅ Yes | | 175 | | Checkbox | ✅ Yes | | 176 | | Simple Tables | ✅ Yes | | 177 | | Databases | ❌ Not planned | | 178 | | Table Of Contents | ❌ Not planned | | 179 | 180 | Please, feel free to [open an issue](https://github.com/janniks/vue-notion/issues/new) if you notice any important blocks missing or anything wrong with existing blocks. 181 | 182 | ## Credits 183 | 184 | - [janniksco](https://twitter.com/janniksco) – vue-notion Code 185 | - [Dominik Sobe](https://twitter.com/sobedominik) – vue-notion Inspiration, Debugging 186 | - [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors) 187 | - [Tobias Lins](https://tobi.sh) – react-notion Idea, Code 188 | - [Timo Lins](https://timo.sh) – react-notion Code, Documentation 189 | - [samwightt](https://github.com/samwightt) – react-notion Inspiration & API Typings 190 | - [react-notion Contributors 💕](https://github.com/splitbee/react-notion/graphs/contributors) 191 | 192 | * Big thanks to [NuxtJS](https://nuxtjs.org) for being awesome! 193 | 194 | ## License ⚖️ 195 | 196 | MIT © [janniksco](https://twitter.com/janniksco) 197 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | const devPresets = ['@vue/babel-preset-app']; 2 | const buildPresets = ['@babel/preset-env']; 3 | module.exports = { 4 | presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets), 5 | }; 6 | -------------------------------------------------------------------------------- /dev/serve.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./serve.vue"; 3 | 4 | import Vue3Katex from "@janniks/vue3-katex"; 5 | import { NotionRenderer } from "@/entry"; 6 | 7 | const app = createApp(App); 8 | 9 | app.use(Vue3Katex); 10 | app.component("NotionRenderer", NotionRenderer); 11 | 12 | app.mount("#app"); 13 | -------------------------------------------------------------------------------- /dev/serve.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 32 | 33 | 39 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Docs 2 | 3 | - `NotionRenderer`: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#notionrenderer) 4 | - Syntax-Highlighting in Code Blocks (with Prism.js): [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#syntax-highlighting) 5 | - Equations: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#equations) 6 | - Notion API: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#notion-api) 7 | - Nuxt: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#nuxtjs--server-side-rendering--static-site-generation) 8 | 9 | > Check out a full working demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨ 10 | > The code for the demo is in [`example/`](https://github.com/janniks/vue-notion/tree/main/example). 11 | 12 | ## `NotionRenderer` 13 | 14 | The `NotionRenderer` component offers a few properties 15 | 16 | - [`blockMap`](#blockMap) – required 17 | - [`blockOverrides`](#blockOverrides) – default: `{}` 18 | - [`contentId`](#contentId) – default: `undefined` 19 | - [`embedAllow`](#embedAllow) – default: `"fullscreen"` 20 | - [`fullPage`](#fullPage) – default: `false` 21 | - [`hideList`](#hideList) – default: `[]` 22 | - [`imageOptions`](#imageOptions) – default: `undefined` 23 | - [`mapImageUrl`](#mapImageUrl) – default: `defaultMapImageUrl()` 24 | - [`mapPageUrl`](#mapPageUrl) – default: `defaultMapPageUrl()` 25 | - [`pageLinkOptions`](#pageLinkOptions) – default: `undefined` 26 | - [`pageLinkTarget`](#pageLinkTarget) – default: `"_self"` 27 | - [`prism`](#prism) – default: `false` 28 | - [`katex`](#katex) – default: `false` 29 | - [`textLinkTarget`](#textLinkTarget) – default: `"_blank"` 30 | 31 | ### `blockMap`: Object 32 | 33 | – the blocks part of a Notion API response. 34 | A list of blocks by their id that may contain contents and properties. 35 | 36 | ### `blockOverrides`: Object 37 | 38 | – the Notion blocks that should be overriden by custom registered Vue components. 39 | A key-value pair Object of Notion block names to Vue component names. 40 | 41 | e.g. to use a custom `code` component—after registering the `CustomCode` Vue component—add the following override, as seen in the `/example` 42 | 43 | ```js 44 | blockOverrides: { 45 | code: "CustomCode", 46 | } 47 | ``` 48 | 49 | ### `contentId`: String 50 | 51 | – the id of the block that should be rendered. 52 | If this is `undefined` the _first_ block is rendered. 53 | _Usually the first block contains the rest of the page._ 54 | 55 | ### `embedAllow`: String 56 | 57 | – the [`allow` feature policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow) for embedded `