michael / editable-website Goto Github PK

Hi,

I opened https://editable.website/, entered edit mode, but I can only edit a text and cannot apply any styles to it neither using Safari context menu nor with editing menu (controls are grayed out). Video that is demonstrating a problem: https://youtube.com/shorts/PDi-4K4vEmU.

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 :-)

Hi, I recently discovered this project and it looks amazing.
I am looking to design a website from scratch and use this project in my implementation of it.
I was wondering if someone could quickly give me a "shortcut" and tell me which of the files (components and scripts) are strictly necessary for the editor and site to function, and which are safe to delete. I am already familiar with SvelteKit so I know I can delete most of the directories in src/routes/ if necessary (assuming not api and assets).

I think the technique of using an example project as documentation is unique and useful, seeing as you can see the code in-use and make changes to it, however it can make it harder to get started quickly.

Currently when you paste images into the editor they'll be converted to base64. But we don't want to store base64 strings in the HTML in our database.

We should be able to handle:

• Direct image pastes (like copy and paste an image from the filesystem)
• Implicit image pasts (you paste a snippet of HTML which contains images)

In both cases we want to upload the images to MinIO, so everything is properly self-contained.

In my instance I can edit the page before and after logging in.

Is there something obvious that I am doing wrong?

VITE_ variables can be shipped to the client. From my quick check it looks like they aren't ever sent here, but it's still a problem. Instead remove the VITE_ prefix, and use import { ADMIN_PASSWORD } from '$env/static/private' (the docs)
Since this is kinda a security problem I'm pinging @michael - although since this is supposed to be forked, fixing it might not help.

I need the testimonial-style editing UI that's available on the front page for blog articles. In particular, I am envisioning a "listing page" that lists all the blog titles in a table or list, and I'd like all of those titles to be editable.

It appears that the testimonials are saved as one JSON dump in the DB, while the articles get their individual entries/rows in the DB. I wasn't able to figure out how to adapt the code to suit my use case: I do want the articles/blog posts to retain their individual identities in the DB, but I'd like to be able to move them around (ideally this is a custom ordering that gets saved on the go, specific to the "listing page") and edit the titles simultaneously as well.

I am afraid I know nothing about how Svelte works, so sorry if this is somehow an obvious adaptation of the existing code.

PS. Off-topic, but many thanks for making this awesome template and workflow!

Hi there, Awesome project!

1. I use svelte along with some other frameworks like skeleton. On an exisiting project, is it possible to add the functionality?

2. Your thoughts on how many requests would be needed for SQLite before one needs a "Production" database. Most of my clients will have very low traffic.

3. What happens to images? How are those edited?

4. If this was a CLI that would patch existing sveltekit files it would be AWESOME!

5. Does the blog run off the sqlite too? how does all this handle new posts and images? Multiple users for a small team to manage? How does blog section parse youtube video links?

6. On hosts like digital ocean app platform, everytime i push a commit it will overwrite DB? So how do I make a longer term solution?

Awesome thing! I'm playing around with it a lot and I like the simplicity in it's abstractions. Would it be possible to have a static build of the site without the editor tools? As I understand we ship the whole thing with editor etc even though that stuff will only be used by the editors.

Implementation ideas

• Multiple sveltekit adapters outputs the editor plus a separate static build?
• Push the whole static build to S3 storage.
• Can we "cache" the static build awaiting the dynamic app parts somehow?
• Check if logged in in page load, async await code splitted editor functionalities if user is logged in.

I'm not sure if this is a good idea, since I quite like the "embedded" fashion and don't want the complexity of another static build. It takes this into the direction of the other CMSs which I don't like. But I don't like shipping a lot of code for editing when only a fraction of the visitors will be able to use it anyways.

It would be neat to be able to provide an aspect property to the component, so the user can select a portion of the image.

Didn't do much research, but https://github.com/ValentinH/svelte-easy-crop seems to do the right thing and could be tweaked to fit our needs. We probably don't need all the functionality so we could strip down code or take it as an inspiration to create our own cropper.

As for the UX: We'd just display a modal with a confirm/cancel button before we upload+insert the image.

Usage:

<Image
  {editable}
  {currentUser}
  class="inline-block w-48 h-48 md:w-72 md:h-72 rounded-full"
  maxWidth=384
  maxHeight=384
  aspect={1/1}
  quality=0.8
  bind:src={bioPicture}
  alt={currentUser.name}
/>

Hello and thank you for open sourcing your project. It's really an awesome idea !

I keep however getting the following sqlite (?) error whenever I try to save an edit:

Server side:

SELECT session_id, expires FROM sessions WHERE session_id = NULL AND expires > '2023-07-02T19:06:35.601Z' Error: Not authorized at Module.createOrUpdatePage (/home/marouane/webDev/site-editable/src/lib/api.js:255:27) at POST (/home/marouane/webDev/site-editable/src/routes/api/save-page/+server.js:11:31) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Module.render_endpoint (/home/marouane/webDev/site-editable/node_modules/@sveltejs/kit/src/runtime/server/endpoint.js:47:18) at async resolve (/home/marouane/webDev/site-editable/node_modules/@sveltejs/kit/src/runtime/server/respond.js:403:17) at async Object.handle (/home/marouane/webDev/site-editable/src/hooks.server.js:8:20) at async Module.respond (/home/marouane/webDev/site-editable/node_modules/@sveltejs/kit/src/runtime/server/respond.js:274:20) at async file:///home/marouane/webDev/site-editable/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:505:22

Client side

A 500 error response on the path /api/save-page.

I face the same 500 error on https://editable.website/ whenever I try to save an edit.

I use chrome on an ubuntu if this can help.

What I Mean is if Someone edit the website so now the edits is only for the person who edits and now the website belong to the user who changed it. so it can be like a website when anyone can take your website edit as it wish and then use it. but can we also do it as i said previously in italic, and we also get credit someone in footer or a pop up that this website is fork or copy of XYZ user. and no one can remove it unless the original owner of page permit the watermark to be removed.

It's a minor thing, but we need to put guards in place. Currently /blog/new breaks when accessed directly via the url.

Heyho,

I really love the idea <3

I think it could become my go-to solution for simple websites. Only something popped up: do you support collections (lists, items, or however you wanna call it)?

Use case: I would like to allow the non-technical user to add more testimonials or more team members.

Is something like this already possible or do you plan to support it?

Thanks,
Luka

Currently when deploying this template to Fly.io it will deploy well the first time, but then any further fly deploy command to make an update results in a 500 Internal Error, even if there has been no code change.