Awesome
coisas
coisas is a headless CMS specifically designed to let you edit files hosted in a GitHub repository. It is similar to Netlify CMS and Prose. Unlike existing alternatives, coisas doesn't try to be a multipurpose CMS. It still lets you edit, create, upload, and browse files, but doesn't try to look like a fancy CMS (custom schema, objects and all that mess). It also isn't tailored to Jekyll websites, which means that it won't insert Jekyll specific code or expect your repository to have a Jekyll-specific file structure.
Other features that coisas includes are:
- file tree view;
- simple metadata editor and automatic saving of Markdown and HTML files with YAML front-matter;
- behavior customizations that can be configured from your repository, while still accessing coisas from its own URL;
- easy embedding in your own site, so you'll never have to touch coisas own URL;
- image gallery with all the images from your repository, so you can drag and drop them inside the editor;
- simple visualization of many file formats (only text files are editable, however).
usage
To use coisas, go to https://coisas.fiatjaf.com/ or embed it in your site, for example, in an /admin/
section (more detailed instructions on how to do this may come - for the meantime please copy the hosted version file structure).
demo
There is a demo site at https://geraldoquagliato.github.io/, which you can browse and edit (no login necessary) by visiting https://coisas.fiatjaf.com/#!/geraldoquagliato/geraldoquagliato.github.io/. Please be decent.
customization
To customize the app behavior specifically for your repository, create a file named coisas.js
and put it at the root of the repository. That file may contain anything and will be loaded and executed dynamically by coisas as part of its initialization process.
From that file you must modify the global object window.coisas
, whose defaults are specified in preferences.js (along with comments to explain each property). If you need more customization options I'm happy to include them, please open an issue.
styles
You can customize many of the original styles of coisas UI (which, I admit, are not pretty). You can do it by simply modifying the CSS variables made available at the top of main.scss in your coisas.js
file along with their defaults.
Basically you just run document.body.style.setProperty("--variable-name", "value")
. The names should be somewhat self-descriptive, but if they aren't please solve that by doing manual experimentation in the browser console.
previews
Through the customization file, you may define a couple of functions that will enable previews in the edit session of coisas (a couple of buttons will be shown allowing the editor to switch between the edit view and the preview view). See preferences.js for more information about how to do that.
development
To run coisas locally, you can git clone
the repo, then cd
to it and npm install
, then npm run build
. If you want to rebuild automatically every time you change a file, you'll need entr, so you can npm run watch
.
Besides all that, a static server is needed. There are thousands out there for you to choose. My current preference is Caddy, because it will run your site on HTTPS automatically if you have a canonical hostname (just modify Caddyfile with yours). Running coisas on HTTPS is required for the service-worker.js to be installed, but that is not necessary (although without it the editor image previews may fail).
meta
Source tree for this repository
(The majority of action happens at components/Repo.js and state.js, although Prosemirror takes a lot of space in the tree due to its hypermodularization)