shack/pages/shelves/shelf.page.vue

<template>
	<Shelf :shelf="shelf">
		<ul class="posts nolist">
			<li
				v-for="post in posts"
				:key="post.id"
				class="post-item"
			>
				<Post
					:post="post"
					:shelf="shelf"
				/>
			</li>
		</ul>
	</Shelf>
</template>

<script setup>
import Shelf from '../../templates/shelves/shelf.vue';
import Post from '../../components/posts/post.vue';

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

const { pageData } = usePageContext();

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

<style scoped>
.posts {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
}

.post-item {
	width: 100%;
}
</style>