start adding site to main repo

site/src/routes/_error.svelte

@@ -0,0 +1,40 @@
+<script>
+	export let status;
+	export let error;
+
+	const dev = process.env.NODE_ENV === 'development';
+</script>
+
+<style>
+	h1, p {
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
+{/if}

site/src/routes/_layout.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { page } from '@sapper/app';
+	import { Icons, Icon, Nav, NavItem } from '@sveltejs/site-kit';
+
+	export let segment;
+</script>
+
+<style>
+	main {
+		position: relative;
+		margin: 0 auto;
+		/* padding: var(--nav-h) var(--side-nav) 0 var(--side-nav); */
+		padding: var(--nav-h) 0 0 0;
+		overflow-x: hidden;
+		--prime: rgb(21, 151, 148);
+	}
+</style>
+
+<Icons/>
+
+<Nav {segment} {page} logo="sapper-logo-horizontal.svg">
+	<NavItem segment="guide">Guide</NavItem>
+
+	<NavItem external="https://svelte.dev">Svelte</NavItem>
+
+	<NavItem external="https://discord.gg/yy75DKs" title="Discord Chat">
+		<Icon name="message-square"/>
+	</NavItem>
+
+	<NavItem external="https://github.com/sveltejs/sapper" title="GitHub Repo">
+		<Icon name="github"/>
+	</NavItem>
+</Nav>
+
+<main>
+	<slot></slot>
+</main>

site/src/routes/guide/_process_markdown.js

@@ -0,0 +1,15 @@
+export default function process_markdown(markdown) {
+	const match = /---\n([\s\S]+?)\n---/.exec(markdown);
+	const frontMatter = match[1];
+	const content = markdown.slice(match[0].length);
+
+	const metadata = {};
+	frontMatter.split('\n').forEach(pair => {
+		const colonIndex = pair.indexOf(':');
+		metadata[pair.slice(0, colonIndex).trim()] = pair
+			.slice(colonIndex + 1)
+			.trim();
+	});
+
+	return { metadata, content };
+}

site/src/routes/guide/_sections.js

@@ -0,0 +1,82 @@
+import fs from 'fs';
+import path from 'path';
+import process_markdown from './_process_markdown.js';
+import marked from 'marked';
+import hljs from 'highlight.js';
+
+const langs = {
+	'hidden-data': 'json',
+	'html-no-repl': 'html'
+};
+
+function btoa(str) {
+	return new Buffer(str).toString('base64');
+}
+
+const escaped = {
+	'"': '"',
+	"'": ''',
+	'&': '&',
+	'<': '&lt;',
+	'>': '&gt;'
+};
+
+const unescaped = Object.keys(escaped).reduce(
+	(unescaped, key) => ((unescaped[escaped[key]] = key), unescaped),
+	{}
+);
+
+function unescape(str) {
+	return String(str).replace(/&.+?;/g, match => unescaped[match] || match);
+}
+
+export default () => fs
+	.readdirSync(`content/guide`)
+	.filter(file => file[0] !== '.' && path.extname(file) === '.md')
+	.map(file => {
+		const markdown = fs.readFileSync(`content/guide/${file}`, 'utf-8');
+
+		const { content, metadata } = process_markdown(markdown);
+
+		// syntax highlighting
+		let uid = 0;
+		const highlighted = {};
+
+		const tweaked_content = content.replace(
+			/```([\w-]+)?\n([\s\S]+?)```/g,
+			(match, lang, code) => {
+				const { value } = hljs.highlight(lang, code);
+				highlighted[++uid] = value;
+
+				return `@@${uid}`;
+			}
+		);
+
+		const html = marked(tweaked_content)
+			.replace(/<p>@@(\d+)<\/p>/g, (match, id) => {
+				return `<pre><code>${highlighted[id]}</code></pre>`;
+			})
+			.replace(/^\t+/gm, match => match.split('\t').join('  '));
+
+		const subsections = [];
+		const pattern = /<h3 id="(.+?)">(.+?)<\/h3>/g;
+		let match;
+
+		while ((match = pattern.exec(html))) {
+			const slug = match[1];
+			// const title = unescape(
+			// 	match[2].replace(/<\/?code>/g, '').replace(/\.(\w+)\W.*/, '.$1')
+			// );
+			const title = unescape(match[2]);
+
+			subsections.push({ slug, title });
+		}
+
+		return {
+			html,
+			metadata,
+			subsections,
+			slug: file.replace(/^\d+-/, '').replace(/\.md$/, ''),
+			file
+		};
+	});

site/src/routes/guide/index.json.js

@@ -0,0 +1,16 @@
+import sections from './_sections.js';
+
+const dev = process.env.NODE_ENV === 'development';
+let json;
+
+export function get(req, res) {
+	if (dev || !json) {
+		json = JSON.stringify(sections());
+	}
+
+	res.set({
+		'Content-Type': 'application/json',
+		'Cache-Control': `max-age=${30 * 60 * 1e3}` // 30 minutes
+	});
+	res.end(json);
+}

site/src/routes/guide/index.svelte

@@ -0,0 +1 @@
+TODO

site/src/routes/index.svelte

@@ -0,0 +1,70 @@
+<script>
+	import { Hero, Blurb } from '@sveltejs/site-kit';
+</script>
+
+<style>
+
+</style>
+
+<svelte:head>
+	<title>Sapper • The next small thing in web development</title>
+</svelte:head>
+
+<Hero
+	title="Sapper"
+	tagline="The next small thing in web development"
+	outline="sapper-logo-outline.svg"
+	logotype="sapper-logotype.svg"
+/>
+
+<Blurb>
+	<a href="https://svelte.dev" slot="one">
+		<h2>Powered by Svelte</h2>
+		<p>Sapper is an application framework powered by Svelte — build bigger apps with a smaller footprint</p>
+
+		<span class="learn-more">learn more</span>
+	</a>
+
+	<a href="TKTK" slot="two">
+		<h2>Best of both worlds</h2>
+		<p>All the SEO and progressive enhancement of a server-rendered app, with the slick navigation of an SPA</p>
+
+		<span class="learn-more">learn more</span>
+	</a>
+
+	<a href="TKTK" slot="three">
+		<h2>Build fast</h2>
+		<p>Hit the ground running with advanced routing, server-side rendering, code-splitting, offline support and more</p>
+
+		<span class="learn-more">learn more</span>
+	</a>
+
+	<!-- <a href="TKTK" slot="three">
+		<h2>Works everywhere</h2>
+		<p>Deploy as a cloud function or a traditional Node.js app, or export your app as a collection of static files</p>
+
+		<span class="learn-more">learn more</span>
+	</a> -->
+
+	<div class="description" slot="what">
+		<p>Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.</p>
+
+		<p>Unlike single-page apps, Sapper doesn't compromise on SEO, progressive enhancement or the initial load experience — but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel.</p>
+
+		<p><a href="https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework">Read the introductory blog post</a> to learn more.</p>
+	</div>
+
+	<div style="grid-area: start; display: flex; flex-direction: column; min-width: 0" slot="how">
+		<pre class="language-bash" style="margin: 0 0 1em 0; min-width: 0; min-height: 0">
+npx degit sveltejs/template my-svelte-project
+cd my-svelte-project
+
+npm install
+npm run dev & open http://localhost:5000
+		</pre>
+
+		<p style="flex: 1">See the <a href="blog/the-easiest-way-to-get-started">quickstart guide</a> for more information.</p>
+
+		<p class="cta"><a rel="prefetch" href="tutorial">Learn Svelte</a></p>
+	</div>
+</Blurb>