dashpilot / svelte-inline-editor

Tiny on-page CMS
svelte-inline-editor.dashpilot.vercel.app
7 stars 0 forks source link

[Question] Plans for this project? #1

Open foxnoodles opened 3 years ago

foxnoodles commented 3 years ago

Is this just a proof of the concept or you're going to add more features?

Thanks

dashpilot commented 3 years ago

Thanks for your feedback! Well, I've built many page-builder/inline-editor experiments in both Svelte and Vue, so I guess I could use some feedback on which one I should continue with... ;-) Some examples:

https://sitefiction-builder.dashpilot.vercel.app/ (most fully-featured page-builder, built with Svelte) https://sitefiction-data-attr.vercel.app/ (Svelte experiment that uses live-editing via a panel on the side, features image upload and can be used with non-Svelte templates) https://vue-pagebuilder.dashpilot.vercel.app/ (built with Vue)

What would be your use-case for this editor, and what features would you like to see?

foxnoodles commented 3 years ago

Thanks fo your reply and wow those are some very neat projects!

I'll try to break down what I'm looking for from a CMS like this.

TLDR: extremely lightweight cms which is easy to embed into any html5/css template. Which could also be used as a complementary tool for proprietary CMS-es. Main use case: Low budget client websites.

Longer version and possible feature break down:

  1. Ability to integrate into any static website by simply defining data attributes or classes. Not a page-builder per-se but more an editing solution with a few premade widgets that can be added on the fly. Mostly for clients use and alike.
  2. Muti-language support (based on auto-generated folder structure. e.g. EN / DE / FR with duplicated html files in em)
  3. Page Manager(add, remove, duplicate, publish, un-publish + Dynamic nav menu generator and a simple meta editor for seo)
  4. Gallery widget (with multiple options: masonry, filtered etc)
  5. Slideshow widget
  6. Contact form widget
  7. Text widgets: H1 H2 H3 etc + Dotted numbered and regular lists
  8. Bold, Italic, Underline, Strikethrough support
  9. Link editor for both email and regular links and rel param support with multiple options e.g. noreferrer noopener.
  10. Simple Table widget with an ability to define number of rows and columns
  11. Custom code snippet widget (raw injection of any random code s.a. youtube video embed or a php file)
  12. Ability to dragndrop any editable area.
  13. Muti-user support with 2 differet roles. Admin and Editor (editor can only edit block contents but can't delete them, same goes to pages)
  14. Ability to assign custom classes to anything that's editable.
  15. CMS should remember element's custom data atributes and params not to delete them when editing.
  16. Ability to select an interface language
  17. Lest intrusive interface. Permanent top bar with dynamic layout changes etc. (alas Adobe) and actual inline element editing instead of using sliding panels.
  18. Ability to customize the interface (via styles) and enable/disable functions easily.
  19. Undo / Redo
  20. revision support
  21. Should not require any database (i.e. should modify the actual html files)

Something along these lines but more focused on easier integration into existing html templates:

https://www.impresspages.org/inline-editing-cms http://www.inlinecms.com/demo (old demo latest is one here ) https://sitecake.com (this one focuses on just that, easy integration, but is very poorly written and has a terrible UX) https://www.wondercms.com/demo this one is also shares the same philosophy but the implementation is lacking. https://sofish.github.io/pen/ - nice user experience. https://getcontenttools.com/demo - this one too.

I know this sounds a lot but I simply can't find anything that simply works and does not require you to design pages in it or tinker with a proprietary template engine and also has a decent UX that won't overwhelm a novice user.

P.S. I know this comment is all over the place but I was trying to come up with a short pitch lol. Also, I can contribute to UI/UX design if you'll need someone to do it.

dashpilot commented 3 years ago

Wow, that's a lot of requirements...!

I've made a simple POC for an inline editor that works with any HTML template without requiring any changes to the template itself (no template-tags or data-attributes, just plain html). This way you can use it with any of-the-shelf template built with Bootstrap/Bulma/Tailwind/etc or create your own templates that can easily be edited by clients. Of course, many features are still missing, but I first wanted to know if this could work without adding any custom tags to the template.

https://github.com/dashpilot/html-template-editor

Let me know your thoughts

foxnoodles commented 3 years ago

Yeah IKR! haha

As for the editor. This is definitely something worth looking into. I still think that tags will be required one way or another (e.g. to define non-editable regions to prevent customers from ruining the layout, another example would be tagging blocs that can be duplicated, s.a. blog entries or portfolio items) but overall I can see where this is going. This will also require directory scanning for editable pages, which will prolly have a meta generator tag to identify them selves, and also some sort of a menu manager with editable template which will be automatically duplicated in all editable pages that have appropriate nav section. This will also require identification via tag name or data-atribute or class or something. These are my thoughts so far. I'll post more if I figure it out lol