Added voting. Improved comments.

pages/posts/post.page.route.js

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

pages/posts/post.page.server.js

@@ -1,33 +1,20 @@
-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),
+		fetchShelf(pageContext.routeParams.shelfId),
+		fetchPost(pageContext.routeParams.postId, pageContext.session.user),
 		fetchPostComments(pageContext.routeParams.postId),
 	]);
 
 	if (!shelf) {
-		throw RenderErrorPage({
-			pageContext: {
-				pageProps: {
-					errorInfo: 'This shelf does not exist',
-				},
-			},
-		});
+		throw new Error('This shelf does not exist');
 	}
 
 	if (!post) {
-		throw RenderErrorPage({
-			pageContext: {
-				pageProps: {
-					errorInfo: 'This post does not exist',
-				},
-			},
-		});
+		throw new Error('This post does not exist');
 	}
 
 	return {

pages/posts/post.page.vue

@@ -1,28 +1,46 @@
 <template>
 	<div class="page">
-		<div class="body">
-			<Post :post="post" />
+		<div class="content">
+			<Post
+				:post="post"
+				:shelf="shelf"
+			/>
 
-			<form
-				class="writer"
-				@submit.prevent="addComment"
+			<p
+				v-if="post.body"
+				class="body"
+			>{{ post.body }}</p>
+
+			<Writer
+				v-if="me"
+				:post="post"
+			/>
+
+			<div
+				v-else
+				class="body"
 			>
-				<textarea
-					v-model="newComment"
-					placeholder="Write a new comment"
-					class="input"
-				/>
-
-				<div class="actions">
-					<button class="button">Comment</button>
-				</div>
-			</form>
+				<a
+					href="/account/login"
+					class="link"
+				>Log in</a> or
+				<a
+					href="/account/create"
+					class="link"
+				>sign up</a> to comment
+			</div>
 
 			<ul class="comments nolist">
 				<li
 					v-for="comment in comments"
 					:key="comment.id"
-				><Comment :comment="comment" /></li>
+				>
+					<Comment
+						:comment="comment"
+						:post="post"
+						:shelf="shelf"
+					/>
+				</li>
 			</ul>
 		</div>
 
@@ -33,70 +51,46 @@
 </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 Writer from '../../components/comments/writer.vue';
 
 import { usePageContext } from '../../renderer/usePageContext';
 
-const { pageData } = usePageContext();
+const { me, 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;
+}
+
+.content {
+	flex-grow: 1;
+}
+
+.body {
+	box-sizing: border-box;
+	padding: 1rem;
+	border-radius: .5rem;
+	margin: 0 0 .5rem 0;
+	background: var(--background);
 }
 
 .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;