This README is very much WIP

Requirements

• Git
• A reverse proxy and web server
• Already having postgit running in the background
• Already having splonk running in the background (or other similar auth system) and already configured

Getting started (if you already have a static website)

First, you need to upload the entire project to your server (not just the public built assets).

rsync -rv . your-server:/your/path

Make sure the build tools are already installed over on your server as well as an authentication system (like splonk and this project).

Then you can create the git repo and add a commit with your content

git init
git add .
git commit -m "first commit"

Then you can define the post-commit hook that will automatically build your site (basically the script that gets run on every change)

$EDITOR .git/hooks/post-commit
chmod +x .git/hooks/post-commit

If the build process is very slow, it's better if you use touch needs-rebuild as a post-commit hook and define a regular cronjob with the following script: rm needs-rebuild && REBUILD_COMMAND this way the requests to edit won't be slowed down by the build process.

Once that's done, you can now add the editor UI by copying the lib.js file from this repo into the root of your project. Then you can create a new index.html file with the following base content:

<!-- making sure things render decently on mobile devices -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- import function library and styles -->
<script src="lib.js"></script>
<link rel="stylesheet" href="styles.css">
<!-- display the form itself -->
<label for="content">Content of the file</label>
<textarea id="content"></textarea>
<label for="commit_message">Description of changes</label>
<input type="text" id="commit_message">
<button id="save_file">Save file</button>
<!-- shortcuts to other pages (typically edition of editor, other interesting shortcuts and live final website version -->
<nav>
 <ul>
 <li><a href="/edit/index.html?path=index.html">Editor</a></li>
 <!-- add your shortcuts to different stuff + sub editors here -->
 <li><a href="/">See it live →</a></li>
 </ul>
</nav>
<!-- script to make the actual thing work -->
<script>
const save_file = () => post_file(get_url_param("path"), get_value("content"), get_value("commit_message")).then(reload);
const load_file = () => get_file(get_url_param("path")).then(content => set_value("content", content));
onclick("save_file", save_file);
load_file();
</script>

Now you can configure your web server and reverse proxy:

your.domain { # Restrict splonk's admin endoints to admins or redirect to login
	forward_auth /auth/admin/* :3002 {
		uri /authorize?roles=admin
		@error status 401
		handle_response @error {
			redir * /login
		}
	} # Ask splonk to ensure that any file other than the public directory is protected or redirect to login
	forward_auth /edit/* :3002 {
		uri /authorize?roles=admin&roles=user
		@error status 401
		handle_response @error {
			redir * /login
		}
	}
	forward_auth /postgit/* :3002 {
		uri /authorize?roles=admin&roles=user
		@error status 401
		handle_response @error {
			redir * /login
		}
	}	# Give access to splonk's endpoints
	handle_path /auth/* {
		reverse_proxy :3002
	}	# Serve the login page
	handle_path /login {
		root * /srv/your-website/auth
		file_server
	} # Serve the content of the directory in /edit (GET)
	handle_path /edit/* {
		root * /srv/your-website
		file_server
	} # Redirect requests from /postgit to postgit (POST)
	handle_path /postgit/* {
		reverse_proxy :3003
	} # All the other stuff shuold be served from public directory
	handle {
		root * /srv/your-website/public
		file_server
	}
}

From here you can now visit the website, if you go on https://your.domain you'll see the built website, and if you go on https://your.domain/edit/index.html you'll see the editor. The design will be ugly because for now there are no styles.

You can copy over the styles.css as a base if you want or create your own styles. My recommendation is to define your theme (colors and fonts) as CSS variables first, and style your stuff after (you can use your browser's builtin style editor to make this fun, easy and fast).

Finally you can also expand the features by adding new styles, new function, new shortcuts, new sub editors, etc directly from the editor itself.

You might also want to edit the end website itself to include a link to the editor to be able to edit a page in one click.