init from gitlab

web/src/routes/docs/+layout.svelte

@@ -0,0 +1,87 @@
+<script>
+	import {base} from "$app/paths";
+	import {page} from "$app/stores";
+	import Navbar from "$components/Navbar.svelte";
+	import ProgressButtons from "./ProgressButtons.svelte";
+	import {browser} from "$app/environment";
+	import {onMount} from "svelte";
+
+	const sidebarPages = [
+		{section: "Getting Started", ref: "/docs/intro", label: "Introduction"},
+		{ref: "/docs/installation", label: "Install"},
+		{ref: "/docs/setup", label: "Setup"},
+		{section: "Usage", ref: "/docs/apps", label: "Apps"},
+		// {ref: "/docs/apps/create", label: "Create App", level: 1},
+		{ref: "/docs/services", label: "Services"},
+	  {ref: "/docs/settings", label: "Settings"},
+		{section: "Maintenance", ref: "/docs/upgrading", label: "Upgrading"},
+		{ref: "/docs/uninstall", label: "Uninstall"},
+	  {ref: "/docs/support", label: "Support"},
+	];
+
+	let currentPage, prevPage, nextPage;
+	$: if ($page.route.id) {
+		currentPage = sidebarPages.findIndex(p => p.ref === $page.route.id);
+		prevPage = (currentPage > 0) ? sidebarPages[currentPage - 1] : null;
+		nextPage = (currentPage < sidebarPages.length - 1) ? sidebarPages[currentPage + 1] : null;
+	}
+</script>
+
+<svelte:head>
+	<title>Shokku Docs - {sidebarPages[currentPage].label}</title>
+</svelte:head>
+
+<div class="flex flex-col h-screen">
+	<div class="flex-shrink">
+		<Navbar hideGetStarted={true}>
+			<div slot="sidebar-toggle" class="flex-none lg:hidden">
+				<label for="sidebar" class="btn btn-square btn-ghost drawer-button">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+							 class="inline-block w-5 h-5 stroke-current">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+									d="M4 6h16M4 12h16M4 18h16"></path>
+					</svg>
+				</label>
+			</div>
+		</Navbar>
+	</div>
+
+	<div class="drawer drawer-mobile h-auto flex-grow">
+		<input id="sidebar" type="checkbox" class="drawer-toggle" />
+
+		<div class="drawer-content flex flex-col">
+			<div class="p-8">
+				<article class="prose">
+					<h1 class="mb-0">{sidebarPages[currentPage].label}</h1>
+					<hr class="mt-4 mb-8" />
+					<slot />
+				</article>
+			</div>
+
+			<div class="divider mt-2 mb-0"></div>
+
+			<ProgressButtons previous={prevPage} next={nextPage} />
+		</div>
+
+		<div class="drawer-side">
+			<label for="sidebar" class="drawer-overlay"></label>
+
+			<ul class="menu w-80 bg-base-200 text-base-content pt-2">
+				{#each sidebarPages as p, i}
+					{#if p.section}
+						<li class="menu-title py-1">
+							<span>{p.section}</span>
+						</li>
+					{/if}
+					<li class:bordered={currentPage === i}>
+						<a href={base + p.ref}>
+							<span class:pl-5={p.level === 1}>
+								{p.label}
+							</span>
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
+</div>

web/src/routes/docs/+page.js

@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+import { base } from "$app/paths";
+
+export function load() {
+	throw redirect(307, `${base}/docs/intro`);
+}

web/src/routes/docs/ProgressButtons.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { base } from "$app/paths";
+
+	export let next;
+	export let previous;
+</script>
+
+<div class="flex w-full justify-between pl-6 pr-10 my-6">
+	<div>
+		{#if previous}
+			<a href={base + previous.ref} class="btn btn-md md:btn-lg btn-ghost gap-2 normal-case lg:gap-3">
+				<svg class="h-8 w-8 fill-current md:h-8 md:w-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path></svg>
+				<div class="flex flex-col items-start">
+					<span class="text-base-content/50 hidden text-xs font-normal md:block">
+						Prev
+					</span>
+					<span>{previous.label}</span>
+				</div>
+			</a>
+		{/if}
+	</div>
+	<div>
+		{#if next}
+			<a href={base + next.ref} class="btn btn-md md:btn-lg gap-2 normal-case lg:gap-3">
+				<div class="flex flex-col items-start">
+					<span class="text-neutral-content/50 hidden text-xs font-normal md:block">
+						Next
+					</span>
+					<span>{next.label}</span>
+				</div>
+				<svg class="h-8 w-8 fill-current md:h-8 md:w-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>
+			</a>
+		{/if}
+	</div>
+</div>

web/src/routes/docs/apps/+page.svelte

@@ -0,0 +1,42 @@
+<script>
+	import {base} from "$app/paths";
+
+	const gitPushUrl = "https://dokku.com/docs/deployment/application-deployment/#deploy-the-app"
+	const remoteRepoDocs = "https://dokku.com/docs/deployment/methods/git/#initializing-an-app-repository-from-a-remote-repository"
+	const dockerImageDocs = "https://dokku.com/docs/deployment/methods/git/#initializing-an-app-repository-from-a-docker-image"
+</script>
+
+<h2>Creating an App</h2>
+<p>
+	Once setup, the initial page you see is the <i>Dashboard</i>. From
+	here you can create apps and services, or view any existing ones.
+	After you have chosen a valid name for your app, you will proceed to
+	setup. Currently apps can be setup in three different ways:
+</p>
+
+<h2>Create New Git Repo</h2>
+<p>
+	This option creates a git repo on the host, and sets a branch to deploy
+	from. Once configured, you will need to add the remote to your local git
+	repo, and push to deploy following <a href={gitPushUrl}>these instructions</a>.
+</p>
+
+<h2>Sync Existing Git Repo</h2>
+<p>
+	This option configures a remote repository to clone using a specific
+	<i>git ref</i> (eg the <i>main</i> branch, or a specific commit), which can
+	then be automatically built and deployed. See the Dokku docs on this method
+	<a href={remoteRepoDocs}>here</a>.
+	<br />
+	If the repo is private, ensure you have configured access following the instructions
+	<a href={`${base}/docs/settings`}>here</a>.
+</p>
+
+<h2>Docker Image</h2>
+<p>
+	This option enables pulling a Docker image. See the Dokku docs for caveats
+	<a href={dockerImageDocs}>here</a>.
+	<br />
+	If the image is held in a private registry, ensure you have configured access by
+	following the instructions <a href={`${base}/docs/settings`}>here</a>.
+</p>

web/src/routes/docs/installation/+page.svelte

@@ -0,0 +1,89 @@
+<script>
+	const scriptInstallCommands = [
+	  `wget "https://shokku.app/install.sh"`,
+		`export SHOKKU_LETSENCRYPT_EMAIL="foo@example.com"`,
+	  `sudo bash install.sh`,
+	]
+
+  const manualInstallCommands = [
+	  `todo`,
+  ]
+</script>
+
+<h2>Prequisites</h2>
+<h3>Dokku</h3>
+<p>
+	Shokku requires an underlying Dokku installation.
+	You are recommended to manually install & configure it following
+	<a href="https://dokku.com/docs/getting-started/installation/">the official documentation</a>.
+	<br />
+	If an existing installation is not detected during the setup process, it
+	will be automatically installed and configured.
+</p>
+
+<h3>SSL</h3>
+<p>
+	Shokku will only work over HTTPS, so SSL must be configured. This can be via:
+</p>
+
+<ul>
+	<li>
+		<strong>Automatic (LetsEncrypt)</strong> <br />
+		If a global email has been set, it will automatically be used. Otherwise,
+		ensure the <code>SHOKKU_LETSENCRYPT_EMAIL</code> environment variable is set during
+		installation to a valid email.
+	</li>
+	<li>
+		<strong>Manual</strong>
+		<br />
+		Set the <code>SHOKKU_CERT</code> environment variable to point to a tarball containing the
+		certificate contents. Tarball creation instructions can be found
+		<a href="https://dokku.com/docs/configuration/ssl/#certificate-setting">here</a>.
+	</li>
+</ul>
+
+<!--div class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box">
+	<input type="checkbox" />
+	<div class="collapse-title text-lg font-medium">
+		Default installation configuration
+	</div>
+	<div class="collapse-content">
+		<p>nginx, letsencrypt, etc</p>
+	</div>
+</div-->
+
+<h2>Install Using Script</h2>
+
+<div class="mockup-code">
+	{#each scriptInstallCommands as cmd, i}
+		<pre data-prefix="{i}" class="m-0 my-1 p-0"><code>{cmd}</code></pre>
+	{/each}
+</div>
+
+<h2 class="flex items-center gap-2">
+	<img alt="digitalocean icon" class="w-8 h-8"
+			 src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/digitalocean/digitalocean-original.svg" />
+	DigitalOcean 1-Click Install
+</h2>
+<p>
+	TODO: link to digitalocean marketplace
+</p>
+
+<h2>Manual Installation</h2>
+<div class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box">
+	<input type="checkbox" />
+	<div class="collapse-title text-xl font-medium">
+		Instructions
+	</div>
+	<div class="collapse-content">
+		<p>
+			If you don't feel comfortable using some random script from the internet,
+			the installation can be manually performed fairly easily:
+		</p>
+		<div class="mockup-code">
+			{#each manualInstallCommands as cmd, i}
+				<pre data-prefix="{i}" class="m-0 my-1 p-0"><code>{cmd}</code></pre>
+			{/each}
+		</div>
+	</div>
+</div>

web/src/routes/docs/intro/+page.svelte

@@ -0,0 +1,38 @@
+<p>
+	Shokku is an interface for <a href="https://dokku.com" class="link">Dokku</a> - a
+	self-hostable PaaS/alternative to Heroku.
+	<br />
+	It is recommended you are somewhat familiar with the underlying Dokku project
+	(<a href="https://dokku.com/docs" class="link">read the docs</a>).
+</p>
+
+<p>
+	It is not associated with Dokku.
+</p>
+
+<p>
+	It is open-source and freely available, the repository is hosted on Github at
+	<a class="link" href="https://github.com/texm/shokku">texm/shokku</a>.
+</p>
+
+<h2>
+	Features
+</h2>
+<p>
+	Shokku aims to be as simple to install and operate as Dokku, providing access to
+	most functionality without needing to use the terminal or manage SSH access for users.
+</p>
+
+<ul>
+	<li>Works with your existing Dokku installation, or configures one during setup</li>
+	<li>Build, deploy, and manage almost any kind of application easily</li>
+	<li>Easy creation of <code>Redis, PostgreSQL, MySQL, and MongoDB</code> services</li>
+	<li>Reverse proxy and automatic SSL via LetsEncrypt</li>
+	<li>Github Integration</li>
+	<ul>
+		<li>Single-user or organisation installation</li>
+		<li>User management / Authentication</li>
+		<li>Repo-aware smart suggestions</li>
+	</ul>
+	<li>Optional API Access</li>
+</ul>

web/src/routes/docs/services/+page.svelte

@@ -0,0 +1,50 @@
+<script>
+	const configOptions = [
+	  {name: "Config Options", default: "", description: "Extra CLI arguments to pass to the container creation"},
+	  {name: "Environment Variables", default: "", description: "Environment variables to start the service with"},
+	  {name: "Image", default: "", description: "Custom image name to use"},
+	  {name: "Version", default: "latest", description: "Image version to use"},
+	  {name: "Memory", default: "", description: "Container memory limit in MB"},
+	  {name: "Shared Memory", default: "", description: "Override shared memory size for container in MB"},
+	  {name: "Password", default: "", description: "Override user-level service password"},
+	  {name: "Root Password", default: "", description: "Override root-level service password"},
+	]
+</script>
+
+<h2>Creating a service</h2>
+<p>
+	Currently you can create 4 types of service:
+	<strong>MySQL</strong>, <strong>PostgreSQL</strong>,
+	<strong>MongoDB</strong>, and <strong>Redis</strong>.
+
+	They all support the same configuration options.
+</p>
+
+<h3>Configuration</h3>
+<div class="overflow-x-auto">
+	<table class="table w-full">
+		<thead>
+			<tr>
+				<th>Option</th>
+				<th>Default</th>
+				<th>Description</th>
+			</tr>
+		</thead>
+		<tbody>
+		{#each configOptions as opt}
+			<tr>
+				<td>{opt.name}</td>
+				<td>{opt.default}</td>
+				<td>{opt.description}</td>
+			</tr>
+		{/each}
+		</tbody>
+	</table>
+</div>
+
+<h2>Linking a service</h2>
+<p>
+	Services need to be <i>linked</i> to an app. Once this is done, the connection
+	information will be available in the UI, and injected as an environment variable
+	to the app (eg <code>REDIS_URL</code>)
+</p>

web/src/routes/docs/settings/+page.svelte

@@ -0,0 +1 @@
+<p>todo</p>

web/src/routes/docs/setup/+page.svelte

@@ -0,0 +1,49 @@
+<script>
+	const ghAppUrl = "https://docs.github.com/en/apps/creating-github-apps/creating-github-apps/about-apps"
+	const manifestUrl = "https://docs.github.com/en/apps/creating-github-apps/creating-github-apps/creating-a-github-app-from-a-manifest";
+	// TODO
+	const codeManifestUrl = "https://github.com/texm/shokku"
+</script>
+
+<h2>Get Setup Key</h2>
+<p>
+	Once installation is finished, a <i>setup key</i> will be output to
+	the console. Copy this, you will need it for the initial web setup.
+</p>
+
+<h2>Choose Setup Method</h2>
+<h3>Github</h3>
+<p>
+	Setting up with Github creates a <a href={ghAppUrl}>Github App</a> to
+	act on behalf of your installation. This means authentication will use
+	Github OAuth, and information about your repositories can be automatically
+	fetched via the Github API.
+</p>
+
+<p>
+	The app is created using a <a href={manifestUrl}>manifest</a> - you can
+	view the configuration <a href={codeManifestUrl}>here</a>.
+
+	You can choose to install the app on your account, or for an organisation.
+</p>
+
+<h4>Organisation Install</h4>
+<p>
+	If you install on behalf of an organisation, all members of the organisation
+	will be able to authenticate and use Shokku. There is currently no role-based
+	access, so ensure you trust your fellow org members as admins!
+</p>
+
+<h3>Username/Password</h3>
+<p>
+	You can also use username/password authentication.
+	Currently this is limited to a single user.
+</p>
+
+<h4>TOTP 2FA</h4>
+<p>
+	Use of TOTP is <strong>strongly recommended</strong>.
+	A QR code/secret will be generated, along with a recovery code to be used should
+	you lose access to your account. If you choose not to enable this during installation,
+	it can be configured later in Settings.
+</p>

web/src/routes/docs/support/+page.svelte

@@ -0,0 +1,10 @@
+<p>
+	For bugs, feature requests, or general questions: open an
+	<a href="https://github.com/texm/shokku/issues">issue in the Github Repo</a>.
+</p>
+
+<h2>Commercial Support</h2>
+<p>
+	There is no commercial support for Shokku. Consider
+	<a href="https://pro.dokku.com/">Dokku Pro</a>.
+</p>

web/src/routes/docs/uninstall/+page.svelte

@@ -0,0 +1,31 @@
+<script>
+	import Hint from "$components/Hint.svelte";
+
+  const commands = [
+		"dokku apps:destroy --force shokku",
+		"dokku ssh-keys:remove shokkuadmin",
+		"rm -r /var/lib/dokku/data/storage/shokku",
+	]
+</script>
+
+<p>
+	To completely uninstall Shokku, run the following commands
+</p>
+
+<div class="mockup-code mb-4">
+	{#each commands as cmd, i}
+		<pre data-prefix="{i}" class="m-0 my-1 p-0"><code>{cmd}</code></pre>
+	{/each}
+</div>
+
+<Hint>
+	This will not uninstall Dokku, or remove any apps/services
+	you have created/deployed.
+</Hint>
+
+<h2>Delete Github App</h2>
+<p>
+	If you have completed setup with a github app, head to your
+	<a href="https://github.com/settings/apps">Github Developer Settings</a>, click
+	<i>Edit</i>, then <i>Advanced</i> in the sidebar, then <i>Delete Github App</i>.
+</p>

web/src/routes/docs/upgrading/+page.svelte

@@ -0,0 +1,22 @@
+<script>
+	import Hint from "$components/Hint.svelte";
+
+	// TODO: update this
+	const shokkuImage = "repo/shokku";
+  const manualCmds = [
+	  `export SHOKKU_VERSION=latest`,
+	  `docker pull "${shokkuImage}:$SHOKKU_VERSION"`,
+	  `dokku git:from-image shokku $(docker inspect --format='{{index .RepoDigests 0}}' "${shokkuImage}:$SHOKKU_VERSION")`
+  ];
+</script>
+
+<Hint>
+	Due to how Dokku tracks app changes, tracking the <i>latest</i> image tag will result
+	in no changes being detected. Instead we use the image digest.
+</Hint>
+
+<div class="mockup-code mt-4">
+	{#each manualCmds as cmd, i}
+		<pre data-prefix="{i}" class="m-0 my-1 p-0"><code>{cmd}</code></pre>
+	{/each}
+</div>