FV CMS

A simple CMS for editing react components.

Install

npm add fv-cms

Client

Usage

import { Editor, useComponent } from "fv-cms/client";

type HeaderProps = {
  title: string;
  image: string;
};

function Header(props: Props) {
  return (
    <header>
      <h2>{props.title}</h2>
      <img src={props.image} alt={props.title} />
    </header>
  );
}

function App() {
  const [lang, setLang] = React.useState("en");
  const [editorEnabled] = React.useState(true);

  const headerProps = useComponent<HeaderProps>("Header");

  return (
    <Editor
      enabled={editorEnabled}
      lang={lang}
      onLang={setLang}
      endpoints={{
        get: "http://localhost:3000/api/@cms/editor",
        save: "http://localhost:3000/api/@cms/editor",
        upload: "http://localhost:3000/api/@cms/editor/upload",
      }}
    >
      <main>
        <Header {...headerProps} />
      </main>
    </Editor>
  );
}

Server

Usage

import cms from "fv-cms/server";
import * as express from "express";

const app = express();

const cmsServer = cms(app, {
  serverUrl: "http://localhost:3000",
  dataFilePath: "../storage/data.json",
  uploadDirPath: "../storage",
});

app.get("/api/@cms/editor", cmsServer.actions.getData);
app.patch("/api/@cms/editor", cmsServer.actions.saveData);
app.post("/api/@cms/editor/upload", cmsServer.actions.upload);

app.listen(3000, () => {
  console.log("Server running...");
});

Data File

Save this to a file to the same location as defined in the dataFilePath cms server option.

[
  {
    "id": "Header",
    "props": {
      "title": {
        "type": "text",
        "value": {
          "en": "Hello",
          "de": "Hallo"
        }
      },
      "image": {
        "type": "media",
        "value": "http://localhost:3000/files/2381ad31d779.png"
      }
    }
  }
]

Available Types

• media
• text
• richText
• url
• slider
• list
• color

Roadmap

• [ ] UI for data.json file
• [ ] Add drag to sort feature to list block
• [ ] Add delete item feature to list block
• [ ] Add create item feature to list block
• [ ] Add multi-file upload to media block
• [ ] Add missing tools to richText block
• [ ] Optimise flow of data through client package useEditor

Run Example

npm --prefix example install
npm --prefix example start