135 lines
3.5 KiB
Vue
135 lines
3.5 KiB
Vue
<template>
|
|
<Layout>
|
|
<header class="site-header outer no-image">
|
|
<div class="inner">
|
|
<Navbar :logo=true />
|
|
<div class="site-header-content">
|
|
<img v-if="$page.author.image" class="author-profile-image" :src="$page.author.image" :alt="$page.author.name" />
|
|
<h1 class="site-title"> {{ $page.author.name }} </h1>
|
|
<h2 v-if="bio = true" class="author-bio">{{ $page.author.bio }}</h2>
|
|
<div class="author-meta">
|
|
|
|
<div v-if="location = true" class="author-location">{{ $page.author.location }}
|
|
<span class="bull">•</span>
|
|
</div>
|
|
|
|
<div class="author-stats">
|
|
{{ numberofPosts }}
|
|
<span class="bull">•</span>
|
|
</div>
|
|
|
|
<a v-if="$page.author.website" class="social-link social-link-wb" :href="$page.author.website" target="_blank" rel="noopener">
|
|
<WebsiteIcon />
|
|
</a>
|
|
|
|
<a v-if="$page.author.twitter" class="social-link social-link-tw" :href="'https://www.twitter.com/' + $page.author.twitter" target="_blank" rel="noopener">
|
|
<TwitterIcon />
|
|
</a>
|
|
|
|
<a v-if="$page.author.facebook" class="social-link social-link-fb" :href="'https://www.facebook.com/' + $page.author.facebook" target="_blank" rel="noopener">
|
|
<FacebookIcon />
|
|
</a>
|
|
|
|
<!-- NOTE Gridsome doesn't support RSS feed yet -->
|
|
<!-- <a class="social-link social-link-rss" href="" target="_blank" rel="noopener">
|
|
<RSSIcon />
|
|
</a> -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- The main content area -->
|
|
<main id="site-main" class="site-main outer">
|
|
<div class="inner">
|
|
|
|
<div class="post-feed">
|
|
<Card v-for="{ node } in $page.author.belongsTo.edges" :key="node.id" :cardData="node" />
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
</Layout>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import Navbar from '../components/Navbar';
|
|
import Card from '../components/Card';
|
|
|
|
// Icons
|
|
import WebsiteIcon from '../components/icons/Website';
|
|
import TwitterIcon from '../components/icons/Twitter';
|
|
import FacebookIcon from '../components/icons/Facebook';
|
|
import RSSIcon from '../components/icons/RSS';
|
|
|
|
import { Pager } from 'gridsome'
|
|
|
|
export default {
|
|
metaInfo() {
|
|
return {
|
|
title: this.$page.author.name,
|
|
bodyAttrs: {
|
|
class: `author-template`
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
// Components
|
|
Navbar, Card,
|
|
// Icons
|
|
WebsiteIcon, TwitterIcon, FacebookIcon, RSSIcon, Pager
|
|
},
|
|
computed: {
|
|
numberofPosts() {
|
|
let count = this.$page.author.belongsTo.edges.length
|
|
if (count == 1) {
|
|
return `${count} post`
|
|
} else if (count >= 2) {
|
|
return `${count} posts`
|
|
} else {
|
|
return 'No posts'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
|
|
</style>
|
|
|
|
<page-query>
|
|
query Author ($id: String!) {
|
|
author (id: $id) {
|
|
name
|
|
image
|
|
bio
|
|
location
|
|
website
|
|
twitter
|
|
facebook
|
|
belongsTo {
|
|
edges {
|
|
node {
|
|
...on Post {
|
|
id
|
|
title
|
|
author {
|
|
id
|
|
name
|
|
image
|
|
}
|
|
path
|
|
image
|
|
content
|
|
timeToRead
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</page-query> |