Merge pull request #83 from janniks/add-block-overrides

Add block overrides

Author: janniks

dev/serve.js

@@ -8,5 +8,5 @@ Vue.use(VueKatex);
 Vue.config.productionTip = false;
 
 new Vue({
-  render: (h) => h(Dev),
+  render: h => h(Dev)
 }).$mount("#app");

docs/README.md

@@ -14,6 +14,7 @@
 The `NotionRenderer` component offers a few properties
 
 - [`blockMap`](#blockMap) – required
+- [`blockOverrides`](#blockOverrides) – default: `{}`
 - [`contentId`](#contentId) – default: `undefined`
 - [`embedAllow`](#embedAllow) – default: `"fullscreen"`
 - [`fullPage`](#fullPage) – default: `false`
@@ -32,6 +33,19 @@ The `NotionRenderer` component offers a few properties
 – the blocks part of a Notion API response.
 A list of blocks by their id that may contain contents and properties.
 
+### `blockOverrides`: Object
+
+– the Notion blocks that should be overriden by custom registered Vue components.
+A key-value pair Object of Notion block names to Vue component names.
+
+e.g. to use a custom `code` component—after registering the `CustomCode` Vue component—add the following override, as seen in the `/example`
+
+```js
+blockOverrides: {
+  code: "CustomCode",
+}
+```
+
 ### `contentId`: String
 
 – the id of the block that should be rendered.

example/nuxt.config.js

@@ -23,5 +23,8 @@ export default {
   buildModules: ["vue-notion/nuxt"],
 
   // Plugins (e.g. vue-katex for equations)
-  plugins: ["~/plugins/vue-katex.js"],
+  plugins: [
+    "~/plugins/vue-katex.js",
+    "~/plugins/vue-custom-notion-component.js",
+  ],
 };

example/pages/_slug.vue

@@ -1,6 +1,7 @@
 <template>
   <NotionRenderer
     :blockMap="blockMap"
+    :blockOverrides="blockOverrides"
     :pageLinkOptions="pageLinkOptions"
     fullPage
     prism
@@ -15,6 +16,7 @@ import "prismjs/themes/prism.css";
 export default {
   data() {
     return {
+      blockOverrides: { code: "CustomCode" },
       pageLinkOptions: { component: "NuxtLink", href: "to" },
     };
   },

example/plugins/custom-code.vue

@@ -0,0 +1,30 @@
+<template>
+  <pre
+    class="notion-code-wrapper"
+    :style="{
+      border: '3px solid tomato',
+    }"
+  >
+    <NotionCode v-bind="pass"/>
+  </pre>
+</template>
+
+<script>
+import { NotionCode, Blockable, blockComputed, blockProps } from "vue-notion";
+
+export default {
+  extends: Blockable,
+  name: "CustomCode",
+  components: {
+    NotionCode,
+  },
+  props: {
+    ...blockProps,
+    //> your own additional props
+  },
+  computed: {
+    ...blockComputed,
+    //> your own additional `computed` methods go here
+  },
+};
+</script>

example/plugins/vue-custom-notion-component.js

@@ -0,0 +1,4 @@
+import Vue from "vue";
+import CustomCode from "./custom-code.vue";
+
+Vue.component("CustomCode", CustomCode);

package.json

@@ -15,12 +15,14 @@
   ],
   "scripts": {
     "serve": "vue-cli-service serve dev/serve.js",
-    "example": "nuxt example",
-    "example:pack": "npm pack && cd example && npm install && npm install ../*.tgz && npm run build && npm run generate",
+    "example": "npm run example:generate && cd example && npm start",
+    "example:install": "npm pack && cd example && npm install && npm install ../*.tgz",
+    "example:generate": "npm run example:install && cd example && npm run build && npm run generate",
     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
+    "clean": "rm -rf node_modules dist example/node_modules example/dist example/.nuxt",
     "release:minor": "npm version minor -m 'Release %s' && npm publish",
     "release:patch": "npm version patch -m 'Release %s' && npm publish",
     "postpublish": "echo \"\\033[31m !!! Now, manually run: ./scripts/postpublish.sh !!! \\033[00m\"",

src/blocks/bookmark.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
 export default {

src/blocks/callout.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionPageIcon from "@/blocks/helpers/page-icon";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 

src/blocks/code.vue

@@ -12,7 +12,7 @@
 <script>
 import Prism from "prismjs";
 import PrismComponent from "vue-prism-component";
-import Blockable, { blockComputed, blockProps } from "@/lib/blockable";
+import { Blockable, blockComputed, blockProps } from "@/lib/blockable";
 
 export default {
   extends: Blockable,