nuxt-og-image 6.5.2 → 6.6.0

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

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="slack-card">
+    <div class="slack-bar" />
+    <div class="slack-content">
+      <div class="slack-header">
+        <div class="slack-favicon">
+          <slot name="favIcon" />
+        </div>
+        <div class="slack-sitename">
+          <slot name="siteName" />
+        </div>
+      </div>
+      <div class="slack-title">
+        <slot name="title" />
+      </div>
+      <div class="slack-description">
+        <slot name="description" />
+      </div>
+      <div class="slack-image">
+        <slot />
+        <div class="slack-image-overlay" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.slack-card {
+  display: flex;
+  font-family: 'Hubot Sans', Lato, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 15px;
+  line-height: 1.46;
+  -webkit-font-smoothing: antialiased;
+  min-height: 200px;
+  max-width: 500px;
+  margin: 0 auto;
+  background: oklch(100% 0 0);
+  border-radius: 8px;
+  padding: 8px 0;
+}
+
+.dark .slack-card {
+  background: #1a1d21;
+}
+
+.slack-bar {
+  flex-shrink: 0;
+  width: 4px;
+  background: #a855f7;
+  border-radius: 4px;
+  margin: 4px 0;
+}
+
+.slack-content {
+  padding: 0 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.slack-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.slack-favicon img {
+  border-radius: 3px;
+  height: 16px;
+  width: 16px;
+  object-fit: cover;
+}
+
+.slack-sitename {
+  font-weight: 700;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slack-title {
+  color: #1264a3;
+  font-weight: 600;
+  font-size: 15px;
+  margin-bottom: 2px;
+  cursor: pointer;
+}
+
+.dark .slack-title {
+  color: #1d9bd1;
+}
+
+.slack-title:hover {
+  text-decoration: underline;
+}
+
+.slack-description {
+  color: oklch(55% 0.04 285);
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .slack-description {
+  color: oklch(70% 0.03 285);
+}
+
+.slack-image {
+  border-radius: 6px;
+  overflow: hidden;
+  max-width: 320px;
+  position: relative;
+}
+
+.slack-image img,
+.slack-image > *:first-child:not(.slack-image-overlay) {
+  width: 100%;
+  height: auto;
+}
+
+.slack-image-overlay {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.05);
+  border-radius: 6px;
+  pointer-events: none;
+}
+
+.dark .slack-image-overlay {
+  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.05);
+}
+</style>

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

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { OgImageComponent } from '../../lib/og-image/runtime-types'
+import { withQuery } from 'ufo'
+import { computed, ref } from 'vue'
+import { host } from '../../lib/og-image/rpc'
+
+const props = defineProps<{
+  src: string
+  aspectRatio: number
+  component: OgImageComponent
+  active: boolean
+  imageFormat?: string
+  width?: string
+  height?: string
+}>()
+
+const RE_CLOSING_ANGLE = />/g
+
+function openComponent() {
+  host.value?.openInEditor(props.component.path!)
+}
+
+const isHtml = computed(() => {
+  return props.src.includes('.html')
+})
+
+const creditName = computed(() => {
+  return props.component.credits?.split('<')[0]?.trim()
+})
+const creditSite = computed(() => {
+  return props.component.credits?.split('<')[1]?.trim().replace(RE_CLOSING_ANGLE, '')
+})
+
+const loadStats = ref<{ timeTaken: string, sizeKb: string }>()
+</script>
+
+<template>
+  <div class="template-card group">
+    <div class="template-header">
+      <ULink :to="creditSite" target="_blank" class="template-name">
+        {{ component.pascalName }}
+      </ULink>
+    </div>
+    <div class="template-preview" :class="active ? 'is-active' : ''">
+      <UTooltip :text="`Preview ${component.pascalName} for the current page.`">
+        <div class="template-image" :style="{ aspectRatio }">
+          <UIcon v-if="active" name="carbon:checkmark-filled" class="active-badge" />
+          <ImageLoader
+            v-if="!isHtml"
+            :src="withQuery(src, { component: component.pascalName })"
+            :aspect-ratio="aspectRatio"
+            class="w-full h-full"
+            @load="(e: { timeTaken: string, sizeKb: string }) => loadStats = e"
+          />
+          <IFrameLoader
+            v-else
+            :src="src"
+            class="pointer-events-none"
+            :aspect-ratio="aspectRatio"
+            @load="(e: { timeTaken: string, sizeKb: string }) => loadStats = e"
+          />
+        </div>
+      </UTooltip>
+    </div>
+    <div class="template-footer">
+      <UTooltip :text="`Open the source code of ${component.pascalName}.vue in your IDE`">
+        <ULink class="template-action" @click.stop="openComponent">
+          <UIcon name="carbon:code" class="w-3 h-3" />
+          View source
+        </ULink>
+      </UTooltip>
+      <div v-if="component.credits" class="template-credit">
+        <ULink v-if="creditSite" :to="creditSite" target="_blank">
+          {{ creditName }}
+        </ULink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.template-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.template-header {
+  padding: 0 8px;
+}
+
+.template-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: oklch(55% 0.04 285);
+  transition: color 0.15s ease;
+  text-decoration: none;
+}
+
+.group:hover .template-name {
+  color: oklch(35% 0.04 285);
+}
+
+.dark .template-name {
+  color: oklch(70% 0.03 285);
+}
+
+.dark .group:hover .template-name {
+  color: oklch(90% 0.02 285);
+}
+
+.template-preview {
+  border-radius: 10px;
+  overflow: hidden;
+  border: 2px solid transparent;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  background: oklch(98% 0.005 285);
+}
+
+.dark .template-preview {
+  background: oklch(18% 0.04 285);
+}
+
+.template-preview:hover {
+  border-color: var(--seo-green);
+  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.08);
+}
+
+.template-preview.is-active {
+  border-color: var(--seo-green);
+  box-shadow: 0 0 0 3px oklch(75% 0.15 145 / 0.2);
+}
+
+.template-image {
+  position: relative;
+  height: 150px;
+  overflow: hidden;
+}
+
+.active-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  color: var(--seo-green);
+  z-index: 1;
+  filter: drop-shadow(0 1px 2px oklch(0% 0 0 / 0.2));
+}
+
+.template-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 8px;
+  font-size: 11px;
+}
+
+.template-action {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: oklch(55% 0.04 285);
+  transition: color 0.15s ease;
+  cursor: pointer;
+}
+
+.template-action:hover {
+  color: var(--seo-green);
+}
+
+.dark .template-action {
+  color: oklch(60% 0.03 285);
+}
+
+.template-credit {
+  color: oklch(60% 0.04 285);
+}
+
+.template-credit a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.template-credit a:hover {
+  text-decoration: underline;
+}
+</style>

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>