Commit 7138d7b1 authored by Yashu Mittal's avatar Yashu Mittal 👍🏻

Create author and tags template

parent 55b768f5
<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">&bull;</span>
</div>
<div class="author-stats">
{{ numberofPosts }}
<span class="bull">&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">
<!-- FIXME Filter posts based on author name -->
<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
date
author {
id
name
image
}
path
image
content
timeToRead
}
}
}
}
}
}
</page-query>
\ No newline at end of file
<template>
<Layout>
<header class="site-header outer no-image">
<div class="inner">
<Navbar :logo="true"/>
<div class="site-header-content">
<h1 class="site-title">{{ $page.tag.title.replace('-', ' ') | capitalizeFilter }}</h1>
<h2 class="site-description">A collection of {{ $page.tag.belongsTo.edges.length }} posts</h2>
</div>
</div>
</header>
<main id="site-main" class="site-main outer">
<div class="inner">
<div class="post-feed">
<Card v-for="{ node } in $page.tag.belongsTo.edges" :key="node.id" :cardData="node"/>
</div>
</div>
</main>
</Layout>
</template>
<script>
import Admin from "../../data/admin.yml";
import Navbar from "../components/Navbar";
import Card from "../components/Card";
import capitalizeFilter from "../filters/capitalize";
export default {
metaInfo() {
return {
title: this.$page.tag.title,
bodyAttrs: {
class: `tag-template tag-${this.$page.tag.title}`
}
};
},
components: {
Navbar,
Card
},
computed: {
Admin() {
return Admin;
},
postClass() {
let classes = ["post-full", "post"];
if (!this.$page.post.image) {
classes.push("no-image");
}
const postTagClass = "tag-" + this.$page.post.tags.title;
classes.push(postTagClass);
return classes;
}
},
filters: {
capitalizeFilter
}
};
</script>
<page-query>
query Tags ($id: String!) {
tag (id: $id) {
title
belongsTo {
edges {
node {
...on Post {
id
title
date
path
image
author {
id
name
image
}
content
timeToRead
}
}
}
}
}
}
</page-query>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment