diff --git a/.gitignore b/.gitignore index 23d1997..3e679ec 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ +yarn.lock -# Created by https://www.toptal.com/developers/gitignore/api/macOS,Node,Vuejs,Vue -# Edit at https://www.toptal.com/developers/gitignore?templates=macOS,Node,Vuejs,Vue +# Created by https://www.toptal.com/developers/gitignore/api/Vue,Node,macOS,Vuejs,yarn +# Edit at https://www.toptal.com/developers/gitignore?templates=Vue,Node,macOS,Vuejs,yarn ### macOS ### # General @@ -159,4 +160,20 @@ dist/ npm-debug.log yarn-error.log -# End of https://www.toptal.com/developers/gitignore/api/macOS,Node,Vuejs,Vue +### yarn ### +# https://yarnpkg.com/advanced/qa#which-files-should-be-gitignored + +.yarn/* +!.yarn/releases +!.yarn/plugins +!.yarn/sdks +!.yarn/versions + +# if you are NOT using Zero-installs, then: +# comment the following lines +!.yarn/cache + +# and uncomment the following lines +# .pnp.* + +# End of https://www.toptal.com/developers/gitignore/api/Vue,Node,macOS,Vuejs,yarn diff --git a/README.md b/README.md index 7714c2d..7d97dec 100644 --- a/README.md +++ b/README.md @@ -8,10 +8,10 @@ · Install · - Example - · Docs · + Examples + · Credits @@ -49,25 +49,48 @@ This package doesn't handle the communication with the API. Check out [notion-ap 🔮 **Syntax-Highlighting** – Beautiful themeable code highlighting using Prism.js -🌎 **SSR / Static Generation Support** – Functions to work with Nuxt and other frameworks +🌎 **SSR / Static Generation Support** – Functions to work with NuxtJS and other frameworks ## Install +### Vue + ```bash npm install vue-notion ``` -## How To +### NuxtJS Module + +Install as shown above and add `"vue-notion/nuxt"` to the `buildModules` array in `nuxt.config.js`. + +```js +// nuxt.config.js +export default { + // ... + buildModules: ["vue-notion/nuxt"], +}; +``` + +## Docs -### Docs + -> Check out a demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨ +- `NotionRenderer`: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs) +- Syntax Highlighting in Code Blocks (with Prism.js): [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs) +- Notion API: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs) +- Nuxt: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs) -More information on the `NotionRenderer` specification, syntax-highlighting, the Notion API, and integration with Nuxt can be found at [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs). +> Check out a full working demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨ +> The code for the demo is in [`example/`](https://github.com/janniks/vue-notion/tree/main/example). -### Basic Example +## Examples -This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome). +These examples use a simple wrapper around the [`notion-api-worker`](https://github.com/splitbee/notion-api-worker). +It is also possible to store a page received from the Notion API in `.json` and use it without the `async/await` part. + +### Basic Example for Vue + +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). ```vue + + diff --git a/example/pages/posts.vue b/example/pages/posts.vue index e7c403a..5312253 100644 --- a/example/pages/posts.vue +++ b/example/pages/posts.vue @@ -35,11 +35,9 @@ diff --git a/nuxt/index.js b/nuxt/index.js new file mode 100644 index 0000000..6c5a4c5 --- /dev/null +++ b/nuxt/index.js @@ -0,0 +1,27 @@ +import path from "path"; +import defu from "defu"; + +const defaultOptions = {}; + +module.exports = function(moduleOptions) { + const options = defu( + { + ...this.options.notion, + ...moduleOptions, + }, + defaultOptions + ); + + this.nuxt.hook("build:before", () => { + // Enable transpilation for `vue-notion` + this.options.build.transpile.push("vue-notion"); + + this.addPlugin({ + src: path.resolve(__dirname, "plugin.js"), + fileName: "vue-notion.js", + options, + }); + }); +}; + +module.exports.meta = require("../package.json"); diff --git a/nuxt/plugin.js b/nuxt/plugin.js new file mode 100644 index 0000000..0decec8 --- /dev/null +++ b/nuxt/plugin.js @@ -0,0 +1,10 @@ +import Vue from "vue"; +import VueNotion from "vue-notion"; +import { getPageBlocks, getPageTable } from "vue-notion"; + +Vue.use(VueNotion); + +export default (_, inject) => { + const notion = { getPageBlocks, getPageTable }; + inject("notion", notion); +}; diff --git a/package.json b/package.json index 1c0dc18..36c36f3 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,12 @@ "files": [ "dist/**/*.js", "dist/**/*.css", - "src/**/*.css" + "src/**/*.css", + "nuxt/*.js" ], "scripts": { "serve": "vue-cli-service serve dev/serve.js", + "example": "nuxt example", "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js", "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs", "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es", @@ -24,6 +26,7 @@ }, "dependencies": { "cross-fetch": "^3.0.6", + "defu": "^3.2.2", "vue-fragment": "^1.5.1", "vue-prism-component": "^1.2.0" },