feat(devtools): whatsapp and updated X (twitter) (#347)

* chore: safer class check

* chore: broken build

* chore: broken build

Author: harlan-zw

client/app.vue

@@ -161,7 +161,7 @@ const slackSocialPreviewSiteName = computed(() => {
 })
 
 function toggleSocialPreview(preview?: string) {
-  if (!preview || preview === socialPreview.value)
+  if (!preview)
     socialPreview.value = ''
   else
     socialPreview.value = preview!
@@ -380,16 +380,9 @@ async function ejectComponent(component: string) {
           </VTooltip>
         </div>
         <div class="items-center space-x-3 hidden lg:flex">
-          <div class="opacity-80 text-sm">
-            <NLink href="https://github.com/sponsors/harlan-zw" target="_blank">
-              <NIcon icon="carbon:favorite" class="mr-[2px]" />
-              Sponsor
-            </NLink>
-          </div>
           <div class="opacity-80 text-sm">
             <NLink href="https://github.com/nuxt-modules/og-image" target="_blank">
-              <NIcon icon="logos:github-icon" class="mr-[2px]" />
-              Submit an issue
+              GitHub
             </NLink>
           </div>
           <a href="https://nuxtseo.com" target="_blank" class="flex items-end gap-1.5 font-semibold text-xl dark:text-white font-title">
@@ -408,13 +401,13 @@ async function ejectComponent(component: string) {
               </div>
               <div class="flex items-center w-[100px]">
                 <NButton icon="carbon:drag-horizontal" :border="!socialPreview" @click="toggleSocialPreview()" />
-                <NButton icon="logos:twitter" :border="socialPreview === 'twitter'" @click="toggleSocialPreview('twitter')" />
+                <NButton icon="fa6-brands:x-twitter" :border="socialPreview === 'twitter'" @click="toggleSocialPreview('twitter')" />
                 <NButton icon="logos:slack-icon" :border="socialPreview === 'slack'" @click="toggleSocialPreview('slack')" />
               </div>
             </div>
             <TwitterCardRenderer v-if="socialPreview === 'twitter'" :title="socialPreviewTitle">
               <template #domain>
-                <a target="_blank" :href="withHttps(socialSiteUrl)">From {{ socialSiteUrl }}</a>
+                <a target="_blank" :href="withHttps(socialSiteUrl)">{{ socialSiteUrl }}</a>
               </template>
               <ImageLoader
                 :src="src"
@@ -485,10 +478,10 @@ async function ejectComponent(component: string) {
             <Pane size="60" class="flex h-full justify-center items-center relative n-panel-grids-center pr-4" style="padding-top: 30px;">
               <div class="flex justify-between items-center text-sm w-full absolute pr-[30px] top-0 left-0">
                 <div class="flex items-center text-lg space-x-1 w-[100px]">
-                  <NButton v-if="!!globalDebug?.compatibility?.sharp || renderer === 'chromium'" icon="carbon:jpg" :border="imageFormat === 'jpeg' || imageFormat === 'jpg'" @click="patchOptions({ extension: 'jpg' })" />
-                  <NButton icon="carbon:png" :border="imageFormat === 'png'" @click="patchOptions({ extension: 'png' })" />
-                  <NButton v-if="renderer !== 'chromium'" icon="carbon:svg" :border="imageFormat === 'svg'" @click="patchOptions({ extension: 'svg' })" />
-                  <NButton v-if="!isPageScreenshot" icon="carbon:html" :border="imageFormat === 'html'" @click="patchOptions({ extension: 'html' })" />
+                  <NButton v-if="!!globalDebug?.compatibility?.sharp || renderer === 'chromium'" icon="carbon:jpg" :class="imageFormat === 'jpeg' || imageFormat === 'jpg' ? 'border border-zinc-300 dark:border-zinc-700 opacity-100' : ''" @click="patchOptions({ extension: 'jpg' })" />
+                  <NButton icon="carbon:png" :class="imageFormat === 'png' ? 'border border-zinc-300 dark:border-zinc-700 opacity-100' : ''" @click="patchOptions({ extension: 'png' })" />
+                  <NButton v-if="renderer !== 'chromium'" icon="carbon:svg" :class="imageFormat === 'svg' ? 'border border-zinc-300 dark:border-zinc-700 opacity-100' : ''" @click="patchOptions({ extension: 'svg' })" />
+                  <NButton v-if="!isPageScreenshot" icon="carbon:html" :class="imageFormat === 'html' ? 'border border-zinc-300 dark:border-zinc-700 opacity-100' : ''" @click="patchOptions({ extension: 'html' })" />
                 </div>
                 <div class="text-xs">
                   <div v-if="!isPageScreenshot" class="opacity-70 space-x-1 hover:opacity-90 transition cursor-pointer">
@@ -500,13 +493,18 @@ async function ejectComponent(component: string) {
                     Screenshot of the current page.
                   </div>
                 </div>
-                <div class="flex items-center w-[100px]">
-                  <NButton icon="carbon:drag-horizontal" :border="!socialPreview" @click="toggleSocialPreview()" />
-                  <NButton icon="logos:twitter" :border="socialPreview === 'twitter'" @click="toggleSocialPreview('twitter')" />
+                <div class="flex items-center space-x-1">
+                  <VTooltip v-if="!isCustomOgImage">
+                    <NButton class="p-4" icon="carbon:drag-horizontal" :class="!socialPreview ? 'border border-zinc-300 dark:border-zinc-700 opacity-100' : ''" @click="toggleSocialPreview()" />
+                    <template #popper>
+                      Preview full width
+                    </template>
+                  </VTooltip>
+                  <NButton class="p-4" :class="socialPreview === 'twitter' ? 'border border-zinc-300 dark:border-zinc-700 opacity-100' : ''" icon="simple-icons:x" @click="toggleSocialPreview('twitter')" />
                   <!--                  <NButton icon="logos:facebook" :border="socialPreview === 'facebook'" @click="socialPreview = 'facebook'" /> -->
-                  <NButton icon="logos:slack-icon" :border="socialPreview === 'slack'" @click="toggleSocialPreview('slack')" />
-                  <!--                  <NButton icon="logos:whatsapp-icon" :border="socialPreview === 'discord'" @click="socialPreview = 'discord'" /> -->
-                  <VTooltip>
+                  <NButton class="p-4" :class="socialPreview === 'slack' ? 'border border-zinc-300 dark:border-zinc-700 opacity-100' : ''" icon="simple-icons:slack" @click="toggleSocialPreview('slack')" />
+                  <NButton class="p-4" :class="socialPreview === 'whatsapp' ? 'border border-zinc-300 dark:border-zinc-700 opacity-100' : ''" icon="simple-icons:whatsapp" @click="toggleSocialPreview('whatsapp')" />
+                  <VTooltip v-if="!isCustomOgImage">
                     <button text-lg="" type="button" class=" n-icon-button n-button n-transition n-disabled:n-disabled" @click="sidePanelOpen = !sidePanelOpen">
                       <div v-if="sidePanelOpen" class="n-icon carbon:side-panel-open" />
                       <div v-else class="n-icon carbon:open-panel-right" />
@@ -517,7 +515,7 @@ async function ejectComponent(component: string) {
                   </VTooltip>
                 </div>
               </div>
-              <TwitterCardRenderer v-if="socialPreview === 'twitter'" :title="socialPreviewTitle">
+              <TwitterCardRenderer v-if="socialPreview === 'twitter'" :title="socialPreviewTitle" :aspect-ratio="aspectRatio">
                 <template #domain>
                   <a target="_blank" :href="withHttps(socialSiteUrl)">From {{ socialSiteUrl }}</a>
                 </template>
@@ -567,6 +565,37 @@ async function ejectComponent(component: string) {
                   @refresh="refreshSources"
                 />
               </SlackCardRenderer>
+              <WhatsAppRenderer v-else-if="socialPreview === 'whatsapp'">
+                <template #siteName>
+                  {{ slackSocialPreviewSiteName }}
+                </template>
+                <template #title>
+                  {{ socialPreviewTitle }}
+                </template>
+                <template #description>
+                  {{ socialPreviewDescription }}
+                </template>
+                <template #url>
+                  {{ socialSiteUrl }}
+                </template>
+                <ImageLoader
+                  v-if="imageFormat !== 'html'"
+                  :src="src"
+                  class="!h-[90px]"
+                  min-height="90"
+                  :aspect-ratio="1"
+                  style="background-size: cover; background-position: center center;"
+                  @load="generateLoadTime"
+                  @refresh="refreshSources"
+                />
+                <IFrameLoader
+                  v-else
+                  :src="src"
+                  :aspect-ratio="1 / 1"
+                  @load="generateLoadTime"
+                  @refresh="refreshSources"
+                />
+              </WhatsAppRenderer>
               <div v-else class="w-full h-full">
                 <ImageLoader
                   v-if="imageFormat !== 'html'"
@@ -583,7 +612,7 @@ async function ejectComponent(component: string) {
                   @refresh="refreshSources"
                 />
               </div>
-              <div v-if="description" class="mt-3 text-sm opacity-50 absolute bottom-3">
+              <div v-if="description" class="mt-5 text-sm opacity-50">
                 {{ description }}
               </div>
             </Pane>

client/components/ImageLoader.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
   aspectRatio: number
   maxHeight?: number
   maxWidth?: number
+  minHeight?: number
 }>()
 // emits a load event
 const emit = defineEmits(['load'])
@@ -20,6 +21,10 @@ function setSource(src: string) {
     lastSrc.value = src
     loading.value = true
     img.style.backgroundImage = ''
+    img.style.backgroundRepeat = 'no-repeat'
+    img.style.backgroundSize = 'contain'
+    img.style.backgroundPosition = 'center'
+    img.style.maxWidth = '1200px'
     const now = Date.now()
     // we want to do a fetch of the image so we can get the size of it in kb
     $fetch.raw(src, {
@@ -52,22 +57,19 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="image" :style="{ aspectRatio }">
+  <div ref="image" :style="{ aspectRatio, minHeight }">
     <NLoading v-if="loading" />
   </div>
 </template>
 
 <style scoped>
 div {
   cursor: pointer;
-  max-height: 600px;
-  height: auto;
-  width: auto;
+  height: 100%;
   margin: 0 auto;
-  max-width: 1200px;
+  width: 100%;
   transition: 0.4s ease-in-out;
   background-color: white;
   background-size: contain;
-  aspect-ratio: 2 / 1
 }
 </style>

client/components/SlackCardRenderer.vue

@@ -42,7 +42,7 @@
   word-wrap: break-word;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  height: 300px;
+  min-height: 300px;
 }
 .siteName {
   font-weight: bold;
@@ -51,7 +51,9 @@
   word-wrap: break-word;
 }
 .description {
-  color: #2c2d30;
+  color: white;
+  opacity: 0.7;
+  margin-bottom: 8px;
 }
 .title {
   color: #0576b9;

client/components/TemplateComponentPreview.vue

@@ -10,6 +10,8 @@ const props = defineProps<{
   component: OgImageComponent
   active: boolean
   imageFormat: string
+  width: string
+  height: string
 }>()
 
 function openComponent() {
@@ -39,7 +41,7 @@ const loadStats = ref<{ timeTaken: string, sizeKb: string }>()
     </div>
     <div class="border-2 group-hover:shadow-sm rounded-[0.35rem] border-transparent hover:border-yellow-500 transition-all">
       <VTooltip>
-        <div class="w-[300px] h-[150px] relative">
+        <div class="h-[150px] relative" :style="{ aspectRatio }">
           <NIcon v-if="active" icon="carbon:checkmark-filled" class="absolute top-2 right-2 text-green-500" />
           <ImageLoader
             v-if="!isHtml"

client/components/TwitterCardRenderer.vue

@@ -1,74 +1,60 @@
 <script setup lang="ts">
 defineProps<{
+  aspectRatio: number
   title?: string
 }>()
+
+const currTime = computed(() => {
+  // need to return in format 2:17 AM · Mar 25, 2025
+  const date = new Date()
+  const options: Intl.DateTimeFormatOptions = {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: true,
+    month: 'short',
+    day: '2-digit',
+    year: 'numeric',
+  }
+  const formatter = new Intl.DateTimeFormat('en-US', options)
+  const parts = formatter.formatToParts(date)
+  const time = `${parts.find(part => part.type === 'hour')?.value}:${
+    parts.find(part => part.type === 'minute')?.value} ${
+    parts.find(part => part.type === 'dayPeriod')?.value} · ${
+    parts.find(part => part.type === 'month')?.value} ${
+    parts.find(part => part.type === 'day')?.value}, ${
+    parts.find(part => part.type === 'year')?.value}`
+  return time
+})
 </script>
 
 <template>
-  <div class="root max-h-full relative flex">
-    <div class="max-h-full border-1 border-solid border-[#cfd9de] rounded-[16px] overflow-hidden">
-      <div class="image-wrap">
-        <slot />
+  <div class="root max-h-full relative flex flex-col">
+    <div class="w-[600px] mx-auto">
+      <div class="w-full flex items-start flex-col space-x-3">
+        <div class="w-full">
+          <div class="w-full">
+            <div class="border border-gray-300 dark:border-gray-700 rounded-xl overflow-hidden">
+              <div class="-mx-px" :style="{ aspectRatio }">
+                <slot />
+              </div>
+              <div class="px-2 py-1">
+                <p class="opacity-50 text-sm">
+                  <slot name="domain" />
+                </p>
+                <p class="">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </p>
+              </div>
+            </div>
+
+            <p class="text-gray-500 mt-3 text-sm">
+              {{ currTime }}
+            </p>
+          </div>
+        </div>
       </div>
     </div>
-    <div v-if="title" class="title absolute bottom-3 z-2 left-3 text-white">
-      <slot name="title">
-        {{ title }}
-      </slot>
-    </div>
-    <div class="domain absolute -bottom-5 z-2 left-0">
-      <slot name="domain" />
-    </div>
   </div>
 </template>
-
-<style scoped>
-.image-wrap {
-  aspect-ratio: 2 / 1;
-  background-color: rgba(0, 0, 0, 0.1);
-  opacity: 1;
-  height: 300px;
-}
-.domain:hover {
-  text-decoration: underline;
-}
-.domain {
-  line-height: 16px;
-  cursor: pointer;
-  min-width: 0px;
-  word-wrap: break-word;
-  text-overflow: unset;
-  color: rgb(83, 100, 113);
-  font-weight: 400;
-  background-color: rgba(0,0,0,0.00);
-  border: 0 solid black;
-  box-sizing: border-box;
-  display: inline;
-  font: 13px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-  list-style: none;
-  margin: 0px;
-  padding: 0px;
-  text-align: inherit;
-  text-decoration: none;
-  white-space: pre-wrap;
-}
-.title {
-  word-wrap: break-word;
-  text-overflow: unset;
-  min-width: 0px;
-  line-height: 16px;
-  font-weight: 400;
-  user-select: none;
-  font-size: 13px;
-  text-align: center;
-  height: 20px;
-  padding: 0 4px;
-  border-radius: 4px;
-  background-color: rgba(0, 0, 0, 0.77);
-}
-.root {
-  outline-style: none;
-  cursor: pointer;
-  transition-duration: 0.2s;
-}
-</style>

client/components/WhatsAppRenderer.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div style="max-width: 600px; background-color: #00574B; font-size: 14.2px; line-height: 19px; color: white; padding: 6px; border-radius: 7.5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+    <div class="flex items-center" style="background-color: #025144; border-radius: 8px; overflow: hidden;">
+      <div style="aspect-ratio: 1/1;">
+        <slot />
+      </div>
+      <div style="padding: 6px 10px;">
+        <div class="font-bold" style="-webkit-line-clamp: 2; color: rgba(233, 237, 239, 0.88)">
+          <slot name="title" />
+        </div>
+        <div style="font-size: .75rem; -webkit-line-clamp: 2; color: rgba(233, 237, 239, 0.88)">
+          <slot name="description" />
+        </div>
+        <div style="font-size: .75rem;  color: rgba(233, 237, 239, 0.3)">
+          <slot name="url" />
+        </div>
+      </div>
+    </div>
+    <div style="padding: 6px 10px;">
+      When someone sends quite a long message with a link that has an og:image, the og:image is made into a square. For example <span style="color: #53bdeb"><slot name="url" /></span>
+    </div>
+  </div>
+</template>

client/package.json

@@ -3,13 +3,14 @@
   "private": true,
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.8",
-    "@nuxt/devtools-kit": "2.1.0",
-    "@nuxt/devtools-ui-kit": "2.1.0",
+    "@iconify-json/simple-icons": "^1.2.29",
+    "@nuxt/devtools-kit": "^2.3.2",
+    "@nuxt/devtools-ui-kit": "^2.3.2",
     "@nuxt/kit": "^3.16.1",
     "@vueuse/core": "^13.0.0",
     "floating-vue": "^5.2.2",
     "json-editor-vue": "^0.18.1",
-    "nuxt": "3.16.0",
+    "nuxt": "^3.16.1",
     "shiki": "^3.2.1",
     "splitpanes": "^4.0.3",
     "vue": "^3.5.13",

pnpm-lock.yaml

@@ -44,6 +44,8 @@ export interface OgImageRuntimeConfig {
   strictNuxtContentPaths: boolean
   zeroRuntime: boolean
 
+  componentDirs?: string[]
+
   app: {
     baseURL: string
   }