Merge branch 'main' of https://github.com/rylax/vue-notion into main

Author: rylax

README.md

@@ -35,7 +35,7 @@
 A Vue renderer for Notion pages.
 Use Notion as CMS for your blog, documentation or personal site.
 
-vue-notion was ported to Vue from [react-notion](https://github.com/splitbee/react-notion) (developed by [Splitbee 🐝](https://splitbee.io/) – a fast, reliable, free, and modern analytics for any team)
+Also check out [react-notion](https://github.com/splitbee/react-notion) (developed by [Splitbee 🐝](https://splitbee.io/) – a fast, reliable, free, and modern analytics for any team)
 
 This package doesn't handle the communication with the API. Check out [notion-api-worker](https://github.com/splitbee/notion-api-worker) from [Splitbee](https://splitbee.io/) for an easy solution.
 
@@ -150,16 +150,16 @@ export default {
 </style>
 ```
 
-## Issues & Roadmap
-
-[Add issues](https://github.com/janniks/vue-notion/issues/new) and request features that you want to see implemented next!
-
-## Sites using vue-notion
+## Sites using vue-notion 🌎
 
 List of pages that are using this library.
 
+- [HelpKit](https://www.helpkit.so) — Build Knowledge Bases in Notion
 - [StorePreviewer](https://www.storepreviewer.com) — Preview and optimize your app store presence
 - [Dominik Sobe's Personal Site](https://dominiksobe.com/)
+- [Bersihin Tech](https://tech.bersihin.co/)
+- [Wisata Diary](https://wisatabook.com/diary)
+- [AymaneMx's Blog](https://aymanemx.com/posts/)
 - _...if you're using `vue-notion`, we'd be happy to feature you here_
 
 ## Supported Blocks
@@ -187,8 +187,8 @@ Most common block types are supported. We happily accept pull requests to add su
 | Page Links        | ✅ Yes         |                        |
 | Cover             | ✅ Yes         | Enable with `fullPage` |
 | Equations         | ✅ Yes         |                        |
+| Checkbox          | ✅ Yes         |                        |
 | Databases         | ❌ Not planned |                        |
-| 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 important blocks missing or anything wrong with existing blocks.

dev/serve.js

@@ -3,10 +3,10 @@ import Dev from "./serve.vue";
 
 import VueKatex from "vue-katex";
 
-Vue.config.productionTip = false;
-
 Vue.use(VueKatex);
 
+Vue.config.productionTip = false;
+
 new Vue({
   render: (h) => h(Dev),
 }).$mount("#app");

dev/serve.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <NotionRenderer :blockMap="blockMap" fullPage prism todo />
+    <NotionRenderer :blockMap="blockMap" fullPage prism katex todo />
   </div>
 </template>
 
@@ -22,6 +22,7 @@ export default {
   async created() {
     // react-notion tester: 2e22de6b770e4166be301490f6ffd420
     // equation tester: 2a1d5226d68246deba627012081693f9
+    // todo tester: 235057194b954a60ace89c052a65d102
     this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420");
   },
 };

docs/README.md

@@ -23,6 +23,7 @@ The `NotionRenderer` component offers a few properties
 - [`pageLinkOptions`](#pageLinkOptions) – default: `undefined`
 - [`pageLinkTarget`](#pageLinkTarget) – default: `"_self"`
 - [`prism`](#prism) – default: `false`
+- [`katex`](#katex) – default: `false`
 - [`textLinkTarget`](#textLinkTarget) – default: `"_blank"`
 
 ### `blockMap`: Object
@@ -94,6 +95,12 @@ pageLinkOptions: {
 
 > Check the `docs#syntax-highlighting` section below for more details.
 
+### `katex`: Boolean
+
+– whether or not latex rendering using vue-katex should be activated.
+
+> Check the `docs#equations` section below for more details.
+
 ### `textLinkTarget`: String
 
 – the [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) of links
@@ -141,6 +148,13 @@ import VueKatex from "vue-katex";
 Vue.use(VueKatex);
 ```
 
+- Add the `katex` flag to the `NotionRenderer`
+
+```diff
+-<NotionRenderer :blockMap="blockMap" />
++<NotionRenderer :blockMap="blockMap" katex />
+```
+
 > For usage with Nuxt, look at the `/example` (`plugins` in `nuxt.config.js`, `plugins/vue-katex.js`)
 
 ## Notion API
@@ -155,8 +169,8 @@ Since, the endpoint is rate limited, please consider hosting your own instance (
 A custom endpoint URL can be passed to the methods as a second argument:
 
 ```js
-const blockMap = await getPageBlocks("PAGE_ID", "ENDPOINT_URL");
-const pageTable = await getPageTable("PAGE_ID", "ENDPOINT_URL");
+const blockMap = await getPageBlocks("PAGE_ID", "optional ENDPOINT_URL");
+const pageTable = await getPageTable("PAGE_ID", "optional ENDPOINT_URL");
 ```
 
 > Feel free to open an issue if something is unclear or additional documentation is needed...

example/package-lock.json

@@ -16,6 +16,6 @@
     "vue-katex": "^0.5.0"
   },
   "devDependencies": {
-    "vue-notion": "^1.2.1"
+    "vue-notion": "^1.3.0"
   }
 }

example/package.json

@@ -4,6 +4,7 @@
     :pageLinkOptions="pageLinkOptions"
     fullPage
     prism
+    katex
   />
 </template>
 
@@ -18,7 +19,9 @@ export default {
     };
   },
   async asyncData({ $notion, params, error }) {
-    const pageTable = await $notion.getPageTable("10327f9074b7433aad577ccd0020e971");
+    const pageTable = await $notion.getPageTable(
+      "10327f9074b7433aad577ccd0020e971"
+    );
     const page = pageTable.find(
       (item) => item.published && item.slug === params.slug
     );

example/pages/_slug.vue

@@ -10,6 +10,7 @@ export default {
     const blockMap = await $notion.getPageBlocks(
       "8c1ab01960b049f6a282dda64a94afc7"
     );
+
     return { blockMap };
   },
 };

example/pages/nuxt.vue

@@ -3,13 +3,14 @@
 </template>
 
 <script>
+import { NotionRenderer, getPageBlocks } from "vue-notion";
+
 export default {
+  components: { NotionRenderer },
   data: () => ({ blockMap: null }),
-  async asyncData({ $notion }) {
+  async created() {
     // get Notion blocks from the API via a Notion pageId
-    const blockMap = await $notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
-
-    return { blockMap }
+    this.blockMap = await getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
   },
 };
 </script>