Added basic comments.

pages/posts/post.page.route.js

@@ -0,0 +1 @@
+export default '/s/@id/post/@postId';

pages/posts/post.page.server.js

@@ -0,0 +1,40 @@
+import { RenderErrorPage } from 'vite-plugin-ssr/RenderErrorPage';
+import { fetchShelf } from '../../src/shelves';
+import { fetchPost } from '../../src/posts';
+import { fetchPostComments } from '../../src/comments';
+
+async function getPageData(pageContext) {
+	const [shelf, post, comments] = await Promise.all([
+		fetchShelf(pageContext.routeParams.id),
+		fetchPost(pageContext.routeParams.postId),
+		fetchPostComments(pageContext.routeParams.postId),
+	]);
+
+	if (!shelf) {
+		throw RenderErrorPage({
+			pageContext: {
+				pageProps: {
+					errorInfo: 'This shelf does not exist',
+				},
+			},
+		});
+	}
+
+	if (!post) {
+		throw RenderErrorPage({
+			pageContext: {
+				pageProps: {
+					errorInfo: 'This post does not exist',
+				},
+			},
+		});
+	}
+
+	return {
+		shelf,
+		post,
+		comments,
+	};
+}
+
+export { getPageData };

pages/posts/post.page.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="page">
+		<div class="body">
+			<Post :post="post" />
+
+			<form
+				class="writer"
+				@submit.prevent="addComment"
+			>
+				<textarea
+					v-model="newComment"
+					placeholder="Write a new comment"
+					class="input"
+				/>
+
+				<div class="actions">
+					<button class="button">Comment</button>
+				</div>
+			</form>
+
+			<ul class="comments nolist">
+				<li
+					v-for="comment in comments"
+					:key="comment.id"
+				><Comment :comment="comment" /></li>
+			</ul>
+		</div>
+
+		<div class="sidebar">
+			{{ shelf.name }}
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Post from '../../components/posts/post.vue';
+import Comment from '../../components/comments/comment.vue';
+import * as api from '../../assets/js/api';
+import { reload } from '../../assets/js/navigate';
+
+import { usePageContext } from '../../renderer/usePageContext';
+
+const { pageData } = usePageContext();
+
+const {
+	shelf,
+	post,
+	comments,
+} = pageData;
+
+const newComment = ref('');
+
+async function addComment() {
+	await api.post(`/posts/${post.id}/comments`, {
+		body: newComment.value,
+		parentId: null,
+	});
+
+	reload();
+}
+</script>
+
+<style scoped>
+.page {
+	display: flex;
+	padding: .5rem;
+}
+
+.title {
+	margin: 0 0 .5rem 0;
+}
+
+.body {
+	flex-grow: 1;
+}
+
+.post {
+	margin-bottom: .5rem;
+}
+
+.writer {
+	width: 40rem;
+	background: var(--background);
+	padding: .5rem;
+	border-radius: .5rem;
+	margin-bottom: .5rem;
+
+	.input {
+		width: 100%;
+		margin-bottom: .25rem;
+	}
+
+	.actions {
+		display: flex;
+		justify-content: flex-end;
+	}
+}
+
+.sidebar {
+	background: var(--background);
+	width: 20rem;
+	padding: .5rem;
+	border-radius: .5rem;
+	margin-left: .5rem;
+}
+</style>