init
This commit is contained in:
143
src/templates/Author.vue
Normal file
143
src/templates/Author.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-24">
|
||||
<div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
|
||||
<div class="w-full md:w-1/6 mx-auto sm:mx-0">
|
||||
<g-image
|
||||
:src="$page.author.image"
|
||||
class="rounded-full bg-gray-200 w-32 h-32 border-4 border-gray-400 mx-auto md:mx-0"
|
||||
></g-image>
|
||||
</div>
|
||||
<div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0">
|
||||
<h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">{{ $page.author.name }}</h1>
|
||||
<p class="text-gray-700 text-xl" v-if="$page.author.bio">{{ $page.author.bio }}</p>
|
||||
<div class="author-social">
|
||||
{{ $page.author.belongsTo.totalCount }} Projects
|
||||
·
|
||||
<!-- <a
|
||||
:href="$page.author.facebook"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-gray-400 hover:text-black"
|
||||
>
|
||||
<font-awesome :icon="['fab', 'facebook']" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
:href="$page.author.twitter"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-gray-400 hover:text-black"
|
||||
>
|
||||
<font-awesome :icon="['fab', 'twitter']" />
|
||||
</a>
|
||||
-->
|
||||
<a
|
||||
:href="$page.author.linkedin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-gray-400 hover:text-black"
|
||||
>
|
||||
<font-awesome :icon="['fab', 'linkedin']" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 border-b mx-4 sm:-mx-4"></div>
|
||||
|
||||
<section class="post-content container mx-auto relative font-serif text-gray-700">
|
||||
<div class="post-content-text text-xl" v-html="$page.author.content"></div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="pt-8 border-b mx-4 sm:-mx-4"></div>
|
||||
|
||||
<div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="edge in $page.author.belongsTo.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pagination flex justify-center mb-8">
|
||||
<Pagination
|
||||
:baseUrl="$page.author.path"
|
||||
:currentPage="$page.author.belongsTo.pageInfo.currentPage"
|
||||
:totalPages="$page.author.belongsTo.pageInfo.totalPages"
|
||||
:maxVisibleButtons="5"
|
||||
v-if="$page.author.belongsTo.pageInfo.totalPages > 1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
query($id: ID!, $page:Int) {
|
||||
author(id: $id) {
|
||||
name
|
||||
path
|
||||
bio
|
||||
image(width:150, height:150)
|
||||
facebook
|
||||
twitter
|
||||
linkedin
|
||||
content
|
||||
belongsTo(perPage: 5, page: $page) @paginate {
|
||||
totalCount
|
||||
pageInfo {
|
||||
totalPages
|
||||
currentPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
... on Blog {
|
||||
title
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
humanTime : created(format:"DD MMM YYYY")
|
||||
datetime : created
|
||||
category {
|
||||
id
|
||||
title
|
||||
}
|
||||
author {
|
||||
id
|
||||
name
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from "~/components/PostListItem.vue";
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
PostListItem
|
||||
},
|
||||
computed: {
|
||||
postLabel: function() {
|
||||
var pluralize = require("pluralize");
|
||||
return pluralize("post", this.$page.author.belongsTo.totalCount);
|
||||
}
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$page.author.name
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
189
src/templates/BlogPost.vue
Normal file
189
src/templates/BlogPost.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-20">
|
||||
<div class="lg:mx-32 md:mx-16 sm:mx-8 mx-4 pt-8">
|
||||
<section class="post-header container mx-auto px-0 mb-4 border-b">
|
||||
<span class="text-blue-500 font-medium uppercase tracking-wide text-sm">
|
||||
<g-link
|
||||
:to="$page.blog.category.path"
|
||||
class="hover:underline"
|
||||
>{{ $page.blog.category.title }}</g-link>
|
||||
</span>
|
||||
<h1 class="text-5xl font-medium leading-none mt-0">{{ $page.blog.title}}</h1>
|
||||
|
||||
<div class="text-2xl pt-4 pb-10 text-gray-700 font-serif" v-html="$page.blog.excerpt"></div>
|
||||
</section>
|
||||
<section class="post-author-list mb-10 mx-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<ul class="list-none flex author-list">
|
||||
<li v-for="author in $page.blog.author" :key="author.id" class="author-list-item">
|
||||
<g-link :to="author.path" v-tooltip="author.name">
|
||||
<g-image
|
||||
:src="author.image"
|
||||
:alt="author.name"
|
||||
class="h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-gray-200 border-2 border-white"
|
||||
/>
|
||||
</g-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pl-3 flex flex-col text-xs leading-none uppercase">
|
||||
<p>
|
||||
<span v-for="(author, index) in $page.blog.author" :key="author.id">
|
||||
<g-link
|
||||
:to="author.path"
|
||||
v-tooltip="author.name"
|
||||
class="hover:underline"
|
||||
>{{ author.name }}</g-link>
|
||||
<span v-if="index < $page.blog.author.length-1">,</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
<time :datetime="$page.blog.datetime">{{ $page.blog.humanTime }}</time>
|
||||
<!-- · {{ $page.blog.timeToRead }} min read -->
|
||||
·
|
||||
<time :datetime="$page.blog.datetime" >{{ $page.blog.startDate }}</time>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section class="post-image mx-auto w-full">
|
||||
<g-image :src="$page.blog.image"></g-image>
|
||||
</section>
|
||||
|
||||
<div class="lg:mx-32 md:mx-16 px-4 sm:px-0">
|
||||
<section class="post-content container mx-auto relative font-serif text-gray-700">
|
||||
<div class="post-content-text text-xl" v-html="$page.blog.content"></div>
|
||||
</section>
|
||||
|
||||
<section class="post-tags container mx-auto relative py-10">
|
||||
<g-link
|
||||
v-for="tag in $page.blog.tags"
|
||||
:key="tag.id"
|
||||
:to="tag.path"
|
||||
class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
|
||||
>{{ tag.title }}</g-link>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="post-related bg-black text-gray-200 pt-10 border-b border-b-gray-900">
|
||||
<div class="container mx-auto">
|
||||
<div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem v-if="$page.previous" :record="$page.previous" :border=false></PostListItem>
|
||||
<PostListItem v-if="$page.next" :record="$page.next" :border=false></PostListItem>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
query($id: ID!, $previousElement: ID!, $nextElement: ID!) {
|
||||
blog(id: $id) {
|
||||
title
|
||||
name
|
||||
rank
|
||||
path
|
||||
startDate : startdate(format:"MM YYYY")
|
||||
image(width:1600, height:800)
|
||||
image_caption
|
||||
excerpt
|
||||
content
|
||||
humanTime : created(format:"DD MMMM YYYY")
|
||||
datetime : created(format:"ddd MMM DD YYYY hh:mm:ss zZ")
|
||||
timeToRead
|
||||
tags {
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
category {
|
||||
id
|
||||
title
|
||||
path
|
||||
belongsTo(limit:4) {
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
... on Blog {
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
author {
|
||||
id
|
||||
name
|
||||
image
|
||||
path
|
||||
}
|
||||
tags {
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
|
||||
previous: blog(id: $previousElement) {
|
||||
title
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
category {
|
||||
id
|
||||
title
|
||||
}
|
||||
author {
|
||||
id
|
||||
name
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
}
|
||||
}
|
||||
|
||||
next: blog(id: $nextElement) {
|
||||
title
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
category {
|
||||
id
|
||||
title
|
||||
}
|
||||
author {
|
||||
id
|
||||
name
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from "~/components/PostListItem.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PostListItem
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$page.blog.title
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
100
src/templates/Category.vue
Normal file
100
src/templates/Category.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-24">
|
||||
<div class="mx-4 sm:mx-0">
|
||||
<h1 class="pb-0 mb-0 text-5xl font-medium">{{ $page.category.title }}</h1>
|
||||
<p class="text-gray-700 text-xl">
|
||||
A collection of
|
||||
<span
|
||||
class="self-center"
|
||||
>{{ $page.category.belongsTo.totalCount }} {{ postLabel }}</span>
|
||||
</p>
|
||||
|
||||
<div class="pt-8 border-b"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="edge in $page.category.belongsTo.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pagination flex justify-center mb-8">
|
||||
<Pagination
|
||||
:baseUrl="$page.category.path"
|
||||
:currentPage="$page.category.belongsTo.pageInfo.currentPage"
|
||||
:totalPages="$page.category.belongsTo.pageInfo.totalPages"
|
||||
:maxVisibleButtons="5"
|
||||
v-if="$page.category.belongsTo.pageInfo.totalPages > 1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
query($id: ID!, $page:Int) {
|
||||
category(id: $id) {
|
||||
title
|
||||
path
|
||||
belongsTo(perPage: 12, page: $page) @paginate {
|
||||
totalCount
|
||||
pageInfo {
|
||||
totalPages
|
||||
currentPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
... on Blog {
|
||||
title
|
||||
name
|
||||
status
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
startDate : startdate(format:"MM YYYY")
|
||||
humanTime : created(format:"DD MMM YYYY")
|
||||
datetime : created
|
||||
category {
|
||||
id
|
||||
title
|
||||
}
|
||||
author {
|
||||
id
|
||||
name
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from "~/components/PostListItem.vue";
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
PostListItem
|
||||
},
|
||||
computed: {
|
||||
postLabel: function() {
|
||||
var pluralize = require("pluralize");
|
||||
return pluralize("post", this.$page.category.belongsTo.totalCount);
|
||||
}
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$page.category.title
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
97
src/templates/Tag.vue
Normal file
97
src/templates/Tag.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-24">
|
||||
<div class="mx-4 sm:mx-0">
|
||||
<h1 class="pb-0 mb-0 text-5xl font-medium">{{ $page.tag.title }}</h1>
|
||||
<p class="text-gray-700 text-xl">
|
||||
A collection of
|
||||
<span
|
||||
class="self-center"
|
||||
>{{ $page.tag.belongsTo.totalCount }} {{ postLabel }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 border-b"></div>
|
||||
|
||||
<div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="edge in $page.tag.belongsTo.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pagination flex justify-center mb-8">
|
||||
<Pagination
|
||||
:baseUrl="$page.tag.path"
|
||||
:currentPage="$page.tag.belongsTo.pageInfo.currentPage"
|
||||
:totalPages="$page.tag.belongsTo.pageInfo.totalPages"
|
||||
:maxVisibleButtons="5"
|
||||
v-if="$page.tag.belongsTo.pageInfo.totalPages > 1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
query($id: ID!, $page:Int) {
|
||||
tag(id: $id) {
|
||||
title
|
||||
path
|
||||
belongsTo(perPage: 5, page: $page) @paginate {
|
||||
totalCount
|
||||
pageInfo {
|
||||
totalPages
|
||||
currentPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
... on Blog {
|
||||
title
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
humanTime : created(format:"DD MMM YYYY")
|
||||
datetime : created
|
||||
category {
|
||||
id
|
||||
title
|
||||
}
|
||||
author {
|
||||
id
|
||||
name
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from "~/components/PostListItem.vue";
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
PostListItem
|
||||
},
|
||||
computed: {
|
||||
postLabel: function() {
|
||||
var pluralize = require("pluralize");
|
||||
return pluralize("post", this.$page.tag.belongsTo.totalCount);
|
||||
}
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$page.tag.title
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user