2019-12-05 06:46:19 -05:00
|
|
|
<template>
|
|
|
|
<!-- Links to Previous/Next posts -->
|
|
|
|
<aside class="read-next outer">
|
|
|
|
<div class="inner">
|
|
|
|
<div class="read-next-feed">
|
|
|
|
<article
|
2019-12-18 08:54:22 -05:00
|
|
|
v-if="posts.length > 1"
|
2019-12-05 06:46:19 -05:00
|
|
|
class="read-next-card"
|
|
|
|
:style="'background-image: url(' + Admin.site.cover_image + ')'"
|
|
|
|
>
|
|
|
|
<header class="read-next-card-header">
|
|
|
|
<small class="read-next-card-header-sitetitle">— {{ Admin.site.title }} —</small>
|
|
|
|
<h3 class="read-next-card-header-title">
|
2019-12-18 09:05:48 -05:00
|
|
|
<a :href="this.tag.path">{{ this.tag.title.replace('-', ' ') | capitalizeFilter }}</a>
|
2019-12-05 06:46:19 -05:00
|
|
|
</h3>
|
|
|
|
</header>
|
|
|
|
<div class="read-next-divider">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
|
|
<path
|
|
|
|
d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"
|
|
|
|
></path>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
<div class="read-next-card-content">
|
|
|
|
<ul>
|
2019-12-18 08:54:22 -05:00
|
|
|
<li v-for="post in posts.slice(0, 3)"
|
|
|
|
:key="post.node.id">
|
2019-12-24 03:36:14 -05:00
|
|
|
<a :href="post.node.path">
|
|
|
|
<b v-if="post.node.id == currentPostId">{{ post.node.title }}</b>
|
|
|
|
<template v-else>{{ post.node.title }}</template>
|
|
|
|
</a>
|
2019-12-05 06:46:19 -05:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<footer class="read-next-card-footer">
|
2019-12-18 08:54:22 -05:00
|
|
|
<a :href="this.tag.path">See all {{ posts.length }} posts →</a>
|
2019-12-05 06:46:19 -05:00
|
|
|
</footer>
|
|
|
|
</article>
|
|
|
|
<Card
|
|
|
|
v-for="PreviousNexts in this.PreviousNexts"
|
|
|
|
:key="PreviousNexts.id"
|
|
|
|
:cardData="PreviousNexts"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Card from "./Card";
|
|
|
|
import Admin from "../../data/admin.yml";
|
|
|
|
import capitalizeFilter from "../filters/capitalize";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
currentPostId: this.id,
|
|
|
|
PreviousNexts: []
|
|
|
|
};
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
id: {
|
|
|
|
type: String
|
|
|
|
},
|
|
|
|
tag: {
|
2019-12-18 09:05:48 -05:00
|
|
|
type: Object
|
2019-12-05 06:46:19 -05:00
|
|
|
},
|
|
|
|
posts: {
|
|
|
|
type: Array
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
Card
|
|
|
|
},
|
|
|
|
filters: {
|
|
|
|
capitalizeFilter
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.getPreviousNext();
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
Admin() {
|
|
|
|
return Admin;
|
|
|
|
},
|
|
|
|
tagPosts() {
|
|
|
|
const allTagPosts = this.$static.allTag.edges;
|
|
|
|
console.log(allTagPosts);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getPreviousNext() {
|
2020-03-15 05:35:22 -04:00
|
|
|
this.PreviousNexts = []
|
2019-12-18 08:54:22 -05:00
|
|
|
const allBlogs = this.$static.allGhostPost.edges;
|
2019-12-05 06:46:19 -05:00
|
|
|
for (let i = 0; i < allBlogs.length; i++) {
|
|
|
|
if (allBlogs[i].node.id === this.currentPostId) {
|
|
|
|
if (i > 0) {
|
|
|
|
this.PreviousNexts.push(allBlogs[i - 1].node);
|
|
|
|
}
|
2019-12-24 04:46:33 -05:00
|
|
|
if (allBlogs.length -1 > i) {
|
2019-12-05 06:46:19 -05:00
|
|
|
this.PreviousNexts.push(allBlogs[i + 1].node);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-03-15 05:35:22 -04:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
id: function(val) {
|
|
|
|
console.log('Updating PreviousNext')
|
|
|
|
this.currentPostId = val
|
|
|
|
this.getPreviousNext()
|
|
|
|
}
|
2019-12-05 06:46:19 -05:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<static-query>
|
|
|
|
query Blog {
|
2019-12-18 08:54:22 -05:00
|
|
|
allGhostPost(order: ASC) {
|
2019-12-05 06:46:19 -05:00
|
|
|
edges {
|
|
|
|
node {
|
2019-12-18 08:54:22 -05:00
|
|
|
title
|
|
|
|
description: excerpt
|
|
|
|
date: published_at (format: "D. MMMM YYYY")
|
|
|
|
path
|
|
|
|
slug
|
2019-12-05 06:46:19 -05:00
|
|
|
id
|
2019-12-18 08:54:22 -05:00
|
|
|
coverImage: feature_image
|
|
|
|
authors {
|
|
|
|
name
|
|
|
|
url
|
|
|
|
slug
|
|
|
|
image: profile_image
|
|
|
|
}
|
|
|
|
tags {
|
|
|
|
name
|
|
|
|
}
|
2019-12-05 06:46:19 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-12-18 08:54:22 -05:00
|
|
|
</static-query>
|