nuxt-og-image 6.5.2 → 6.6.0

package/dist/devtools/components/og-image/WhatsAppRenderer.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+defineProps<{
+  aspectRatio?: number
+  squared?: boolean
+}>()
+</script>
+
+<template>
+  <div class="whatsapp-dual-preview">
+    <!-- Inline style - only shown in Squared mode -->
+    <div v-if="squared" class="whatsapp-section">
+      <p class="whatsapp-label">
+        Inline (in message) — 2x
+      </p>
+      <div class="whatsapp-inline-card whatsapp-inline-card--squared">
+        <div class="whatsapp-inline-image">
+          <slot v-if="!$slots.inlineImage" />
+          <slot v-else name="inlineImage" />
+          <div class="whatsapp-image-overlay" />
+        </div>
+        <div class="whatsapp-inline-content">
+          <div class="whatsapp-title-inline">
+            <slot name="title" />
+          </div>
+          <div class="whatsapp-description-inline">
+            <slot name="description" />
+          </div>
+          <div class="whatsapp-url-inline">
+            <UIcon name="carbon:link" class="w-2.5 h-2.5" />
+            <slot name="siteName" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Full card style - appears when link is standalone -->
+    <div v-if="!squared" class="whatsapp-section">
+      <p class="whatsapp-label">
+        Full card (standalone link)
+      </p>
+      <div class="whatsapp-full-card">
+        <div class="whatsapp-full-image">
+          <slot />
+          <div class="whatsapp-image-overlay" />
+        </div>
+        <div class="whatsapp-full-content">
+          <div class="whatsapp-title">
+            <slot name="title" />
+          </div>
+          <div class="whatsapp-description">
+            <slot name="description" />
+          </div>
+          <div class="whatsapp-url">
+            <UIcon name="carbon:link" class="w-3 h-3" />
+            <slot name="url" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.whatsapp-dual-preview {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  flex-wrap: wrap;
+  font-family: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.whatsapp-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.whatsapp-label {
+  font-size: 12px;
+  color: oklch(55% 0.03 285);
+  margin: 0;
+}
+
+.dark .whatsapp-label {
+  color: oklch(60% 0.03 285);
+}
+
+/* Inline card - square thumbnail on left */
+.whatsapp-inline-card {
+  display: flex;
+  max-width: 360px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #dcf8c6;
+  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.1);
+}
+
+.dark .whatsapp-inline-card {
+  background: #1f2c34;
+  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.2);
+}
+
+.whatsapp-inline-image {
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  background: oklch(85% 0.02 165);
+}
+
+.dark .whatsapp-inline-image {
+  background: oklch(25% 0.03 165);
+}
+
+.whatsapp-inline-image img,
+.whatsapp-inline-image > *:first-child:not(.whatsapp-image-overlay) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.whatsapp-inline-content {
+  padding: 10px;
+  flex: 1;
+  min-width: 0;
+}
+
+.whatsapp-title-inline {
+  font-size: 13px;
+  font-weight: 500;
+  color: oklch(20% 0.02 285);
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .whatsapp-title-inline {
+  color: #e9edef;
+}
+
+.whatsapp-description-inline {
+  font-size: 11px;
+  color: oklch(40% 0.03 285);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-top: 3px;
+}
+
+.dark .whatsapp-description-inline {
+  color: #8696a0;
+}
+
+.whatsapp-url-inline {
+  font-size: 11px;
+  color: oklch(50% 0.03 285);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dark .whatsapp-url-inline {
+  color: #8696a0;
+}
+
+/* Full card - 2:1 image on top */
+.whatsapp-full-card {
+  width: 360px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #dcf8c6;
+  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.1);
+}
+
+.dark .whatsapp-full-card {
+  background: #1f2c34;
+  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.2);
+}
+
+.whatsapp-full-image {
+  aspect-ratio: 2 / 1;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: oklch(85% 0.02 165);
+}
+
+.dark .whatsapp-full-image {
+  background: oklch(25% 0.03 165);
+}
+
+.whatsapp-full-image img,
+.whatsapp-full-image > *:first-child:not(.whatsapp-image-overlay) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.whatsapp-full-content {
+  padding: 14px;
+  background: #dcf8c6;
+}
+
+.dark .whatsapp-full-content {
+  background: #1f2c34;
+}
+
+.whatsapp-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: oklch(20% 0.02 285);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .whatsapp-title {
+  color: #e9edef;
+}
+
+.whatsapp-description {
+  font-size: 13px;
+  color: oklch(40% 0.03 285);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-top: 4px;
+}
+
+.dark .whatsapp-description {
+  color: #8696a0;
+}
+
+.whatsapp-url {
+  font-size: 13px;
+  color: oklch(50% 0.03 285);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dark .whatsapp-url {
+  color: #8696a0;
+}
+
+/* Shared overlay */
+.whatsapp-image-overlay {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.05);
+  pointer-events: none;
+}
+
+.dark .whatsapp-image-overlay {
+  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.05);
+}
+
+/* Squared variant — 2x inline card */
+.whatsapp-inline-card--squared {
+  max-width: 560px;
+}
+
+.whatsapp-inline-card--squared .whatsapp-inline-image {
+  width: 128px;
+  height: 128px;
+}
+
+.whatsapp-inline-card--squared .whatsapp-title-inline {
+  font-size: 14px;
+  -webkit-line-clamp: 2;
+}
+
+.whatsapp-inline-card--squared .whatsapp-description-inline {
+  font-size: 12px;
+  -webkit-line-clamp: 3;
+}
+
+.whatsapp-inline-card--squared .whatsapp-url-inline {
+  font-size: 12px;
+}
+</style>

package/dist/devtools/lib/og-image/keys.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { AsyncDataRequestStatus } from '#app'
+import type { GlobalDebugResponse, PathDebugResponse } from './types'
+
+export const GlobalDebugKey: InjectionKey<Ref<GlobalDebugResponse | null>> = Symbol('GlobalDebug')
+export const PathDebugKey: InjectionKey<Ref<PathDebugResponse | null>> = Symbol('PathDebug')
+export const PathDebugStatusKey: InjectionKey<Ref<AsyncDataRequestStatus>> = Symbol('PathDebugStatus')
+export const RefetchPathDebugKey: InjectionKey<() => Promise<void>> = Symbol('RefetchPathDebug')