Merge pull request #23 from zernonia/20-add-tweet-embed

20 add tweet embed

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useNotionBlock, defineNotionProps } from "@/lib/blockable"
+import { computed, onBeforeMount, getCurrentInstance, ref, onMounted } from "vue"
+import { useTwttr } from "./helpers/tweet"
+
+const props = defineProps({ ...defineNotionProps })
+//@ts-ignore
+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 }) => {
+    widgets
+      .createTweetEmbed(tweetId.value, el.value, {})
+      .then((element: any) => {
+        error.value = element ? undefined : "error"
+      })
+      .catch((err: any) => {
+        error.value = err
+      })
+  })
+}
+useTwttr(renderTweet)
+onMounted(() => {
+  renderTweet()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: "NotionTweet",
+}
+</script>
+
+<template>
+  <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

@@ -21,6 +21,7 @@ import NotionSyncBlock from "@/blocks/sync-block.vue"
 import NotionSyncPointerBlock from "@/blocks/sync-pointer-block.vue"
 
 const NotionCode = defineAsyncComponent(() => import("@/blocks/code.vue"))
+const NotionTweet = defineAsyncComponent(() => import("@/blocks/tweet.vue"))
 
 const props = defineProps({ ...defineNotionProps })
 //@ts-ignore
@@ -61,5 +62,6 @@ if (!availableType.includes(type.value)) console.warn(`${type.value.toUpperCase(
   <NotionTableOfContents v-else-if="isType('table_of_contents')" v-bind="pass"></NotionTableOfContents>
   <NotionSyncBlock v-else-if="isType('transclusion_container')"><slot /></NotionSyncBlock>
   <NotionSyncPointerBlock v-else-if="isType('transclusion_reference')" v-bind="pass"></NotionSyncPointerBlock>
+  <NotionTweet v-else-if="isType('tweet')" v-bind="pass"></NotionTweet>
   <hr v-else-if="isType('divider')" class="notion-hr" />
 </template>

src/lib/constant.ts

@@ -22,6 +22,7 @@ export const availableType = [
   "audio",
   "table",
   "table_row",
+  "tweet",
   "divider",
   "table_of_contents",
   "transclusion_container",

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,