92 lines
No EOL
1.6 KiB
Vue
92 lines
No EOL
1.6 KiB
Vue
<template>
|
|
<Layout>
|
|
<div class="post-title">
|
|
<h1 class="post-title__text"> {{ $page.post.title }} </h1>
|
|
<PostMeta :post="$page.post" />
|
|
</div>
|
|
|
|
<div class="post content-box">
|
|
<div class="post__header">
|
|
<!-- Add anything here. Like a featured image -->
|
|
</div>
|
|
<p v-if="$page.post.excerpt" class="post__excerpt" v-html="$page.post.excerpt" />
|
|
<div class="post__content" v-html="$page.post.content" />
|
|
<div class="post__footer">
|
|
<!-- Add anything here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-comments">
|
|
<!-- Add comment widgets here -->
|
|
</div>
|
|
|
|
<Author class="post-author" />
|
|
</Layout>
|
|
</template>
|
|
|
|
<script>
|
|
import PostMeta from '~/components/PostMeta'
|
|
import Author from '~/components/Author.vue'
|
|
|
|
export default {
|
|
components: {
|
|
Author,
|
|
PostMeta
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<page-query>
|
|
query Post ($path: String!) {
|
|
post: post (path: $path) {
|
|
title
|
|
path
|
|
date (format: "D. MMMM YYYY")
|
|
timeToRead
|
|
excerpt
|
|
content
|
|
}
|
|
}
|
|
</page-query>
|
|
|
|
<style lang="scss">
|
|
|
|
.post-title {
|
|
padding: calc(var(--space) / 2) 0 var(--space);
|
|
text-align: center;
|
|
}
|
|
|
|
.post {
|
|
|
|
&__header {
|
|
width: calc(100% + var(--space) * 2);
|
|
margin-left: calc(var(--space) * -1);
|
|
margin-top: calc(var(--space) * -1);
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__excerpt {
|
|
font-size: 1.2em;
|
|
color: var(--title-color);
|
|
}
|
|
|
|
img {
|
|
width: calc(100% + var(--space) * 2);
|
|
margin-left: calc(var(--space) * -1);
|
|
}
|
|
}
|
|
|
|
.post-comments {
|
|
padding: calc(var(--space) / 2);
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.post-author {
|
|
margin-top: calc(var(--space) / 2);
|
|
}
|
|
</style> |