[HN Gopher] A SvelteKit template for building CMS-free editable ...
___________________________________________________________________
A SvelteKit template for building CMS-free editable websites
Author : _mql
Score : 152 points
Date : 2023-04-05 15:45 UTC (7 hours ago)
(HTM) web link (editable.website)
(TXT) w3m dump (editable.website)
| waboremo wrote:
| Nice work, congrats!
|
| It's like a great mix of TinaCMS and Dropbox Paper.
| yewenjie wrote:
| Is there some component library rather than "template" for doing
| this?
| _mql wrote:
| Intentionally there isn't. I wanted to demonstrate that a
| website with "editing" capabilities is no magic, and to
| encourage people to hack on every piece.
|
| My experience after 25 years of web development is that often
| examples > libraries. Not always true, but I think particularly
| for websites it works well and gives you full control over
| every pixel to be rendered.
| esafak wrote:
| Can you create a gallery of examples, then?
| esafak wrote:
| From a cursory look, the type of content it supports seems
| limited. Like something you would use for a minimalist journal.
| If it could replicate something like https://framer.com I'd be
| all ears. A gallery with code would help potential users better
| understand its potential.
| clairity wrote:
| yah, this is like the todo app of content management, being
| able to change the text (and perhaps add bold and some links),
| and has probably been built thousands of times by now in the
| short history of the web. building in-place editing for fixed
| text nodes isn't that hard, whatever the underlying toolkit. a
| CMS should be able to do that in its sleep. it's when you get
| beyond text into other media and into layout, spacing, color
| systems, and dragging-and-dropping arbitrarily interleaved
| blocks of those things where it actually gets useful (and
| impressive).
| _mql wrote:
| To clarify: It's a different concept. And it's more of a
| starting point, rather than a solution. Its goal is not to
| build full-fledged a page builder or prototyping tools (such
| as Framer or Webflow). The layout is entirely up to the
| developer (and expressed in code), the content (as in
| structured data) is made editable. It's how
| Facebook/LinkedIn/Twitter/Medium etc. work, with the benefit
| that in many cases, you can edit within the layout. Image
| upload, drag and drop is all possible. The limit is what you
| can do with Svelte.
| sebastianconcpt wrote:
| This makes me like Svelte (and SvelteKit) even moAr!
| vcryan wrote:
| I think this pitch overstates the problem with CMSes. It seems
| for many organizations, their CMS is working well for them. Not
| saying this doesn't have benefit, but, as for me, I rather like
| my CMS and don't feel like this is a big win.
| _mql wrote:
| I'm coming from a minimalist perspective. Of course a hand-
| crafted site like this template doesn't cover all the
| enterprise CMS use cases, such as image manipulation, video
| transcoding etc. It's not a one-size-fits-it-all solution but
| for for me personally, it speeds up things and gives me 100%
| control. I'm the person who'd rather invest in developing a
| FFMPEG API endpoint tailored for my application than pulling in
| the complexity of a CMS.
| rizky05 wrote:
| [dead]
| naet wrote:
| This is a huge step down from the experience of many CMSes.
| Controls are limited and don't really work for building a page.
| Maybe convenient for very small text edits like spelling fixes
| but not at all a replacement for a more in depth editing
| experience.
| input_sh wrote:
| > It seems for many organizations, their CMS is working well
| for them.
|
| I hope to work in one of such orgs some day because the most
| common experience I've witnessed was pain.
|
| And things don't improve when you throw more money at a CMS.
| There's an entire industry of enterprise CMSs (yearly license
| in five figures) and their users aren't any happier with their
| CMS than WordPress users.
| cfuendev wrote:
| This is awesome! Admin panels are fine to me, but honestly this
| is a much more beautiful and productive approach. Very cool
| project.
|
| Is an Astro template/integration a possibility? I'd love an
| editable static site that triggers Netlify builds. I actually
| have an Astro project on Netlify CMS that I wouldn't mind moving
| to this.
| solarkraft wrote:
| WYSIWYG editing is still under-utilized on the web! This is
| exciting!
| candrewlee14 wrote:
| SvelteKit is such a breath of fresh air, glad to see it used on
| this.
| Fergusonb wrote:
| It really is - writing a svelte component feels like writing
| something in vanilla html/js/css, but you get all the
| advantages that come with a framework.
| iamdbtoo wrote:
| This is the primary reason I love working with it. Coming
| from the times of jQuery, I can think in those terms like I
| used to and don't have to constantly translate it into React
| patterns.
| no_wizard wrote:
| I just can't get over the `$:` reactive label syntax.
|
| TypeScript support can be hit or miss, and there could be
| more improvements around the stores API
| dimitrios1 wrote:
| I am sure I am in the minority at this point, but the lack
| of TypeScript proliferation to me is a plus.
| _mql wrote:
| Haha, yeah. I justify this decision by assuming that
| designer-folks wouldn't be afraid to touch the code if it
| were JavaScript but would it were TypeScript. :)
|
| To me JavaScript does a great job (if you know what you
| are doing) and if you're working on a reasonably small
| project.
| ravenstine wrote:
| You're not the only one. I don't hate Typescript, but I
| don't think it's necessarily worth using everywhere. I
| like using it for libraries that I might share or reuse,
| that contain some complex logic, in which case it helps
| my code keep guarantees. But for view-layer code, I
| really don't get why a lot of people are dying to use
| Typescript that way.
|
| Beyond that, pretty much every Typescript project I've
| been introduced to suffers from just as many bugs as
| codebases that use plain JavaScript. Strict typing at
| compile time doesn't replace conscientious development
| practices and rigorous testing.
| kevinak wrote:
| Rich and I chatted a bit about TS vs JSDoc for library
| authors today on the monthly dev vlog: https://www.youtub
| e.com/live/MJHO6FSioPI?feature=share&t=95
|
| TL;DR - Svelte's codebase will move to JSDoc types but
| still use TS.
|
| To be clear - Svelte will still have full support for TS,
| nothing is changing for users of Svelte.
| Swizec wrote:
| > But for view-layer code, I really don't get why a lot
| of people are dying to use Typescript that way.
|
| "view-layer code" is underselling how complex many modern
| webapps can get. When you've got 10+ engineers across 2+
| teams running around in your 30,000+ line codebase,
| TypeScript offers a lot of benefits and makes overall
| iteration speed much much faster.
|
| You don't need TypeScript for small/personal projects
| though. As long as everything fits in your memory, you're
| fine.
| dimitrios1 wrote:
| Typing only eliminates a certain class of bugs. And user-
| defined type systems scare me. I loved ReasonML precisely
| because you got typing (and confident enforcement) for
| free through the HM type system, but TypeScript always
| struck me as the embodiment of "now you have two
| problems"
| ravenstine wrote:
| Compared to all the weird rigamarole in other frameworks,
| the `$:` syntax is one of the least offensive compromises
| I've come across. Virtually nobody uses label syntax, the
| `$` is unlikely to clash with existing labels, and it means
| it can be easily parsed with non-specific JS AST parsers.
|
| Haven't used Typescript much with it, though.
| nonethewiser wrote:
| I edit the website and then refresh and changes don't persist.
| Obviously they don't want people editing their production
| website, but is it otherwise supposed to persist? If not, what's
| the point?
|
| For this reason I find the demo a bit confusing.
| CharlesW wrote:
| > _Obviously they don't want people editing their production
| website, but is it otherwise supposed to persist?_
|
| The repo notes that persistence requires editors to in with the
| (shared?) admin user and password.
|
| Although the pitch is "CMS-free", this is a Postgres- and
| S3-backed content management system.
|
| The in-place editing is extremely cool.
| baobabKoodaa wrote:
| Why is Postgres needed here? Couldn't everything be saved in
| static files published in S3 or any other CDN?
| _mql wrote:
| "CMS-free" as in "does not depend on additional software to
| manage content". Postgres and S3 through MinIO are my
| preferred choices, but you can change that to anything you'd
| like to use instead.
|
| Glad you like the in-place editing. I'm also for the first
| time happy with the experience. You can press CMD+E for
| editing and CMD+S saving, and there's no layout shift, so
| it's really convenient for quick edits. :)
| CharlesW wrote:
| > _" CMS-free" as in "does not depend on additional
| software to manage content". Postgres and S3 through MinIO
| are my preferred choices, but you can change that to
| anything you'd like to use instead._
|
| Cool! Postgres and an S3-compatible object store area are
| both listed as requirements, so you may want to update
| that.
|
| So by "does not depend on additional software", does that
| means I can just use the filesystem?
| lancesells wrote:
| This will sound snarky but I just write in html and css. No
| requirements, no set up, no steps.
| afavour wrote:
| That's good for you but did you know many people don't know how
| to code in HTML and CSS?
| prophesi wrote:
| Do your clients take the HTML/CSS and manually edit/add/remove
| pages themselves?
| smt88 wrote:
| At this point, that's like being proud you write in assembly
| while all the hipsters use C++. Or it's like being proud you
| don't use any libraries in Go.
|
| Build steps aren't evil. For most projects, you never even
| touch them. You use a project template and then you're done.
|
| What you get in return is an amount of work no human can do by
| hand: type-checking, tree-shaking, cross-browser shims, image
| optimization... it's a huge list.
|
| At this point, I wouldn't hire someone who thinks build steps
| are a waste of time. Programmers should know the value of
| automating complex manual tasks.
| efields wrote:
| For a lot of content this really works.
|
| What sticks with me in a way that I don't love is that this and
| many other modern, simple-ish solutions to having a lightweight
| CMS still relies on some Postgres config. I'm being picky, but
| I want a DB without having to think about the DB at all. Just
| templates plz.
| kitsunesoba wrote:
| Cool idea, and I really like how the site still functions for
| readers with JS disabled, which is (as far as I'm aware) uncommon
| for this sort of thing.
|
| One thing that isn't clear from reading the GitHub page -- do all
| visitors end up downloading the editor payload or do only admins
| who are logged in get that?
| _mql wrote:
| Excellent question. They do end up downloading the extra
| payload at the moment. It's something that could be optimized
| with `await import` in the future.
|
| My general approach to this is considering website development
| as "minimal web app development". Think of it as developing
| your very own little Facebook thingie, where people could log
| in and post and edit stuff, without thinking about the
| technicalities.
|
| My feeling is that, thanks to abstractions like Svelte, this is
| not super difficult anymore and my hope is that in many cases
| this approach could replace integrating a CMS. At least for me
| it feels much more natural like this, and really all I have to
| know is some HTML+CSS, the SvelteKit API and SQL to model my
| content. Just like in the old days, where you didn't have to
| depend on 100 things to make a website. :)
| thelittleone wrote:
| Very cool.
|
| Clicking the menu Blog link gives me a 500 error.
| _mql wrote:
| Which link (url) gives you the 500? Would love to reproduce and
| fix.
| greenie_beans wrote:
| this is dope
| phaer wrote:
| As far as I understand it, the dynamic website you use is the
| same as served to the client minus the editing parts? Would it
| also support a scenario where the dynamic part runs on one host,
| say inside an intranet and users can "publish" to pre-configured
| static hosts or s3 buckets with a click? Static hosting could be
| enough for many sites and one could combine the technical and UX
| advantages of your dynamic interface with the advantages of
| static sites for security and distribution.
|
| I found that useful when i worked with https://www.getlektor.com/
| years ago. In lektor the dynamic part runs on a users desktop
| machine, but it of course wouldn't need to.
| _mql wrote:
| Incremental Static Regeneration could help here, but it
| introduces a whole category of implementation challenges. It
| may be worth it for high traffic websites but one beauty of the
| purely dynamic design is that you can mostly forget about all
| "build" and "caching" problems.
|
| Anyways, at this point I'm just happy that my 0.2 vCPU / 512 MB
| Node.js instance on Northflank survived a HackerNews spike at
| 60% CPU max.
| nailer wrote:
| CMSs really are painful. I've spent more time making Ghost work
| on domain.com/blog (despite content marketing being one of the
| main reasons to drive people to your website, Ghost doesn't
| support this) than I have to write a CMS before.
|
| Looks like it uses Postgres: https://github.com/michael/editable-
| website
| POiNTx wrote:
| This is really really cool, well done! I would consider using
| this instead of a traditional CMS.
| xnx wrote:
| Is contenteditable not widely used? Is it too limited?
| https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...
| recrof wrote:
| contenteditable is pretty terrible if you want it to behave
| exactly the same on all browsers. that's why there are projects
| like CKeditor or TinyMCE.
| _mql wrote:
| Yes, the challenge is taming contenteditable. I'm using
| ProseMirror under the hood with custom models for <Plaintext>
| and <Richtext> editing, which you can adapt to your needs.
| One limitation (of ProseMiror) is that you don't have shared
| undo/redo across multiple editable areas. That's something
| we've solved with our own library Substance.js a while ago,
| but the API would be too verbose for this type of use-case,
| and we didn't reach that level of stability that ProseMirror
| has today. Web-based rich text editing is a very interesting
| space to watch, that imo affects web development in general.
|
| I wrote about it here in more detail:
| https://letsken.com/michael/how-to-implement-a-web-based-
| ric...
| mpeg wrote:
| The template linked uses contenteditable (through prosemirror)
| and builds on top of it
| berkle4455 wrote:
| This is the same flow as Frontpage had in 1998. You edited a
| live-edited your site, and when you clicked publish, a static
| site was deployed to the world.
| blacksmith_tb wrote:
| Sure, and Concrete5 in 2003[1]. Hard to beat editing directly
| (as long as you also have authentication handled) though it
| might be slower, if you have to tiptoe around formatting.
|
| 1: https://en.wikipedia.org/wiki/Concrete_CMS
| nathias wrote:
| svelte and sveltekit really are a joy to use
___________________________________________________________________
(page generated 2023-04-05 23:00 UTC)