nuxt-modules · Mar 19, 2025 · Mar 26, 2025 · Mar 26, 2025 · Mar 26, 2025 · Mar 26, 2025
diff --git a/client/app.vue b/client/app.vue
@@ -17,7 +17,10 @@ import { ref } from 'vue'
 import { fetchGlobalDebug } from '~/composables/fetch'
 import { devtoolsClient } from '~/composables/rpc'
 import { loadShiki } from '~/composables/shiki'
+import { CreateOgImageDialogPromise } from '~/composables/templates'
 import { separateProps } from '../src/runtime/shared'
+import CreateOgImageDialog from './components/CreateOgImageDialog.vue'
+import { ogImageRpc } from './composables/rpc'
 import {
   description,
   hasMadeChanges,
@@ -47,7 +50,16 @@ const emojis = ref('noto')
 const debugAsyncData = fetchPathDebug()
 const { data: debug, pending, error } = debugAsyncData
 const isCustomOgImage = computed(() => {
-  return debug.value?.custom
+  return debug.value?.options.custom
+})
+const isValidDebugError = computed(() => {
+  if (error.value) {
+    const message = error.value.message
+    if (message) {
+      return message.includes('missing the #nuxt-og-') || message.includes('missing the Nuxt OG Image payload') || message.includes('Got invalid response')
+    }
+  }
+  return false
 })
 watch(debug, (val) => {
   if (!val)
@@ -118,8 +130,8 @@ const socialPreview = useLocalStorage('nuxt-og-image:social-preview', 'twitter')
 
 const src = computed(() => {
   // wait until we know what we're rendering
-  if (!debug.value)
-    return ''
+  // if (!debug.value)
+  //   return ''
   if (isCustomOgImage.value) {
     if (hasProtocol(debug.value.options.url, { acceptRelative: true })) {
       return debug.value.options.url
@@ -158,14 +170,23 @@ const slackSocialPreviewSiteName = computed(() => {
 })
 
 function toggleSocialPreview(preview?: string) {
-  if (!preview || preview === socialPreview.value)
+  if (!preview)
     socialPreview.value = ''
   else
     socialPreview.value = preview!
 }
 
 const activeComponentName = computed(() => {
-  return optionsOverrides.value?.component || options.value?.component || 'NuxtSeo'
+  let componentName = optionsOverrides.value?.component || options.value?.component || 'NuxtSeo'
+  for (const componentDirName of (globalDebug?.value?.runtimeConfig.componentDirs || [])) {
+    componentName = componentName.replace(componentDirName, '')
+  }
+  return componentName
+})
+
+const isOgImageTemplate = computed(() => {
+  const component = globalDebug.value?.componentNames?.find(c => c.pascalName === activeComponentName.value)
+  return component?.path.includes('node_modules') || component?.path.includes('og-image/src/runtime/app/components/Templates/Community/')
 })
 
 const renderer = computed(() => {
@@ -261,10 +282,21 @@ const currentPageFile = computed(() => {
   // get the path only from the `pages/<path>`
   return `pages/${path?.split('pages/')[1]}`
 })
+
+async function ejectComponent(component: string) {
+  const dir = await CreateOgImageDialogPromise.start(component)
+  if (!dir)
+    return
+  // do fix
+  const v = await ogImageRpc.value!.ejectCommunityTemplate(`${dir}/${component}.vue`)
+  // open
+  await devtoolsClient.value?.devtools.rpc.openInEditor(v)
+}
 </script>
 
 <template>
   <div class="relative n-bg-base flex flex-col">
+    <CreateOgImageDialog />
     <header class="sticky top-0 z-2 px-4 pt-4">
       <div class="flex justify-between items-start" mb2>
         <div class="flex space-x-5">
@@ -357,16 +389,9 @@ const currentPageFile = computed(() => {
           </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">
@@ -383,23 +408,32 @@ const currentPageFile = computed(() => {
               <div class="text-xs">
                 Your prebuilt OG Image: {{ debug?.options.url }}
               </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="logos:slack-icon" :border="socialPreview === 'slack'" @click="toggleSocialPreview('slack')" />
+              <div class="flex items-center">
+                <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 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')" />
               </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>
               <ImageLoader
+                v-if="imageFormat !== 'html'"
                 :src="src"
                 :aspect-ratio="aspectRatio"
                 @load="generateLoadTime"
                 @click="openImage"
                 @refresh="refreshSources"
               />
+              <IFrameLoader
+                v-else
+                :src="src"
+                max-height="300"
+                :aspect-ratio="aspectRatio"
+                @load="generateLoadTime"
+                @refresh="refreshSources"
+              />
             </TwitterCardRenderer>
             <SlackCardRenderer v-else-if="socialPreview === 'slack'">
               <template #favIcon>
@@ -415,13 +449,52 @@ const currentPageFile = computed(() => {
                 {{ socialPreviewDescription }}
               </template>
               <ImageLoader
+                v-if="imageFormat !== 'html'"
                 :src="src"
                 class="!h-[300px]"
                 :aspect-ratio="aspectRatio"
                 @load="generateLoadTime"
                 @refresh="refreshSources"
               />
+              <IFrameLoader
+                v-else
+                :src="src"
+                :aspect-ratio="aspectRatio"
+                @load="generateLoadTime"
+                @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
                 :src="src"
@@ -431,9 +504,8 @@ const currentPageFile = computed(() => {
               />
             </div>
           </div>
-          <div v-else-if="error">
-            <div v-if="error.message.includes('missing the #nuxt-og-') || error.message.includes('missing the Nuxt OG Image payload') || error.message.includes('Got invalid response')">
-              <!-- nicely tell the user they should use defineOgImage to get started -->
+          <div v-else-if="isValidDebugError">
+            <div>
               <div class="flex flex-col items-center justify-center mx-auto max-w-135 h-85vh">
                 <div class="">
                   <h2 class="text-2xl font-semibold mb-3">
@@ -454,35 +526,37 @@ const currentPageFile = computed(() => {
                 </div>
               </div>
             </div>
-            <div v-else>
-              {{ error }}
-            </div>
           </div>
           <Splitpanes v-else class="default-theme" @resize="slowRefreshSources">
             <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" @click="openCurrentComponent">
-                    <span>{{ activeComponentName.replace('OgImage', '') }}</span>
-                    <span class="underline">View source</span>
+                  <div v-if="!isPageScreenshot" class="opacity-70 space-x-1 hover:opacity-90 transition cursor-pointer">
+                    <span>{{ activeComponentName }}</span>
+                    <span v-if="isOgImageTemplate" class="underline" @click="ejectComponent(activeComponentName)">Eject Component</span>
+                    <span v-else class="underline" @click="openCurrentComponent">View Source</span>
                   </div>
                   <div v-else>
                     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')" />
-                  <!--                  <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>
+                <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 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" />
@@ -493,7 +567,7 @@ const currentPageFile = computed(() => {
                   </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>
@@ -543,6 +617,37 @@ const currentPageFile = computed(() => {
                   @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'"
@@ -559,7 +664,7 @@ const currentPageFile = computed(() => {
                   @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>