add: complete tweet component

Author: zernonia

src/blocks/helpers/tweet.ts

@@ -0,0 +1,21 @@
+import { reactive, onBeforeMount } from "vue"
+
+const store = reactive({
+  callbacks: [] as any[],
+})
+
+export const useTwttr = (cb: () => any) => {
+  onBeforeMount(() => {
+    let twttrScript = document.getElementById("twitter-widgets-js")
+    if (!twttrScript) {
+      store.callbacks.push(cb)
+      var s = document.createElement("script")
+      s.id = "twitter-widgets-js"
+      s.src = "https://platform.twitter.com/widgets.js"
+      s.onload = () => store.callbacks.forEach((cb) => cb())
+      document.body.appendChild(s)
+    } else {
+      store.callbacks.push(cb)
+    }
+  })
+}

src/blocks/tweet.vue

@@ -1,33 +1,34 @@
 <script setup lang="ts">
 import { useNotionBlock, defineNotionProps } from "@/lib/blockable"
-import { computed, nextTick, onBeforeMount, onMounted, ref, watch } from "vue"
+import { computed, onBeforeMount, getCurrentInstance, ref, onMounted } from "vue"
+import { useTwttr } from "./helpers/tweet"
 
 const props = defineProps({ ...defineNotionProps })
 //@ts-ignore
-const { properties, pass } = useNotionBlock(props)
+const { properties } = useNotionBlock(props)
+
 const tweetId = computed(() => properties.value?.source?.[0]?.[0].split("status/")?.[1])
 const el = ref<HTMLElement>()
+const error = ref()
 
 const renderTweet = () => {
   //@ts-ignore
   const twttr = window["twttr"]
   //@ts-ignore
   twttr?.ready().then(({ widgets }) => {
-    if (el.value) {
-      el.value.innerHTML = ""
-    }
-    widgets.createTweetEmbed(tweetId.value, el.value, {})
+    widgets
+      .createTweetEmbed(tweetId.value, el.value, {})
+      .then((element: any) => {
+        error.value = element ? undefined : "error"
+      })
+      .catch((err: any) => {
+        error.value = err
+      })
   })
 }
-
-onBeforeMount(() => {
-  let twttrScript = document.getElementById("twitter-widgets-js")
-  if (!twttrScript) {
-    var s = document.createElement("script")
-    s.id = "twitter-widgets-js"
-    s.src = "https://platform.twitter.com/widgets.js"
-    document.body.appendChild(s)
-  }
+useTwttr(renderTweet)
+onMounted(() => {
+  renderTweet()
 })
 </script>
 
@@ -38,5 +39,6 @@ export default {
 </script>
 
 <template>
-  <div ref="el"></div>
+  <div v-if="!error" class="notion-tweet" ref="el"></div>
+  <div v-else class="notion-tweet-error">Error loading Tweet</div>
 </template>

src/components/block.vue

@@ -19,9 +19,9 @@ import NotionToggle from "@/blocks/toggle.vue"
 import NotionTableOfContents from "@/blocks/table-of-contents.vue"
 import NotionSyncBlock from "@/blocks/sync-block.vue"
 import NotionSyncPointerBlock from "@/blocks/sync-pointer-block.vue"
-import NotionTweet from "@/blocks/tweet.vue"
 
 const NotionCode = defineAsyncComponent(() => import("@/blocks/code.vue"))
+const NotionTweet = defineAsyncComponent(() => import("@/blocks/tweet.vue"))
 
 const props = defineProps({ ...defineNotionProps })
 //@ts-ignore

src/style.css

@@ -2470,6 +2470,17 @@ svg.notion-page-icon {
   text-decoration-color: var(--fg-color-1);
 }
 
+.notion-tweet {
+  display: flex;
+  justify-content: center;
+}
+.notion-tweet-error {
+  font-size: 0.8rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid rgb(233, 233, 231);
+  border-radius: 3px;
+}
+
 .token.operator,
 .token.entity,
 .token.url,