add vps documentation

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+package-lock.json
 
 # Output
 .output
@@ -27,4 +28,4 @@ vite.config.ts.timestamp-*
 .dev.vars*
 !.dev.vars.example
 
-.idea
+.idea

src/app.css

@@ -55,6 +55,89 @@
 	--font-sans: 'Satoshi-Variable', 'Satoshi-Regular', sans-serif;
 }
 
+/* Prism syntax highlighting theme */
+pre[class*='language-'],
+code[class*='language-'] {
+	color: #e4e4e7;
+	/* fyra-gray-200 */
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #53535a;
+	/* fyra-gray-600 */
+	font-style: italic;
+}
+
+.token.punctuation {
+	color: #727279;
+	/* fyra-gray-500 */
+}
+
+.token.namespace {
+	opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #e8c98a;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #87c3a0;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #a2a2a9;
+	/* fyra-gray-400 */
+}
+
+.token.keyword {
+	color: #d89894;
+	/* fyra-red-400 */
+}
+
+.token.atrule,
+.token.attr-value {
+	color: #87c3a0;
+}
+
+.token.function,
+.token.class-name {
+	color: #a5c8e8;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e8c98a;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
 html {
 	@apply w-screen overflow-x-clip bg-fyra-gray-900 text-fyra-gray-50;
 }

src/lib/docs-prose-class.ts

@@ -0,0 +1,15 @@
+export const docsProseClass = [
+	'prose max-w-2xl prose-invert',
+	'prose-headings:font-semibold prose-headings:tracking-tight',
+	'prose-h1:mb-4 prose-h1:text-4xl prose-h1:text-fyra-gray-50',
+	'prose-h2:mt-10 prose-h2:mb-3 prose-h2:text-xl prose-h2:text-fyra-gray-50',
+	'prose-h3:mt-6 prose-h3:mb-1 prose-h3:text-lg prose-h3:font-semibold prose-h3:text-fyra-gray-200',
+	'prose-h4:mt-4 prose-h4:mb-1 prose-h4:text-base prose-h4:font-semibold prose-h4:text-fyra-gray-300',
+	'prose-p:text-sm prose-p:leading-relaxed prose-p:text-fyra-gray-400',
+	'prose-a:font-medium prose-a:text-fyra-red-400 prose-a:no-underline prose-a:hover:text-fyra-red-300',
+	'prose-strong:text-fyra-gray-200',
+	'prose-code:rounded prose-code:bg-fyra-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-normal prose-code:text-fyra-red-300 prose-code:before:content-none prose-code:after:content-none',
+	'prose-pre:my-4 prose-pre:overflow-x-auto prose-pre:rounded-none prose-pre:border prose-pre:border-fyra-gray-700 prose-pre:bg-fyra-gray-950 prose-pre:px-4 prose-pre:py-3 prose-pre:text-fyra-gray-200',
+	'[&_pre_code]:block [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-inherit [&_pre_code]:before:content-none [&_pre_code]:after:content-none',
+	'prose-li:text-sm prose-li:text-fyra-gray-400 prose-hr:my-8 prose-hr:border-fyra-gray-800'
+].join(' ');

src/routes/docs/+page.svelte

@@ -30,7 +30,31 @@
 		}
 	];
 
-	const guides = [
+	type InternalHref =
+		| '/services/colocation'
+		| '/docs/colocation/shipping-hardware'
+		| '/docs/colocation/ipmi'
+		| '/docs/colocation/remote-hands'
+		| '/docs/colocation/power-budgets'
+		| '/docs/vps/ssh'
+		| '/docs/vps/user-setup'
+		| '/docs/vps/hardening'
+		| '/docs/vps/networking';
+
+	type GuideArticle = {
+		label: string;
+		href?: InternalHref;
+		soon?: boolean;
+		placeholder?: boolean;
+	};
+
+	type Guide = {
+		category: string;
+		description: string;
+		articles: GuideArticle[];
+	};
+
+	const guides: Guide[] = [
 		{
 			category: 'Colocation',
 			description: 'IPMI access, power specs, and getting your hardware online.',
@@ -49,19 +73,23 @@
 			category: 'VPS',
 			description: 'First login, initial hardening, and setting up your environment.',
 			articles: [
-				{ label: 'Connecting via SSH', soon: true },
-				{ label: 'Initial server hardening', soon: true },
-				{ label: 'Adding a non-root user', soon: true },
+				{ label: 'Connecting via SSH', soon: false, href: '/docs/vps/ssh' },
+				{ label: 'Adding a Non-Root User', soon: false, href: '/docs/vps/user-setup' },
+				{ label: 'Initial Server Hardening', soon: false, href: '/docs/vps/hardening' },
+				{ label: 'VPS Networking', soon: false, href: '/docs/vps/networking' },
 				{ label: 'Choosing a Linux distro', soon: true }
 			]
 		},
 		{
 			category: 'Linux & Distros',
 			description: 'Supported operating systems and distro-specific notes.',
 			articles: [
-				{ label: 'Ultramarine Linux', soon: false },
-				{ label: 'Debian / Ubuntu', soon: true },
-				{ label: 'Arch', soon: true },
+				{ label: 'Ultramarine Server', soon: true },
+				{ label: 'Fedora Server', placeholder: true },
+				{ label: 'Alma Linux', placeholder: true },
+				{ label: 'Debian', placeholder: true },
+				{ label: 'Ubuntu Server', placeholder: true },
+				{ label: 'Alpine', placeholder: true },
 				{ label: 'NixOS', soon: true }
 			]
 		},
@@ -72,7 +100,7 @@
 				{ label: 'Upgrading your plan', soon: true },
 				{ label: 'Reading your invoice', soon: true },
 				{ label: 'Cancelling a plan', soon: true },
-				{ label: 'Contacting support', soon: true }
+				{ label: 'Contacting support', soon: false, href: '/docs/account-billing/support' }
 			]
 		}
 	];
@@ -240,7 +268,7 @@
 						{/if}
 						{#if step.cta}
 							<a
-								href={resolve(step.cta.href)}
+								href={resolve(step.cta.href as InternalHref, {})}
 								class="mt-4 inline-block text-sm font-medium text-fyra-red-400 transition-colors duration-100 hover:text-fyra-red-300"
 								>{step.cta.label}</a
 							>
@@ -277,9 +305,11 @@
 									class="shrink-0 text-[10px] font-medium tracking-widest text-fyra-gray-400 uppercase"
 									>Soon</span
 								>
+							{:else if article.placeholder}
+								<span class="text-sm text-fyra-gray-400">{article.label}</span>
 							{:else}
 								<a
-									href={article.href ? resolve(article.href) : '#'}
+									href={article.href ? resolve(article.href as InternalHref, {}) : '#'}
 									class="text-sm text-fyra-gray-300 transition-colors duration-100 hover:text-fyra-gray-50"
 									>{article.label}</a
 								>

src/routes/docs/account-billing/+layout.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { page } from '$app/stores';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { ArrowLeft } from '@steeze-ui/carbon-icons';
+	import { docsProseClass } from '$lib/docs-prose-class';
+
+	const { children } = $props();
+
+	const nav = [{ label: 'Contacting Support', href: '/docs/account-billing/support' }];
+</script>
+
+<div class="border-b border-fyra-gray-800 px-6 py-3 lg:px-8">
+	<nav class="flex items-center gap-2 text-xs text-fyra-gray-500">
+		<a href={resolve('/docs')} class="transition-colors hover:text-fyra-gray-300">Docs</a>
+		<span>/</span>
+		<span class="text-fyra-gray-400">Account & Billing</span>
+	</nav>
+</div>
+
+<div class="flex min-h-screen divide-x divide-fyra-gray-800">
+	<!-- Sidebar -->
+	<aside class="hidden w-56 shrink-0 lg:block">
+		<div class="sticky top-0 px-6 py-8">
+			<p class="mb-3 text-[10px] font-medium tracking-widest text-fyra-gray-500 uppercase">
+				Account & Billing
+			</p>
+			<nav class="flex flex-col gap-0.5">
+				{#each nav as item (item.href)}
+					<a
+						href={resolve(item.href)}
+						class="rounded-sm px-2 py-1.5 text-sm transition-colors {$page.url.pathname ===
+						item.href
+							? 'bg-fyra-gray-800 font-medium text-fyra-gray-50'
+							: 'text-fyra-gray-400 hover:text-fyra-gray-200'}"
+					>
+						{item.label}
+					</a>
+				{/each}
+			</nav>
+
+			<div class="mt-8 border-t border-fyra-gray-800 pt-6">
+				<a
+					href={resolve('/docs')}
+					class="flex items-center gap-1.5 text-xs text-fyra-gray-500 transition-colors hover:text-fyra-gray-300"
+				>
+					<Icon src={ArrowLeft} class="h-3 w-3" aria-hidden="true" />
+					All docs
+				</a>
+			</div>
+		</div>
+	</aside>
+
+	<!-- Content -->
+	<main class="min-w-0 flex-1 px-6 py-12 lg:px-12">
+		<!-- Mobile nav -->
+		<div class="mb-8 lg:hidden">
+			<p class="mb-2 text-[10px] font-medium tracking-widest text-fyra-gray-500 uppercase">
+				Account & Billing
+			</p>
+			<nav class="flex flex-wrap gap-2">
+				{#each nav as item (item.href)}
+					<a
+						href={resolve(item.href)}
+						class="border px-3 py-1 text-xs transition-colors {$page.url.pathname === item.href
+							? 'border-fyra-red-500 text-fyra-gray-50'
+							: 'border-fyra-gray-700 text-fyra-gray-400 hover:border-fyra-gray-500 hover:text-fyra-gray-200'}"
+					>
+						{item.label}
+					</a>
+				{/each}
+			</nav>
+		</div>
+
+		<div class={docsProseClass}>
+			{@render children()}
+		</div>
+	</main>
+</div>

src/routes/docs/account-billing/support/+page.svx

@@ -0,0 +1,20 @@
+<svelte:head>
+<title>Contacting Support | Fyra Stack Docs</title>
+<meta name="description" content="Contact Fyra Stack support for any questions or issues with your account billing." />
+<link rel="canonical" href="https://fyrastack.com/docs/account-billing/support" />
+<meta property="og:title" content="Contacting Support | Fyra Stack Docs" />
+<meta property="og:description" content="Contact Fyra Stack support for any questions or issues with your account billing." />
+<meta property="og:image" content="https://fyrastack.com/logo.png" />
+<meta property="og:type" content="article" />
+<meta property="og:url" content="https://fyrastack.com/docs/account-billing/support" />
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Contacting Support | Fyra Stack Docs" />
+<meta name="twitter:description" content="Contact Fyra Stack support for any questions or issues with your account billing." />
+<meta name="twitter:image" content="https://fyrastack.com/logo.png" />
+</svelte:head>
+
+# Contacting Support
+
+Thanks for using Fyra Stack!
+
+Currently, you can contact support by emailing [support@fyrastack.com](mailto:support@fyrastack.com).

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

@@ -3,6 +3,7 @@
 	import { page } from '$app/stores';
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { ArrowLeft } from '@steeze-ui/carbon-icons';
+	import { docsProseClass } from '$lib/docs-prose-class';
 
 	const { children } = $props();
 
@@ -76,20 +77,7 @@
 			</nav>
 		</div>
 
-		<div
-			class="prose max-w-2xl prose-invert
-			prose-headings:font-semibold prose-headings:tracking-tight
-			prose-h1:mb-4 prose-h1:text-4xl prose-h1:text-fyra-gray-50
-			prose-h2:mt-10 prose-h2:mb-3 prose-h2:text-xl prose-h2:text-fyra-gray-50
-			prose-h3:mt-6 prose-h3:mb-1 prose-h3:text-sm prose-h3:font-semibold prose-h3:text-fyra-gray-200
-			prose-p:text-sm prose-p:leading-relaxed prose-p:text-fyra-gray-400
-			prose-a:font-medium prose-a:text-fyra-red-400
-			prose-a:no-underline prose-a:hover:text-fyra-red-300 prose-strong:text-fyra-gray-200 prose-code:rounded
-			prose-code:bg-fyra-gray-800 prose-code:px-1.5
-			prose-code:py-0.5
-			prose-code:text-sm prose-code:font-normal prose-code:text-fyra-red-300 prose-code:before:content-none prose-code:after:content-none prose-pre:border prose-pre:border-fyra-gray-700 prose-pre:bg-fyra-gray-950 prose-pre:text-fyra-gray-200
-			prose-li:text-sm prose-li:text-fyra-gray-400 prose-hr:my-8 prose-hr:border-fyra-gray-800"
-		>
+		<div class={docsProseClass}>
 			{@render children()}
 		</div>
 	</main>