nuxt-og-image 6.5.3 → 6.7.0

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

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+const props = defineProps<{
+  aspectRatio: number
+  title?: string
+  cardType?: 'summary' | 'summary_large_image'
+}>()
+
+const currTime = ref('')
+
+onMounted(() => {
+  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)
+  currTime.value = `${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}`
+})
+
+// Auto-detect if should show summary (square) card based on aspect ratio
+// Use summary card for square-ish images (aspect ratio close to 1)
+const isSmallCard = computed(() => {
+  if (props.cardType)
+    return props.cardType === 'summary'
+  // Auto-detect: aspect ratio < 1.3 is considered square-ish
+  return props.aspectRatio < 1.3
+})
+</script>
+
+<template>
+  <div class="twitter-card">
+    <div class="twitter-card-inner">
+      <div
+        class="card-container"
+        :class="isSmallCard ? 'flex' : ''"
+      >
+        <div
+          class="card-image"
+          :class="isSmallCard ? 'w-32 h-32 shrink-0' : 'aspect-[2/1] w-full'"
+          :style="isSmallCard ? {} : { aspectRatio }"
+        >
+          <slot />
+          <div class="card-image-overlay" />
+        </div>
+        <div class="card-content" :class="isSmallCard ? 'flex-1 min-w-0' : ''">
+          <p class="card-domain">
+            <slot name="domain" />
+          </p>
+          <p class="card-title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </p>
+        </div>
+      </div>
+      <p class="card-time">
+        {{ currTime }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style>
+.twitter-card {
+  font-family: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  max-height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.twitter-card-inner {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.twitter-card .card-container {
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid oklch(92% 0.01 285);
+  background: oklch(100% 0 0);
+  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.06);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.dark .twitter-card .card-container {
+  border-color: oklch(28% 0.04 285);
+  background: oklch(18% 0.04 285);
+  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.2);
+}
+
+.twitter-card .card-container:hover {
+  border-color: oklch(85% 0.02 285);
+  box-shadow: 0 6px 32px oklch(0% 0 0 / 0.1);
+}
+
+.dark .twitter-card .card-container:hover {
+  border-color: oklch(35% 0.04 285);
+}
+
+.twitter-card .card-image {
+  position: relative;
+  overflow: hidden;
+  background: oklch(96% 0.01 285);
+}
+
+.dark .twitter-card .card-image {
+  background: oklch(22% 0.04 285);
+}
+
+.twitter-card .card-image img,
+.twitter-card .card-image > *:first-child:not(.card-image-overlay) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.twitter-card .card-image-overlay {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.05);
+}
+
+.dark .twitter-card .card-image-overlay {
+  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.05);
+}
+
+.twitter-card .card-content {
+  padding: 12px 14px;
+}
+
+.twitter-card .card-domain {
+  font-size: 13px;
+  color: oklch(55% 0.04 285);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.twitter-card .card-title {
+  font-size: 15px;
+  font-weight: 500;
+  margin: 2px 0 0;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.twitter-card .card-time {
+  margin-top: 12px;
+  font-size: 14px;
+  color: oklch(55% 0.04 285);
+}
+</style>

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')