shack/pages/posts/post.page.vue

<template>
	<div class="page">
		<div class="content">
			<Post
				:post="post"
				:shelf="shelf"
			/>

			<p
				v-if="post.body"
				class="body"
			>{{ post.body }}</p>

			<Writer
				v-if="me"
				:post="post"
			/>

			<div
				v-else
				class="body"
			>
				<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"
						:post="post"
						:shelf="shelf"
					/>
				</li>
			</ul>
		</div>

		<div class="sidebar">
			{{ shelf.name }}
		</div>
	</div>
</template>

<script setup>
import Post from '../../components/posts/post.vue';
import Comment from '../../components/comments/comment.vue';
import Writer from '../../components/comments/writer.vue';

import { usePageContext } from '../../renderer/usePageContext';

const { me, pageData } = usePageContext();

const {
	shelf,
	post,
	comments,
} = pageData;
</script>

<style scoped>
.page {
	display: flex;
}

.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;
}

.post {
	margin-bottom: .5rem;
}

.sidebar {
	background: var(--background);
	width: 20rem;
	padding: .5rem;
	border-radius: .5rem;
	margin-left: .5rem;
}
</style>