Added basic post creation.

pages/account/login.page.vue

@@ -33,21 +33,24 @@
 				</div>
 			</div>
 
-			<!--
 			<div
-				v-if="$config.public.captchaEnabled"
+				v-if="config.captchaEnabled"
 				class="form-row captcha"
 			>
 				<VueHcaptcha
-					:sitekey="$config.public.captchaKey"
+					:sitekey="config.captchaKey"
 					@verify="(token) => captchaToken = token"
 					@expired="() => captchaToken = null"
 					@error="() => captchaToken = null"
 				/>
 			</div>
-			-->
 
 			<div class="form-row form-actions">
+				<a
+					href="/account/create"
+					class="link"
+				>Sign up</a>
+
 				<button
 					:disabled="!username || !password"
 					class="button button-submit"
@@ -59,11 +62,13 @@
 
 <script setup>
 import { ref } from 'vue';
-// import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
 import { post } from '../../assets/js/api';
 import navigate from '../../assets/js/navigate';
 
+const config = CONFIG;
+
 const username = ref('');
 const password = ref('');
 
@@ -78,7 +83,7 @@ async function signup() {
 
 		navigate('/');
 	} catch (error) {
-		errorMsg.value = error.statusMessage;
+		errorMsg.value = error.message;
 	}
 }
 </script>
@@ -137,6 +142,7 @@ async function signup() {
 }
 
 .form-actions {
-	justify-content: center;
+	justify-content: space-between;
+	align-items: center;
 }
 </style>

pages/index/index.page.server.js

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

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>