From e99545dfdc149342ba5f7977d701ed51b47f7bb9 Mon Sep 17 00:00:00 2001 From: janniks Date: Wed, 24 Jul 2024 15:54:20 +0200 Subject: [PATCH 1/5] feat: add experimental page link mention support --- dev/serve.vue | 1 + src/blocks/decorator.vue | 13 +++++++++++++ src/blocks/mention.vue | 31 +++++++++++++++++++++++++++++++ src/styles.css | 15 +++++++++++++++ 4 files changed, 60 insertions(+) create mode 100644 src/blocks/mention.vue diff --git a/dev/serve.vue b/dev/serve.vue index eac4358..f418be2 100644 --- a/dev/serve.vue +++ b/dev/serve.vue @@ -26,6 +26,7 @@ export default { // table tester: bd1de400a8b349dc824f4f00e61d0797 // todo tester: 235057194b954a60ace89c052a65d102 // indent tester: 5b494cf668b04197882fe1b66c6ee2a8 + // mention tester: f53ddc084206442098cab6b4fa016d94 this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420"); }, }; diff --git a/src/blocks/decorator.vue b/src/blocks/decorator.vue index 279849f..7a81641 100644 --- a/src/blocks/decorator.vue +++ b/src/blocks/decorator.vue @@ -7,6 +7,11 @@ > {{ pageLinkTitle }} + import { Blockable, blockProps } from "@/lib/blockable"; +import NotionMention from "@/blocks/mention"; export default { extends: Blockable, name: "NotionDecorator", props: { ...blockProps, content: Array }, + components: { NotionMention }, + mounted() { + console.log("content", this.content); + console.log("decorators", this.decorators); + console.log("decoratorValue", this.decoratorValue); + console.log("isValueArray", this.isValueArray); + }, computed: { text() { return this.content?.[0]; diff --git a/src/blocks/mention.vue b/src/blocks/mention.vue new file mode 100644 index 0000000..ffa00e1 --- /dev/null +++ b/src/blocks/mention.vue @@ -0,0 +1,31 @@ + + + + + + + diff --git a/src/styles.css b/src/styles.css index 7f97d50..22cd4b6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -726,3 +726,18 @@ img.notion-nav-icon { flex-direction: column; padding-left: 1.5em; } + +.notion-text-mention-icon { + padding: 0; + width: 1.2em; + height: 1.2em; + border-radius: 3px; + vertical-align: -0.15em; + margin-right: 0.3em; +} + +.notion-text-mention-title { + border-bottom: 0.05em solid solid rgba(55, 55, 55, 1); + font-weight: 500; + flex-shrink: 0; +} From 0295ed84043b88bd972ddfe78fcd62867d651157 Mon Sep 17 00:00:00 2001 From: janniks Date: Wed, 24 Jul 2024 15:59:03 +0200 Subject: [PATCH 2/5] chore: cleanup --- src/blocks/decorator.vue | 8 +------- src/blocks/helpers/mention.vue | 19 +++++++++++++++++++ src/blocks/mention.vue | 31 ------------------------------- src/components/index.js | 1 + 4 files changed, 21 insertions(+), 38 deletions(-) create mode 100644 src/blocks/helpers/mention.vue delete mode 100644 src/blocks/mention.vue diff --git a/src/blocks/decorator.vue b/src/blocks/decorator.vue index 7a81641..8c56f1b 100644 --- a/src/blocks/decorator.vue +++ b/src/blocks/decorator.vue @@ -72,19 +72,13 @@ diff --git a/src/blocks/mention.vue b/src/blocks/mention.vue deleted file mode 100644 index ffa00e1..0000000 --- a/src/blocks/mention.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - diff --git a/src/components/index.js b/src/components/index.js index e879e60..8ac7cc2 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -22,6 +22,7 @@ export { default as NotionColumnSpacer } from "../blocks/helpers/column-spacer.v export { default as NotionFigure } from "../blocks/helpers/figure.vue"; export { default as NotionFragment } from "../blocks/helpers/fragment.vue"; export { default as NotionImage } from "../blocks/helpers/image.vue"; +export { default as NotionMention } from "../blocks/helpers/mention.vue"; export { default as NotionNestedList } from "../blocks/helpers/nested-list.vue"; export { default as NotionPageHeader } from "../blocks/helpers/page-header.vue"; export { default as NotionPageIcon } from "../blocks/helpers/page-icon.vue"; From 78975afb5eaf9fa461a545d9475ddc2c75c443f7 Mon Sep 17 00:00:00 2001 From: janniks Date: Fri, 26 Jul 2024 18:19:37 +0200 Subject: [PATCH 3/5] chore: make icon url optional --- src/blocks/helpers/mention.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/blocks/helpers/mention.vue b/src/blocks/helpers/mention.vue index 5c1e1f1..e5f0422 100644 --- a/src/blocks/helpers/mention.vue +++ b/src/blocks/helpers/mention.vue @@ -1,6 +1,10 @@ From d1ba7c0fe8f57002601d5549e4cbf6b92edad60c Mon Sep 17 00:00:00 2001 From: janniks Date: Fri, 26 Jul 2024 20:00:27 +0200 Subject: [PATCH 4/5] fix: update decorator order, add overrides --- docs/README.md | 8 +++++++- src/blocks/decorator.vue | 23 ++++++++++++++++------- src/lib/blockable.js | 16 +++++++++------- src/styles.css | 4 ++++ 4 files changed, 36 insertions(+), 15 deletions(-) diff --git a/docs/README.md b/docs/README.md index 6850397..658b22e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -16,6 +16,7 @@ The `NotionRenderer` component offers a few properties - [`blockMap`](#blockMap) – required - [`blockOverrides`](#blockOverrides) – default: `{}` - [`contentId`](#contentId) – default: `undefined` +- [`decoratorOverrides`](#decoratorOverrides) – default: `{}` - [`embedAllow`](#embedAllow) – default: `"fullscreen"` - [`fullPage`](#fullPage) – default: `false` - [`hideList`](#hideList) – default: `[]` @@ -52,6 +53,11 @@ blockOverrides: { If this is `undefined` the _first_ block is rendered. _Usually the first block contains the rest of the page._ +### `decoratorOverrides`: Object + +– the Notion text decorators that should be overriden by custom registered Vue components. +A key-value pair Object of Notion decorator names to Vue component names. + ### `embedAllow`: String – the [`allow` feature policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow) for embedded `