Templates

The pageTypes.templates property within the theme object provides the ability to define an array of templates for each individual page type.

Each template is an object that consists of two properties: name (of type string) and component (of type JSX.Element<TemplateTypeProps>).

How to create a template

A template component is a React component that is strongly typed with the appropriate prop types for its corresponding page type. For example, a Category template would be a React component with its props typed using the ICategoryTemplateProps interface.

Category Template Example

const Category = ({ categoryPageData }: ICategoryTemplateProps) => {
  return <pre>{JSON.stringify(categoryPageData, null, 2)}</pre>;
};

Article Template

Article templates are a bit different from other page-type templates. The difference is that article templates should be wrapped by forwardArticleRef HOC. This HOC provides the ref property to the template's root element. This is required for Infinite Scroll to work.

import {
  forwardArticleRef,
  IArticleTemplateProps,
} from '@orgnc/core/lib/themes/templates/article';

// Define the ArticleTemplate component using forwardArticleRef to provide the ref prop
const Article = forwardArticleRef(function ArticleTemplate(
  { post }: IArticleTemplateProps,
  ref,
) {
  return <pre ref={ref}>{JSON.stringify(post, null, 2)}</pre>;
});

export default Article;

info

Each page type template is strongly typed, It is advised using the correct page type prop types to prevent build errors.

// For Article Templates
import { IArticleTemplateProps } from '@orgnc/core/lib/themes/templates/article';

// For Author Templates
import { IAuthorTemplateProps } from '@orgnc/core/lib/themes/templates/author';

// For Category Templates
import { ICategoryTemplateProps } from '@orgnc/core/lib/themes/templates/category';

// For Page Templates
import { IPageTemplateProps } from '@orgnc/core/lib/themes/templates/page';

// For Tag Templates
import { ITagTemplateProps } from '@orgnc/core/lib/themes/templates/tag';

How to register a template

Once a template is created, it should be added to the array of templates for its corresponding page type in the theme object. This is accomplished by specifying the name and component properties of the template. For instance, an article template would be included in the article.templates array.

import createTheme from '@orgnc/core/lib/themes/createTheme';
import ArticleTemplate from 'path/to/ArticleTemplate';

import OtherArticleTemplate from 'path/to/otherArticleTemplate';

const theme = createTheme({
  pageTypes: {
    article: {
      templates: [
        { name: 'default', component: ArticleTemplate }, // <- This template is required
        // This is how you add other template
        { name: 'otherArticleTemplateName', component: OtherArticleTemplate },
      ],
    },
    author: {
      templates: [
        /* ...Templates here */
      ],
    },
    category: {
      templates: [
        /* ...Templates here */
      ],
    },
    page: {
      templates: [
        /* ...Templates here */
      ],
    },
    tag: {
      templates: [
        /* ...Templates here */
      ],
    },
  },
});

export default theme;

info

All page type template arrays require a template with a name: 'default' as the first member of the array.

Example here.