docs: design landing page

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.

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.23.0",

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);
+}

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-family: var(--font-mono);
+		font-size: 5rem;
 	}
 	pre {
 		text-align: left;

src/routes/+layout.svelte

@@ -1,18 +1,43 @@
 <script>
+	import '@fontsource/rubik/400.css';
+	import '@fontsource/karla/400.css';
+	import '@fontsource/karla/600.css';
+	import '@fontsource/fira-code/400.css';
+
 	import '@ignatiusmb/styles/core.css';
+	import '../app.css';
 </script>
 
-<main>
-	<slot />
-</main>
+<slot />
+
+<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 {
-		min-height: 100vh;
-		display: flex;
-		flex-direction: column;
-		margin: 0;
-		font-family: var(--aqua-default);
-		background-color: #242424;
+	footer {
+		width: 100%;
+		max-width: 84ch;
+		position: relative;
+		display: grid;
+		gap: 0.5rem;
+		padding: 3rem 2rem;
+		margin: 0 auto;
+
+		text-align: center;
+		font-family: var(--font-mono);
+		font-size: clamp(0.8rem, 3vw, 1rem);
 	}
 </style>

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',
+		},
+	};
+}