set up initial styling and structure

src/routes/projects/[slug].json.js

@@ -0,0 +1,28 @@
+import posts from './_posts.js';
+
+const lookup = new Map();
+posts.forEach(post => {
+	lookup.set(post.slug, JSON.stringify(post));
+});
+
+export function get(req, res, next) {
+	// the `slug` parameter is available because
+	// this file is called [slug].json.js
+	const { slug } = req.params;
+
+	if (lookup.has(slug)) {
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(lookup.get(slug));
+	} else {
+		res.writeHead(404, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: `Not found`
+		}));
+	}
+}

src/routes/projects/[slug].svelte

@@ -0,0 +1,64 @@
+<script context="module">
+	export async function preload({ params }) {
+		// the `slug` parameter is available because
+		// this file is called [slug].svelte
+		const res = await this.fetch(`projects/${params.slug}.json`);
+		const data = await res.json();
+
+		if (res.status === 200) {
+			return { post: data };
+		} else {
+			this.error(res.status, data.message);
+		}
+	}
+</script>
+
+<script>
+	export let post;
+</script>
+
+<style>
+	/*
+		By default, CSS is locally scoped to the component,
+		and any unused styles are dead-code-eliminated.
+		In this page, Svelte can't know which elements are
+		going to appear inside the {{{post.html}}} block,
+		so we have to use the :global(...) modifier to target
+		all elements inside .content
+	*/
+	.content :global(h2) {
+		font-size: 1.4em;
+		font-weight: 500;
+	}
+
+	.content :global(pre) {
+		background-color: #f9f9f9;
+		box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
+		padding: 0.5em;
+		border-radius: 2px;
+		overflow-x: auto;
+	}
+
+	.content :global(pre) :global(code) {
+		background-color: transparent;
+		padding: 0;
+	}
+
+	.content :global(ul) {
+		line-height: 1.5;
+	}
+
+	.content :global(li) {
+		margin: 0 0 0.5em 0;
+	}
+</style>
+
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>
+
+<h1>{post.title}</h1>
+
+<div class="content">
+	{@html post.html}
+</div>

src/routes/projects/_posts.js

@@ -0,0 +1,59 @@
+// Ordinarily, you'd generate this data from markdown files in your
+// repo, or fetch them from a database of some kind. But in order to
+// avoid unnecessary dependencies in the starter template, and in the
+// service of obviousness, we're just going to leave it here.
+
+// This file is called `_posts.js` rather than `posts.js`, because
+// we don't want to create an `/projects/posts` route — the leading
+// underscore tells Sapper not to do that.
+
+const posts = [
+	{
+		title: 'WompMacho.com',
+		slug: 'this-website',
+		html: `
+			<h3>About This Site goes here</h3>
+		`
+	},
+	{
+		title: 'Django Site',
+		slug: 'django',
+		html: `
+			<h3>About Django Site goes here</h3>
+		`
+	},
+	{
+		title: 'Tuner',
+		slug: 'tuner',
+		html: `
+			<h3>About Tuner JS goes here</h3>
+		`
+	},
+	{
+		title: 'Sound Visualizer',
+		slug: 'sound-visualizer',
+		html: `
+			<h3>About Sound Visualizer JS goes here</h3>
+		`
+	},
+	{
+		title: 'Fractal Tree App',
+		slug: 'fractal-tree-java-applet',
+		html: `
+			<h3>About Fractal Tree Java Applet App goes here</h3>
+		`
+	},
+	{
+		title: 'Wompchat Chrome Extension',
+		slug: 'wompchat',
+		html: `
+			<h3>About Wompchat Chrome Extension goes here</h3>
+		`
+	}
+];
+
+posts.forEach(post => {
+	post.html = post.html.replace(/^\t{3}/gm, '');
+});
+
+export default posts;

src/routes/projects/index.json.js

@@ -0,0 +1,16 @@
+import posts from './_posts.js';
+
+const contents = JSON.stringify(posts.map(post => {
+	return {
+		title: post.title,
+		slug: post.slug
+	};
+}));
+
+export function get(req, res) {
+	res.writeHead(200, {
+		'Content-Type': 'application/json'
+	});
+
+	res.end(contents);
+}

src/routes/projects/index.svelte

@@ -0,0 +1,34 @@
+<script context="module">
+	export function preload() {
+		return this.fetch(`projects.json`).then(r => r.json()).then(posts => {
+			return { posts };
+		});
+	}
+</script>
+
+<script>
+	export let posts;
+</script>
+
+<style>
+	ul {
+		margin: 0 0 1em 0;
+		line-height: 1.5;
+	}
+</style>
+
+<svelte:head>
+	<title>Projects</title>
+</svelte:head>
+
+<h1>Past Projects</h1>
+
+<ul>
+	{#each posts as post}
+		<!-- we're using the non-standard `rel=prefetch` attribute to
+				tell Sapper to load the data for the page as soon as
+				the user hovers over the link or taps it, instead of
+				waiting for the 'click' event -->
+		<li><a rel="prefetch" href="projects/{post.slug}">{post.title}</a></li>
+	{/each}
+</ul>