Page settings dialog

import { PageSettingsDialog } from "@/pages/library/PageSettings";
import "@/pages/library/library.css";

PageSettingsDialog holds the settings that belong to the page itself, whether or not it is live. Where the page is published is the publish dialog's job. On a live page, saved settings are held back until the page is published again, like any other change, and the page builder's toast says so.

The dialog is large (800px) and its body scrolls, in six groups: General, Access control, SEO settings, Open Graph settings, Tracking and Forms. The search and share previews update as people type.

A new draftCopy Anchor Link

Every setting starts from its default, filled in by metaOf(page). The search title falls back to the page name, there is no description yet, and the Open Graph image is a snapshot of the page's first two sections.

{settingsOpen && (
  <PageSettingsDialog
    page={page}
    address={live ? pageUrl(page) : `${PETAVUE_DOMAIN}/${page.settings?.slug || slugFor(page.name)}`}
    onClose={() => setSettingsOpen(false)}
    onSave={(name, meta) => {
      setMeta(page.id, name, meta);
      setSettingsOpen(false);
      toast.success(live ? "Settings saved. Publish the page again to put them live." : "Settings saved.");
    }}
  />
)}

A page with settings filled inCopy Anchor Link

Password access, a meta description, the page hidden from search, its own Open Graph description, a Tag Manager ID, and forms sent to HubSpot and email.

const page = {
  name: "Q4 demo request page",
  meta: {
    title: "Book a Meridian demo",
    description: "See how Meridian forecasts your Q4 pipeline from CRM and ad data, and which deals will slip. …",
    sitemap: false,
    access: "password",
    password: "q4-partners",
    ogSameDescription: false,
    ogDescription: "A 30-minute demo of Meridian, with your own pipeline.",
    gtm: "GTM-5K2QX7P",
    forms: "both",
  },
  sections,
};

The groupsCopy Anchor Link

Search previewCopy Anchor Link

.lib-serp draws the result as a search engine would: the title in 16px medium --color-primary-800, the address in 12px green (#0B7A3B), and the description in 12px secondary text. The title is cut at 60 characters and the description at 155, with " …" added. With no description it says "Add a meta description. Without one, search engines pick text from the page."

Share previewCopy Anchor Link

.lib-og draws a link card: a 236px image area, the title in 14px medium, the description cut at 200 characters, and the host in --color-grey-400. The image area shows the uploaded image, or the page's first two sections through ScaledPreview until one is uploaded. An uploaded image is read into a data URL and listed with its name and size in kB, with Replace and Delete.

What onSave getsCopy Anchor Link

onSave(name, meta) is called with the page name (trimmed, or the old name when empty) and every setting:

Nothing is validated. A password page can be saved with an empty password, and any text is accepted as a canonical URL or Tag Manager ID.

LayoutCopy Anchor Link

PropsCopy Anchor Link

AccessibilityCopy Anchor Link

• The wrapper has role="dialog", aria-modal="true" and aria-label="Page settings". The visible title is "Q4 demo request page settings".
• The access switch is two aria-pressed buttons in a group labelled "Restrict access".
• The search and share previews are divs with an aria-label, but no role, so most screen readers ignore the label. They repeat what is in the fields.
• The file input for the image is hidden and opened by the Upload button. It has aria-label="Open Graph image file".
• Nothing is focused when the dialog opens. Focus is not kept inside and not returned to "Page settings" on close.

Do and don'tCopy Anchor Link

• Do add new page options here, in the group they belong to, and add a row to the publish dialog's "Goes live with" if people should see it before publishing.
• Do keep the previews next to the fields they reflect, so people see the effect while typing.
• Don't add where the page is published here. That is the publish dialog's decision.
• Don't save a live page's settings straight to the live page. They wait for the next publish.

When to use itCopy Anchor Link

Use it for landing pages from the page builder. For settings on other objects, such as a workflow or a dashboard, use a Dialog from @/ui with the same group layout, or a settings page if there are more than a few groups.

Where it is usedCopy Anchor Link