Interested in making a custom CMS with the editors...not sure where to start...

[rchrdnsh]

Hello,

This project is really interesting. I don't actually want to make an editable website, though, per se, but to develope a cms that can be made custom for different use cases...

Going through the code and trying to understand it all, but getting a bit lost in all of it...

Not an issue then, but more of a question...

If I wanted to pull out the rich text editor features and put them into a cms where would I start? What parts would I need and what parts are for other things, like the db, etc...

I'm also interested in making the text editor support svelte components, so that a user could open the editor and drop in custom svelte components for different content purposes from a menu of available "blocks" I suppose...could the stuff in here support something like that in the future if I wanted to add that kind of functionality in?

Another question that comes to mind is about storage and hosting and builds, etc...it seems to be built using a db, but is that db being hit every time somebody goes to the site? Is the site being built from the db and the built pages are then delivered to the end user? Is it built every time a user comes to to the site, meaning the db is hit and the pages remade for every visit? I am quite ignorant as to how this all works myself, so I'm trying to understand it all better. In my head if the db it hit every time a visitor comes to the site that this would end up being quite expensive. But If the db is only hit when there is a content change, then the site (or only the part of the site that changed) is rebuilt, then stored on a CDN then this would be much less expensive and resource intensive...but again, I really don't understand what is happening, hence my questions.

Apologies if this is a bit all over the place, that's just the state of my mind tying to understand what's going on in here, because the demo site is so awesome :-)

If you all have any advice of thoughts in this general direction, I am all ears :-)

Thank you :-)

[michael]

Hi there!

You can certainly use the components (PlainTextEditor, RichTextEditor, etc.) in other codebases, like a custom CMS. Even though the point of this whole project is that you (maybe) don't even need a CMS, instead (if the requirements are not too complex) you can add the editing "on top" of the website itself. ;)

So the way it usually works is that you hand-code a website with Svelte, and then identify the areas you want to make editable. There you can use RichTextEditor for instance, instead of a hard-coded HTML markup. Then you store the edited content in a database and fetch them before rendering the page. Yes the DB is hit every time you visit the page, and I haven't had any performance problems because the queries are super fast. The site at https://editable.website survived a HackerNews spike one day. :)

The editing components are just wrappers around the great ProseMirror library. I'm deliberately using only basic HTML (p, headings, one-level lists, etc.) because making custom nodes can get quite involved (e.g. when you want to introduce a table component etc.). @TeemuKoivisto was working on better Svelte integration of custom nodes (https://github.com/TeemuKoivisto/svelte-prosemirror). Not sure how far this project is though.

[rchrdnsh]

hmmm...interesting...I think my concern is more price than performance, as I could imagine hitting the db for every page could get expensive verses generating page builds on the server only when content changes, even using something like ISR to build only the page that has been updated in the CMS...I also need a CMS for image and video processing and uploading, managing large collections of content categories, tired access, editorial workflow, etc...I actually found this project by searching around for rich text editors using prose mirror that are not tip tap, and it's a super neat idea :-)

For example... 100,000 page views would be 100,000 db hits, but only hitting the db for 1 content update would be 1 db hit...the site server is going to be hit 100,000 times anyway, but the db does not also have to be hit 100,000 times if the content is static and being edited by 1 person...this is my current line of thinking, but from a place of ignorance, as I do not fully understand the under the hood aspects of all of this.

svelte-prosemirror also looks super cool as well, thank you for sharing. Ultimately I have been playing around with UI ideas for content editors, where they are are able to imagine almost anything and I could add that as a svelte component for them in their own custom CMS that is only as complex as their use case requires.

For example:

https://svelte.dev/repl/0b96a3d9fa90444e86e2379b8f223ebd?version=3.59.2

In this exploration the content author could add to the content custom inline components, like rainbow or sparkle text, or simple block elements, like paragraphs or headings, or complex block components like tabs and accordions, image carousels, etc...then they could change elements from a drop down or re-ordor or delete elements as well...that kind of stuff...would love to have this all work and be stored as a JSON AST of some kind that can then be built into a svelte page for a kit website on the server, that kind of thing :-)

Most of it is broken but it roughly illustrates the ideas I'm exploring for a new and more intuitive editing experience for non technical people.

In any case, thank you for replaying so quickly :-)

[michael]

I invited you to https://github.com/PostOwl/postowl (will be open sourced soon). We switched to SQLite, and it's blazing fast, and cheap (2.50$) on Fly.io if it runs permanently (cents if we turn scale2zero on). Maybe you want to do some performance tests and report. :)

[michael]

Happy to have a chat and discuss your use-case more some time in the next days, if you have time for a quick call. :)

[michael]

You may also want to read: https://letsken.com/michael/why-are-publishing-workflows-so-hard-to-fix

(just my experience after 10yrs of scientific publishing 😅)

[SrGeneroso]

@rchrdnsh

In this exploration the content author could add to the content custom inline components, like rainbow or sparkle text, or simple block elements, like paragraphs or headings, or complex block components like tabs and accordions, image carousels, etc...then they could change elements from a drop down or re-ordor or delete elements as well...that kind of stuff...would love to have this all work and be stored as a JSON AST of some kind that can then be built into a svelte page for a kit website on the server, that kind of thing :-)

I've been trying and digging the code of PrimoCMS. It has this approach of editing components directly in the browser as well as editing the content which is serialize into a json object in supabase and later autodeployed to a static site. Is still beta but promising and maybe has some code you can look to. Recently the part of in-browser editing was migrated to its own package), you might find it interesting.
In that note, Primo does something interesting. Despite using supabase for storing the data (in this case the components, the content, the different languages of that content...) it also has a button to deploy the site, which tldr, use rollup on a worker to generate the static files from svelte and..., this is the important part, uses github tokens to upload those files to the repo and autodeploys that to your host.
What I'm thinking is... why don't just save the data directly to github? If your client don't have much data and doesn't make changes often maybe you can forget the database and just change that data on the repo directly...
I know I'm overcomplicating things... This is the road of experimenting.
EDIT: btw, primo uses tiptap, but tomeito tomato, is just an example of how to save the content to a database and then build the site.

[SrGeneroso]

Wait a frickin minute!! @michael !, you are the creator of prose. Why didn't made it work with that instead of a db?

[michael]

Hey @SrGeneroso! Yes, I did the original version of prose.io. That was a long time ago. 😅

Why didn't made it work with that instead of a db?

For different reasons. One is that editable-website should enable self-contained web apps. Using the Github API would violate that. Another even more important reason is that I believe in fully dynamic websites (that don't require a build-step). Entire new experiences become possible then. It's not just "content management" anymore, it turns websites into full-fledged apps. For instance, we are experimenting with creating a social network formed by independent dynamic websites.

See: https://michaelaufreiter.com/posts/a-social-network-of-self-owned-websites

[SrGeneroso]

I think I've misunderstand what sqlite is. I thought you needed to run it in a container or server but it runs directly on node with better-sqlite3? So, you database is in a file on the same server and... you read it to build the site everytime? Quite clever. I'm not aware yet of performance and SEO, although those are frequently non-existing concerns for small sites. I'll dig the code a little more, this is good. Should I research this repo or the PostOwl instead?

[michael]

Yes the .sqlite3 file sits on the same server that runs the code. There's no build step, so each page you are requesting is fetched live from the database.

Because it runs in-process, SQLite is super fast for reads and given that the data model is simple, I get the same performance as with a static site. :)

See here: https://twitter.com/_mql/status/1686338929425862656