Product & marketing websites

Keep rendering and the manifest aligned

The generated landing page renders its ordered section array and declares the same references in its manifest. This selected scaffold excerpt omits imports but preserves the connection between rendering, route and metadata.

export function LandingPage(): ReactNode {
  return (
    <>
      {LANDING_SECTIONS.map((section) => (
        <WebsiteSection key={String(section.sectionRef)} sectionRef={section.sectionRef} category={section.category}>
          <section.Component />
        </WebsiteSection>
      ))}
    </>
  );
}

export const LANDING_PAGE_MANIFEST = defineWebsitePageManifest({
  ref: 'landing',
  routePath: '/',
  pageComponent: LandingPage,
  sectionRefs: LANDING_SECTIONS.map(section => section.sectionRef),
  metaLabelKeys: {
    titleKey: WebsiteLabelKeySchema.parse('website.landing.meta.title'),
    descriptionKey: WebsiteLabelKeySchema.parse('website.landing.meta.description'),
  },
});

LANDING_SECTIONS owns the sequence. sectionRefs makes that composition available to the surrounding website machinery. Metadata keys point to authored labels; a component title does not automatically become a search description.

Declare the words a section needs

defineWebsiteSection associates a section reference, category, component and expectedLabelKeys. The generated hero declares separate eyebrow, headline, subheadline and primary-action labels. Its component reads those labels through useWebsiteLabel.

When adding a section, update its definition, the ordered page array and the label packs. The section scenario supplies the starting English labels; additional locales need their own content. A missing required label is a content error rather than an invitation to publish an identifier.

Keep shared design in its owning configuration

website-root.config.ts carries design tokens, header/footer composition, page manifests and shared chrome labels. Page components own the product-specific arrangement. The generated React bridge supplies the website providers around that composition.

Review the full path from a visible button to its configured destination. A working component is only one part of a coherent customer journey.

Declare the website’s origins and locales

The following follows the generated configuration, with illustrative product origins. Adding French here must be accompanied by its label pack and page routes.

import { AvailableLanguage } from '@wildo-ai/saas-models/public-runtime';
import { defineWebsiteConfig } from '@wildo-ai/saas-website/config';

export const websiteLocales = [
  { locale: AvailableLanguage.EN, path: 'en' },
  { locale: AvailableLanguage.FR, path: 'fr' },
];

export default defineWebsiteConfig({
  publicOrigin: 'https://planning.example',
  appOrigin: 'https://app.planning.example',
  apiOrigin: 'https://api.planning.example',
  csp: { enabled: true, reportOnly: true },
  defaultLocale: AvailableLanguage.EN,
  locales: websiteLocales,
});

The default locale is served at the root. Other language versions need their corresponding routes and label files. The locale entry declares availability; it does not translate content by itself.

Treat required labels as a publication contract

The page runtime loads the selected locale’s label pack. Required keys come from the section and page definitions, including metadata. Validation detects absent required labels across configured packs.

Verify language as a complete route

Open each localized address directly, navigate within the site and inspect the resulting page title and language alternatives. Review the rendered copy as a reader; the presence of every key proves completeness of the contract, not translation quality.

Render the head from the page contract

The application website passes the manifest, site context, locale and loaded labels to the head renderer. This selected rendering sequence shows the input boundary; it is not a complete Astro page.

const runtime = loadWebsitePageRuntime({
  manifest,
  siteContext,
  labelPacksDir,
  astroLocale,
});

const headHtml = renderWebsitePageHeadHtml({
  manifest,
  siteContext,
  locale: runtime.locale,
  labelPack: runtime.labelPack,
});

The renderer emits canonical links, language alternatives, social metadata and robots directives from its inputs. The selected sequence follows the Wonder Todos Astro entry; imports and application-specific constant names are omitted.

Make indexing an explicit environment decision

The website scaffold and Wonder Todos both use PUBLIC_ALLOW_INDEXING as the build-time opt-in, and a generated deployment workflow sets it to true only for an environment whose runtime environment is production. Inspect the application’s own robots implementation before changing a deployment value.

An indexing directive communicates a preference to crawlers. It is not access control, and metadata does not guarantee a ranking or a search-engine listing. Keep private information out of the public site’s output.

Check the delivered files and browser behavior

The site is statically delivered, with selected React interaction. Provider functions are assembled in the browser bridge; choosing a provider in configuration alone does not prove its SDK is operational.