Merge pull request #24 from zernonia/18-add-embeds

18 add embeds

Author: zernonia

package.json

@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.0.0-rc.1",
+    "@vueuse/core": "^8.7.5",
     "fragment-for-vue": "^1.0.1",
     "katex": "^0.15.1",
     "pathe": "^0.2.0",

src/blocks/helpers/asset.vue

@@ -4,17 +4,28 @@ import { computed, StyleValue } from "vue"
 
 const props = defineProps({ ...defineNotionProps })
 //@ts-ignore
-const { type, properties, f } = useNotionBlock(props)
+const { properties, f, format } = useNotionBlock(props)
 
 const src = computed(() => {
-  return type.value === "figma" ? properties.value?.source[0][0] : f.value.display_source
+  return f.value.display_source ?? properties.value?.source?.[0]
 })
 
-const style = computed(() => {
-  const aspectRatio = f.value.block_aspect_ratio || f.value.block_height / f.value.block_width
+const aspectRatioStyle = computed(() => {
+  let aspectRatio =
+    f.value.block_width == 1 || f.value.block_height == 1
+      ? 1 / f.value.block_aspect_ratio
+      : `${f.value.block_width} / ${f.value.block_height} `
+
   return {
-    paddingBottom: `${aspectRatio * 100}%`,
+    width: format.value.block_full_width
+      ? "calc(100vw - 46px)"
+      : format.value.block_page_width
+      ? "100%"
+      : `${f.value.block_width}px`,
+    height: f.value.block_height == 1 ? `auto` : `${f.value.block_height}px`,
+    maxWidth: "100%",
     position: "relative",
+    aspectRatio: f.value.block_height == 1 ? aspectRatio : undefined,
   } as StyleValue
 })
 </script>
@@ -26,7 +37,7 @@ export default {
 </script>
 
 <template>
-  <div :style="style" v-if="src">
-    <iframe class="notion-image-inset" style="width: 100%" :src="src" :allow="props.embedAllow" />
+  <div :style="aspectRatioStyle" v-if="src">
+    <iframe class="notion-asset-object-fit" :src="src" :allow="props.embedAllow" />
   </div>
 </template>

src/blocks/helpers/figure.vue

@@ -2,6 +2,7 @@
 import { useNotionBlock, defineNotionProps } from "@/lib/blockable"
 import NotionAsset from "@/blocks/helpers/asset.vue"
 import NotionImage from "@/blocks/helpers/image.vue"
+import NotionGoogleDrive from "@/blocks/helpers/google-drive.vue"
 import NotionTextRenderer from "@/blocks/helpers/text-renderer.vue"
 
 const props = defineProps({ ...defineNotionProps })
@@ -15,9 +16,10 @@ export default {
 }
 </script>
 <template>
-  <figure class="notion-asset-wrapper" :style="width">
+  <figure class="notion-asset-wrapper" :style="[isType('image') ? 'width:100%' : '']">
     <NotionImage v-if="isType('image')" v-bind="pass" />
-    <NotionAsset v-else-if="isType(['embed', 'video', 'figma'])" v-bind="pass" />
+    <NotionAsset v-else-if="isType(['embed', 'video', 'figma', 'maps'])" v-bind="pass" />
+    <NotionGoogleDrive v-else-if="isType('drive')" v-bind="pass" />
     <figcaption v-if="caption" class="notion-image-caption">
       <NotionTextRenderer :text="caption" v-bind="pass" />
     </figcaption>

src/blocks/helpers/google-drive.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useNotionBlock, defineNotionProps } from "@/lib/blockable"
+import { computed } from "vue"
+import { useTimeAgo } from "@vueuse/core"
+
+const props = defineProps({ ...defineNotionProps })
+//@ts-ignore
+const { format, block, hasPageLinkOptions, pageLinkProps } = useNotionBlock(props)
+
+const properties = computed(() => format.value.drive_properties)
+
+const constructThumbnail = (src?: string) => {
+  if (!src) return
+  const q = new URLSearchParams({
+    table: "block",
+    id: block.value.value.id,
+    cache: "v2",
+  })
+  return "https://www.notion.so/image/" + encodeURIComponent(src) + "?" + q
+}
+const constructDomain = (src?: string) => {
+  if (!src) return
+  return new URL(src).hostname
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: "NotionGoogleDrive",
+}
+</script>
+
+<template>
+  <div class="notion-google-drive">
+    <a rel="noopener noreferrer" target="_blank" :href="properties.url" class="notion-google-drive-link">
+      <div class="notion-google-drive-preview">
+        <img :src="constructThumbnail(properties.thumbnail)" :alt="properties.title" />
+      </div>
+
+      <div className="notion-google-drive-body">
+        <div className="notion-google-drive-body-title">
+          {{ properties.title }}
+        </div>
+
+        <div className="notion-google-drive-body-modified-time">
+          Last modified
+          {{ properties.user_name ? `by ${properties.user_name} ` : "" }}
+          {{ useTimeAgo(properties.modified_time).value }}
+        </div>
+
+        <div className="notion-google-drive-body-source">
+          <div
+            className="notion-google-drive-body-source-icon"
+            :style="{ backgroundImage: 'url(' + properties.icon + ')' }"
+          />
+          <div className="notion-google-drive-body-source-domain">{{ constructDomain(properties.url) }}</div>
+        </div>
+      </div>
+    </a>
+  </div>
+</template>

src/blocks/tweet.vue

@@ -7,7 +7,7 @@ const props = defineProps({ ...defineNotionProps })
 //@ts-ignore
 const { properties } = useNotionBlock(props)
 
-const tweetId = computed(() => properties.value?.source?.[0]?.[0].split("status/")?.[1])
+const tweetId = computed(() => properties.value?.source?.[0]?.[0].split("status/")?.[1].split("?")[0])
 const el = ref<HTMLElement>()
 const error = ref()
 

src/components/block.vue

@@ -27,12 +27,11 @@ const props = defineProps({ ...defineNotionProps })
 //@ts-ignore
 const { pass, type, format, isType } = useNotionBlock(props)
 if (!availableType.includes(type.value)) console.warn(`${type.value.toUpperCase()} is not implemented yet`)
-// console.log(type.value)
 </script>
 
 <template>
   <div style="width: 100%" v-if="isType('page')">
-    <NotionPage v-bind="pass">
+    <NotionPage class="notion-page-content" v-bind="pass">
       <slot />
     </NotionPage>
   </div>
@@ -56,7 +55,7 @@ if (!availableType.includes(type.value)) console.warn(`${type.value.toUpperCase(
   <NotionList v-else-if="isType(['bulleted_list', 'numbered_list'])" v-bind="pass">
     <slot />
   </NotionList>
-  <NotionFigure v-else-if="isType(['image', 'embed', 'figma', 'video', 'audio'])" v-bind="pass" />
+  <NotionFigure v-else-if="isType(['image', 'embed', 'figma', 'video', 'audio', 'drive', 'maps'])" v-bind="pass" />
   <NotionTable v-else-if="isType('table')" v-bind="pass"><slot /></NotionTable>
   <NotionTableRow v-else-if="isType('table_row')" v-bind="pass" />
   <NotionTableOfContents v-else-if="isType('table_of_contents')" v-bind="pass"></NotionTableOfContents>

src/lib/types.ts

@@ -31,9 +31,22 @@ export interface Format {
   domain?: string
   original_url?: string
   page_icon?: string
+  drive_properties: GoogleDriveProperties
   [key: string]: any
 }
 
+export interface GoogleDriveProperties {
+  file_id: string
+  icon: string
+  modified_time: number
+  thumbnail: string
+  title: string
+  trashed: boolean
+  url: string
+  user_name: string
+  version: string
+}
+
 export interface Permission {
   role: Role
   type: string

src/style.css

@@ -156,8 +156,6 @@
 
 .notion-page-content {
   width: 100%;
-  display: flex;
-  flex-direction: column;
 }
 
 @media (min-width: 1300px) and (min-height: 300px) {
@@ -604,10 +602,10 @@ img.notion-page-icon-offset {
   padding-left: calc(min(12px, 8vw));
   padding-right: calc(min(12px, 8vw));
 }
-.notion-page > * {
+/* .notion-page > * {
   box-sizing: border-box;
   width: 100%;
-}
+} */
 
 .notion-full-width {
   --notion-max-width: calc(min(1920px, 98vw));
@@ -782,7 +780,6 @@ svg.notion-page-icon {
 .notion-asset-wrapper {
   margin: 0.5rem 0;
   max-width: 100vw;
-  width: 100%;
   min-width: 100%;
   align-self: center;
   display: flex;
@@ -1723,7 +1720,7 @@ svg.notion-page-icon {
   border-radius: 3px;
 
   user-select: none;
-  transition: background 20ms ease-in 0s;
+  transition: background 100ms ease-in 0s;
   cursor: pointer;
 }
 
@@ -2473,6 +2470,7 @@ svg.notion-page-icon {
 .notion-tweet {
   display: flex;
   justify-content: center;
+  width: 100%;
 }
 .notion-tweet-error {
   font-size: 0.8rem;

tsconfig.json

@@ -11,7 +11,7 @@
     "esModuleInterop": true,
     "declaration": true,
     "lib": ["esnext", "dom"],
-    "types": ["vite/client"],
+    "types": ["vite/client", "web-bluetooth"],
     "baseUrl": ".",
     "outDir": "dist",
     "paths": {

yarn.lock

@@ -377,6 +377,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/web-bluetooth@^0.0.14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz#94e175b53623384bff1f354cdb3197a8d63cdbe5"
+  integrity sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==
+
 "@vitejs/plugin-vue@^2.0.0":
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz#fbf80cc039b82ac21a1acb0f0478de8f61fbf600"
@@ -576,6 +581,28 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.33.tgz#69a8c99ceb37c1b031d5cc4aec2ff1dc77e1161e"
   integrity sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg==
 
+"@vueuse/core@^8.7.5":
+  version "8.7.5"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-8.7.5.tgz#e74a888251ea11a9d432068ce18cbdfc4f810251"
+  integrity sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.14"
+    "@vueuse/metadata" "8.7.5"
+    "@vueuse/shared" "8.7.5"
+    vue-demi "*"
+
+"@vueuse/[email protected]":
+  version "8.7.5"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.7.5.tgz#c7f2b21d873d1604a8860ed9c5728d8f3295f00a"
+  integrity sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==
+
+"@vueuse/[email protected]":
+  version "8.7.5"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.7.5.tgz#06fb08f6f8fc9e90be9d1e033fa443de927172b0"
+  integrity sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==
+  dependencies:
+    vue-demi "*"
+
 acorn@^8.7.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
@@ -2412,6 +2439,11 @@ vite@^2.9.7:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-demi@*:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.2.tgz#f6081c2feb5b698549729a81683ce029b8da289e"
+  integrity sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==
+
 vue-router@4:
   version "4.0.14"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.14.tgz#ce2028c1c5c33e30c7287950c973f397fce1bd65"