Custom Plugins

To create a custom plugin for the CMS provider you need to define each of the methods defined by the CMS Provider interface.

Each interface can be found under their respective directories, here is a list of the methods you must define: CMS Provider sourcecode Review the X.types.ts file in each directory for the methods interface definition along with the response interface.

• Content
• ContentSearch
• Menu
• Redirects
• Routes
• Tag
• User

Example

Overview

Let's create a content plugin. Here is the interface for the Content plugin.

export type ContentPlugin = (
  config: Config,
  id: string,
  path?: string,
  options?: Record<string, unknown>,
) => Promise<Content>;

the content plugin method takes 4 parameters, 2 required, 2 optional.

• config: the plugin configuration, this object is passed in at the time of registering the plugin (see Register the plugin)
• id: the id of the content to load.
• path: (optional) the path alias of the content to load.
• options: (optional) options to expose to the user for futher customization.

the plugin is an async method (returning a promise) that resolves to Content. This tells you the structure of the data your plugin needs to return.

Let's take a look at the Content interface.

export interface Content {
  id: string;
  title: string;
  status?: boolean;
  author?: string;
  data: {
    [key: string]: unknown;
  };
}

The reponse of the content plugin must follow this shape.

• id: (required) the id of the content returned.
• title: (required) the title of the content returned.
• status: (optional) the status of the content if it exists.
• auther: (optional) the author of the content if it exists.
• data: (optional) any additonal data pertaining to the content.

the four fields (id, title, status, and author) are standard fields that all content should contain. the last field (data) is for any unknown data. This data cannot be standardized across plugins.

So let's put this together to create a basic Content plugin.

Create the plugin

// Import the interfaces
import { Content, ContentPlugin } from '@acromedia/gesso-cms';

// defined and export the plugin.
export const content: ContentPlugin = async (
  config,
  id,
  path?,
  options?,
) => {

  // Make a request to get the data.

  // Return your data. 
  return {
    id: '1',
    title: 'Sample Content',
    status: true,
    author: 'Dwight Schrute',
    data: {
      example: 'some data'
    }
}

Now export your plugin from your modules entry file. (typically index.ts)

export * from './Content/Content.tsx'

Register the plugin

With your plugin created you can now register it with your provider. On your frontend create a file to register the plugins.

// customProvider.ts
import { useCMS as CMS } from '@acromedia/gesso-cms';

import plugins from '@acromedia/your-plugin';

const config = {
  // Insert any confiurations you require.
};

// Register your plugins with the cms provider.
export const cms = CMS(plugins, config);

you can now import your methods from this file where needed.

// Clientside method
import {useContent} from 'path/to/customProvider';

// Serverside method
import {getContent} from 'path/to/customProvider';