@ekrist1/vulse 0.1.6-alpha.3 → 0.1.7-alpha.4

package/src/admin/components/LivePreviewPanel.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { adminApi, AdminApiError } from '../client/api.js'
+
+const props = defineProps<{
+  collection: string
+  entryId?: string
+  previewPath: string
+  slug: string
+  content: Record<string, unknown>
+  entryLocale?: string
+}>()
+
+const iframeRef = ref<HTMLIFrameElement | null>(null)
+const iframeSrc = ref('')
+const sessionId = ref<string | null>(null)
+const lastSlug = ref(props.slug)
+const error = ref<string | null>(null)
+const starting = ref(false)
+
+let updateTimer: ReturnType<typeof setTimeout> | null = null
+
+function buildPreviewUrl(slug: string): string {
+  const path = props.previewPath.replace('{slug}', encodeURIComponent(slug))
+  const url = new URL(path, window.location.origin)
+  if (sessionId.value) url.searchParams.set('vulse_live_preview', sessionId.value)
+  return url.toString()
+}
+
+function postPreviewUpdated() {
+  if (!sessionId.value) return
+  iframeRef.value?.contentWindow?.postMessage(
+    { name: 'vulse.preview.updated', token: sessionId.value },
+    window.location.origin,
+  )
+}
+
+async function startSession() {
+  starting.value = true
+  error.value = null
+  try {
+    const created = await adminApi.post<{ id: string; previewUrl: string }>(
+      '/api/vulse/preview/sessions',
+      {
+        collection: props.collection,
+        entryId: props.entryId ?? null,
+        slug: props.slug,
+        content: props.content,
+        ...(props.entryLocale ? { locale: props.entryLocale } : {}),
+      },
+    )
+    sessionId.value = created.id
+    iframeSrc.value = created.previewUrl
+    lastSlug.value = props.slug
+    await updateSession()
+  } catch (e) {
+    if (e instanceof AdminApiError) error.value = e.message
+    else error.value = 'Failed to start live preview'
+  } finally {
+    starting.value = false
+  }
+}
+
+async function updateSession() {
+  if (!sessionId.value) return
+  try {
+    await adminApi.put(`/api/vulse/preview/sessions/${sessionId.value}`, {
+      content: props.content,
+      slug: props.slug,
+      ...(props.entryLocale ? { locale: props.entryLocale } : {}),
+    })
+    if (props.slug !== lastSlug.value) {
+      iframeSrc.value = buildPreviewUrl(props.slug)
+      lastSlug.value = props.slug
+    }
+    postPreviewUpdated()
+    error.value = null
+  } catch (e) {
+    if (e instanceof AdminApiError && (e.status === 403 || e.status === 404)) {
+      sessionId.value = null
+      iframeSrc.value = ''
+      await startSession()
+      return
+    }
+    if (e instanceof AdminApiError) error.value = e.message
+    else error.value = 'Failed to update live preview'
+  }
+}
+
+function scheduleUpdate() {
+  if (!sessionId.value) return
+  if (updateTimer) clearTimeout(updateTimer)
+  updateTimer = setTimeout(() => {
+    void updateSession()
+  }, 100)
+}
+
+const showIframe = computed(() => !!iframeSrc.value && !starting.value && !error.value)
+
+watch(
+  () => ({ slug: props.slug, content: props.content }),
+  () => scheduleUpdate(),
+  { deep: true },
+)
+
+onMounted(async () => {
+  await startSession()
+})
+
+onBeforeUnmount(() => {
+  if (updateTimer) clearTimeout(updateTimer)
+  const id = sessionId.value
+  if (!id) return
+  void adminApi.delete(`/api/vulse/preview/sessions/${id}`).catch(() => {})
+})
+</script>
+
+<template>
+  <aside class="flex min-h-[520px] flex-col rounded border border-zinc-200 bg-white">
+    <header class="flex items-center justify-between gap-3 border-b border-zinc-200 px-4 py-3">
+      <h2 class="text-sm font-semibold text-zinc-900">Live preview</h2>
+      <div class="flex items-center gap-3">
+        <button
+          v-if="error"
+          type="button"
+          class="text-sm text-zinc-600 underline hover:text-zinc-900"
+          @click="startSession"
+        >
+          Retry
+        </button>
+        <a
+          v-if="iframeSrc"
+          :href="iframeSrc"
+          target="_blank"
+          rel="noreferrer"
+          class="text-sm text-zinc-600 underline hover:text-zinc-900"
+        >
+          Open in tab
+        </a>
+      </div>
+    </header>
+
+    <div class="flex flex-1 flex-col">
+      <div
+        v-if="error"
+        class="flex min-h-[480px] flex-1 flex-col items-center justify-center gap-3 bg-red-50 px-6 text-sm text-red-700"
+      >
+        <p>{{ error }}</p>
+        <button
+          type="button"
+          class="rounded border border-red-300 bg-white px-3 py-1.5 text-sm hover:bg-red-50"
+          @click="startSession"
+        >
+          Restart preview
+        </button>
+      </div>
+      <div
+        v-else-if="starting || !iframeSrc"
+        class="flex min-h-[480px] flex-1 items-center justify-center bg-zinc-50 px-6 text-sm text-zinc-500"
+      >
+        Starting preview session…
+      </div>
+      <iframe
+        v-else-if="showIframe"
+        ref="iframeRef"
+        :src="iframeSrc"
+        class="min-h-[480px] w-full flex-1 border-0 bg-white"
+      />
+    </div>
+  </aside>
+</template>

package/src/admin/components/LoginForm.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const props = defineProps<{ next: string }>()
+const email = ref('')
+const password = ref('')
+const error = ref<string | null>(null)
+const loading = ref(false)
+
+function safeNext(raw: string): string {
+  // Only allow same-origin path redirects; reject protocol-relative ("//evil")
+  // and absolute URLs.
+  if (typeof raw !== 'string' || !raw.startsWith('/') || raw.startsWith('//')) return '/admin'
+  return raw
+}
+
+async function submit(e: Event) {
+  e.preventDefault()
+  loading.value = true
+  error.value = null
+  const res = await fetch('/api/auth/sign-in/email', {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+      Origin: window.location.origin,
+    },
+    body: JSON.stringify({ email: email.value, password: password.value }),
+  })
+  loading.value = false
+  if (!res.ok) { error.value = 'Invalid email or password'; return }
+  window.location.href = safeNext(props.next)
+}
+</script>
+
+<template>
+  <form @submit="submit" class="w-80 p-6 rounded-xl shadow-sm border bg-white space-y-4">
+    <h1 class="text-2xl font-semibold">Sign in</h1>
+    <label class="block">
+      <span class="text-sm text-zinc-600">Email</span>
+      <input v-model="email" type="email" required class="mt-1 w-full rounded border px-3 py-2" />
+    </label>
+    <label class="block">
+      <span class="text-sm text-zinc-600">Password</span>
+      <input v-model="password" type="password" required class="mt-1 w-full rounded border px-3 py-2" />
+    </label>
+    <p v-if="error" class="text-sm text-red-600">{{ error }}</p>
+    <button :disabled="loading" class="w-full rounded bg-brand py-2 text-white font-medium disabled:opacity-50">
+      {{ loading ? 'Signing in…' : 'Sign in' }}
+    </button>
+    <p class="text-center text-sm text-zinc-500">
+      <a href="/forgot-password?next=/admin" class="text-brand hover:underline">Forgot password?</a>
+    </p>
+  </form>
+</template>

package/src/admin/components/MediaLibrary.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { adminApi } from '../client/api.js'
+
+interface MediaItem {
+  id: string
+  r2Key: string
+  mime: string
+  alt: string | null
+  width: number | null
+  height: number | null
+  deliveryUrl: string | null
+  previewUrl: string
+}
+
+const items = ref<MediaItem[]>([])
+const uploading = ref(false)
+const error = ref<string | null>(null)
+
+function previewSrc(item: MediaItem): string {
+  return item.deliveryUrl ?? item.previewUrl
+}
+
+async function load() {
+  error.value = null
+  try {
+    items.value = await adminApi.get<MediaItem[]>('/api/vulse/media')
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load media'
+  }
+}
+
+async function onFiles(files: FileList | null) {
+  if (!files?.length) return
+  uploading.value = true
+  error.value = null
+  try {
+    for (const f of Array.from(files)) {
+      const form = new FormData()
+      form.append('file', f)
+      const res = await fetch('/api/vulse/media', { method: 'POST', body: form, credentials: 'same-origin' })
+      const body = await res.json() as { ok: boolean; error?: { message: string } }
+      if (!body.ok) throw new Error(body.error?.message ?? 'Upload failed')
+    }
+    await load()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Upload failed'
+  } finally {
+    uploading.value = false
+  }
+}
+
+async function softDelete(id: string) {
+  if (!confirm('Delete this asset?')) return
+  await adminApi.delete(`/api/vulse/media/${id}`)
+  await load()
+}
+
+async function setAlt(id: string, alt: string) {
+  await adminApi.patch(`/api/vulse/media/${id}`, { alt })
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div>
+    <div class="mb-4 flex items-center gap-3">
+      <label class="vulse-button-primary cursor-pointer rounded px-4 py-2 text-sm font-medium">
+        Upload
+        <input
+          type="file"
+          multiple
+          accept="image/*"
+          class="hidden"
+          @change="onFiles(($event.target as HTMLInputElement).files)"
+        />
+      </label>
+      <span v-if="uploading" class="text-sm text-zinc-500">Uploading…</span>
+    </div>
+
+    <p v-if="error" class="mb-4 rounded bg-red-50 px-3 py-2 text-sm text-red-700">{{ error }}</p>
+
+    <div
+      v-if="items.length === 0 && !uploading"
+      class="rounded border border-dashed border-zinc-300 bg-white p-8 text-center text-sm text-zinc-500"
+    >
+      No assets yet. Upload images to get started.
+    </div>
+
+    <div v-else class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+      <div v-for="m in items" :key="m.id" class="space-y-2 rounded border border-zinc-200 bg-white p-2">
+        <img :src="previewSrc(m)" :alt="m.alt ?? ''" class="aspect-square w-full rounded object-cover" />
+        <input
+          :value="m.alt ?? ''"
+          placeholder="Alt text"
+          class="vulse-input text-xs"
+          @change="setAlt(m.id, ($event.target as HTMLInputElement).value)"
+        />
+        <button type="button" class="text-xs text-red-600 hover:underline" @click="softDelete(m.id)">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/admin/components/MediaPicker.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { adminApi } from '../client/api.js'
+
+const emit = defineEmits<{ (e: 'pick', id: string): void; (e: 'close'): void }>()
+
+interface MediaItem {
+  id: string
+  alt: string | null
+  deliveryUrl: string | null
+  previewUrl: string
+}
+
+const items = ref<MediaItem[]>([])
+
+function previewSrc(item: MediaItem): string {
+  return item.deliveryUrl ?? item.previewUrl
+}
+
+onMounted(async () => {
+  items.value = await adminApi.get<MediaItem[]>('/api/vulse/media')
+})
+</script>
+
+<template>
+  <div class="fixed inset-0 z-50 grid place-items-center bg-black/40" @click.self="$emit('close')">
+    <div class="max-h-[80vh] w-[720px] overflow-auto rounded-xl bg-white p-4">
+      <div class="mb-3 flex items-center justify-between">
+        <h2 class="font-semibold">Pick a media item</h2>
+        <button type="button" class="text-zinc-500 hover:text-zinc-800" @click="$emit('close')">×</button>
+      </div>
+      <div v-if="items.length === 0" class="py-8 text-center text-sm text-zinc-500">
+        No media yet. Upload assets from the Media page first.
+      </div>
+      <div v-else class="grid grid-cols-4 gap-3">
+        <button
+          v-for="m in items"
+          :key="m.id"
+          type="button"
+          class="rounded border p-2 hover:ring-2 hover:ring-[var(--vulse-color-accent)]"
+          @click="$emit('pick', m.id)"
+        >
+          <img :src="previewSrc(m)" :alt="m.alt ?? ''" class="aspect-square w-full rounded object-cover" />
+          <div v-if="m.alt" class="mt-1 truncate text-xs">{{ m.alt }}</div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/admin/components/RevisionDiff.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { diffJson } from 'diff'
+
+const props = defineProps<{ from: unknown; to: unknown }>()
+const parts = computed(() => diffJson(props.from as object, props.to as object))
+</script>
+<template>
+  <pre class="bg-zinc-50 border rounded p-3 text-xs overflow-auto whitespace-pre-wrap"><span v-for="(p, i) in parts" :key="i"
+    :class="p.added ? 'bg-green-100 text-green-900' : p.removed ? 'bg-red-100 text-red-900' : ''">{{ p.value }}</span></pre>
+</template>

package/src/admin/components/RevisionList.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { adminApi, AdminApiError } from '../client/api'
+import { resolveActiveLocale } from '../client/active-locale.js'
+import { useToast } from '../composables/toast.js'
+import RevisionDiff from './RevisionDiff.vue'
+
+interface RevisionRow {
+  id: string
+  version: number
+  authorId: string | null
+  createdAt: string
+  changeSummary: string | null
+  content: unknown
+}
+
+const props = defineProps<{
+  collection: string
+  entryId: string
+  /** Active locale from the server. Avoid prop name `locale` (Astro/HTML coercion). */
+  entryLocale?: string
+  supportedLocales?: string[]
+  defaultLocale?: string
+}>()
+
+const toast = useToast()
+const revisions = ref<RevisionRow[]>([])
+const selected = ref<number | null>(null)
+
+const activeLocale = computed(() =>
+  resolveActiveLocale(props.supportedLocales, props.entryLocale, props.defaultLocale),
+)
+
+function versionOf(r: RevisionRow): number {
+  return Number(r.version)
+}
+
+const localeQuery = () => `?locale=${encodeURIComponent(activeLocale.value)}`
+
+const latestVersion = computed(() =>
+  revisions.value.reduce((max, r) => Math.max(max, versionOf(r)), 0),
+)
+
+const selectedRevision = computed(() =>
+  selected.value === null
+    ? null
+    : revisions.value.find((r) => versionOf(r) === selected.value) ?? null,
+)
+
+const selectedContent = computed(() => selectedRevision.value?.content ?? null)
+
+const isCurrentVersion = computed(() =>
+  selected.value !== null && selected.value === latestVersion.value,
+)
+
+const canRestore = computed(() =>
+  selected.value !== null && revisions.value.length > 1 && !isCurrentVersion.value,
+)
+
+const newerContent = computed(() => {
+  if (selected.value === null) return null
+  const newer = revisions.value
+    .filter((r) => versionOf(r) > selected.value!)
+    .sort((a, b) => versionOf(a) - versionOf(b))[0]
+  return newer?.content ?? null
+})
+
+async function load() {
+  revisions.value = await adminApi.get<RevisionRow[]>(
+    `/api/vulse/entries/${props.collection}/${props.entryId}/revisions${localeQuery()}`,
+  )
+  if (revisions.value.length && selected.value === null) {
+    selected.value = versionOf(revisions.value[0]!)
+  }
+}
+
+function inspect(v: number) {
+  selected.value = Number(v)
+}
+
+async function restore(v: number) {
+  if (!confirm(`Restore version ${v}? A new revision will be written on top — no history is lost.`)) return
+  try {
+    await adminApi.post(
+      `/api/vulse/entries/${props.collection}/${props.entryId}/revisions/${v}/restore${localeQuery()}`,
+      {},
+    )
+    window.location.href = `/admin/collections/${props.collection}/${props.entryId}?locale=${encodeURIComponent(activeLocale.value)}`
+  } catch (err) {
+    toast.error(err instanceof AdminApiError ? err.message : 'Failed to restore revision')
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="grid grid-cols-[260px_1fr] gap-6">
+    <ul class="border rounded bg-white divide-y text-sm min-h-[120px]">
+      <li v-if="!revisions.length" class="p-3 text-zinc-500">No revisions yet.</li>
+      <li v-for="r in revisions" :key="r.id"
+        @click="inspect(r.version)"
+        :class="selected === versionOf(r) && 'bg-zinc-100'"
+        class="p-3 cursor-pointer hover:bg-zinc-50">
+        <div class="flex items-center justify-between gap-2">
+          <div class="font-medium">v{{ r.version }}</div>
+          <span v-if="versionOf(r) === latestVersion" class="text-xs text-zinc-500">Current</span>
+        </div>
+        <div class="text-xs text-zinc-500">{{ new Date(r.createdAt).toLocaleString() }}</div>
+        <div v-if="r.changeSummary" class="text-xs text-zinc-600 mt-1">{{ r.changeSummary }}</div>
+      </li>
+    </ul>
+    <div v-if="selected !== null" class="space-y-3">
+      <div class="flex items-center gap-3">
+        <h2 class="text-lg font-semibold">Version {{ selected }}</h2>
+        <button
+          v-if="canRestore"
+          type="button"
+          @click="restore(selected!)"
+          class="vulse-button-primary rounded px-3 py-1 text-sm font-medium">
+          Restore
+        </button>
+      </div>
+      <p v-if="isCurrentVersion && revisions.length > 1" class="text-sm text-zinc-600">
+        This is the current version. Select an older version to restore it.
+      </p>
+      <p v-else-if="revisions.length <= 1" class="text-sm text-zinc-600">
+        Only one version exists.
+      </p>
+      <RevisionDiff v-if="newerContent !== null && selectedContent !== null" :from="selectedContent" :to="newerContent" />
+      <pre v-else-if="selectedContent !== null" class="bg-zinc-900 text-zinc-100 rounded p-4 overflow-auto text-xs">{{ JSON.stringify(selectedContent, null, 2) }}</pre>
+    </div>
+  </div>
+</template>

package/src/admin/components/SeoFields.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { FieldDescriptor } from '../client/form-from-zod.js'
+import type { SeoContent, SeoFieldMapping } from '../../core/blueprints/seo.js'
+import {
+  resolveEffectiveSeo,
+  resolvedSeoSummary,
+} from '../../core/blueprints/seo.js'
+import TextField from './fields/TextField.vue'
+import TextareaField from './fields/TextareaField.vue'
+import MediaField from './fields/MediaField.vue'
+
+const props = defineProps<{
+  modelValue: SeoContent | undefined
+  content: Record<string, unknown>
+  fields: FieldDescriptor[]
+  titleField?: string
+  seoMapping?: SeoFieldMapping
+  fieldLabels?: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: SeoContent): void
+}>()
+
+const expanded = ref(false)
+
+const seo = computed(() => props.modelValue ?? {})
+
+const resolved = computed(() =>
+  resolveEffectiveSeo(
+    props.content,
+    seo.value,
+    props.fields,
+    props.titleField ?? 'title',
+    props.seoMapping,
+  ),
+)
+
+const summary = computed(() => resolvedSeoSummary(resolved.value))
+
+function fieldLabel(path: string | undefined): string {
+  if (!path) return 'field'
+  return props.fieldLabels?.[path] ?? path
+}
+
+function sourceHint(key: 'metaTitle' | 'metaDescription' | 'ogImage'): string | null {
+  const field = resolved.value[key]
+  if (field.overridden || !field.sourceField) return null
+  return `Defaults to ${fieldLabel(field.sourceField)}`
+}
+
+function update<K extends keyof SeoContent>(key: K, value: SeoContent[K]) {
+  emit('update:modelValue', { ...seo.value, [key]: value })
+}
+</script>
+
+<template>
+  <details
+    class="rounded border border-zinc-200 bg-zinc-50 text-sm"
+    :open="expanded"
+    @toggle="expanded = ($event.target as HTMLDetailsElement).open"
+  >
+    <summary class="cursor-pointer select-none px-3 py-2.5 text-zinc-600">
+      <span class="font-medium">SEO</span>
+      <span class="ml-2 text-zinc-500">{{ summary }}</span>
+    </summary>
+    <div class="space-y-4 border-t border-zinc-200 px-3 py-3">
+      <p class="text-xs text-zinc-500">
+        Leave fields empty to use mapped content fields. Values you enter here override those defaults.
+      </p>
+      <div>
+        <TextField
+          label="Meta title"
+          :model-value="seo.metaTitle ?? ''"
+          @update:modelValue="update('metaTitle', $event || undefined)"
+        />
+        <p v-if="sourceHint('metaTitle')" class="mt-1 text-xs text-zinc-400">
+          {{ sourceHint('metaTitle') }}
+          <span v-if="resolved.metaTitle.value && !resolved.metaTitle.overridden" class="text-zinc-500">
+            — currently “{{ resolved.metaTitle.value }}”
+          </span>
+        </p>
+      </div>
+      <div>
+        <TextareaField
+          label="Meta description"
+          :model-value="seo.metaDescription ?? ''"
+          @update:modelValue="update('metaDescription', $event || undefined)"
+        />
+        <p v-if="sourceHint('metaDescription')" class="mt-1 text-xs text-zinc-400">
+          {{ sourceHint('metaDescription') }}
+          <span v-if="resolved.metaDescription.value && !resolved.metaDescription.overridden" class="text-zinc-500">
+            — currently “{{ resolved.metaDescription.value }}”
+          </span>
+        </p>
+      </div>
+      <div>
+        <MediaField
+          label="OG image"
+          :model-value="seo.ogImage ?? resolved.ogImage.value"
+          @update:modelValue="update('ogImage', $event ?? undefined)"
+        />
+        <p v-if="sourceHint('ogImage')" class="mt-1 text-xs text-zinc-400">
+          {{ sourceHint('ogImage') }}
+          <span v-if="resolved.ogImage.value && !resolved.ogImage.overridden" class="text-zinc-500">
+            — using {{ fieldLabel(resolved.ogImage.sourceField) }}
+          </span>
+        </p>
+      </div>
+    </div>
+  </details>
+</template>