Skip to content

Page Renderer

The Page Renderer is a shared React package (@smackz-llc/page-renderer) that renders dynamic page sections for restaurant websites. It is consumed by Smackz-Websites and provides the visual rendering logic for all section content types and view types.

Purpose

Restaurant websites in SMACKZ are not built from hardcoded templates. Instead, each page is composed of configurable sections stored in the Yum backend. The Page Renderer takes these section definitions and renders them as React components.

How It Works

  1. The host application (Smackz-Websites) fetches a page definition from the Yum API
  2. The page definition contains an array of sections, each with:
  3. Content type -- What kind of data to display (hero, text, featured_menu, etc.)
  4. View type -- How to lay it out (grid, list, carousel, row)
  5. Display properties -- Styling and behavior (heights, backgrounds, button config, etc.)
  6. Media -- Images and their positioning
  7. The Page Renderer maps each section to a React component based on its content type
  8. Components apply the view type for layout and display properties for styling

Section Content Types

Type Renders
text Static text with optional media, buttons, backgrounds
hero Full-width hero banner with background images, gradients, CTA buttons
chefs_favorites Grid/carousel of chef-picked menu items
crowd_favorites Popular items based on ordering data
featured_menu Specific menu items chosen by the owner
reviews Customer testimonials with ratings
address Restaurant location with embedded map
special_offers Active promotions and deals
recent_orders User's order history (requires auth)
restaurant_info Restaurant details (hours, contact, etc.)
contact_us Contact form or info

View Types

Type Layout
grid Multi-row grid with configurable columns
list Vertical list
carousel Horizontal scrolling
row Single horizontal row

Publishing

The Page Renderer is published as @smackz-llc/page-renderer to GitHub Packages. On qa branch pushes, it publishes a prerelease version (e.g., 2.0.5-qa.17) with the qa dist-tag. On main, it publishes a stable version with the latest tag.

Cross-Platform

The Page Renderer handles the web implementation. SMACKZ-MOBILE implements equivalent rendering for React Native, sharing the same section type definitions and API contracts via shared-core.

Key Files

  • page-renderer/ -- Package source
  • Smackz-Websites/ -- Primary consumer
  • docs/DynamicPages.md -- Dynamic pages design doc
  • yum/api/routes/ -- Page and section API endpoints