Added basic comments.

pages/account/create.page.vue

@@ -104,7 +104,7 @@ const errorMsg = ref(null);
 
 async function signup() {
 	try {
-		await post('/api/users', {
+		await post('/users', {
 			username: username.value,
 			email: email.value,
 			password: password.value,

pages/account/login.page.vue

@@ -76,7 +76,7 @@ const errorMsg = ref(null);
 
 async function signup() {
 	try {
-		await post('/api/session', {
+		await post('/session', {
 			username: username.value,
 			password: password.value,
 		});

pages/index/index.page.server.js

@@ -1,15 +1,11 @@
 import { fetchShelves } from '../../src/shelves';
 
-async function onBeforeRender(_pageContext) {
+async function getPageData() {
 	const shelves = await fetchShelves();
 
 	return {
-		pageContext: {
-			pageData: {
-				shelves,
-			},
-		},
+		shelves,
 	};
 }
 
-export { onBeforeRender };
+export { getPageData };

pages/index/index.page.vue

@@ -1,17 +1,12 @@
 <template>
 	<div class="content">
 		<ul>
-			<li><a
-				href="/shelf/1"
-				class="link"
-			>Go to shelf</a></li>
-
 			<li><a
 				href="/shelf/create"
 				class="link"
 			>Create new shelf</a></li>
 
-			<li><a
+			<li v-if="!user"><a
 				href="/account/login"
 				class="link"
 			>Log in</a></li>
@@ -37,6 +32,6 @@
 <script setup>
 import { usePageContext } from '../../renderer/usePageContext';
 
-const { pageData } = usePageContext();
+const { user, pageData } = usePageContext();
 const { shelves } = pageData;
 </script>

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>

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

@@ -2,7 +2,7 @@ import { RenderErrorPage } from 'vite-plugin-ssr/RenderErrorPage';
 import { fetchShelf } from '../../../src/shelves';
 import { fetchShelfPosts } from '../../../src/posts';
 
-async function onBeforeRender(pageContext) {
+async function getPageData(pageContext) {
 	const shelf = await fetchShelf(pageContext.routeParams.id);
 	const posts = await fetchShelfPosts(pageContext.routeParams.id, { limit: 50 });
 
@@ -17,13 +17,9 @@ async function onBeforeRender(pageContext) {
 	}
 
 	return {
-		pageContext: {
-			pageData: {
-				shelf,
-				posts,
-			},
-		},
+		shelf,
+		posts,
 	};
 }
 
-export { onBeforeRender };
+export { getPageData };

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

@@ -1,10 +1,5 @@
 <template>
 	<div class="content">
-		<a
-			href="/"
-			class="link"
-		>Go back home</a>
-
 		<h3>{{ shelf.slug }}</h3>
 
 		<ul class="posts nolist">

pages/shelf/create.page.vue

@@ -137,7 +137,7 @@ const postAccess = ref('registered');
 const isNsfw = ref(false);
 
 async function create() {
-	await post('/api/shelves', {
+	await post('/shelves', {
 		slug: slug.value,
 		title: title.value,
 		description: description.value,