diff --git a/apps/roboshield/package.json b/apps/roboshield/package.json index 2c8c507ec..c1b6ec1cc 100644 --- a/apps/roboshield/package.json +++ b/apps/roboshield/package.json @@ -29,6 +29,7 @@ "@next/env": "^14.2.5", "@payloadcms/bundler-webpack": "^1.0.7", "@payloadcms/db-mongodb": "^1.5.2", + "@payloadcms/live-preview-react": "^0.2.0", "@payloadcms/plugin-cloud-storage": "^1.1.3", "@payloadcms/plugin-nested-docs": "^1.0.12", "@payloadcms/plugin-sentry": "^0.0.6", diff --git a/apps/roboshield/payload-types.ts b/apps/roboshield/payload-types.ts index 7677cb90d..6928f0159 100644 --- a/apps/roboshield/payload-types.ts +++ b/apps/roboshield/payload-types.ts @@ -55,7 +55,7 @@ export interface Page { blockName?: string | null; blockType: "page-header"; } - | PageHero + | SiteHero | { content?: | ( @@ -108,7 +108,6 @@ export interface Page { blockType: "statistics"; } | { - showRobotsTxt: string; steps?: | ( | { @@ -218,7 +217,8 @@ export interface Page { } )[] | null; - labels: { + actions: { + showRobotsTxt: string; continue: string; back: string; reset: string; @@ -251,9 +251,9 @@ export interface Page { } /** * This interface was referenced by `Config`'s JSON-Schema - * via the `definition` "PageHero". + * via the `definition` "SiteHero". */ -export interface PageHero { +export interface SiteHero { heroHeaders?: | { headingType?: ("largeHeading" | "subHeading" | "rotatingText") | null; @@ -261,10 +261,10 @@ export interface PageHero { id?: string | null; }[] | null; - heroDescriptiveText: { + heroDescription: { [k: string]: unknown; }[]; - heroButtonText?: string | null; + heroCallToAction?: string | null; id?: string | null; blockName?: string | null; blockType: "page-hero"; diff --git a/apps/roboshield/payload.config.ts b/apps/roboshield/payload.config.ts index aa86376ff..e1a46bf46 100644 --- a/apps/roboshield/payload.config.ts +++ b/apps/roboshield/payload.config.ts @@ -60,6 +60,16 @@ export default buildConfig({ : undefined), admin: { user: Users.slug, + livePreview: { + breakpoints: [ + { + label: "Mobile", + name: "mobile", + width: 375, + height: 667, + }, + ], + }, webpack: (config) => ({ ...config, resolve: { diff --git a/apps/roboshield/src/components/Hero/Hero.tsx b/apps/roboshield/src/components/Hero/Hero.tsx index cabe8b769..714de314e 100644 --- a/apps/roboshield/src/components/Hero/Hero.tsx +++ b/apps/roboshield/src/components/Hero/Hero.tsx @@ -4,9 +4,9 @@ import { Box, Button, Typography } from "@mui/material"; import React from "react"; import ReactRotatingText from "react-rotating-text"; import { Theme } from "@mui/material"; -import { PageHero } from "@/root/payload-types"; +import { SiteHero } from "@/root/payload-types"; -const Hero = (props: PageHero) => { +const Hero = (props: SiteHero) => { return ( { }, mt: "2.5em", })} - elements={props.heroDescriptiveText} + elements={props.heroDescription} /> diff --git a/apps/roboshield/src/pages/[[...slug]].tsx b/apps/roboshield/src/pages/[[...slug]].tsx index a70534518..6c205d1d0 100644 --- a/apps/roboshield/src/pages/[[...slug]].tsx +++ b/apps/roboshield/src/pages/[[...slug]].tsx @@ -2,10 +2,19 @@ import { getPageServerSideProps } from "@/roboshield/lib/data"; import BlockRenderer from "@/roboshield/components/BlockRenderer"; import { PageProps } from "@/roboshield/lib/data"; import { GetServerSidePropsContext } from "next"; +import { useLivePreview } from "@payloadcms/live-preview-react"; -export default function Page({ blocks }: PageProps) { - return ; -} +const Page: React.FC = (initialPage) => { + const { data } = useLivePreview({ + serverURL: process.env.NEXT_PUBLIC_APP_URL || "", + depth: 2, + initialData: initialPage, + }); + + return ; +}; + +export default Page; export async function getServerSideProps(context: GetServerSidePropsContext) { const { props } = await getPageServerSideProps(context); diff --git a/apps/roboshield/src/payload/blocks/PageHero.ts b/apps/roboshield/src/payload/blocks/SiteHero.ts similarity index 84% rename from apps/roboshield/src/payload/blocks/PageHero.ts rename to apps/roboshield/src/payload/blocks/SiteHero.ts index 7a7e1c80f..1beaeb4f2 100644 --- a/apps/roboshield/src/payload/blocks/PageHero.ts +++ b/apps/roboshield/src/payload/blocks/SiteHero.ts @@ -2,15 +2,15 @@ import { Block } from "payload/types"; import richText from "../fields/richText"; import { RowLabelArgs } from "payload/dist/admin/components/forms/RowLabel/types"; -export const PageHero: Block = { +export const SiteHero: Block = { slug: "page-hero", imageURL: "/images/cms/blocks/hero.png", imageAltText: "Used in homepage", labels: { - singular: "Page Hero", - plural: "Page Hero", + singular: "Site Hero", + plural: "Site Hero", }, - interfaceName: "PageHero", + interfaceName: "SiteHero", fields: [ { name: "heroHeaders", @@ -58,14 +58,14 @@ export const PageHero: Block = { }, }, richText({ - name: "heroDescriptiveText", + name: "heroDescription", required: true, - label: "Descriptive Text", + label: "Description", }), { - name: "heroButtonText", + name: "heroCallToAction", type: "text", - label: "Call to Action Button Text", + label: "Call to Action", }, ], }; diff --git a/apps/roboshield/src/payload/collections/Pages.ts b/apps/roboshield/src/payload/collections/Pages.ts index ff73ce8f3..e95747d79 100644 --- a/apps/roboshield/src/payload/collections/Pages.ts +++ b/apps/roboshield/src/payload/collections/Pages.ts @@ -3,10 +3,10 @@ import fullTitle from "../fields/fullTitle"; import slug from "../fields/slug"; import RobotsTxtGenerator from "../blocks/RobotsTxtGenerator"; import { PageHeader } from "../blocks/PageHeader"; -import { PageHero } from "../blocks/PageHero"; import { Content } from "../blocks/Content"; import { Statistics } from "../blocks/Statistics"; import formatDraftUrl from "../utils/formatDraftUrl"; +import { SiteHero } from "../blocks/SiteHero"; const Pages: CollectionConfig = { slug: "pages", @@ -20,6 +20,10 @@ const Pages: CollectionConfig = { group: "Publication", useAsTitle: "title", preview: (doc) => formatDraftUrl("pages", doc), + livePreview: { + url: ({ data }) => + `${process.env.PAYLOAD_PUBLIC_APP_URL}${data.slug !== "home" ? `/${data.slug}` : ""}`, + }, }, fields: [ { @@ -33,7 +37,7 @@ const Pages: CollectionConfig = { { name: "blocks", type: "blocks", - blocks: [PageHeader, PageHero, Content, Statistics, RobotsTxtGenerator], + blocks: [PageHeader, SiteHero, Content, Statistics, RobotsTxtGenerator], localized: true, admin: { initCollapsed: true, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee067066a..f61147e1c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1156,6 +1156,9 @@ importers: '@payloadcms/db-mongodb': specifier: ^1.5.2 version: 1.5.2(@aws-sdk/client-sso-oidc@3.614.0(@aws-sdk/client-sts@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))) + '@payloadcms/live-preview-react': + specifier: ^0.2.0 + version: 0.2.0(react@18.3.1) '@payloadcms/plugin-cloud-storage': specifier: ^1.1.3 version: 1.1.3(@aws-sdk/client-s3@3.614.0)(@aws-sdk/lib-storage@3.614.0(@aws-sdk/client-s3@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5)))) @@ -4307,6 +4310,14 @@ packages: peerDependencies: payload: ^2.0.0 + '@payloadcms/live-preview-react@0.2.0': + resolution: {integrity: sha512-ao7DN2GJFPoipw2cmt2M0tfwmUa0hIn3UxB5EaMv6RduMuOMQlG5hx5ouX3g5wPMcQpyvLwxCuuiQhj1nKMGhA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + + '@payloadcms/live-preview@0.2.2': + resolution: {integrity: sha512-FOcg/HOIzzESjoT4vXgM7Pjd+bODodZTKR/pEJWsjLtyARd6NfF3MNWS+tdlfa3TOZrdT8WnHBAKsKyREyE3og==} + '@payloadcms/plugin-cloud-storage@1.1.3': resolution: {integrity: sha512-5YbCqnDnux2DR0RQwqgJAjvOybZ0GXst4h8L4eygozofELcDJKStyuaAAEv7JIA8EByDFr1DIxLSwmmQf0ytuw==} peerDependencies: @@ -16998,6 +17009,13 @@ snapshots: - aws-crt - supports-color + '@payloadcms/live-preview-react@0.2.0(react@18.3.1)': + dependencies: + '@payloadcms/live-preview': 0.2.2 + react: 18.3.1 + + '@payloadcms/live-preview@0.2.2': {} + '@payloadcms/plugin-cloud-storage@1.1.3(@aws-sdk/client-s3@3.614.0)(@aws-sdk/lib-storage@3.614.0(@aws-sdk/client-s3@3.614.0))(payload@2.23.1(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.3)(webpack@5.93.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@4.10.0)))': dependencies: find-node-modules: 2.1.3