@nitrogenbuilder/connector-payload 0.1.0

package/README.md

@@ -0,0 +1,101 @@
+# Nitrogen Connector Payload
+
+A Payload CMS plugin for visual page building with Nitrogen.
+
+## Setup
+
+This project uses the `nitrogen-connector-payload` plugin for visual page building with Nitrogen. Here's how to install it in a fresh Payload CMS project:
+
+### 1. Install Dependencies
+
+```bash
+pnpm add nitrogen-connector-payload //This is not done yet. It's dev only for now.
+pnpm add @nitrogenbuilder/client-react @nitrogenbuilder/client-core @nitrogenbuilder/types
+```
+
+### 2. Add Plugin to Payload Config
+
+In your `src/plugins/index.ts` (or wherever you configure plugins):
+
+```ts
+import { nitrogenConnectorPlugin } from "nitrogen-connector-payload"; //This is not done yet. For Dev: "link:../nitrogen-connector-payload"
+
+export const plugins: Plugin[] = [
+  nitrogenConnectorPlugin({
+    collections: ["pages", "posts"], // Collections to enable Nitrogen editing on
+  }),
+  // ... other plugins
+];
+```
+
+### 3. Wrap Your Page Routes
+
+In your page route files (e.g., `src/app/(frontend)/[slug]/page.tsx`), wrap your content with `NitrogenWrapper`:
+
+```tsx
+import { NitrogenWrapper } from 'nitrogen-connector-payload/frontend'
+
+export default async function Page({ params, searchParams }) {
+  const page = await queryPage(...)
+  const search = await searchParams
+
+  return (
+    <NitrogenWrapper page={page} searchParams={search} collection="pages">
+      {/* Your regular page content */}
+      <RenderHero {...page.hero} />
+      <RenderBlocks blocks={page.layout} />
+    </NitrogenWrapper>
+  )
+}
+```
+
+That's it! The `NitrogenWrapper` component automatically:
+
+- Detects when the Nitrogen editor is requesting the page (via `?nitrogen-builder` query param)
+- Checks if the page has Nitrogen data
+- Renders the Nitrogen visual builder when needed, otherwise renders your regular content
+
+### Adding Custom Components
+
+To register custom Nitrogen components, create a client component:
+
+```tsx
+// src/components/NitrogenComponents.tsx
+"use client";
+
+import { nitrogen } from "nitrogen-connector-payload/frontend";
+import type {
+  ComponentSettings,
+  ComponentSettingsToProps,
+} from "nitrogen-connector-payload/frontend";
+import MyComponent from "./MyComponent";
+
+const myComponentSettings = {
+  categories: {
+    content: {
+      label: "Content",
+      groups: {
+        content: {
+          label: "Content",
+          props: {
+            title: { type: "string", default: "Hello" },
+          },
+        },
+      },
+    },
+  },
+} as const satisfies ComponentSettings;
+
+// Register on module load
+nitrogen.registerModule("my-component", MyComponent, myComponentSettings);
+
+export {};
+```
+
+Then import it in your page route:
+
+```tsx
+import "@/components/NitrogenComponents";
+```
+
+---

package/dist/collection-registry.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Runtime registry of collections configured for Nitrogen editing.
+ *
+ * The plugin registers collections at init time via `registerCollection()`.
+ */
+export declare function registerCollection(alias: string, collectionSlug: string): void;
+export declare function resolveCollection(postType: string): string;

package/dist/collection-registry.js

@@ -0,0 +1,12 @@
+/**
+ * Runtime registry of collections configured for Nitrogen editing.
+ *
+ * The plugin registers collections at init time via `registerCollection()`.
+ */
+const registeredCollections = new Map();
+export function registerCollection(alias, collectionSlug) {
+    registeredCollections.set(alias, collectionSlug);
+}
+export function resolveCollection(postType) {
+    return registeredCollections.get(postType) || postType;
+}

package/dist/collections/NitrogenTemplates.d.ts

@@ -0,0 +1,2 @@
+import type { CollectionConfig } from 'payload';
+export declare const NitrogenTemplates: CollectionConfig;

package/dist/collections/NitrogenTemplates.js

@@ -0,0 +1,78 @@
+export const NitrogenTemplates = {
+    slug: 'nitrogen-templates',
+    admin: {
+        useAsTitle: 'title',
+        defaultColumns: ['title', 'associatedCollection', 'updatedAt'],
+        components: {
+            edit: {
+                beforeDocumentControls: [
+                    {
+                        path: 'nitrogen-connector-payload/components/NitrogenEditButton#NitrogenEditButton',
+                        clientProps: {
+                            collection: 'nitrogen-templates',
+                        },
+                    },
+                ],
+            },
+        },
+    },
+    access: {
+        read: () => true,
+        create: ({ req }) => !!req.user,
+        update: ({ req }) => !!req.user,
+        delete: ({ req }) => !!req.user,
+    },
+    fields: [
+        {
+            name: 'title',
+            type: 'text',
+            required: true,
+        },
+        {
+            name: 'slug',
+            type: 'text',
+            required: true,
+            unique: true,
+        },
+        {
+            name: 'status',
+            type: 'select',
+            options: [
+                { label: 'Draft', value: 'draft' },
+                { label: 'Published', value: 'published' },
+            ],
+            defaultValue: 'draft',
+            admin: {
+                position: 'sidebar',
+            },
+        },
+        {
+            name: 'templateType',
+            type: 'text',
+            admin: {
+                description: 'Template type identifier for filtering',
+            },
+        },
+        {
+            name: 'associatedCollection',
+            type: 'text',
+            admin: {
+                description: 'Which collection this template applies to (e.g., "posts", "header", "footer")',
+            },
+        },
+        {
+            name: 'nitrogenData',
+            type: 'json',
+            admin: {
+                description: 'Nitrogen page builder JSON module tree',
+            },
+        },
+        {
+            name: 'templateSettings',
+            type: 'json',
+            admin: {
+                description: 'Template-level Nitrogen settings',
+            },
+        },
+    ],
+};

package/dist/components/NitrogenEditButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const NitrogenEditButton: React.FC<{
+    collection: string;
+}>;

package/dist/components/NitrogenEditButton.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+export const NitrogenEditButton = ({ collection }) => {
+    const [id, setId] = useState(undefined);
+    const [token, setToken] = useState(undefined);
+    useEffect(() => {
+        const segments = window.location.pathname.split("/").filter(Boolean);
+        // segments: ["admin", "collections", "{collection-slug}", "{id}"]
+        if (segments.length >= 4) {
+            setId(segments[3]);
+        }
+        // Fetch the connector token from NitrogenSettings global
+        fetch("/api/globals/nitrogen-settings")
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.connectorToken) {
+                setToken(data.connectorToken);
+            }
+        })
+            .catch((err) => {
+            console.error("Failed to fetch nitrogen settings:", err);
+        });
+    }, []);
+    if (!id || !token)
+        return null;
+    // Determine which query param to use based on collection type
+    const param = collection === "nitrogen-templates" ? "templateId" : "pageId";
+    // Always pass the collection slug so the editor knows exactly which collection to query.
+    const href = `/nitrogen-editor?token=${encodeURIComponent(token)}&collection=${encodeURIComponent(collection)}&${param}=${id}`;
+    return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "8px 16px",
+            background: "#6366f1",
+            color: "#fff",
+            borderRadius: "4px",
+            textDecoration: "none",
+            fontSize: "14px",
+            fontWeight: 500,
+        }, children: "Edit with Nitrogen" }));
+};

package/dist/editor/NitrogenEditorLayout.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * Root layout for the Nitrogen editor route group.
+ * Provides <html>, <head>, and <body> so the editor page
+ * doesn't conflict with Next.js's layout requirements.
+ *
+ * Mount this as the route-group root layout, e.g.
+ * `app/(nitrogen-editor)/layout.tsx`:
+ *
+ *   import { NitrogenEditorLayout } from 'nitrogen-connector-payload/editor'
+ *   export default NitrogenEditorLayout
+ */
+export default function NitrogenEditorLayout({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/NitrogenEditorLayout.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Root layout for the Nitrogen editor route group.
+ * Provides <html>, <head>, and <body> so the editor page
+ * doesn't conflict with Next.js's layout requirements.
+ *
+ * Mount this as the route-group root layout, e.g.
+ * `app/(nitrogen-editor)/layout.tsx`:
+ *
+ *   import { NitrogenEditorLayout } from 'nitrogen-connector-payload/editor'
+ *   export default NitrogenEditorLayout
+ */
+export default function NitrogenEditorLayout({ children, }) {
+    return (_jsxs("html", { lang: "en", suppressHydrationWarning: true, children: [_jsxs("head", { children: [_jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: "Nitrogen Editor" }), _jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), _jsx("link", { href: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap", rel: "stylesheet" })] }), _jsx("body", { suppressHydrationWarning: true, children: children })] }));
+}

package/dist/editor/NitrogenEditorPage.d.ts

@@ -0,0 +1,20 @@
+interface NitrogenEditorSearchParams {
+    pageId?: string;
+    templateId?: string;
+    collection?: string;
+    development?: string;
+}
+/**
+ * Standalone editor page that loads the Nitrogen builder.
+ *
+ * Mount this in your Next.js app at e.g. `app/(app)/nitrogen-editor/page.tsx`:
+ *
+ *   import { NitrogenEditorPage } from 'nitrogen-connector-payload/editor'
+ *   export default NitrogenEditorPage
+ *
+ * Accessible at `/nitrogen-editor?pageId=xxx` or `/nitrogen-editor?templateId=xxx`.
+ */
+export default function NitrogenEditorPage({ searchParams, }: {
+    searchParams: Promise<NitrogenEditorSearchParams>;
+}): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/editor/NitrogenEditorPage.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getPayload } from 'payload';
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+/**
+ * Standalone editor page that loads the Nitrogen builder.
+ *
+ * Mount this in your Next.js app at e.g. `app/(app)/nitrogen-editor/page.tsx`:
+ *
+ *   import { NitrogenEditorPage } from 'nitrogen-connector-payload/editor'
+ *   export default NitrogenEditorPage
+ *
+ * Accessible at `/nitrogen-editor?pageId=xxx` or `/nitrogen-editor?templateId=xxx`.
+ */
+export default async function NitrogenEditorPage({ searchParams, }) {
+    // Dynamic import so consumers provide their own @payload-config
+    const payloadConfig = (await import('@payload-config')).default;
+    const payload = await getPayload({ config: payloadConfig });
+    const params = await searchParams;
+    // Authenticate — redirect to login if not authenticated
+    const headersList = await headers();
+    const { user } = await payload.auth({ headers: headersList });
+    if (!user) {
+        return redirect('/admin/login');
+    }
+    // Load global settings
+    const settings = (await payload.findGlobal({
+        slug: 'nitrogen-settings',
+    }));
+    const isDevelopment = params.development === 'true';
+    const siteUrl = isDevelopment ? settings.developmentUrl : settings.frontendUrl;
+    const nitrogenConfig = settings.nitrogenConfig || {};
+    // Determine the postType for the editor's API calls
+    let postType;
+    if (params.collection) {
+        postType = params.collection;
+    }
+    else if (params.templateId) {
+        postType = 'nitrogen-templates';
+    }
+    else {
+        return redirect('/admin');
+    }
+    // Build the config object the builder reads from window.nitrogenConfig
+    const builderConfig = {
+        licenseKey: settings.licenseKey || '',
+        provider: {
+            type: 'payload',
+            apiUrl: '/api/nitrogen/v1',
+            collection: postType,
+        },
+        siteUrl: siteUrl || '',
+        urlMaps: nitrogenConfig.urlMaps || [],
+        wysiwygColors: nitrogenConfig.wysiwygColors || {},
+        cssInjection: nitrogenConfig.cssInjection || '',
+    };
+    const editId = params.templateId || params.pageId || '';
+    const isEditorDev = process.env.NITROGEN_EDITOR_DEV === 'true';
+    const viteOrigin = 'http://localhost:5173';
+    const cdnBase = 'https://cdn.jsdelivr.net/npm/@nitrogenbuilder/editor@0.4';
+    return (_jsxs(_Fragment, { children: [isEditorDev ? (_jsxs(_Fragment, { children: [_jsx("link", { rel: "stylesheet", crossOrigin: "", href: `${viteOrigin}/fa620pro/css/all.css` }), _jsx("link", { rel: "stylesheet", crossOrigin: "", href: `${viteOrigin}/fa620pro/css/sharp-solid.css` }), _jsx("link", { rel: "stylesheet", crossOrigin: "", href: `${viteOrigin}/src/index.scss` })] })) : (_jsxs(_Fragment, { children: [_jsx("link", { rel: "stylesheet", crossOrigin: "", href: `${cdnBase}/fa620pro/css/all.css` }), _jsx("link", { rel: "stylesheet", crossOrigin: "", href: `${cdnBase}/fa620pro/css/sharp-solid.css` }), _jsx("link", { rel: "stylesheet", crossOrigin: "", href: `${cdnBase}/index.css` })] })), _jsx("script", { dangerouslySetInnerHTML: {
+                    __html: [
+                        `window.nitrogenConfig = ${JSON.stringify(builderConfig)};`,
+                        `window.nitrogenEditId = "${editId}";`,
+                        // Inject authorId into the URL so the editor can read it from window.location.search
+                        `(function(){var u=new URL(window.location.href);if(!u.searchParams.has("authorId")){u.searchParams.set("authorId",${JSON.stringify(String(user.id))});window.history.replaceState(null,"",u.toString())}})();`,
+                    ].join(''),
+                } }), _jsxs("div", { id: "root", children: [_jsx("div", { style: {
+                            position: 'fixed',
+                            inset: 0,
+                            zIndex: 9999999,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: '#0F1214',
+                        }, children: _jsx("img", { src: isEditorDev
+                                ? `${viteOrigin}/src/components/logo-white.svg`
+                                : `${cdnBase}/logo-white.svg`, alt: "Loading\u2026", style: {
+                                width: '24rem',
+                                maxWidth: '100%',
+                                animation: 'nitrogen-loader-pulse 3s ease-in-out infinite',
+                            } }) }), _jsx("style", { dangerouslySetInnerHTML: {
+                            __html: `@keyframes nitrogen-loader-pulse{0%{transform:scale(1);opacity:0}50%{opacity:1}100%{transform:scale(1.05);opacity:0}}`,
+                        } })] }), isEditorDev ? (_jsxs(_Fragment, { children: [_jsx("script", { type: "module", dangerouslySetInnerHTML: {
+                            __html: `import RefreshRuntime from "${viteOrigin}/@react-refresh";RefreshRuntime.injectIntoGlobalHook(window);window.$RefreshReg$ = () => {};window.$RefreshSig$ = () => (type) => type;window.__vite_plugin_react_preamble_installed__ = true;`,
+                        } }), _jsx("script", { type: "module", src: `${viteOrigin}/@vite/client` }), _jsx("script", { type: "module", crossOrigin: "", src: `${viteOrigin}/src/main.tsx` })] })) : (_jsx("script", { type: "module", crossOrigin: "", src: `${cdnBase}/index.js` }))] }));
+}

package/dist/editor/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NitrogenEditorPage } from './NitrogenEditorPage';
+export { default as NitrogenEditorLayout } from './NitrogenEditorLayout';

package/dist/editor/index.js

@@ -0,0 +1,2 @@
+export { default as NitrogenEditorPage } from './NitrogenEditorPage';
+export { default as NitrogenEditorLayout } from './NitrogenEditorLayout';

package/dist/endpoints/all.d.ts

@@ -0,0 +1,2 @@
+import type { Endpoint } from 'payload';
+export declare const allEndpoints: Endpoint[];

package/dist/endpoints/all.js

@@ -0,0 +1,48 @@
+import { getNitrogenSettings } from './helpers';
+import { resolveCollection } from '../collection-registry';
+export const allEndpoints = [
+    // GET /api/nitrogen/v1/all — List all items with filtering
+    {
+        path: '/nitrogen/v1/all',
+        method: 'get',
+        handler: async (req) => {
+            const { payload } = req;
+            const settings = await getNitrogenSettings(payload);
+            const url = new URL(req.url || '', 'http://localhost');
+            const postType = url.searchParams.get('post_type') || '';
+            if (!postType) {
+                return Response.json({ error: 'post_type query parameter is required' }, { status: 400 });
+            }
+            const statusParam = url.searchParams.get('post_status') || 'published';
+            const paged = parseInt(url.searchParams.get('paged') || '1', 10);
+            const perPage = parseInt(url.searchParams.get('per_page') || '20', 10);
+            const statuses = statusParam.split(',').map((s) => s.trim());
+            const collection = resolveCollection(postType);
+            const where = {};
+            if (!statuses.includes('any')) {
+                where.status = { in: statuses };
+            }
+            try {
+                const result = await payload.find({
+                    collection: collection,
+                    where,
+                    page: paged,
+                    limit: perPage,
+                    depth: 0,
+                });
+                const items = result.docs.map((doc) => ({
+                    id: doc.id,
+                    title: String(doc.title || ''),
+                    slug: String(doc.slug || ''),
+                    permalink: `${settings.frontendUrl || ''}/${String(doc.slug || '')}`,
+                    relative_permalink: `/${String(doc.slug || '')}`,
+                    type: collection,
+                }));
+                return Response.json(items);
+            }
+            catch {
+                return Response.json({ error: `Collection "${collection}" not found` }, { status: 400 });
+            }
+        },
+    },
+];

package/dist/endpoints/collection-endpoints.d.ts

@@ -0,0 +1,8 @@
+import type { Endpoint } from 'payload';
+/**
+ * Creates a complete set of CRUD endpoints for a given Payload collection.
+ *
+ * @param collectionSlug - The Payload collection slug to query (e.g., 'pages', 'posts')
+ * @param endpointPrefix - The URL path prefix (e.g., 'pages', 'posts')
+ */
+export declare function createCollectionEndpoints(collectionSlug: string, endpointPrefix: string): Endpoint[];

package/dist/endpoints/collection-endpoints.js

@@ -0,0 +1,168 @@
+import { getNitrogenSettings, buildDynamicData, buildPageResponse, buildListItemResponse, requireAuth, } from './helpers';
+/**
+ * Creates a complete set of CRUD endpoints for a given Payload collection.
+ *
+ * @param collectionSlug - The Payload collection slug to query (e.g., 'pages', 'posts')
+ * @param endpointPrefix - The URL path prefix (e.g., 'pages', 'posts')
+ */
+export function createCollectionEndpoints(collectionSlug, endpointPrefix) {
+    const collection = collectionSlug;
+    return [
+        // GET /api/nitrogen/v1/{prefix} — List items
+        {
+            path: `/nitrogen/v1/${endpointPrefix}`,
+            method: 'get',
+            handler: async (req) => {
+                const { payload } = req;
+                const settings = await getNitrogenSettings(payload);
+                const url = new URL(req.url || '', 'http://localhost');
+                const statusParam = url.searchParams.get('post_status') || 'published';
+                const statuses = statusParam.split(',').map((s) => s.trim());
+                const where = {};
+                if (!statuses.includes('any')) {
+                    where.status = { in: statuses };
+                }
+                const result = await payload.find({
+                    collection,
+                    where,
+                    limit: 0,
+                    depth: 1,
+                });
+                const items = result.docs.map((doc) => buildListItemResponse(doc, settings));
+                return Response.json(items);
+            },
+        },
+        // POST /api/nitrogen/v1/{prefix} — Create a new item
+        {
+            path: `/nitrogen/v1/${endpointPrefix}`,
+            method: 'post',
+            handler: async (req) => {
+                const authError = requireAuth(req);
+                if (authError)
+                    return authError;
+                const { payload } = req;
+                const body = (await req.json?.());
+                const data = body?.data || body;
+                const doc = await payload.create({
+                    collection,
+                    data: {
+                        title: data?.title || 'Untitled',
+                        slug: data?.slug ||
+                            (data?.title || 'untitled')
+                                .toLowerCase()
+                                .replace(/[^a-z0-9]+/g, '-')
+                                .replace(/(^-|-$)/g, ''),
+                        author: data?.author || (req.user && 'id' in req.user ? req.user.id : undefined),
+                        status: 'draft',
+                    },
+                });
+                return Response.json({ data: { id: doc.id } });
+            },
+        },
+        // GET /api/nitrogen/v1/{prefix}/:id — Get a single item
+        {
+            path: `/nitrogen/v1/${endpointPrefix}/:id`,
+            method: 'get',
+            handler: async (req) => {
+                const { payload, routeParams } = req;
+                const id = routeParams?.id;
+                try {
+                    const doc = (await payload.findByID({
+                        collection,
+                        id,
+                        depth: 1,
+                    }));
+                    const settings = await getNitrogenSettings(payload);
+                    const dynamicData = buildDynamicData(doc, settings);
+                    return Response.json(buildPageResponse(doc, settings, dynamicData));
+                }
+                catch {
+                    return Response.json({ error: 'Not found' }, { status: 404 });
+                }
+            },
+        },
+        // PATCH /api/nitrogen/v1/{prefix}/:id — Update an item
+        {
+            path: `/nitrogen/v1/${endpointPrefix}/:id`,
+            method: 'patch',
+            handler: async (req) => {
+                const authError = requireAuth(req);
+                if (authError)
+                    return authError;
+                const { payload, routeParams } = req;
+                const id = routeParams?.id;
+                const body = (await req.json?.());
+                // Only use body.data as wrapper if it's an object (not a string which is page content)
+                const data = (body?.data && typeof body.data === 'object') ? body.data : body;
+                if (!data?.title) {
+                    return Response.json({ error: 'Title is required' }, { status: 400 });
+                }
+                const updateData = { title: data.title };
+                if (data.author) {
+                    updateData.author = data.author;
+                }
+                if ('data' in data && data.data !== undefined) {
+                    updateData.nitrogenData =
+                        typeof data.data === 'string' ? JSON.parse(data.data) : data.data;
+                }
+                if (data.settings !== undefined) {
+                    updateData.pageSettings = data.settings;
+                }
+                await payload.update({
+                    collection,
+                    id,
+                    data: updateData,
+                });
+                return Response.json({ success: true });
+            },
+        },
+        // POST /api/nitrogen/v1/{prefix}/slug — Get item by slug (POST variant)
+        {
+            path: `/nitrogen/v1/${endpointPrefix}/slug`,
+            method: 'post',
+            handler: async (req) => {
+                const { payload } = req;
+                const body = (await req.json?.());
+                const slug = body?.slug || body?.data?.slug;
+                if (!slug) {
+                    return Response.json({ error: 'Slug is required' }, { status: 400 });
+                }
+                const result = await payload.find({
+                    collection,
+                    where: { slug: { equals: slug } },
+                    limit: 1,
+                    depth: 1,
+                });
+                if (!result.docs.length) {
+                    return Response.json({ error: 'Not found' }, { status: 404 });
+                }
+                const doc = result.docs[0];
+                const settings = await getNitrogenSettings(payload);
+                const dynamicData = buildDynamicData(doc, settings);
+                return Response.json(buildPageResponse(doc, settings, dynamicData));
+            },
+        },
+        // GET /api/nitrogen/v1/{prefix}/slug/:slug — Get item by slug
+        {
+            path: `/nitrogen/v1/${endpointPrefix}/slug/:slug`,
+            method: 'get',
+            handler: async (req) => {
+                const { payload, routeParams } = req;
+                const slug = routeParams?.slug;
+                const result = await payload.find({
+                    collection,
+                    where: { slug: { equals: slug } },
+                    limit: 1,
+                    depth: 1,
+                });
+                if (!result.docs.length) {
+                    return Response.json({ error: 'Not found' }, { status: 404 });
+                }
+                const doc = result.docs[0];
+                const settings = await getNitrogenSettings(payload);
+                const dynamicData = buildDynamicData(doc, settings);
+                return Response.json(buildPageResponse(doc, settings, dynamicData));
+            },
+        },
+    ];
+}