shack/pages/posts/post.page.vue

87 lines
1.3 KiB
Vue

<template>
<Shelf :shelf="shelf">
<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>
</Shelf>
</template>
<script setup>
import Shelf from '../../templates/shelves/shelf.vue';
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>
.content {
padding: 0;
}
.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;
}
</style>