edcon
v0.3.0
Published
This is a tool to build a minimalistic CMS based on a custom database model.
Readme
edcon
This is a tool to build a minimalistic CMS based on a custom database model.
The idea is that the user stores the content in their own database format depending on their needs. This could be a key-value-store like redis, a full database like postgres or even a flat file system on a single server.
Every piece of content is associated with a path which should usually correspond to the page that represents the content in the application, content for the home page should be stored as "/", content for the about page as "/about" etc.
Data is fetched simply from the database using sql, redis.json.get etc. and the only key an entry must contain is its path.
Then that data is passed through the entry function from edcon which enhances the field values with the necessary meta information
edcon needs to know which field is edited:
import { entry } from "edcon"
const raw = fetchEntry() // { path: "/about", title: "About" }
const data = entry(raw, editMode) // { title: { path: "/about", field: "title", value: "About" } }Then that data is rendered using editable from edcon:
import { editable } from "edcon"
return (
<main>
<editable.h1 value={data.title} />
</main>
)now if editMode === true then <editable.h1> will become contentEditable and have additional attributes to indicate which field
on which path is being edited. If editMode === false then it will be a regular <h1>.
To catch changes and actually store them in the database, one would then add the Body component from edcon:
import { Body } from "edcon"
export function Layout({ children }) {
return (
<Body storeUpdate={storeUpdate}>{children}</Body>
)
}where storeUpdate receives the props
type StoreUpdateOptions = {
path: `/${string}`;
field: string;
value: string;
}Next.js
The primary target for this is to be used in Next.js applications. In these cases, draftMode can be used to differentiate whether content should be editable:
const editMode = (await draftMode()).isEnabledThen vercel infrastructure can be used to enable and disable draft mode authenticated by vercel. Alternatively, auth.js can be used for authentication.