Merge branch 'add-nuxt-module' into add-nuxt-module-v3

Author: janniks

.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/Node,macOS,Vue,Vuejs,yarn
+# Edit at https://www.toptal.com/developers/gitignore?templates=Node,macOS,Vue,Vuejs,yarn
 
 ### macOS ###
 # General
@@ -9,7 +10,8 @@
 .LSOverride
 
 # Icon must end with two \r
-Icon
+Icon
+
 
 # Thumbnails
 ._*
@@ -159,4 +161,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/Node,macOS,Vue,Vuejs,yarn

README.md

@@ -8,10 +8,10 @@
   <span> · </span>
   <a href="#install">Install</a>
   <span> · </span>
-  <a href="#basic-example">Example</a>
-  <span> · </span>
   <a href="#docs">Docs</a>
   <span> · </span>
+  <a href="#examples">Examples</a>
+  <span> · </span>
   <a href="#credits">Credits</a>
 </h3>
 
@@ -49,40 +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
 ```
 
 ### 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'
-  ]
-  notion: {
-    // additionals configuration
-  }
-}
+  buildModules: ["vue-notion/nuxt"],
+};
 ```
 
-## How To
+## Docs
+
+<!-- todo: add # links to doc links -->
+
+- `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)
 
-### 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).
 
-> Check out a demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨
+## Examples
 
-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).
+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 hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome).
+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
 <template>
@@ -107,12 +115,9 @@ export default {
 </style>
 ```
 
-The example above uses a simple wrapper around the [notion-api-worker](https://github.com/splitbee/notion-api-worker).
-It is also possible to store and use plain `.json` objects received from the Notion API.
+### Basic Example for NuxtJS
 
-### Basic Example for Nuxt
-
-This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome).
+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).
 
 ```vue
 <template>
@@ -123,28 +128,26 @@ This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/
 export default {
   data: () => ({ blockMap: null }),
   async asyncData({ $notion }) {
-    // use notion module to get Notion blocks from the API via a Notion pageId
-    const blockMap = await $notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
-
-    return { blockMap }
+    // use Notion module to get Notion blocks from the API via a Notion pageId
+    const blockMap = await $notion.getPageBlocks(
+      "8c1ab01960b049f6a282dda64a94afc7"
+    );
+    return { blockMap };
   },
 };
+</script>
 
 <style>
 @import "vue-notion/src/styles.css"; /* optional Notion-like styles */
 </style>
 ```
-</script>
-
 
-> ⚠️ Use with caution.
+> ⚠️ Use with caution!
 > The `getPageBlocks` and `getPageTable` are based on the private Notion API.
-> We can not gurantee it will stay stable.
+> We can NOT guarantee that it will stay stable.
 > The private API is warpped by [notion-api-worker](https://github.com/splitbee/notion-api-worker).
 > 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).
 
-A [full working example using Nuxt and static generation](https://vue-notion.now.sh/) can be found inside the `example` directory.
-
 ## Roadmap
 
 [Add issues](https://github.com/janniks/vue-notion/issues/new), request features and upvote [block types](https://github.com/janniks/vue-notion/issues?q=is%3Aissue+is%3Aopen+label%3Ablock) that you want to see next!
@@ -160,42 +163,45 @@ List of pages that are using this library.
 
 Most common block types are supported. We happily accept pull requests to add support for the missing blocks.
 
-| Block Type        | Supported      | Notes                    |
-| ----------------- | -------------- | ------------------------ |
-| Text              | ✅ Yes         |                          |
-| Heading           | ✅ Yes         |                          |
-| Image             | ✅ Yes         |                          |
-| Image Caption     | ✅ Yes         |                          |
-| 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       | ✅ Yes         |                          |
-| Page Links        | ✅ Yes         |                          |
-| Cover             | ✅ Yes         | Enable with `fullPage`   |
-| Databases         | ❌ Not planned |                          |
-| Checkbox          | ❌ Not planned |                          |
-| Table Of Contents | ❌ Not planned |                          |
-
-Please, feel free to [open an issue](https://github.com/janniks/vue-notion/issues/new) if you notice any missing blocks or anything wrong with existing blocks.
+| Block Type        | Supported      | Notes                  |
+| ----------------- | -------------- | ---------------------- |
+| Text              | ✅ Yes         |                        |
+| Heading           | ✅ Yes         |                        |
+| Image             | ✅ Yes         |                        |
+| Image Caption     | ✅ Yes         |                        |
+| 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       | ✅ Yes         |                        |
+| Page Links        | ✅ Yes         |                        |
+| Cover             | ✅ Yes         | Enable with `fullPage` |
+| Equations         | ✅ Planned     |                        |
+| Databases         | ❌ Not planned |                        |
+| Checkbox          | ❌ Not planned |                        |
+| Table Of Contents | ❌ Not planned |                        |
+
+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.
 
 ## Credits
 
 - [Jannik Siebert](https://twitter.com/jnnksbrt) – vue-notion Code
 - [Dominik Sobe](https://twitter.com/sobedominik) – vue-notion Inspiration, Debugging
+- [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors)
 - [Tobias Lins](https://tobi.sh) – react-notion Idea, Code
 - [Timo Lins](https://timo.sh) – react-notion Code, Documentation
 - [samwightt](https://github.com/samwightt) – react-notion Inspiration & API Typings
-- [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors)
 - [react-notion Contributors 💕](https://github.com/splitbee/react-notion/graphs/contributors)
 
+- Big thanks to [NuxtJS](https://nuxtjs.org) for being awesome!
+
 ## License ⚖️
 
 MIT © [Jannik Siebert](https://twitter.com/jnnksbrt)

docs/README.md

@@ -57,7 +57,7 @@ mapPageUrl(pageId = "") {
 – are used to override links to other Notion pages with custom Vue components.
 `pageLinkOptions` is an `Object` that requires a `component` and a `href` parameter.
 
-e.g. to use `NuxtLink` components instead of HTML `a` elements
+e.g., to use `NuxtLink` components instead of HTML `a` elements
 
 ```js
 pageLinkOptions: {
@@ -114,7 +114,7 @@ const pageTable = await getPageTable("PAGE_ID", "ENDPOINT_URL");
 
 > Feel free to open an issue if something is unclear or additional documentation is needed...
 
-## Nuxt – Server-Side Rendering & Static Site Generation
+## NuxtJS – Server-Side Rendering & Static Site Generation
 
 > For a running project check out the extensive example at [example/](/example).
 
@@ -123,16 +123,17 @@ const pageTable = await getPageTable("PAGE_ID", "ENDPOINT_URL");
 There are a few required steps to allow Nuxt to work with vue-notion
 
 - Install vue-notion as a dependency to your Nuxt project – `npm install vue-notion`
-- Add `"vue-notion"` to the `build.transpile` array in `nuxt.config.js`.
+- Add `"vue-notion/nuxt"` to the `buildModules` array in `nuxt.config.js`.
 
 ```js
-build: {
-  transpile: ["vue-notion"];
-}
+// nuxt.config.js
+export default {
+  // ...
+  buildModules: ["vue-notion/nuxt"],
+};
 ```
 
-- Import the `NotionRenderer` in any component you want to use vue-notion in – `import { NotionRenderer } from "vue-notion"`
-- Voila, you can now use vue-notion as shown in the examples.
+- Voila, you can now use vue-notion (i.e., the `NotionRenderer` component and the Notion API methods via NuxtJS `$notion`) as shown in the examples.
 
 ### Static Pages
 

example/.gitignore

@@ -1,4 +1,5 @@
 package-lock.json
+yarn.lock
 
 # Created by .ignore support plugin (hsz.mobi)
 ### Node template

example/nuxt.config.js

@@ -20,7 +20,5 @@ export default {
   components: true,
 
   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
-  buildModules: [
-    'vue-notion/nuxt'
-  ]
+  buildModules: ["vue-notion/nuxt"],
 };

example/pages/nuxt.vue

@@ -0,0 +1,20 @@
+<template>
+  <NotionRenderer :blockMap="blockMap" fullPage />
+</template>
+
+<script>
+export default {
+  data: () => ({ blockMap: null }),
+  async asyncData({ $notion }) {
+    // use Notion module to get Notion blocks from the API via a Notion pageId
+    const blockMap = await $notion.getPageBlocks(
+      "8c1ab01960b049f6a282dda64a94afc7"
+    );
+    return { blockMap };
+  },
+};
+</script>
+
+<style>
+@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
+</style>

example/pages/basic-example.vue renamed to example/pages/vue.vue

@@ -1,24 +1,27 @@
-import path from 'path'
-import defu from 'defu'
+import path from "path";
+import defu from "defu";
 
-const defaultOptions = {}
+const defaultOptions = {};
 
-module.exports = function (moduleOptions) {
-  const options = defu({
-    ...this.options.notion,
-    ...moduleOptions
-  }, defaultOptions)
+module.exports = function(moduleOptions) {
+  const options = defu(
+    {
+      ...this.options.notion,
+      ...moduleOptions,
+    },
+    defaultOptions
+  );
 
-  this.nuxt.hook('build:before', () => {
+  this.nuxt.hook("build:before", () => {
     // Enable transpilation for `vue-notion`
-    this.options.build.transpile.push('vue-notion')
+    this.options.build.transpile.push("vue-notion");
 
     this.addPlugin({
-      src: path.resolve(__dirname, 'plugin.js'),
-      fileName: 'vue-notion.js',
-      options
-    })
-  })
-}
+      src: path.resolve(__dirname, "plugin.js"),
+      fileName: "vue-notion.js",
+      options,
+    });
+  });
+};
 
-module.exports.meta = require('../package.json')
+module.exports.meta = require("../package.json");

nuxt/index.js

@@ -1,10 +1,10 @@
-import Vue from 'vue'
-import VueNotion from 'vue-notion'
-import { getPageBlocks, getPageTable } from 'vue-notion'
+import Vue from "vue";
+import VueNotion from "vue-notion";
+import { getPageBlocks, getPageTable } from "vue-notion";
 
-Vue.use(VueNotion)
+Vue.use(VueNotion);
 
 export default (_, inject) => {
-  const notion = { getPageBlocks, getPageTable }
-  inject('notion', notion)
-}
+  const notion = { getPageBlocks, getPageTable };
+  inject("notion", notion);
+};