The struggle
Recently, I tried to create a website for my church. I didn't plan to be involved long term - I wanted to create some layouts and then let people update the content and add pages without learning any code, only needing to ask for help or set aside more time for major changes.
...Easier said than done.
Visual site builders mostly focus on those who don't want to touch any code but want as much customization as possible. They essentially choose where to be freeform and complex or restrictive but easier to use. Developer features are usually things like APIs or the ability to create and maintain the front end code yourself. These builders are often targeted at specific kinds of business, that may hire developers as they grow, and features and pricing follow.
On the other hand, there is plenty of simple static site hosting. But these are for if you are a developer and are coding the site with your own tools, wanting to host the output files or from a git repository. You can connect to a CMS, but these tend to assume you need something more than just a way for your less technical friend to create a new page, so you may end up buying into more than you need or self-hosting which requires maintenance.
When I think about it historically, the lack of the type of collaboration I'm looking for is not a huge surprise. What seems like a simple ask now wasn't necessarily a common use case.
The basics
What I would really love is a system where people who code can build templates and expose variables to the person who they're developing the website for.
In this way, the developer doesn't have to shop around for design features and the friend or client can enjoy complex layouts tailored to them without a complex editor. The site can be updated easily without touching the code.
The PDS can be used to store the site data. There would be a common format for developers to create and distribute the themes, and visual editors could choose to handle fields and previews differently. The existing permissions system would make it easy to log in and edit the data.
Existing examples
The main thing I was inspired by is Tumblr themes. While this ecosystem isn't as alive nowadays, back when Tumblr was more interested in everyone having their own pages and domain, my friends who don't even know what a div is had themed blogs.
Theme layouts are written with HTML, and blog posts or simple page content are inserted into the layouts. The theme creator can provide variables with meta tags like, and the user can edit them:
<meta name="color:Background" content="#f9eedd">
<meta name="color:Borders" content="#839c99">
(Example theme Pixelution Theme by yeoli-thm)
These custom layouts are super useful for things that have a blog component to them but want something extra. With a fitting layout, it's possible for event sites to have things like countdown timers, schedules, and pages providing additional information, rather than needing to maintain and link another simple site like carrd.
(Originally I thought of making a visual editor to go along with my own silly site script where people could pick or upload an html theme, modify the options and css variables with a visual preview, and save the resulting html to upload to a static host. But the missing piece this idea was addressing, a bridge between the coder and site owner, doesn't need to be kept to a basic standard feed with some posts as pages.)
Userstyles have a similar system, with CSS stylesheets having variables listed at the top. These even have not just a control type and default, but also a description of what the variable does:
@var select playerStyleOption "Player Cover Style\nChange the cover art style on the player page" ["Vinyl","Disc"]
@var range backgroundBrightness "Background Brightness\nAdjust background brightness" [1, 0.0, 1, 0.01]
(Example theme Youtube Music Supreme by ryokr)
I also want to give a shoutout to the game engine Godot, where people who edit the script for an object can export variables, making those variables available in the visual editor.
Extending to site structure
Astro is very popular in the atproto dev community. It's more a site generator where you either have to learn and install dev stuff or have someone else do it, but that doesn't mean there aren't features of it that would be really helpful in this context.
With Astro, you can write pages using markdown, with variables set at the top of each page. You can structure your pages in folders however you want. You can also have different templates and then set which template to use for each page.
I think site structure and being able to use multiple template types would be a good addition to this builder concept if it doesn't add a lot of development complexity. Whether you only have top level pages or nested pages doesn't significantly change the UI and a template selection can have a default so the user doesn't have to think about it unless they want to change it.
Also, markdown could be a good choice for general page content fields since there are various Atmosphere markdown editors and integrations like Markpub.at with Standard.site.
(In the ideal future, perhaps other frameworks could be integrated with this concept, but I imagine it would be hard to make that work out since they control their own folder structures and build processes.)
Theme discovery
In my imagination, while the main target here would be developers creating specific sites, there'd be an easy way to browse more generic themes, maybe with tags and descriptions. It would be great to have live samples of the themes available, though I don't know where they would be hosted. There are plenty of routes to go for theme discovery and previews if they're published as records.
Not part of official theme discovery, but I appreciate how on Tumblr it was common to include a credit link somewhere on themes. It makes it easy to find the source of the ones you like so you can apply it and customize it for your own, if the creator wanted it to be used.
Misc
It'd be nice if the builder could be used without an account, only asking you to choose an account or make one when you save. I've seen this setup used by the mobile page designer Strawpage for example, and I think it works even better for the Atmosphere since one difficulty is getting people to realize they already have an account they can use, before they just leave because there's too much friction or confusion when they don't even know if the tool will work for them. Lexidraw and Leaflet are some Atmosphere examples of not requiring login upfront.
Ending notes
Some related Atmosphere projects:
- Blento for a fun easy-to-make page creator with tons of integrations
- wisp.place for a static site host where the source files are on your PDS
This was a bit unstructured since I kind of speedran finishing it after reading anna's great blog post, but I hope these thoughts can inspire someone!