This blog post suggests techniques for rendering links to edit content when previewing or otherwise viewing content rendered from a headless content management system (CMS), which can facilitate CMS users maintaining the site. This post describes the URLs used to edit entries (records) in the Contentstack SaaS headless CMS, but rather than describing an implementation for a specific client-side or server-side technology, this blog post describes only the concept of determining whether to render links to edit the page entry in the CMS as well as the entries driving various components of the page.
To make it easier for CMS users to edit content while browsing or previewing the site, the rendered HTML can include links to edit the content it accesses. Each page typically relates to a page entry (record) in the CMS, so the page itself can include a link to edit that entry. Certain components of the page retrieve their content from other entries, so those components can include a link to edit those entries.
Solutions can use server-side logic to generate the HTML for links to edit content, hidden by default and enabled by JavaScript only if an editorial mode is enabled. Alternatively, instead of generating hidden HTML, solutions can use JavaScript to add the links to edit content to the page at runtime if editorial mode is enabled.
Whether using the server or the client to generate the HTML links to edit entries, logic must determine whether to render the links, and that logic is typically client-side, such as JavaScript or WebAssembly. Such client-side logic typically checks a cookie to determine whether editorial “access” is enabled, such as if the visitor is accessing a preview or staging version of the site or is authenticated against the CMS. For simplicity, CMS users can even use a query string parameter to set the cookie that enables the edit links, such as by adding ?cmsedit=true (or false) to any URL.
The logic to generate and determine whether to render links to edit content depends on the technologies used and other specifics of the solution, which may depend on how the solution exposes CMS data (JSON) from the CMS to client-side logic.
In the Contentstack SaaS headless CMS, the URL to edit any entry depends on the URL of the CMS UI, the content type, language/region, and ID of the entry, the API key of the stack that contains that entry, and some hard-coded path information.
https://app.contentstack.com/#!/stack/<API KEY>/content-type/<CONTENT TYPE>/<LANGUAGE>/entry/<ENTRY ID>/edit
Deliverystack.net 