Giter Club home page Giter Club logo

coisas's Introduction

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)

Visit analytics for this repository

coisas's People

Contributors

boweihan avatar charlesryan avatar fiatjaf avatar jayvdb avatar zktnguyen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

coisas's Issues

Trying to get in touch regarding a security issue

Hey there!

I'd like to report a security issue but cannot find contact instructions on your repository.

If not a hassle, might you kindly add a SECURITY.md file with an email, or another contact method? GitHub recommends this best practice to ensure security issues are responsibly disclosed, and it would serve as a simple instruction for security researchers in the future.

Thank you for your consideration, and I look forward to hearing from you!

(cc @huntr-helper)

Keep track of last repositories browsed and suggest them on Index.

Nowadays Index is just a component that asks the user to type the name of a repository, so it is taken to #!/owner/repo/ (all the action happens at the Repo component).

We could keep track, on localStorage, of repositories visited by the user (in a certain browser, anyway), updating the value every time the user opens a repository, and then show the list of last visited repositories on Index.

Besides the owner/repo slug of the repository, the time of the last access should be stored too, so repositories are shown in order, the most recently viewed first.

Abandon project?

Is this project abandoned? If so, would you recommend an alternative?

Adaptation to GitLab

Theoretically due to the similarities between GitHub and GitLab, it should be relatively easy to clone this functionality over to a custom GitLab instance. This should include support for private repositories.

This issue tracks places of tight-coupling and suggests ways to open them up for an additional Markdown Git API provider.

Fix README grammar

I'm not a native English speaker and I may have made stupid mistakes that went unnoticed even after reading the paragraphs a couple of times.

On save, don't escape "+++" delimiters for alternate Hugo TOML frontmatter blocks

Coisas doesn't parse the alternate "+++"-delimited TOML frontmatter blocks Hugo supports for structured field editing, which is fine, but on save it escapes the delimiters, effectively unpublishing the post:

edrex/eric.pdxhub.org@4d788a3

Expected behavior: leave the delimiters in place and unescaped.

Could also teach the field editor to parse/serialize to TOML, but maybe best not to encourage divergence from Jekyll YAML since it kind of breaks the ecosystem.

Styles customization through CSS variables

Define default CSS variables for page background color, button colors, editor background color and font color, font families perhaps, and use these in the CSS file.

Write in the README that people may use their customization file to modify these CSS variables if they want to modify the look and feel of the app.

do not show the sidebar upload widget if defaultMediaUploadPath is unset.

defaultMediaUploadPath
is a customizable setting that tells coisas the directory path into which it will place media files uploaded through the sidebar drag-and-drop upload widget.

As a feature for users who do not want that upload widget there (because they do not want to have a "media" folder, for example) we should not show that UploadFile component when defaultMediaUploadPath is set to false or null.

This can be done by a simple check of window.coisas.defaultMediaUploadPath before rendering the UploadFile component on the sidebar. If it is falsy (except for empty strings, which should be valid) then do not render it.

hi, maintenance, whitesmith:master

Hi @fiatjaf!

Been looking for a minimal Prose successor, preferable using Prosemirror ever since Prose got put in the attic, and just found Coisas. Thank you!

I want to contribute to this. Need another maintainer? I want to test it a bunch, identify outstanding bugs in existing features, do any maintenance tasks like updating prosemirror, and eventually look into adding at least one major feature (fork+pullrequest when editing someone else's repo, also maybe Gitlab or similar API support #15 ).

@tomasmcm recently made some improvements in master...whitesmith:master that would be worth cleaning up and merging IMO.

  • add parcel + organize into dirs + doc love
  • nice UX improvements with a drill-down single pane view, still needs to reintegrate the image selector pane.

@tomasmcm you want to clean up or give blessing for someone else to?

PS I've been hacking on client-side editor tech -specifically semantic stuff like prosemirror- for literally 2 decades

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.