Skip to content

Commit f81939a

Browse files
janniksjanniks
committed
Refactor example
1 parent 0dba503 commit f81939a

File tree

8 files changed

+107
-8976
lines changed

8 files changed

+107
-8976
lines changed

‎.gitignore‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
yarn.lock
12

2-
# Created by https://www.toptal.com/developers/gitignore/api/macOS,Node,Vuejs,Vue
3-
# Edit at https://www.toptal.com/developers/gitignore?templates=macOS,Node,Vuejs,Vue
3+
# Created by https://www.toptal.com/developers/gitignore/api/Node,macOS,Vue,Vuejs,yarn
4+
# Edit at https://www.toptal.com/developers/gitignore?templates=Node,macOS,Vue,Vuejs,yarn
45

56
### macOS ###
67
# General
@@ -9,7 +10,8 @@
910
.LSOverride
1011

1112
# Icon must end with two \r
12-
Icon
13+
Icon
14+
1315

1416
# Thumbnails
1517
._*
@@ -159,4 +161,20 @@ dist/
159161
npm-debug.log
160162
yarn-error.log
161163

162-
# End of https://www.toptal.com/developers/gitignore/api/macOS,Node,Vuejs,Vue
164+
### yarn ###
165+
# https://yarnpkg.com/advanced/qa#which-files-should-be-gitignored
166+
167+
.yarn/*
168+
!.yarn/releases
169+
!.yarn/plugins
170+
!.yarn/sdks
171+
!.yarn/versions
172+
173+
# if you are NOT using Zero-installs, then:
174+
# comment the following lines
175+
!.yarn/cache
176+
177+
# and uncomment the following lines
178+
# .pnp.*
179+
180+
# End of https://www.toptal.com/developers/gitignore/api/Node,macOS,Vue,Vuejs,yarn

‎README.md‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ npm install vue-notion
5858
```
5959

6060
### NuxtJS Module
61+
6162
```js
6263
// nuxt.config.js
6364

@@ -82,7 +83,7 @@ More information on the `NotionRenderer` specification, syntax-highlighting, the
8283

8384
### Basic Example for Vue
8485

85-
This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome).
86+
This example is hosted at [vue-notion.now.sh/vue](https://vue-notion.now.sh/vue).
8687

8788
```vue
8889
<template>
@@ -108,11 +109,11 @@ export default {
108109
```
109110

110111
The example above uses a simple wrapper around the [notion-api-worker](https://github.com/splitbee/notion-api-worker).
111-
It is also possible to store and use plain `.json` objects received from the Notion API.
112+
It is also possible to store a page received from the Notion API in `.json` and use it without the `async/await` part.
112113

113114
### Basic Example for Nuxt
114115

115-
This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome).
116+
This example is hosted at [vue-notion.now.sh/nuxt](https://vue-notion.now.sh/nuxt).
116117

117118
```vue
118119
<template>
@@ -123,7 +124,7 @@ This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/
123124
export default {
124125
data: () => ({ blockMap: null }),
125126
async asyncData({ $notion }) {
126-
// use notion module to get Notion blocks from the API via a Notion pageId
127+
// use Notion module to get Notion blocks from the API via a Notion pageId
127128
const blockMap = await $notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
128129
129130
return { blockMap }
@@ -134,8 +135,6 @@ export default {
134135
@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
135136
</style>
136137
```
137-
</script>
138-
139138

140139
> ⚠️ Use with caution.
141140
> The `getPageBlocks` and `getPageTable` are based on the private Notion API.
@@ -160,42 +159,45 @@ List of pages that are using this library.
160159

161160
Most common block types are supported. We happily accept pull requests to add support for the missing blocks.
162161

163-
| Block Type | Supported | Notes |
164-
| ----------------- | -------------- | ------------------------ |
165-
| Text | ✅ Yes | |
166-
| Heading | ✅ Yes | |
167-
| Image | ✅ Yes | |
168-
| Image Caption | ✅ Yes | |
169-
| Bulleted List | ✅ Yes | |
170-
| Numbered List | ✅ Yes | |
171-
| Quote | ✅ Yes | |
172-
| Callout | ✅ Yes | |
173-
| Column | ✅ Yes | |
174-
| iframe | ✅ Yes | |
175-
| Video | ✅ Yes | Only embedded videos |
176-
| Divider | ✅ Yes | |
177-
| Link | ✅ Yes | |
178-
| Code | ✅ Yes | |
179-
| Web Bookmark | ✅ Yes | |
180-
| Toggle List | ✅ Yes | |
181-
| Page Links | ✅ Yes | |
182-
| Cover | ✅ Yes | Enable with `fullPage` |
183-
| Databases | ❌ Not planned | |
184-
| Checkbox | ❌ Not planned | |
185-
| Table Of Contents | ❌ Not planned | |
162+
| Block Type | Supported | Notes |
163+
| ----------------- | -------------- | ---------------------- |
164+
| Text | ✅ Yes | |
165+
| Heading | ✅ Yes | |
166+
| Image | ✅ Yes | |
167+
| Image Caption | ✅ Yes | |
168+
| Bulleted List | ✅ Yes | |
169+
| Numbered List | ✅ Yes | |
170+
| Quote | ✅ Yes | |
171+
| Callout | ✅ Yes | |
172+
| Column | ✅ Yes | |
173+
| iframe | ✅ Yes | |
174+
| Video | ✅ Yes | Only embedded videos |
175+
| Divider | ✅ Yes | |
176+
| Link | ✅ Yes | |
177+
| Code | ✅ Yes | |
178+
| Web Bookmark | ✅ Yes | |
179+
| Toggle List | ✅ Yes | |
180+
| Page Links | ✅ Yes | |
181+
| Cover | ✅ Yes | Enable with `fullPage` |
182+
| Equations | ✅ Planned | |
183+
| Databases | ❌ Not planned | |
184+
| Checkbox | ❌ Not planned | |
185+
| Table Of Contents | ❌ Not planned | |
186186

187187
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.
188188

189189
## Credits
190190

191191
- [Jannik Siebert](https://twitter.com/jnnksbrt) – vue-notion Code
192192
- [Dominik Sobe](https://twitter.com/sobedominik) – vue-notion Inspiration, Debugging
193+
- [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors)
193194
- [Tobias Lins](https://tobi.sh) – react-notion Idea, Code
194195
- [Timo Lins](https://timo.sh) – react-notion Code, Documentation
195196
- [samwightt](https://github.com/samwightt) – react-notion Inspiration & API Typings
196-
- [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors)
197197
- [react-notion Contributors 💕](https://github.com/splitbee/react-notion/graphs/contributors)
198198

199+
- Big thanks to [Nuxt](https://nuxtjs.org) for being awesome!
200+
199201
## License ⚖️
200202

201203
MIT © [Jannik Siebert](https://twitter.com/jnnksbrt)

‎example/nuxt.config.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,5 @@ export default {
2020
components: true,
2121

2222
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
23-
buildModules: [
24-
'vue-notion/nuxt'
25-
]
23+
buildModules: ["vue-notion/nuxt"],
2624
};

‎example/pages/nuxt.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<NotionRenderer :blockMap="blockMap" fullPage />
3+
</template>
4+
5+
<script>
6+
export default {
7+
data: () => ({ blockMap: null }),
8+
async asyncData({ $notion }) {
9+
// use Notion module to get Notion blocks from the API via a Notion pageId
10+
const blockMap = await $notion.getPageBlocks(
11+
"8c1ab01960b049f6a282dda64a94afc7"
12+
);
13+
14+
return { blockMap };
15+
},
16+
};
17+
18+
<style>
19+
@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
20+
</style>;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
</template>
44

55
<script>
6+
import { NotionRenderer, getPageBlocks } from "vue-notion";
7+
68
export default {
9+
components: { NotionRenderer },
710
data: () => ({ blockMap: null }),
8-
async asyncData({ $notion }) {
11+
async created() {
912
// get Notion blocks from the API via a Notion pageId
10-
const blockMap = await $notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
11-
12-
return { blockMap }
13+
this.blockMap = await getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
1314
},
1415
};
1516
</script>

‎nuxt/index.js‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
1-
import path from 'path'
2-
import defu from 'defu'
1+
import path from "path";
2+
import defu from "defu";
33

4-
const defaultOptions = {}
4+
const defaultOptions = {};
55

6-
module.exports = function (moduleOptions) {
7-
const options = defu({
8-
...this.options.notion,
9-
...moduleOptions
10-
}, defaultOptions)
6+
module.exports = function(moduleOptions) {
7+
const options = defu(
8+
{
9+
...this.options.notion,
10+
...moduleOptions,
11+
},
12+
defaultOptions
13+
);
1114

12-
this.nuxt.hook('build:before', () => {
15+
this.nuxt.hook("build:before", () => {
1316
// Enable transpilation for `vue-notion`
14-
this.options.build.transpile.push('vue-notion')
17+
this.options.build.transpile.push("vue-notion");
1518

1619
this.addPlugin({
17-
src: path.resolve(__dirname, 'plugin.js'),
18-
fileName: 'vue-notion.js',
19-
options
20-
})
21-
})
22-
}
20+
src: path.resolve(__dirname, "plugin.js"),
21+
fileName: "vue-notion.js",
22+
options,
23+
});
24+
});
25+
};
2326

24-
module.exports.meta = require('../package.json')
27+
module.exports.meta = require("../package.json");

‎nuxt/plugin.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import Vue from 'vue'
2-
import VueNotion from 'vue-notion'
3-
import { getPageBlocks, getPageTable } from 'vue-notion'
1+
import Vue from "vue";
2+
import VueNotion from "vue-notion";
3+
import { getPageBlocks, getPageTable } from "vue-notion";
44

5-
Vue.use(VueNotion)
5+
Vue.use(VueNotion);
66

77
export default (_, inject) => {
8-
const notion = { getPageBlocks, getPageTable }
9-
inject('notion', notion)
10-
}
8+
const notion = { getPageBlocks, getPageTable };
9+
inject("notion", notion);
10+
};

0 commit comments

Comments
 (0)