Add bookmark block

Author: janniks

README.md

@@ -132,7 +132,7 @@ Most common block types are supported. We happily accept pull requests to add su
 | Divider           | ✅ Yes         |                          |
 | Link              | ✅ Yes         |                          |
 | Code              | ✅ Partially   | Highlighting coming soon |
-| Web Bookmark      | ✅ Soon        |                          |
+| Web Bookmark      | ✅ Yes         |                          |
 | Toggle List       | ✅ Yes         |                          |
 | Page Links        | ✅ Yes         |                          |
 | Header            | ✅ Yes         | Enable with `fullPage`   |

src/blocks/bookmark.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="notion-row">
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      :class="['notion-bookmark', f.block_color && `notion-${f.block_color}`]"
+      :href="properties.link"
+    >
+      <div>
+        <div class="notion-bookmark-title">
+          <NotionTextRenderer :text="title || properties.link" />
+        </div>
+        <div v-if="description" class="notion-bookmark-description">
+          <NotionTextRenderer :text="description" />
+        </div>
+        <div class="notion-bookmark-link">
+          <img
+            v-if="f.bookmark_icon"
+            :alt="getTextContent(title || properties.link)"
+            :src="f.bookmark_icon"
+          />
+          <div><NotionTextRenderer :text="properties.link" /></div>
+        </div>
+      </div>
+      <div v-if="f.bookmark_cover" class="notion-bookmark-image">
+        <img
+          :alt="getTextContent(title || properties.link)"
+          :src="f.bookmark_cover"
+        />
+      </div>
+    </a>
+  </div>
+</template>
+
+<script>
+import Blockable from "@/lib/blockable";
+import NotionTextRenderer from "@/blocks/helpers/text-renderer";
+
+export default {
+  extends: Blockable,
+  name: "NotionBookmark",
+  components: { NotionTextRenderer },
+};
+</script>

src/components/block.vue

@@ -6,10 +6,11 @@
     v-else-if="isType(['header', 'sub_header', 'sub_sub_header'])"
     v-bind="pass"
   />
-  <NotionText v-else-if="isType('text')" v-bind="pass" />
-  <NotionQuote v-else-if="isType('quote')" v-bind="pass" />
+  <NotionBookmark v-else-if="isType('bookmark')" v-bind="pass" />
   <NotionCallout v-else-if="isType('callout')" v-bind="pass" />
   <NotionCode v-else-if="isType('code')" v-bind="pass" />
+  <NotionText v-else-if="isType('text')" v-bind="pass" />
+  <NotionQuote v-else-if="isType('quote')" v-bind="pass" />
   <NotionToggle v-else-if="isType('toggle')" v-bind="pass">
     <slot />
   </NotionToggle>
@@ -37,6 +38,7 @@
 
 <script>
 import Blockable, { blockComputed } from "@/lib/blockable";
+import NotionBookmark from "@/blocks/bookmark";
 import NotionCallout from "@/blocks/callout";
 import NotionCode from "@/blocks/code";
 import NotionColumn from "@/blocks/column";
@@ -52,6 +54,7 @@ export default {
   extends: Blockable,
   name: "NotionBlock",
   components: {
+    NotionBookmark,
     NotionCallout,
     NotionCode,
     NotionColumn,