Added basic post creation.

pages/s/@id/index.page.server.js

@@ -0,0 +1,29 @@
+import { RenderErrorPage } from 'vite-plugin-ssr/RenderErrorPage';
+import { fetchShelf } from '../../../src/shelves';
+import { fetchShelfPosts } from '../../../src/posts';
+
+async function onBeforeRender(pageContext) {
+	const shelf = await fetchShelf(pageContext.routeParams.id);
+	const posts = await fetchShelfPosts(pageContext.routeParams.id, { limit: 50 });
+
+	if (!shelf) {
+		throw RenderErrorPage({
+			pageContext: {
+				pageProps: {
+					errorInfo: 'No shelf with this name exists',
+				},
+			},
+		});
+	}
+
+	return {
+		pageContext: {
+			pageData: {
+				shelf,
+				posts,
+			},
+		},
+	};
+}
+
+export { onBeforeRender };

pages/s/@id/index.page.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class="content">
+		<a
+			href="/"
+			class="link"
+		>Go back home</a>
+
+		<h3>{{ shelf.slug }}</h3>
+
+		<ul class="posts nolist">
+			<li
+				v-for="post in posts"
+				:key="post.id"
+			><Post :post="post" /></li>
+		</ul>
+
+		<form
+			class="form compose"
+			@submit.prevent="submitPost"
+		>
+			<div class="form-row">
+				<input
+					v-model="title"
+					placeholder="Title"
+					class="input"
+				>
+			</div>
+
+			<div class="form-row">
+				<input
+					v-model="link"
+					class="input"
+					placeholder="Link"
+				>
+			</div>
+
+			<div class="form-row">
+				<textarea
+					v-model="body"
+					placeholder="Body"
+					class="input body"
+				/>
+			</div>
+
+			<div class="form-actions">
+				<button class="button button-submit">Post</button>
+			</div>
+		</form>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Post from '../../../components/posts/post.vue';
+
+import * as api from '../../../assets/js/api';
+import { usePageContext } from '../../../renderer/usePageContext';
+
+const { pageData, routeParams } = usePageContext();
+
+const {
+	shelf,
+	posts,
+} = pageData;
+
+const title = ref();
+const link = ref();
+const body = ref();
+
+async function submitPost() {
+	await api.post(`/api/shelves/${routeParams.id}/posts`, {
+		title: title.value,
+		link: link.value,
+		body: body.value,
+	});
+}
+</script>
+
+<style scoped>
+.posts {
+	margin-bottom: 1rem;
+}
+</style>