add google drive

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/google-drive.vue

@@ -0,0 +1,66 @@
+<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: "NotionBookmark",
+}
+</script>
+
+<template>
+  <div class="notion-google-drive">
+    <component
+      v-if="hasPageLinkOptions"
+      class="notion-google-drive-link"
+      v-bind="pageLinkProps(block.value.id)"
+      :is="props.pageLinkOptions?.component"
+    >
+      <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>
+    </component>
+  </div>
+</template>

src/style.css

@@ -1723,7 +1723,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;
 }
 

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"