Page

A fyord component that renders on route match

fyord g p NewPage

RenderMode

RenderMode = RenderModes.Hybrid
Sets the render mode of the page - used during pre-rendering
RenderMode = RenderModes.Hybrid; /* Pre-renders, but still loads js */

RenderMode = RenderModes.Static; /* Pre-renders without a js bundle */

RenderMode = RenderModes.Dynamic; /* No pre-rendering */

Route

abstract Route: (route: Route) => boolean
Sets the predicate by which a route match is determined. You may also set title and description and take other route resolution actions here.
/* Simple (home page) example */
Route = (route: Route) => route.path === '/';

/* Dynamic route - sets title and description when data available 404s when not */
Route = (route: Route) => {
const docsName = route.routeParams?.[1];
this.documentation = Docs.find(d => d.Name.toLowerCase() === docsName);

if (this.documentation) {
this.Title = this.documentation.Name;
this.Description = this.documentation.Description;
}

return route.path.startsWith('/docs') && !!this.documentation;
}

seoService

seoService: ISeoService = SeoService.Instance
Reference to the SeoService instance. Learn more about this service here.

Title

Title: string = Strings.Empty
Sets the page title.

Description

Description: string = Strings.Empty
Sets the meta description tag.

ImageUrl

ImageUrl: string = Strings.Empty
Sets the meta image url tag. This is what most platforms use to display an image when linking to a webpage.

Layout

Layout?: () => Promise<Jsx>;
Implement this property to set a custom layout for the given page. When not implemented, the page will be rendered in the "default layout" defined at app start.