Skip to content

Project: Integrated Content Editor

DEADCODEXO

I wrapped Decap CMS into a native /editor page so it feels like part of the site instead of a separate admin panel.

The editor link is local-only:

{
  import.meta.env.DEV && (
    <a href="/editor" class="nav-link">Editor</a>
  )
}

The CMS is embedded and theme-synced with the main site:

<iframe id="cms-frame" src="/admin/" class="h-[78vh] w-full"></iframe>
frame.contentWindow.postMessage(
  { type: "site-theme", value: currentTheme },
  window.location.origin
);

Project posts auto-show on /projects by tag:

const allPosts = await getCollection("blog");
const projectPosts = getPostsByTag(allPosts, "project");

Editor preview screenshot (click to expand):

Integrated content editor page with themed Decap CMS panel

This gives me a clean workflow: edit locally with CMS, build static, push to GitHub Pages.

Previous
Project: Portable Content Editor
Next
New social links!