nuxt-og-image 6.5.3 → 6.7.0

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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+defineProps<{
+  aspectRatio?: number
+}>()
+</script>
+
+<template>
+  <div class="facebook-card">
+    <div class="facebook-image">
+      <slot />
+      <div class="facebook-image-overlay" />
+    </div>
+    <div class="facebook-content">
+      <p class="facebook-sitename">
+        <slot name="siteName" />
+      </p>
+      <p class="facebook-title">
+        <slot name="title" />
+      </p>
+      <p class="facebook-description">
+        <slot name="description" />
+      </p>
+    </div>
+  </div>
+</template>
+
+<style>
+.facebook-card {
+  max-width: 500px;
+  margin: 0 auto;
+  border-radius: 0;
+  overflow: hidden;
+  border: 1px solid #dadde1;
+  background: #f0f2f5;
+  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.1);
+  font-family: 'Hubot Sans', Helvetica, Arial, sans-serif;
+}
+
+.dark .facebook-card {
+  background: #242526;
+  border-color: oklch(28% 0.02 285);
+  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.2);
+}
+
+.facebook-image {
+  aspect-ratio: 2 / 1;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #e4e6e9;
+}
+
+.dark .facebook-image {
+  background: oklch(25% 0.02 285);
+}
+
+.facebook-image img,
+.facebook-image > *:first-child:not(.facebook-image-overlay) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.facebook-image-overlay {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.05);
+}
+
+.dark .facebook-image-overlay {
+  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.05);
+}
+
+.facebook-content {
+  padding: 12px 14px;
+  background: #f0f2f5;
+}
+
+.dark .facebook-content {
+  background: #242526;
+}
+
+.facebook-sitename {
+  font-size: 12px;
+  color: #606770;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  margin: 0 0 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dark .facebook-sitename {
+  color: oklch(60% 0.02 285);
+}
+
+.facebook-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1c1e21;
+  margin: 0 0 4px;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .facebook-title {
+  color: oklch(95% 0.01 285);
+}
+
+.facebook-description {
+  font-size: 14px;
+  color: #606770;
+  margin: 0;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .facebook-description {
+  color: oklch(70% 0.02 285);
+}
+</style>

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { useDebounceFn, useResizeObserver } from '@vueuse/core'
+import { withQuery } from 'ufo'
+import { onMounted, ref, toValue, watch } from '#imports'
+import { options } from '../../lib/og-image/util/logic'
+
+const props = defineProps<{
+  src: string
+  aspectRatio: number
+}>()
+const emit = defineEmits(['load'])
+
+const src = ref()
+const iframe = ref<HTMLIFrameElement>()
+const container = ref<HTMLElement>()
+
+const setSource = useDebounceFn(() => {
+  const frame = iframe.value
+  if (!frame || !src.value || !import.meta.client)
+    return
+  // eslint-disable-next-line harlanzw/nuxt-no-unsafe-date
+  const now = Date.now()
+  frame.src = ''
+
+  // Calculate scale based on container width vs content width
+  const contentWidth = toValue(options.value.width) || 1200
+  const containerWidth = container.value?.offsetWidth
+  // Use scale 1 if container hasn't rendered yet (offsetWidth is 0)
+  const scale = containerWidth ? Math.min(1, containerWidth / contentWidth) : 1
+
+  frame.style.opacity = '0'
+  frame.onload = () => {
+    frame.style.opacity = '1'
+    if (import.meta.client)
+      emit('load', { timeTaken: Date.now() - now })
+  }
+  frame.src = withQuery(src.value, { scale })
+}, 200)
+
+onMounted(() => {
+  watch(() => props.src, (val) => {
+    if (src.value !== val) {
+      if (iframe.value) {
+        src.value = val
+        setSource()
+      }
+    }
+  }, {
+    immediate: true,
+  })
+
+  watch(iframe, () => {
+    setSource()
+  })
+})
+
+// Recalculate scale when container resizes or configured width changes
+useResizeObserver(container, () => {
+  if (src.value)
+    setSource()
+})
+watch(() => toValue(options.value.width), () => {
+  if (src.value)
+    setSource()
+}, { flush: 'post' })
+</script>
+
+<template>
+  <div ref="container" class="iframe-loader" :style="{ aspectRatio, maxWidth: `${toValue(options.width) || 1200}px` }">
+    <iframe ref="iframe" />
+  </div>
+</template>
+
+<style scoped>
+.iframe-loader {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--color-surface-sunken);
+}
+
+.iframe-loader iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  transition: opacity 0.3s ease;
+}
+</style>

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

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, toValue, watch } from '#imports'
+import { options } from '../../lib/og-image/util/logic'
+
+const props = defineProps<{
+  src: string
+  aspectRatio: number
+  maxHeight?: number
+  maxWidth?: number
+  minHeight?: number
+}>()
+
+const emit = defineEmits(['load'])
+
+const error = ref<string[] | false>(false)
+const isLoading = ref(false)
+const showSpinner = ref(false)
+const loadStart = ref(0)
+let spinnerTimer: ReturnType<typeof setTimeout> | undefined
+
+watch(() => props.src, () => {
+  isLoading.value = true
+  showSpinner.value = false
+  error.value = false
+  loadStart.value = Date.now()
+  clearTimeout(spinnerTimer)
+  spinnerTimer = setTimeout(() => {
+    if (isLoading.value)
+      showSpinner.value = true
+  }, 200)
+}, { immediate: true })
+
+function onLoad() {
+  isLoading.value = false
+  showSpinner.value = false
+  clearTimeout(spinnerTimer)
+  emit('load', { timeTaken: Date.now() - loadStart.value, sizeKb: '' })
+}
+
+onBeforeUnmount(() => clearTimeout(spinnerTimer))
+
+function onError() {
+  isLoading.value = false
+  showSpinner.value = false
+  clearTimeout(spinnerTimer)
+  $fetch(props.src).catch((err: { data?: { stack?: string[] } }) => {
+    error.value = err.data?.stack || ['Failed to load image']
+  })
+}
+</script>
+
+<template>
+  <div
+    class="image-loader"
+    :style="{ aspectRatio, minHeight }"
+    :class="{
+      'is-valid': !error && !isLoading,
+      'is-error': error,
+    }"
+  >
+    <img
+      v-show="!isLoading && !error"
+      :src="src"
+      :style="{ aspectRatio, maxWidth: `${toValue(options.width) || 1200}px` }"
+      @load="onLoad"
+      @error="onError"
+    >
+
+    <!-- Loading state -->
+    <div v-if="showSpinner" class="loading-state">
+      <div class="loading-spinner" />
+    </div>
+
+    <!-- Error state -->
+    <div v-if="error" class="error-state">
+      <div class="error-header">
+        <UIcon name="carbon:warning" class="error-icon" />
+        <span class="error-type">
+          {{ error.join('\n').includes('satori') ? 'SatoriError' : 'ImageError' }}
+        </span>
+      </div>
+      <p class="error-message">
+        {{ error[0]?.replace('Error:', '') }}
+      </p>
+      <pre v-if="error.length > 1" class="error-stack">{{ error.slice(1).join('\n') }}</pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.image-loader {
+  height: 100%;
+  margin: 0 auto;
+  width: 100%;
+  transition: box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1);
+  overflow: hidden;
+  background: var(--color-surface-sunken);
+}
+
+.image-loader img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: var(--color-surface-sunken);
+}
+
+.image-loader.is-valid {
+  cursor: pointer;
+}
+
+.image-loader.is-valid:hover {
+  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.1);
+}
+
+.dark .image-loader.is-valid:hover {
+  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.3);
+}
+
+/* Loading state */
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+}
+
+.loading-spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--seo-green);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Error state */
+.image-loader.is-error {
+  overflow-x: auto;
+  background: oklch(97% 0.015 25);
+  border: 1px solid oklch(90% 0.05 25);
+}
+
+.dark .image-loader.is-error {
+  background: oklch(18% 0.02 25);
+  border-color: oklch(28% 0.04 25);
+}
+
+.error-state {
+  padding: 1.25rem;
+}
+
+.error-header {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: oklch(50% 0.15 25);
+  background: oklch(92% 0.06 25);
+  border-radius: var(--radius-sm);
+  margin-bottom: 1rem;
+}
+
+.dark .error-header {
+  color: oklch(80% 0.1 25);
+  background: oklch(28% 0.06 25);
+}
+
+.error-icon {
+  font-size: 0.875rem;
+}
+
+.error-message {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  line-height: 1.5;
+  color: var(--color-text);
+}
+
+.error-stack {
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  color: var(--color-text-muted);
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 1.6;
+}
+</style>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+defineProps<{
+  aspectRatio?: number
+}>()
+</script>
+
+<template>
+  <div class="linkedin-card">
+    <div class="linkedin-image">
+      <slot />
+      <div class="linkedin-image-overlay" />
+    </div>
+    <div class="linkedin-content">
+      <p class="linkedin-title">
+        <slot name="title" />
+      </p>
+      <p class="linkedin-sitename">
+        <slot name="siteName" />
+      </p>
+    </div>
+  </div>
+</template>
+
+<style>
+.linkedin-card {
+  width: 100%;
+  max-width: 552px;
+  margin: 0 auto;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e0e0e0;
+  background: oklch(100% 0 0);
+  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.1);
+  font-family: 'Hubot Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.dark .linkedin-card {
+  background: #1b1f23;
+  border-color: oklch(28% 0.02 285);
+  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.2);
+}
+
+.linkedin-image {
+  aspect-ratio: 2 / 1;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f3f2ef;
+}
+
+.dark .linkedin-image {
+  background: oklch(22% 0.02 285);
+}
+
+.linkedin-image img,
+.linkedin-image > *:first-child:not(.linkedin-image-overlay) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.linkedin-image-overlay {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.05);
+}
+
+.dark .linkedin-image-overlay {
+  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.05);
+}
+
+.linkedin-content {
+  padding: 12px 14px;
+}
+
+.linkedin-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: oklch(15% 0.02 285);
+  margin: 0 0 4px;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .linkedin-title {
+  color: oklch(95% 0.01 285);
+}
+
+.linkedin-sitename {
+  font-size: 12px;
+  color: oklch(50% 0.03 285);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>