Live Preview

// components/page-blocks.tsx
"use client";
import { Blocks } from "@dyrected/next";
import Hero from "./blocks/hero";
import Features from "./blocks/features";
import Pricing from "./blocks/pricing";
import Testimonial from "./blocks/testimonial";
import Cta from "./blocks/cta";

const components = { hero: Hero, features: Features, pricing: Pricing, testimonial: Testimonial, cta: Cta };

export default function PageBlocks({ layout }: { layout: any[] }) {
  return <Blocks items={layout} components={components} path="layout" />;
}

// components/blocks/hero.tsx
import { useDyPath } from "@dyrected/next";

export default function Hero({ heading, subheading, ctaLabel, ctaLink }: any) {
  // useDyPath is a hook — call it unconditionally, never inside `subheading && ...`.
  const dyHeading = useDyPath("heading");
  const dySubheading = useDyPath("subheading");
  const dyCtaLabel = useDyPath("ctaLabel");

  return (
    <section className="hero">
      <h1 {...dyHeading}>{heading}</h1>
      {subheading && <p {...dySubheading}>{subheading}</p>}
      {ctaLabel && (
        <a href={ctaLink} {...dyCtaLabel}>
          {ctaLabel}
        </a>
      )}
    </section>
  );
}

// components/blocks/testimonial.tsx
import { useDyPath } from "@dyrected/next";

export default function Testimonial({ quote, author, role }: any) {
  const dyQuote = useDyPath("quote");
  const dyAuthor = useDyPath("author");
  const dyRole = useDyPath("role");

  return (
    <figure className="testimonial">
      <blockquote {...dyQuote}>{quote}</blockquote>
      <figcaption>
        <span {...dyAuthor}>{author}</span>
        {role && <span {...dyRole}>{role}</span>}
      </figcaption>
    </figure>
  );
}

<!-- components/PageBlocks.vue -->
<script setup lang="ts">
import { defineAsyncComponent } from "vue";

const components = {
  hero: defineAsyncComponent(() => import("~/components/blocks/Hero.vue")),
  features: defineAsyncComponent(() => import("~/components/blocks/Features.vue")),
  pricing: defineAsyncComponent(() => import("~/components/blocks/Pricing.vue")),
  testimonial: defineAsyncComponent(() => import("~/components/blocks/Testimonial.vue")),
  cta: defineAsyncComponent(() => import("~/components/blocks/Cta.vue")),
};

defineProps<{ layout: any[] }>();
</script>

<template>
  <DyrectedBlocks :items="layout" :components="components" path="layout" />
</template>

<!-- components/blocks/Hero.vue -->
<script setup lang="ts">
defineProps<{ heading: string; subheading?: string; ctaLabel?: string; ctaLink?: string }>();

const dyHeading = useDyPath("heading");
const dySubheading = useDyPath("subheading");
const dyCta = useDyPath("ctaLabel");
</script>

<template>
  <section class="hero">
    <h1 v-bind="dyHeading">{{ heading }}</h1>
    <p v-if="subheading" v-bind="dySubheading">{{ subheading }}</p>
    <a v-if="ctaLabel" :href="ctaLink" v-bind="dyCta">{{ ctaLabel }}</a>
  </section>
</template>

<!-- components/blocks/Testimonial.vue -->
<script setup lang="ts">
defineProps<{ quote: string; author: string; role?: string }>();
const dyQuote = useDyPath("quote");
const dyAuthor = useDyPath("author");
const dyRole = useDyPath("role");
</script>

<template>
  <figure class="testimonial">
    <blockquote v-bind="dyQuote">{{ quote }}</blockquote>
    <figcaption>
      <span v-bind="dyAuthor">{{ author }}</span>
      <span v-if="role" v-bind="dyRole">{{ role }}</span>
    </figcaption>
  </figure>
</template>

// app/[slug]/page.tsx — Server Component (fetches published data)
import { getDyrectedClient } from "@dyrected/next";
import PageView from "./page-view";

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const client = getDyrectedClient();
  const { docs } = await client.collection("pages").find({
    where: { slug: { equals: slug } },
    limit: 1,
    depth: 1, // resolve hero image + any relationships
  });
  return <PageView initialData={docs[0] ?? null} />;
}

// app/[slug]/page-view.tsx — Client Component (overlays draft data in preview)
"use client";
import { useLivePreview } from "@dyrected/next";
import PageBlocks from "@/components/page-blocks";

export default function PageView({ initialData }: { initialData: any }) {
  const { data: page, isLive } = useLivePreview({
    initialData,
    serverURL: process.env.NEXT_PUBLIC_ADMIN_URL, // lock origin in prod
  });

  if (!page) return <div>Not found</div>;

  return (
    <>
      {isLive && <span className="preview-badge">Live preview</span>}
      <PageBlocks layout={page.layout} />
    </>
  );
}

<!-- pages/[slug].vue — serves both the public page and the preview -->
<script setup lang="ts">
const route = useRoute();

const { data: response } = await useDyrectedCollection("pages", {
  where: { slug: { equals: route.params.slug } },
  limit: 1,
  depth: 1,
});

// Draft data overlays the published fetch only inside the Admin iframe
const { data: page, isLive } = useLivePreview({
  initialData: response.value?.docs?.[0] ?? null,
});
</script>

<template>
  <div v-if="!page">Not found</div>
  <template v-else>
    <span v-if="isLive" class="preview-badge">Live preview</span>
    <PageBlocks :layout="page.layout" />
  </template>
</template>