Pages

Core Content vs Fully Configurable Pages

There's an important distinction between two types of pages on a v4 site.

Some pages are completely dynamic and configurable and comprised entirely of custom sections in configurable areas.

Examples of fully configurable pages are:

• Home
• Custom pages
• Article pages

On these pages, users have virtually unlimited options for customisation as they can add, remove or edit whatever sections they like.

Other pages are comprised of a combination of fixed dynamic content and configurable areas. We refer to these as Core Pages, but you could also consider them data-driven pages.

Examples of core/data-driven pages are:

• Property page
• Property List page
• Branch page
• Branch list page
• Area guide page
• Area guide list page
• Staff page
• Staff list page

Core pages are linked to a particular resource (like a property or a branch) and render data from this resource in a particular way.

The property page, for example, needs to fetch data for a given property and then render the address, photos, price and lots of other information to the page. This part of the page is necessarily described in the theme code itself and cannot be configured like other sections due to the quite complicated data requirements and the difficulty of configuring this in the page builder.

Adding user configuration to core content is therefore more difficult than configuring Sections, and you may need to use Theme Settings or other techniques to add configuration options to core content.

Site vs Admin

Pages in themes that can be configured in the page builder each require a .site.tsx and a .admin.tsx version of the page.

.site.tsx renders sections as server components on the frontend agent site using the <Area> component.

Example:

// home.site.tsx

import Area from '@homeflow/v4-lib/components/area';
import { PageConfig as PageConfigInterface } from '@homeflow/v4-lib/state';
import sections, { fallbacks } from './sections/sections.server';

export default function Home({ pageConfig }: { pageConfig: PageConfigInterface }) {
  const hasSidebar = pageConfig.areas.sidebar && pageConfig.areas.sidebar.length > 0;

  return (
    <div className="relative">
      <Area sections={pageConfig.areas.header} availableSections={sections} fallbacks={fallbacks} />

      {hasSidebar && (
        <Container>
          <div className="flex flex-wrap @md:flex-nowrap mb-5">
            <div className="flex-none w-full @md:flex-auto">
              <Area
                sections={pageConfig.areas.main}
                availableSections={sections}
                fallbacks={fallbacks}
              />
            </div>

            <div className="flex-none w-full @md:w-72 @lg:w-80">
              <Area
                sections={pageConfig.areas.sidebar}
                availableSections={sections}
                fallbacks={fallbacks}
              />
            </div>
          </div>
        </Container>
      )}

      {!hasSidebar && (
        <Area sections={pageConfig.areas.main} availableSections={sections} fallbacks={fallbacks} />
      )}

      <Area
        sections={pageConfig.areas.secondary}
        availableSections={sections}
        fallbacks={fallbacks}
      />
    </div>
  );
}
Copy

.admin.tsx renders sections as client components to allow real-time editing in the admin page builder using <LazyOrderableSections>.

Example:

// home.admin.tsx

import LazyOrderableSections from '@homeflow/v4-lib/components/orderable/lazy-orderable-sections.component';
import ResponsiveContentProvider from '@homeflow/v4-lib/components/responsive/responsive-content-provider.component';
import CollapsibleArea from '@homeflow/v4-lib/admin/components/collapsible/collapsible-area.component';

export default function Home() {
  const hasSidebar = pageConfig.areas.sidebar && pageConfig.areas.sidebar.length > 0;

  return (
    <div id="home-top" className="relative bg-white border-t border-gray-400">
      <LazyOrderableSections areaName="header" />

      <div className="flex flex-wrap md:flex-nowrap items-stretch">
        <div className="flex-none w-full md:flex-auto">
          <LazyOrderableSections areaName="main" />
        </div>

        <ResponsiveContentProvider>
          <CollapsibleSidebar>
            <LazyOrderableSections className="h-full" areaName="sidebar" />
          </CollapsibleSidebar>
        </ResponsiveContentProvider>
      </div>

      <LazyOrderableSections areaName="secondary" />
    </div>
  );
}
Copy