CMS Integration

A CMS is integrated as a middleware that returns a page.

How to create a CMS middleware

You can create a middleware by writing a JavaScript module:

  • that exports a handler function that accepts optionally, a props object (only data, no functions)
  • and returns a function that accepts a web api request and returns a page as object:
    • with as default, a mandatory React Element
    • and optionally, a frontmatter and a toc
tsx
// ./src/cms/my-provider.js
import {ContextProps, MiddlewareHandler} from "@combostrap/interact/types";

export async function handler(props): Promise<MiddlewareHandler> {
    return async (context: ContextProps) => {

        const pathname = context.url.pathname

        // check if you handle the request
        if (!pathname.startsWith("/my-provider")) {
            return
        }

        // Modify the context if needed
        // context.response.status = 400
        // context.response.headers

        // Fetch your data
        const data = await fetch(new URL(request.url).pathname)

        // Return your page
        return {
            frontmatter: {
                layout: "holy"
            },
            default: () => {
                // Optionally parse them and create a React component or return HTML directly
                return (
                    <div dangerouslySetInnerHTML={data}></div>
                )
            }
        }
    }
}

Example