start working on more stuff

.config/configstore/update-notifier-npm.json

@@ -1,4 +1,4 @@
 {
 	"optOut": false,
 	"lastUpdateCheck": 1637023433567
-}
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnSave": true,
+	"[typescript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	}
+}

src/app.css

@@ -31,4 +31,5 @@ button {
 	font-size: inherit;
 	border-radius: 0.25em;
 	padding: 0.1em 0.5em;
+	cursor: pointer;
 }

src/lib/BlogPost.svelte

@@ -1,6 +1,2 @@
 <script lang="ts">
-	
 </script>
-
-
-

src/posts/test.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-
-</script>
-
-<BlogPost>
-here's the content. this post has a lot of words so i can make sure it actually works.
-
-Lorem ea consectetur eu aute amet eu dolor magna nisi sunt. Reprehenderit culpa cupidatat enim sit nostrud cupidatat sunt eu enim cupidatat non qui nostrud do culpa. Commodo velit anim ex enim fugiat voluptate. Exercitation nostrud cillum laborum duis enim commodo irure pariatur irure aute non culpa. Elit veniam aute laborum non magna.
-
-Aute labore cupidatat nostrud dolore nulla incididunt culpa adipisicing occaecat exercitation. Est laborum quis aliqua consequat non mollit pariatur tempor culpa mollit do veniam officia voluptate cillum labore. Labore reprehenderit enim excepteur ad anim voluptate.
-
-Aute mollit pariatur lorem ea dolore fugiat anim excepteur lorem aliquip aliqua quis commodo voluptate dolor nulla. Dolor duis tempor nisi aute qui qui. Eiusmod anim aliqua cupidatat excepteur eu id aliqua lorem eu amet officia consequat proident. Sit aliquip pariatur cillum tempor quis ex lorem exercitation occaecat. Mollit quis ex eiusmod id ad labore velit et lorem lorem ex et excepteur esse ex aliquip laborum amet.
-
-Excepteur adipisicing do ipsum aliqua. Do mollit minim ut lorem aliquip minim amet enim adipisicing ipsum quis. Proident excepteur labore labore nulla exercitation amet est est consequat excepteur sit enim irure pariatur dolore labore minim irure.
-</BlogPost>

src/routes/blog/index.svelte

@@ -0,0 +1,2 @@
+<script lang="ts">
+</script>

src/routes/blog/post/[slug].svelte

@@ -0,0 +1,20 @@
+<script lang="ts" context="module">
+	import type { Load } from '@sveltejs/kit'
+
+	export const get: Load = async ({ page }) => {
+		// the `slug` parameter is available because this file
+		// is called [slug].json.js
+		const { slug } = page.params
+
+		return {
+			props: { slug },
+		}
+	}
+</script>
+
+<script lang="ts">
+	export let slug: string
+
+	import type { SvelteComponent } from 'svelte'
+	import Post from '$lib/posts/' + slug
+</script>

src/routes/index.svelte

@@ -16,7 +16,7 @@
 			<a href="//github.com/mat-1"><img src="/github.svg" class="icon" /></a>
 			<a href="//twitter.com/mat1"><img src="/twitter.svg" class="icon" /></a>
 		</div>
-		
+
 		<p>I'm mat, I do full-stack software development.</p>
 		<p>This portfolio contains my blog posts and links to some of the projects I've made.</p>
 		<div class="button-row">
@@ -47,26 +47,26 @@
 		font-weight: normal;
 	}
 	h1:first-letter {
-		text-shadow: 0 0 .15em var(--text-color);
+		text-shadow: 0 0 0.15em var(--text-color);
 	}
 	p {
 		margin: 0.25em;
 	}
 	.button-row {
 		width: fit-content;
-		margin: .5em auto;
+		margin: 0.5em auto;
 		display: flex;
-		gap: .5em
+		gap: 0.5em;
 	}
 	.icon {
 		height: 1em;
-		opacity: .5;
+		opacity: 0.5;
 	}
 	.icon:hover {
-		opacity: .9;
-		transition: opacity 500ms
+		opacity: 0.9;
+		transition: opacity 500ms;
 	}
 	.social-media-row {
-		font-size: 1.25em
+		font-size: 1.25em;
 	}
 </style>