16bcaaf54b
Images can now go directly to media.snipettemag.com instead of being routed through the private Ghost instance. (Reduces traffic on that node).
144 lines
3.8 KiB
Vue
144 lines
3.8 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|changeUrls" :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="$page.author.location" 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';
|
|
|
|
// Filters
|
|
import changeUrls from '../filters/changeUrls';
|
|
|
|
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
|
|
},
|
|
filters: {
|
|
changeUrls: changeUrls
|
|
},
|
|
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 ($path: String!) {
|
|
author: ghostAuthor (path: $path) {
|
|
name
|
|
image: profile_image
|
|
bio
|
|
website
|
|
belongsTo {
|
|
edges {
|
|
node {
|
|
...on GhostPost {
|
|
title
|
|
description: excerpt
|
|
date: published_at (format: "D. MMMM YYYY")
|
|
path
|
|
slug
|
|
id
|
|
coverImage: feature_image
|
|
authors {
|
|
name
|
|
url
|
|
slug
|
|
image: profile_image
|
|
}
|
|
tags {
|
|
name
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</page-query>
|