From 5f754a32e602cbb2809788f7bbc4f6b4f014bac7 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Tue, 27 Jun 2023 16:44:44 +0700
Subject: [PATCH 1/3] draft it up

---
 src/routes/+layout.svelte | 20 ++++++++++++++++----
 src/routes/+page.svelte   | 28 ++++++++++------------------
 src/routes/Footer.svelte  | 31 +------------------------------
 3 files changed, 27 insertions(+), 52 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ba1b4dd..e0a30a5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,18 +1,30 @@
 <script>
 	import '@ignatiusmb/styles/core.css';
+
+	import Footer from './Footer.svelte';
 </script>
 
 <main>
 	<slot />
+
+	<Footer />
 </main>
 
 <style>
 	main {
+		--fg-surface: #818181;
+		--bg-overlay: #ffffff;
+
 		min-height: 100vh;
-		display: flex;
-		flex-direction: column;
-		margin: 0;
-		font-family: var(--aqua-default);
+		width: 100%;
+
+		display: grid;
+		gap: 0.75rem;
+		justify-items: center;
+		padding: 2em;
+		margin: 0 auto;
 		background-color: #242424;
+		color: rgba(255, 255, 255, 0.9);
+		font-family: sans-serif;
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5d92b12..26d5671 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,15 +2,20 @@
 	import { syv } from '$lib';
 	import SearchBar from '$lib/core/SearchBar.svelte';
 	import ExampleDialog from './ExampleDialog.svelte';
-	import Footer from './Footer.svelte';
 
 	import { autoresize } from '$lib/action';
-	import { outside, copy } from '$lib/action/click';
+	import { copy } from '$lib/action/click';
 
 	let value = '';
 </script>
 
-<main use:outside={() => {}}>
+<header>
+	<h1>Syv</h1>
+</header>
+
+<article>
+	<p>Syv is a complementary library for developing applications with Svelte.</p>
+
 	<SearchBar icon filters />
 
 	<textarea bind:value use:autoresize />
@@ -25,23 +30,10 @@
 	>
 		Open Dialog
 	</button>
-
-	<Footer />
-</main>
+</article>
 
 <style>
-	main {
-		--fg-surface: #818181;
-		--bg-overlay: #ffffff;
-	}
-	main {
+	article {
 		max-width: 86rem;
-		width: 100%;
-		display: grid;
-		gap: 0.75rem;
-		justify-items: center;
-
-		padding: 2em;
-		margin: 0 auto;
 	}
 </style>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
index 8681d9e..4d83d68 100644
--- a/src/routes/Footer.svelte
+++ b/src/routes/Footer.svelte
@@ -3,43 +3,14 @@
 </script>
 
 <footer>
-	<section>
-		<em>Read the help page for more information</em>
-	</section>
-
 	<section class="social-links">
-		<a href="https://www.facebook.com/ignatiusmb" aria-label="facebook profile">
-			<Feather icon={import('../lib/icons/feather/facebook')} />
-		</a>
-		<a href="https://www.instagram.com/ignatiusmb" aria-label="instagram profile">
-			<Feather icon={import('../lib/icons/feather/instagram')} />
-		</a>
-		<a href="https://www.linkedin.com/in/ignatiusmb" aria-label="linkedin profile">
-			<Feather icon={import('../lib/icons/feather/linkedin')} />
-		</a>
-		<a href="https://twitter.com/alchemauss" aria-label="twitter profile">
-			<Feather icon={import('../lib/icons/feather/twitter')} />
-		</a>
-		<a href="https://keybase.io/mauss" aria-label="keybase profile">
-			<Feather icon={import('../lib/icons/feather/key')} />
-		</a>
-		<a href="https://github.com/ignatiusmb" aria-label="github profile">
+		<a href="https://github.com/ignatiusmb/syv" aria-label="github repository">
 			<Feather icon={import('../lib/icons/feather/github')} />
 		</a>
-		<a href="https://gitlab.com/ignatiusmb" aria-label="gitlab profile">
-			<Feather icon={import('../lib/icons/feather/gitlab')} />
-		</a>
-		<a href="https://twitch.tv/alchemauss" aria-label="twitch profile">
-			<Feather icon={import('../lib/icons/feather/twitch')} />
-		</a>
-		<a href="https://www.youtube.com/user/Ignapure/playlists" aria-label="youtube playlist profile">
-			<Feather icon={import('../lib/icons/feather/youtube')} />
-		</a>
 	</section>
 
 	<section>
 		<p>Copyright &copy; 2017 &ndash; {new Date().getFullYear()} Ignatius Bagussuputra</p>
-		<p>Handcrafted with ❤️ using SvelteKit &plus; Marqua</p>
 	</section>
 </footer>
 

From cf9e01a8d42b81f016a5ac0e91d3ac4efefa1a48 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Tue, 8 Aug 2023 19:28:01 +0700
Subject: [PATCH 2/3] add playground route

---
 src/routes/+error.svelte                      |  4 +-
 src/routes/+layout.svelte                     |  2 +-
 src/routes/+page.svelte                       | 23 ------------
 src/routes/Footer.svelte                      | 18 ++++-----
 src/routes/playground/+page.svelte            | 37 +++++++++++++++++++
 .../{ => playground}/ExampleDialog.svelte     |  0
 6 files changed, 49 insertions(+), 35 deletions(-)
 create mode 100644 src/routes/playground/+page.svelte
 rename src/routes/{ => playground}/ExampleDialog.svelte (100%)

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 1dd71b9..30ae296 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -17,14 +17,14 @@
 <style>
 	article {
 		display: grid;
-		gap: 1em;
+		gap: 1rem;
 		justify-content: center;
 		margin-top: auto;
 		text-align: center;
 	}
 	h1 {
 		font-family: var(--aqua-monospace);
-		font-size: 5em;
+		font-size: 5rem;
 	}
 	pre {
 		text-align: left;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e0a30a5..c7a4579 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,7 +21,7 @@
 		display: grid;
 		gap: 0.75rem;
 		justify-items: center;
-		padding: 2em;
+		padding: 2rem;
 		margin: 0 auto;
 		background-color: #242424;
 		color: rgba(255, 255, 255, 0.9);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 26d5671..dab8fed 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,4 @@
 <script lang="ts">
-	import { syv } from '$lib';
-	import SearchBar from '$lib/core/SearchBar.svelte';
-	import ExampleDialog from './ExampleDialog.svelte';
-
-	import { autoresize } from '$lib/action';
-	import { copy } from '$lib/action/click';
-
-	let value = '';
 </script>
 
 <header>
@@ -15,21 +7,6 @@
 
 <article>
 	<p>Syv is a complementary library for developing applications with Svelte.</p>
-
-	<SearchBar icon filters />
-
-	<textarea bind:value use:autoresize />
-
-	<button use:copy={{ data: value }}>Copy to Clipboard</button>
-
-	<button
-		on:click={() => {
-			syv.mount(ExampleDialog);
-			syv.load(() => import('./ExampleDialog.svelte'));
-		}}
-	>
-		Open Dialog
-	</button>
 </article>
 
 <style>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
index 36b73d4..b1ccf55 100644
--- a/src/routes/Footer.svelte
+++ b/src/routes/Footer.svelte
@@ -23,28 +23,28 @@
 		--t-duration: 200ms;
 
 		width: 100%;
-		max-width: 53em;
+		max-width: 53rem;
 		position: relative;
 		display: grid;
-		gap: 0.5em;
-		padding: 3em 1em;
-		margin: auto auto 3em;
+		gap: 0.5rem;
+		padding: 3rem 1rem;
+		margin: auto auto 3rem;
 		text-align: center;
 		line-height: 1.5;
 		font-family: var(--font-monospace);
-		font-size: clamp(0.8em, 3vw, 1em);
+		font-size: clamp(0.8rem, 3vw, 1rem);
 	}
 	.social-links {
 		width: 100%;
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
-		padding: 0 0 0.5em;
+		padding: 0 0 0.5rem;
 		margin: auto;
 	}
 	.social-links > a {
-		flex: 0 1 5em;
-		padding-top: 1em;
+		flex: 0 1 5rem;
+		padding-top: 1rem;
 	}
 	.social-links a,
 	.social-links a:visited {
@@ -70,6 +70,6 @@
 		display: grid;
 		grid-template-rows: repeat(2, 1fr);
 		place-items: center;
-		gap: 0.5em;
+		gap: 0.5rem;
 	}
 </style>
diff --git a/src/routes/playground/+page.svelte b/src/routes/playground/+page.svelte
new file mode 100644
index 0000000..a8108ee
--- /dev/null
+++ b/src/routes/playground/+page.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { syv } from '$lib';
+	import SearchBar from '$lib/core/SearchBar.svelte';
+	import ExampleDialog from './ExampleDialog.svelte';
+
+	import { autoresize } from '$lib/action';
+	import { copy } from '$lib/action/click';
+
+	let value = '';
+</script>
+
+<header>
+	<h1>Syv</h1>
+</header>
+
+<article>
+	<SearchBar icon filters />
+
+	<textarea bind:value use:autoresize />
+
+	<button use:copy={{ data: value }}>Copy to Clipboard</button>
+
+	<button
+		on:click={() => {
+			syv.mount(ExampleDialog);
+			syv.load(() => import('./ExampleDialog.svelte'));
+		}}
+	>
+		Open Dialog
+	</button>
+</article>
+
+<style>
+	article {
+		max-width: 86rem;
+	}
+</style>
diff --git a/src/routes/ExampleDialog.svelte b/src/routes/playground/ExampleDialog.svelte
similarity index 100%
rename from src/routes/ExampleDialog.svelte
rename to src/routes/playground/ExampleDialog.svelte

From 959d86650d90e7f7acd4a4f015b90ec47eeb4083 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Wed, 23 Aug 2023 16:37:18 +0700
Subject: [PATCH 3/3] fonts and remove internal stuff

---
 docs/01-introduction.md          |   2 +-
 docs/02-namespaces.md            |   5 -
 package.json                     |   4 +-
 pnpm-lock.yaml                   |  21 +++
 src/app.css                      |  50 +++++++
 src/lib/internal/Docs.svelte     | 141 -------------------
 src/lib/internal/lib/Edit.svelte |  21 ---
 src/routes/+error.svelte         |   2 +-
 src/routes/+layout.svelte        |  49 ++++---
 src/routes/+page.server.ts       |  30 ++++
 src/routes/+page.svelte          |  21 ++-
 src/routes/Docs.svelte           | 230 +++++++++++++++++++++++++++++++
 src/routes/Edit.svelte           |  26 ++++
 src/routes/Footer.svelte         |  75 ----------
 vite.config.js                   |   1 +
 15 files changed, 410 insertions(+), 268 deletions(-)
 delete mode 100644 docs/02-namespaces.md
 create mode 100644 src/app.css
 delete mode 100644 src/lib/internal/Docs.svelte
 delete mode 100644 src/lib/internal/lib/Edit.svelte
 create mode 100644 src/routes/+page.server.ts
 create mode 100644 src/routes/Docs.svelte
 create mode 100644 src/routes/Edit.svelte
 delete mode 100644 src/routes/Footer.svelte

diff --git a/docs/01-introduction.md b/docs/01-introduction.md
index 4ce8089..381ecd5 100644
--- a/docs/01-introduction.md
+++ b/docs/01-introduction.md
@@ -2,4 +2,4 @@
 title: Introduction
 ---
 
-Intro
+A complementary library for developing applications with Svelte. It includes a set of components, utilities and helpers that can be used in any Svelte project.
diff --git a/docs/02-namespaces.md b/docs/02-namespaces.md
deleted file mode 100644
index b7f3fb9..0000000
--- a/docs/02-namespaces.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Namespaces
----
-
-Namespace
diff --git a/package.json b/package.json
index 269acab..512f0b3 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
 		"./action/click": "./action/click.js",
 		"./icons/*.svelte": "./icons/*.svelte",
 		"./icons/*": "./icons/*.js",
-		"./internal/*.svelte": "./internal/*.svelte",
 		"./loader/*.svelte": "./loader/*.svelte",
 		"./store": "./store/index.js",
 		"./store/api": "./store/api.js",
@@ -58,6 +57,9 @@
 		"svelte": "^3.49.0 || ^4.0.0"
 	},
 	"devDependencies": {
+		"@fontsource/fira-code": "^5.0.8",
+		"@fontsource/karla": "^5.0.9",
+		"@fontsource/rubik": "^5.0.9",
 		"@ignatiusmb/styles": "^0.1.1",
 		"@sveltejs/adapter-vercel": "^3.0.3",
 		"@sveltejs/kit": "^1.22.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f592c98..06cbb64 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,15 @@ dependencies:
     version: 0.7.0
 
 devDependencies:
+  '@fontsource/fira-code':
+    specifier: ^5.0.8
+    version: 5.0.8
+  '@fontsource/karla':
+    specifier: ^5.0.9
+    version: 5.0.9
+  '@fontsource/rubik':
+    specifier: ^5.0.9
+    version: 5.0.9
   '@ignatiusmb/styles':
     specifier: ^0.1.1
     version: 0.1.1
@@ -264,6 +273,18 @@ packages:
     dev: true
     optional: true
 
+  /@fontsource/fira-code@5.0.8:
+    resolution: {integrity: sha512-kp/tJUVnjaZeLHENMBFTTSgP2B7+/rIboeofuMfoGB40s2U0DKXNqQcOqIF5PtDhJ5QTG1LcviYXMnc1yG6oYQ==}
+    dev: true
+
+  /@fontsource/karla@5.0.9:
+    resolution: {integrity: sha512-aKJodjzrrLo4bUrEgvHQgx3ULIkSB1zDcJ3kkZHqhITbLBBdCahlMz8jDiAKhCKTzRZCSJpKAEBkAmWxQm2QKA==}
+    dev: true
+
+  /@fontsource/rubik@5.0.9:
+    resolution: {integrity: sha512-3yKyomN595SrV+tUx1YvlTvg3SONE1PwzyYiJJu+/qKMi7vhYz9OBaHZXBy60fHbkXB881zlzosBUP5MZyCYCw==}
+    dev: true
+
   /@ignatiusmb/styles@0.1.1:
     resolution: {integrity: sha512-2Py7LWaRCtsd2HKTAjNft598+wFkVplV9+QYzdgSkv7QkTE/D5soIqNQNLxzK1MB3Uu4Gr0krMNHIfCNY5CEeA==}
     dev: true
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..ed02288
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,50 @@
+:root {
+	--stone-050: #fafaf9;
+	--stone-100: #f5f5f4;
+	--stone-200: #e7e5e4;
+	--stone-300: #d6d3d1;
+	--stone-400: #a8a29e;
+	--stone-500: #78716c;
+	--stone-600: #57534e;
+	--stone-700: #44403c;
+	--stone-800: #292524;
+	--stone-900: #1c1917;
+	--stone-950: #0c0a09;
+
+	--sky-050: #f0f9ff;
+	--sky-100: #e0f2fe;
+	--sky-200: #bae6fd;
+	--sky-300: #7dd3fc;
+	--sky-400: #38bdf8;
+	--sky-500: #0ea5e9;
+	--sky-600: #0284c7;
+	--sky-700: #0369a1;
+	--sky-800: #075985;
+	--sky-900: #0c4a6e;
+	--sky-950: #082f49;
+
+	--rose-050: #fff1f2;
+	--rose-100: #ffe4e6;
+	--rose-200: #fecdd3;
+	--rose-300: #fda4af;
+	--rose-400: #fb7185;
+	--rose-500: #f43f5e;
+	--rose-600: #e11d48;
+	--rose-700: #be123c;
+	--rose-800: #9f1239;
+	--rose-900: #881337;
+	--rose-950: #4c0519;
+
+	--font-mono: 'Fira Code', monospace;
+}
+
+html,
+body {
+	background: var(--stone-900);
+	color: var(--stone-200);
+	font-family: 'Rubik', 'Ubuntu', 'Helvetica Neue', sans-serif;
+}
+
+a {
+	color: var(--sky-400);
+}
diff --git a/src/lib/internal/Docs.svelte b/src/lib/internal/Docs.svelte
deleted file mode 100644
index 87c054b..0000000
--- a/src/lib/internal/Docs.svelte
+++ /dev/null
@@ -1,141 +0,0 @@
-<script lang="ts">
-	import { Link } from '../icons/feather';
-	import Feather from '../icons/Feather.svelte';
-	import Edit from './lib/Edit.svelte';
-
-	export let sections: Record<'slug' | 'title' | 'content' | 'path', string>[];
-	export let repo: string;
-
-	let anchor = false;
-</script>
-
-<main>
-	<aside>
-		{#each sections as { slug, title }, i}
-			{@const index = `0${i + 1}`.slice(-2)}
-			<a href="#{slug}" data-index={index}>{title}</a>
-		{/each}
-	</aside>
-
-	<article>
-		{#each sections as { slug, title, content, path }}
-			<section>
-				<h2
-					id={slug}
-					class:anchor
-					on:mouseenter={() => (anchor = true)}
-					on:mouseleave={() => (anchor = false)}
-				>
-					<a href="#{slug}">
-						<Feather icon={Link} />
-					</a>
-					<span>{title}</span>
-					<Edit {repo} {path} />
-				</h2>
-				{@html content}
-			</section>
-		{/each}
-	</article>
-</main>
-
-<style>
-	main {
-		display: grid;
-		gap: 2em;
-		grid-template-columns: minmax(0, 1fr);
-		align-items: flex-start;
-		padding: 0 2em;
-		margin: 2em auto;
-	}
-	aside {
-		position: sticky;
-		top: 0;
-		display: none;
-		align-content: flex-start;
-		padding-top: 2em;
-	}
-	aside a {
-		line-height: 4ch;
-	}
-	aside a::before {
-		content: attr(data-index);
-		margin-right: 0.75em;
-		font-family: var(--aqua-monospace);
-	}
-	article {
-		padding-top: 2em;
-	}
-	section:not(:first-child) {
-		margin-top: 4em;
-		padding-top: 1em;
-		border-top: 0.25em solid var(--aqua-primary);
-	}
-	section h2 {
-		position: relative;
-		display: flex;
-		justify-content: space-between;
-		margin-bottom: 1.5em;
-		text-transform: uppercase;
-		font-family: var(--aqua-heading);
-		font-size: 2rem;
-		font-weight: bold;
-	}
-	section h2 > :global(a:first-child) {
-		position: absolute;
-		top: 50%;
-		left: -0.15em;
-		display: flex;
-		transform: translate(-95%, -50%);
-		transition: opacity 240ms;
-		opacity: 0;
-	}
-	section h2.anchor > :global(a:first-child) {
-		opacity: 1;
-	}
-	section h2 + :global(h3:first-of-type) {
-		padding-top: 0;
-		margin-top: 0;
-		border-top: 0;
-	}
-	section :global(h3) {
-		position: relative;
-		display: grid;
-		gap: 0.5em;
-		grid-template-columns: auto auto 1fr;
-		align-items: center;
-		margin: 2em 0 1em;
-		font-size: 1.5rem;
-		font-weight: 500;
-	}
-	section :global(h3::before) {
-		content: '';
-		width: 0.5em;
-		height: 0.5em;
-		border-radius: 50%;
-		margin-left: 0.25em;
-		box-shadow: 0 0 0 0.25em rgba(0, 112, 187, 0.6);
-		background-color: var(--aqua-primary);
-	}
-	section :global(h3::after) {
-		content: '';
-		width: 100%;
-		height: 0.15em;
-		background-color: rgba(0, 112, 187, 0.6);
-	}
-	section :global(p) {
-		margin-bottom: 1em;
-		line-height: 1.5;
-	}
-	section :global(.aqua.code-box) {
-		margin-top: 0;
-		margin-bottom: 1.5em;
-	}
-	@media only screen and (min-width: 769px) {
-		main {
-			grid-template-columns: minmax(12em, 20%) minmax(0, 60em);
-		}
-		aside {
-			display: grid;
-		}
-	}
-</style>
diff --git a/src/lib/internal/lib/Edit.svelte b/src/lib/internal/lib/Edit.svelte
deleted file mode 100644
index f3d8d96..0000000
--- a/src/lib/internal/lib/Edit.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { Edit } from '../../icons/feather';
-	import Feather from '../../icons/Feather.svelte';
-
-	export let repo: string;
-	export let path: string;
-
-	const link = `https://github.com/${repo}/edit/master`;
-</script>
-
-<a href="{link}/{path}">
-	<Feather icon={Edit} />
-</a>
-
-<style>
-	a {
-		display: flex;
-		align-items: center;
-		color: var(--aqua-primary);
-	}
-</style>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 30ae296..3982870 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -23,7 +23,7 @@
 		text-align: center;
 	}
 	h1 {
-		font-family: var(--aqua-monospace);
+		font-family: var(--font-mono);
 		font-size: 5rem;
 	}
 	pre {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c7a4579..ef3c1fe 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,30 +1,43 @@
 <script>
-	import '@ignatiusmb/styles/core.css';
+	import '@fontsource/rubik/400.css';
+	import '@fontsource/karla/400.css';
+	import '@fontsource/karla/600.css';
+	import '@fontsource/fira-code/400.css';
 
-	import Footer from './Footer.svelte';
+	import '@ignatiusmb/styles/core.css';
+	import '../app.css';
 </script>
 
-<main>
-	<slot />
+<slot />
 
-	<Footer />
-</main>
+<footer>
+	<p>
+		<span>Copyright &copy;</span>
+		<a href="https://mauss.dev">Ignatius Bagussuputra</a>
+		<span>2021 &ndash; {new Date().getFullYear()}</span>
+	</p>
+	<p>
+		<span>Documentation made with</span>
+		<span style:color="var(--sky-300)">&#x2764;</span>
+		<span>using</span>
+		<a href="https://github.com/sveltejs/kit">SvelteKit</a>
+		<span>&plus;</span>
+		<a href="https://github.com/ignatiusmb/marqua">Marqua</a>
+	</p>
+</footer>
 
 <style>
-	main {
-		--fg-surface: #818181;
-		--bg-overlay: #ffffff;
-
-		min-height: 100vh;
+	footer {
 		width: 100%;
-
+		max-width: 84ch;
+		position: relative;
 		display: grid;
-		gap: 0.75rem;
-		justify-items: center;
-		padding: 2rem;
+		gap: 0.5rem;
+		padding: 3rem 2rem;
 		margin: 0 auto;
-		background-color: #242424;
-		color: rgba(255, 255, 255, 0.9);
-		font-family: sans-serif;
+
+		text-align: center;
+		font-family: var(--font-mono);
+		font-size: clamp(0.8rem, 3vw, 1rem);
 	}
 </style>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
new file mode 100644
index 0000000..2933a61
--- /dev/null
+++ b/src/routes/+page.server.ts
@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'svelte';
+import type Docs from './Docs.svelte';
+import { traverse } from 'marqua/fs';
+import { exports } from '../../package.json';
+
+export const prerender = true;
+
+export function load() {
+	const docs: ComponentProps<Docs>['sections'] = [
+		...traverse({ entry: 'docs' }, ({ breadcrumb: [filename], buffer, parse }) => {
+			const { content, metadata } = parse(buffer.toString('utf-8'));
+			return { slug: filename.slice(3, -3), title: metadata.title, content };
+		}),
+		...Object.keys(exports).map((key) => {
+			return {
+				slug: key.slice(2),
+				title: `syv${key.slice(1)}`,
+				content: '',
+			};
+		}),
+	];
+
+	return {
+		docs,
+		meta: {
+			title: 'Svelte Complementary Library',
+			description: 'A multipurpose library for working with Svelte',
+		},
+	};
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index dab8fed..639c0f7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,16 +1,27 @@
 <script lang="ts">
+	import Docs from './Docs.svelte';
+
+	export let data;
 </script>
 
 <header>
 	<h1>Syv</h1>
+	<p>Svelte Complementary Library</p>
 </header>
 
-<article>
-	<p>Syv is a complementary library for developing applications with Svelte.</p>
-</article>
+<Docs repo="ignatiusmb/syv" sections={data.docs} />
 
 <style>
-	article {
-		max-width: 86rem;
+	header {
+		max-width: 78rem;
+		width: 100%;
+		padding-top: 2rem;
+		margin: 0 auto;
+		font-family: 'Karla';
+		font-size: 1.25rem;
+	}
+	h1 {
+		margin-bottom: 1rem;
+		font-size: 4rem;
 	}
 </style>
diff --git a/src/routes/Docs.svelte b/src/routes/Docs.svelte
new file mode 100644
index 0000000..751f72e
--- /dev/null
+++ b/src/routes/Docs.svelte
@@ -0,0 +1,230 @@
+<script lang="ts">
+	import { hydrate } from 'marqua/browser';
+	import { debounce } from 'mauss';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { navigating, page } from '$app/stores';
+	import { version } from '../../package.json';
+
+	export let repo: string;
+	export let sections: Array<{
+		slug: string;
+		title: string;
+		content: string;
+	}>;
+
+	onMount(() => {
+		const [html] = Array.from(document.getElementsByTagName('html'));
+		html.style.setProperty('scroll-behavior', 'smooth');
+
+		const sections = Array.from(document.querySelectorAll('main h2[id]'));
+		const check = debounce(() => {
+			const height = document.body.offsetHeight - window.innerHeight;
+			for (let i = sections.length - 1; i >= 0; i--) {
+				const { top } = sections[i].getBoundingClientRect();
+				const multiplied = 256 * (+(i === 0) + 1);
+				const heuristics = /* change hash when all applies */ [
+					top > multiplied, // top of next sibling is far enough
+					window.scrollY < height, // scroll is not at the end of page
+				];
+				if (heuristics.every((h) => h)) continue;
+				if (location.hash !== `#${sections[i].id}`) {
+					goto(`#${sections[i].id}`, { keepFocus: true, noScroll: true, replaceState: true });
+				}
+				return; // exit once hash is changed
+			}
+			// reset hash when all sections passes all heuristics
+			goto('', { keepFocus: true, noScroll: true, replaceState: true });
+		}, 100);
+
+		document.addEventListener('scroll', check, true);
+		return () => {
+			html.style.removeProperty('scroll-behavior');
+			document.removeEventListener('scroll', check, true);
+		};
+	});
+</script>
+
+<main use:hydrate={$navigating}>
+	<aside>
+		<a
+			href="https://github.com/{repo}/releases/latest"
+			style:letter-spacing="2px"
+			style:font-size="1.25rem"
+			style:font-family="var(--font-mono)"
+			data-prefix="v"
+		>
+			{version}
+		</a>
+
+		{#each sections as { slug, title }, i}
+			<a
+				href="#{slug}"
+				data-index={`0${i + 1}`.slice(-2)}
+				class:current={$page.url.hash === `#${slug}`}
+			>
+				{title}
+			</a>
+		{/each}
+	</aside>
+
+	<article>
+		{#each sections as { slug, title, content }}
+			<section>
+				<h2 id={slug}>
+					<a href="#{slug}">
+						<svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+						>
+							<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+							<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+						</svg>
+					</a>
+					<span>{title}</span>
+				</h2>
+
+				{@html content}
+			</section>
+		{/each}
+	</article>
+</main>
+
+<style>
+	main {
+		display: grid;
+		gap: 2rem;
+		grid-template-columns: minmax(0, 1fr);
+		align-items: flex-start;
+		justify-content: center;
+		padding: 0 2rem;
+		margin: 2rem auto;
+	}
+
+	aside {
+		display: none;
+
+		position: sticky;
+		top: 0;
+		gap: 0.25rem;
+		align-content: flex-start;
+		padding-top: 2rem;
+	}
+	aside a {
+		padding-left: 1rem;
+		border-radius: 0.5rem;
+		line-height: 4ch;
+	}
+	aside a[data-prefix]::before {
+		content: attr(data-prefix);
+		margin: 0 0.75rem 0 0.25rem;
+	}
+	aside a[data-index]::before {
+		content: attr(data-index);
+		margin-right: 0.75rem;
+		font-family: var(--font-mono);
+	}
+	aside a[data-index].current,
+	aside a[data-index]:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	article {
+		padding-top: 2rem;
+	}
+
+	section:not(:first-child) {
+		margin-top: 4rem;
+		padding-top: 1rem;
+		border-top: 0.25rem solid var(--rose-700);
+	}
+	section h2 {
+		position: relative;
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 3rem;
+		text-transform: uppercase;
+		font-family: 'Karla', sans-serif;
+		font-size: 2rem;
+		font-weight: bold;
+	}
+	section h2 > a:first-child {
+		position: absolute;
+		top: 50%;
+		left: -0.15rem;
+		display: flex;
+		transform: translate(-95%, -50%);
+		transition: opacity 240ms;
+		opacity: 0;
+	}
+	section h2 > a:first-child:focus,
+	section h2:hover > a:first-child {
+		opacity: 1;
+	}
+
+	/* ---- @html content ---- */
+	section :global([id]) {
+		scroll-margin-top: 2rem;
+	}
+
+	section > :not(h2:first-child) {
+		line-height: 1.5;
+	}
+	section > :global(h3) {
+		position: relative;
+		display: grid;
+		gap: 0.75rem;
+		grid-template-columns: 1.25rem auto 1fr;
+		align-items: center;
+		margin: 2rem 0 1.5rem;
+		font-size: 1.5rem;
+		font-weight: 500;
+	}
+	section > :global(h3::before) {
+		content: '';
+		width: 0.75rem;
+		height: 0.75rem;
+		border-radius: 50%;
+		margin-left: 0.25rem;
+		box-shadow: 0 0 0 0.25rem rgba(0, 112, 187, 0.6);
+		background-color: var(--font-700);
+	}
+	section > :global(h3::after) {
+		content: '';
+		width: 100%;
+		height: 0.15rem;
+		background-color: rgba(0, 112, 187, 0.6);
+	}
+	section h2 + :global(h3:first-of-type) {
+		padding-top: 0;
+		margin-top: 0;
+		border-top: 0;
+	}
+	section > :global(p) {
+		line-height: 1.5;
+	}
+	section > :global(p:not(:first-child)) {
+		margin-top: 1rem;
+	}
+	section > :global(ul li:not(:first-child)) {
+		margin-top: 0.5rem;
+	}
+	section :global(.mrq[data-mrq='block']) {
+		margin: 1rem 0 1.5rem;
+	}
+
+	@media only screen and (min-width: 769px) {
+		main {
+			padding: 0 1rem;
+			grid-template-columns: minmax(12rem, 16rem) minmax(0, 60rem);
+		}
+
+		aside {
+			display: grid;
+		}
+	}
+</style>
diff --git a/src/routes/Edit.svelte b/src/routes/Edit.svelte
new file mode 100644
index 0000000..e93e510
--- /dev/null
+++ b/src/routes/Edit.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let repo: string;
+	export let path: string;
+</script>
+
+<a href="https://github.com/{repo}/edit/master/{path}">
+	<svg
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.5"
+	>
+		<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+		<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+	</svg>
+</a>
+
+<style>
+	a {
+		display: flex;
+		align-items: center;
+		color: var(--mrq-primary);
+	}
+</style>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
deleted file mode 100644
index b1ccf55..0000000
--- a/src/routes/Footer.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script>
-	import * as feather from '$lib/icons/feather';
-	import Feather from '$lib/icons/Feather.svelte';
-</script>
-
-<footer>
-	<section class="social-links">
-		<a href="https://github.com/ignatiusmb/syv" aria-label="github repository">
-			<Feather icon={feather.Github} />
-		</a>
-	</section>
-
-	<section>
-		<p>Copyright &copy; 2017 &ndash; {new Date().getFullYear()} Ignatius Bagussuputra</p>
-	</section>
-</footer>
-
-<style>
-	p {
-		margin: 0;
-	}
-	footer {
-		--t-duration: 200ms;
-
-		width: 100%;
-		max-width: 53rem;
-		position: relative;
-		display: grid;
-		gap: 0.5rem;
-		padding: 3rem 1rem;
-		margin: auto auto 3rem;
-		text-align: center;
-		line-height: 1.5;
-		font-family: var(--font-monospace);
-		font-size: clamp(0.8rem, 3vw, 1rem);
-	}
-	.social-links {
-		width: 100%;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		padding: 0 0 0.5rem;
-		margin: auto;
-	}
-	.social-links > a {
-		flex: 0 1 5rem;
-		padding-top: 1rem;
-	}
-	.social-links a,
-	.social-links a:visited {
-		transition: var(--t-duration);
-		transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-		color: var(--fg-surface);
-	}
-	.social-links a:hover,
-	.social-links a:focus {
-		transition: var(--t-duration);
-		transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-		color: var(--theme-secondary);
-	}
-	.social-links a:hover:nth-child(odd),
-	.social-links a:focus:nth-child(odd) {
-		transform: rotate(6deg) scale(1.2) translateY(-20%);
-	}
-	.social-links a:hover:nth-child(even),
-	.social-links a:focus:nth-child(even) {
-		transform: rotate(-6deg) scale(1.2) translateY(-20%);
-	}
-	section:last-of-type {
-		display: grid;
-		grid-template-rows: repeat(2, 1fr);
-		place-items: center;
-		gap: 0.5rem;
-	}
-</style>
diff --git a/vite.config.js b/vite.config.js
index 076c19b..cbfbda0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,6 +5,7 @@ export default defineConfig({
 	plugins: [sveltekit()],
 
 	server: {
+		fs: { allow: ['./package.json'] },
 		port: 3000,
 	},
 });