Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 976a0f5

Browse files
committed
Merge remote-tracking branch 'upstream/main' into add-sync-block
# Conflicts: # src/components/block.vue
2 parents ba73d11 + b628174 commit 976a0f5

40 files changed

+4422
-3231
lines changed

‎.prettierrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,7 @@ Most common block types are supported. We happily accept pull requests to add su
188188
| Cover | ✅ Yes | Enable with `fullPage` |
189189
| Equations | ✅ Yes | |
190190
| Checkbox | ✅ Yes | |
191+
| Simple Tables | ✅ Yes | |
191192
| Databases | ❌ Not planned | |
192193
| Table Of Contents | ❌ Not planned | |
193194

‎dev/serve.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ export default {
2222
async created() {
2323
// react-notion tester: 2e22de6b770e4166be301490f6ffd420
2424
// equation tester: 2a1d5226d68246deba627012081693f9
25+
// table tester: bd1de400a8b349dc824f4f00e61d0797
2526
// todo tester: 235057194b954a60ace89c052a65d102
26-
this.blockMap = await getPageBlocks("4bdce11cd93544e5b96e5b1857cea6dc");
27+
this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420");
2728
},
2829
};
2930
</script>

‎docs/README.md‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@
1414
The `NotionRenderer` component offers a few properties
1515

1616
- [`blockMap`](#blockMap) – required
17+
- [`blockOverrides`](#blockOverrides) – default: `{}`
1718
- [`contentId`](#contentId) – default: `undefined`
1819
- [`embedAllow`](#embedAllow) – default: `"fullscreen"`
1920
- [`fullPage`](#fullPage) – default: `false`
2021
- [`hideList`](#hideList) – default: `[]`
22+
- [`imageOptions`](#imageOptions) – default: `undefined`
2123
- [`mapImageUrl`](#mapImageUrl) – default: `defaultMapImageUrl()`
2224
- [`mapPageUrl`](#mapPageUrl) – default: `defaultMapPageUrl()`
2325
- [`pageLinkOptions`](#pageLinkOptions) – default: `undefined`
@@ -31,6 +33,19 @@ The `NotionRenderer` component offers a few properties
3133
– the blocks part of a Notion API response.
3234
A list of blocks by their id that may contain contents and properties.
3335

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+
3449
### `contentId`: String
3550

3651
– the id of the block that should be rendered.
@@ -50,6 +65,23 @@ The default allows embeds to enter fullscreen.
5065

5166
– a list of Notion blocks (e.g. `"callout"`) that should not be rendered.
5267

68+
### `imageOptions`: Object
69+
70+
– are used to override default image rendering.
71+
`imageOptions` is an `Object` that requires a `component` parameter.
72+
The `src` attribute is optional and defaults to `src`.
73+
Any additional key value pairs are spread onto the component as element attributes.
74+
75+
e.g. to use `nuxt-img` components instead of HTML `img` elements
76+
77+
```js
78+
imageOptions: {
79+
component: "nuxt-img",
80+
"some-attribute": "vue-notion-attr",
81+
// src: 'src', // (default) can be overridden to customize the key of the `src` attribute
82+
}
83+
```
84+
5385
### `mapImageUrl`: Function
5486

5587
– a function that receives `(imageUrl: String, block: Object)` and returns a `url: String` that should be used during rendering.
@@ -74,7 +106,8 @@ mapPageUrl(pageId = "") {
74106
### `pageLinkOptions`: Object
75107

76108
– are used to override links to other Notion pages with custom Vue components.
77-
`pageLinkOptions` is an `Object` that requires a `component` and a `href` parameter.
109+
`pageLinkOptions` is an `Object` that requires a `component` parameter.
110+
The `href` attribute is optional and defaults to `href`.
78111

79112
e.g., to use `NuxtLink` components instead of HTML `a` elements
80113

@@ -190,7 +223,7 @@ There are a few required steps to allow Nuxt to work with vue-notion
190223
// nuxt.config.js
191224
export default {
192225
// ...
193-
buildModules: ["vue-notion/nuxt"],
226+
buildModules: ["vue-notion/nuxt"]
194227
};
195228
```
196229

‎example/nuxt.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,8 @@ export default {
2323
buildModules: ["vue-notion/nuxt"],
2424

2525
// Plugins (e.g. vue-katex for equations)
26-
plugins: ["~/plugins/vue-katex.js"],
26+
plugins: [
27+
"~/plugins/vue-katex.js",
28+
"~/plugins/vue-custom-notion-component.js",
29+
],
2730
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /