nuxt-og-image 6.5.3 → 6.6.0

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

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { AddComponentResult } from '../../lib/og-image/templates'
+import { computed, ref, watch } from 'vue'
+import { AddComponentDialogPromise } from '../../lib/og-image/templates'
+
+function handleClose(_a: unknown, resolve: (value: AddComponentResult | false) => void) {
+  resolve(false)
+}
+
+const RE_WORD_CHARS_ONLY = /^\w+$/
+
+const componentName = ref('')
+const nameError = ref('')
+
+function validateName(value: string): string {
+  if (!value.trim())
+    return 'Name is required'
+  if (!RE_WORD_CHARS_ONLY.test(value.trim()))
+    return 'Only letters, numbers, and underscores allowed'
+  return ''
+}
+
+watch(componentName, (v) => {
+  nameError.value = v ? validateName(v) : ''
+})
+
+const previewName = computed(() => {
+  const name = componentName.value.trim()
+  if (!name)
+    return ''
+  return name.charAt(0).toUpperCase() + name.slice(1)
+})
+
+function submit(resolve: (value: AddComponentResult | false) => void) {
+  const name = componentName.value.trim()
+  const error = validateName(name)
+  if (error) {
+    nameError.value = error
+    return
+  }
+  resolve({ name: name.charAt(0).toUpperCase() + name.slice(1) })
+  componentName.value = ''
+  nameError.value = ''
+}
+</script>
+
+<template>
+  <AddComponentDialogPromise v-slot="{ resolve }">
+    <UModal
+      :open="true"
+      title="Create OG Image Component"
+      @update:open="handleClose('a', resolve)"
+      @close="handleClose('b', resolve)"
+    >
+      <template #body>
+        <div class="flex flex-col gap-4">
+          <UFormField label="Component Name" :error="nameError" hint="Auto-capitalized to PascalCase">
+            <UInput
+              v-model="componentName"
+              placeholder="MyOgImage"
+              autofocus
+              class="w-full"
+              @keydown.enter="submit(resolve)"
+            />
+          </UFormField>
+
+          <div v-if="previewName" class="text-xs text-[var(--color-text-subtle)] font-mono bg-[var(--color-surface-sunken)] rounded-lg px-3 py-2">
+            defineOgImage('{{ previewName }}')
+          </div>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <UButton variant="ghost" color="neutral" @click="resolve(false)">
+            Cancel
+          </UButton>
+          <UButton color="primary" :disabled="!componentName.trim() || !!nameError" @click="submit(resolve)">
+            Create
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </AddComponentDialogPromise>
+</template>

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

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="bluesky-card">
+    <div class="bluesky-image">
+      <slot />
+      <div class="bluesky-image-overlay" />
+    </div>
+    <div class="bluesky-content">
+      <p class="bluesky-title">
+        <slot name="title" />
+      </p>
+      <p class="bluesky-description">
+        <slot name="description" />
+      </p>
+      <div class="bluesky-domain">
+        <svg class="bluesky-globe" viewBox="0 0 16 16" fill="none">
+          <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.3" />
+          <ellipse cx="8" cy="8" rx="3.5" ry="7" stroke="currentColor" stroke-width="1.3" />
+          <line x1="1.5" y1="5.5" x2="14.5" y2="5.5" stroke="currentColor" stroke-width="1.3" />
+          <line x1="1.5" y1="10.5" x2="14.5" y2="10.5" stroke="currentColor" stroke-width="1.3" />
+        </svg>
+        <slot name="siteName" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.bluesky-card {
+  width: 100%;
+  max-width: 513px;
+  margin: 0 auto;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid oklch(88% 0.01 260);
+  background: oklch(100% 0 0);
+  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.08);
+  font-family: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.dark .bluesky-card {
+  background: #171d27;
+  border-color: rgb(44, 58, 78);
+  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.25);
+}
+
+.bluesky-image {
+  aspect-ratio: 2 / 1;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: oklch(96% 0.01 260);
+}
+
+.dark .bluesky-image {
+  background: oklch(22% 0.02 260);
+}
+
+.bluesky-image img,
+.bluesky-image > *:first-child:not(.bluesky-image-overlay) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bluesky-image-overlay {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.05);
+  pointer-events: none;
+}
+
+.dark .bluesky-image-overlay {
+  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.05);
+}
+
+.bluesky-content {
+  padding: 12px 14px;
+}
+
+.bluesky-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: oklch(15% 0.02 260);
+  margin: 0 0 2px;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .bluesky-title {
+  color: oklch(95% 0.01 260);
+}
+
+.bluesky-description {
+  font-size: 13px;
+  color: oklch(50% 0.02 260);
+  margin: 0 0 8px;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .bluesky-description {
+  color: oklch(65% 0.02 260);
+}
+
+.bluesky-domain {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11.3px;
+  letter-spacing: 0px;
+  color: rgb(171, 184, 201);
+  padding-top: 8px;
+  border-top: 1px solid oklch(92% 0.01 260);
+}
+
+.dark .bluesky-domain {
+  border-top-color: oklch(28% 0.02 260);
+}
+
+.bluesky-globe {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+</style>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { GlobalDebugResponse } from '../../lib/og-image/types'
+import { computed, ref, watch } from 'vue'
+import { inject } from '#imports'
+import { GlobalDebugKey } from '../../lib/og-image/keys'
+import { CreateOgImageDialogPromise } from '../../lib/og-image/templates'
+
+function handleClose(_a: unknown, resolve: (value: string | false) => void) {
+  resolve(false)
+}
+
+const globalDebug = inject(GlobalDebugKey) as Ref<GlobalDebugResponse | null>
+
+const componentDirs = computed(() => globalDebug.value?.runtimeConfig?.componentDirs || [])
+const selected = ref(componentDirs.value[0])
+watch(componentDirs, (dirs) => {
+  if (!selected.value && dirs.length > 0)
+    selected.value = dirs[0]
+})
+</script>
+
+<template>
+  <CreateOgImageDialogPromise v-slot="{ resolve, args }">
+    <UModal
+      :open="true"
+      title="Eject Component"
+      description="Copy a community template to an OG Image component directory in your project. You can configure directories using componentDirs in nuxt.config."
+      @update:open="handleClose('a', resolve)"
+      @close="handleClose('b', resolve)"
+    >
+      <template #body>
+        <URadioGroup
+          v-model="selected"
+          :items="componentDirs.map((dir: string) => ({
+            label: `./components/${dir}/${args[0]}.vue`,
+            value: dir,
+          }))"
+          variant="card"
+          legend="Choose Output Path"
+        />
+      </template>
+
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <UButton variant="ghost" color="neutral" @click="resolve(false)">
+            Cancel
+          </UButton>
+          <UButton color="primary" @click="resolve(selected || false)">
+            Create Component
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </CreateOgImageDialogPromise>
+</template>

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

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="discord-card">
+    <div class="discord-body">
+      <div class="discord-sitename">
+        <slot name="siteName" />
+      </div>
+      <div class="discord-title">
+        <slot name="title" />
+      </div>
+      <div class="discord-description">
+        <slot name="description" />
+      </div>
+      <div class="discord-image">
+        <slot />
+        <div class="discord-image-overlay" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.discord-card {
+  display: flex;
+  max-width: 432px;
+  margin: 0 auto;
+  border-radius: 8px;
+  border: 1px solid #e3e5e8;
+  border-left: 4px solid #e3e5e8;
+  background: #f2f3f5;
+  overflow: hidden;
+  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.dark .discord-card {
+  background: #2b2d31;
+  border-color: #232428;
+  border-left-color: #1e1f22;
+}
+
+.discord-body {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 16px 16px 12px;
+}
+
+.discord-sitename {
+  font-size: 12px;
+  font-weight: 400;
+  color: #4e5058;
+  margin-bottom: 2px;
+  line-height: 16px;
+}
+
+.dark .discord-sitename {
+  color: #b5bac1;
+}
+
+.discord-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #006ce7;
+  cursor: pointer;
+  margin-bottom: 4px;
+  line-height: 22px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .discord-title {
+  color: #00a8fc;
+}
+
+.discord-title:hover {
+  text-decoration: underline;
+}
+
+.discord-description {
+  font-size: 14px;
+  color: #313338;
+  line-height: 18px;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: pre-wrap;
+}
+
+.dark .discord-description {
+  color: #dbdee1;
+}
+
+.discord-image {
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  max-width: 400px;
+  max-height: 300px;
+}
+
+.discord-image img,
+.discord-image > *:first-child:not(.discord-image-overlay) {
+  max-width: 100%;
+  max-height: 300px;
+  border-radius: 4px;
+  display: block;
+}
+
+.discord-image-overlay {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.04);
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.dark .discord-image-overlay {
+  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.06);
+}
+</style>

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>