Update examples

Author: janniks

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,41 +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 -->
 
-### Docs
+- `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)
 
-> Check out a demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨
+> 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).
 
-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).
+## Examples
+
+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/vue](https://vue-notion.now.sh/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
 <template>
@@ -108,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 a page received from the Notion API in `.json` and use it without the `async/await` part.
-
-### Basic Example for Nuxt
+### Basic Example for NuxtJS
 
-This example is hosted at [vue-notion.now.sh/nuxt](https://vue-notion.now.sh/nuxt).
+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>
@@ -125,25 +129,25 @@ 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 }
+    const blockMap = await $notion.getPageBlocks(
+      "8c1ab01960b049f6a282dda64a94afc7"
+    );
+    return { blockMap };
   },
 };
+</script>
 
 <style>
 @import "vue-notion/src/styles.css"; /* optional Notion-like styles */
 </style>
 ```
 
-> ⚠️ 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!
@@ -184,7 +188,7 @@ Most common block types are supported. We happily accept pull requests to add su
 | 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.
+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
 
@@ -196,7 +200,7 @@ Please, feel free to [open an issue](https://github.com/janniks/vue-notion/issue
 - [samwightt](https://github.com/samwightt) – react-notion Inspiration & API Typings
 - [react-notion Contributors 💕](https://github.com/splitbee/react-notion/graphs/contributors)
 
-- Big thanks to [Nuxt](https://nuxtjs.org) for being awesome!
+- Big thanks to [NuxtJS](https://nuxtjs.org) for being awesome!
 
 ## License ⚖️
 

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/pages/nuxt.vue

@@ -10,11 +10,11 @@ export default {
     const blockMap = await $notion.getPageBlocks(
       "8c1ab01960b049f6a282dda64a94afc7"
     );
-
     return { blockMap };
   },
 };
+</script>
 
 <style>
-  @import "vue-notion/src/styles.css"; /* optional Notion-like styles */
-</style>;
+@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
+</style>