feat: add alias, add indent (#143)

* fix: fix indent and page alias

* build: fix build

* chore: build

* chore: build

---------

Co-authored-by: janniks <[email protected]>

Author: janniks

dev/serve.vue

@@ -25,6 +25,7 @@ export default {
     // sync tester: c10e1556bec44f23a20f71497b3d98c4
     // table tester: bd1de400a8b349dc824f4f00e61d0797
     // todo tester: 235057194b954a60ace89c052a65d102
+    // indent tester: 5b494cf668b04197882fe1b66c6ee2a8
     this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420");
   },
 };

example/pages/posts.vue

@@ -37,7 +37,9 @@
 <script>
 export default {
   async asyncData({ $notion, params, error }) {
-    const pageTable = await $notion.getPageTable("10327f9074b7433aad577ccd0020e971");
+    const pageTable = await $notion.getPageTable(
+      "10327f9074b7433aad577ccd0020e971"
+    );
 
     // sort published pages
     const posts = pageTable
@@ -48,6 +50,8 @@ export default {
     const postsByTag = pageTable
       .filter((page) => page.published)
       .reduce((map, currentPage) => {
+        if (!currentPage.tags) return map;
+
         currentPage.tags.forEach((tag) =>
           map.has(tag)
             ? map.set(tag, [...map.get(tag), currentPage])

package.json

@@ -21,7 +21,7 @@
     "clean": "rm -rf node_modules dist example/node_modules example/dist example/.nuxt",
     "example": "npm run example:generate && cd example && npm start",
     "example:generate": "npm run example:install && cd example && npm run build && npm run generate",
-    "example:install": "npm pack && cd example && npm install && npm install ../*.tgz",
+    "example:install": "npm pack && cd example && npm ci && npm install ../*.tgz",
     "prepare": "rm -rf dist *.tgz && npm run build",
     "postpublish": "echo \"\\033[31m !!! Now, manually run: ./scripts/postpublish.sh !!! \\033[00m\"",
     "release:minor": "npm version minor -m 'Release %s' && npm publish",

src/blocks/page-alias.vue

@@ -0,0 +1,18 @@
+<template>
+  <NotionRenderer v-bind="pass" :contentId="aliasPointerId" />
+</template>
+
+<script>
+import { Blockable, blockComputed } from "@/lib/blockable";
+
+export default {
+  extends: Blockable,
+  name: "NotionPageAlias",
+  computed: {
+    ...blockComputed,
+    aliasPointerId() {
+      return this.format?.alias_pointer?.id;
+    },
+  },
+};
+</script>

src/blocks/sync-pointer.vue

@@ -1,9 +1,5 @@
 <template>
-  <NotionRenderer
-    v-bind="pass"
-    :blockMap="blockMap"
-    :contentId="referencePointerId"
-  />
+  <NotionRenderer v-bind="pass" :contentId="referencePointerId" />
 </template>
 
 <script>

src/blocks/text.vue

@@ -1,17 +1,28 @@
 <template>
-  <p v-if="properties" :class="['notion-text', blockColorClass()]">
-    <NotionTextRenderer :text="title" v-bind="pass" />
-  </p>
-  <div v-else class="notion-blank">&nbsp;</div>
+  <div>
+    <p v-if="properties" :class="['notion-text', blockColorClass()]">
+      <NotionTextRenderer :text="title" v-bind="pass" />
+    </p>
+    <div v-else class="notion-blank">&nbsp;</div>
+    <div v-if="hasContent" class="notion-indent">
+      <slot />
+    </div>
+  </div>
 </template>
 
 <script>
-import { Blockable } from "@/lib/blockable";
+import { Blockable, blockComputed } from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
 export default {
   extends: Blockable,
   name: "NotionText",
   components: { NotionTextRenderer },
+  computed: {
+    ...blockComputed,
+    hasContent() {
+      return this.value?.content?.length > 0;
+    },
+  },
 };
 </script>

src/components/block.vue

@@ -3,12 +3,18 @@
     v-if="blockOverrides.hasOwnProperty(type)"
     :is="blockOverrides[type]"
     v-bind="pass"
-  />
+  >
+    <slot />
+  </component>
   <div v-else-if="isType('page')">
     <NotionPage v-bind="pass">
       <slot />
     </NotionPage>
   </div>
+  <NotionPageAlias
+    v-else-if="isRendererRegistered && isType('alias')"
+    v-bind="pass"
+  />
   <NotionHeader
     v-else-if="isType(['header', 'sub_header', 'sub_sub_header'])"
     v-bind="pass"
@@ -17,7 +23,9 @@
   <NotionCallout v-else-if="isType('callout')" v-bind="pass" />
   <NotionCode v-else-if="isType('code')" v-bind="pass" />
   <NotionEquation v-else-if="isType('equation')" v-bind="pass" />
-  <NotionText v-else-if="isType('text')" v-bind="pass" />
+  <NotionText v-else-if="isType('text')" v-bind="pass">
+    <slot />
+  </NotionText>
   <NotionQuote v-else-if="isType('quote')" v-bind="pass" />
   <NotionTodo v-else-if="isType('to_do')" v-bind="pass" />
   <NotionToggle v-else-if="isType('toggle')" v-bind="pass">
@@ -74,6 +82,7 @@ import NotionFigure from "@/blocks/helpers/figure";
 import NotionHeader from "@/blocks/header";
 import NotionList from "@/blocks/list";
 import NotionPage from "@/blocks/page";
+import NotionPageAlias from "@/blocks/page-alias";
 import NotionQuote from "@/blocks/quote";
 import NotionSyncPointer from "@/blocks/sync-pointer";
 import NotionTable from "@/blocks/table";
@@ -96,6 +105,7 @@ export default {
     NotionHeader,
     NotionList,
     NotionPage,
+    NotionPageAlias,
     NotionQuote,
     NotionSyncPointer,
     NotionTable,

src/lib/utils.js

@@ -40,6 +40,8 @@ export const getListNumber = (blockId, blockMap) => {
 };
 
 export const defaultMapImageUrl = (image = "", block) => {
+  if (image.startsWith("data:")) return image;
+
   const url = new URL(
     `https://www.notion.so${
       image.startsWith("/image") ? image : `/image/${encodeURIComponent(image)}`

src/styles.css

@@ -719,3 +719,10 @@ img.notion-nav-icon {
   background: rgb(247, 246, 243);
   font-weight: 500;
 }
+
+/* more experimental additional rules */
+.notion-indent {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1.5em;
+}