Merge branch 'development' of github.com:threefoldtech/www_partners_v2 into development
This commit is contained in:
samaradel
81
src/pages/News.vue
Normal file
81
src/pages/News.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto overflow-hidden"
|
||||
:style="{ height: contentHeight + 'px' }"
|
||||
>
|
||||
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="edge in $page.entries.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination flex justify-center mb-8">
|
||||
<Pagination
|
||||
:baseUrl="baseurl"
|
||||
:currentPage="$page.entries.pageInfo.currentPage"
|
||||
:totalPages="$page.entries.pageInfo.totalPages"
|
||||
:maxVisibleButtons="5"
|
||||
v-if="$page.entries.pageInfo.totalPages > 1"
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
|
||||
query{
|
||||
|
||||
entries: allNews(sortBy: "created", order: DESC) {
|
||||
totalCount
|
||||
pageInfo {
|
||||
totalPages
|
||||
currentPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
title
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
humanTime : created(format:"DD MMM YYYY")
|
||||
datetime : created
|
||||
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 {
|
||||
metaInfo: {
|
||||
title: "Home",
|
||||
},
|
||||
components: {
|
||||
PostListItem,
|
||||
Pagination,
|
||||
},
|
||||
computed: {
|
||||
baseurl: function () {
|
||||
return "";
|
||||
},
|
||||
contentHeight() {
|
||||
if (process.isClient) {
|
||||
return window.innerHeight - 160;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
194
src/templates/NewsPost.vue
Normal file
194
src/templates/NewsPost.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-20">
|
||||
<div class="pt-8">
|
||||
<section class="post-header container mx-auto px-0 mb-4 border-b">
|
||||
<h1 class="text-5xl font-medium leading-none mt-0">
|
||||
{{ $page.news.title }}
|
||||
</h1>
|
||||
<div
|
||||
class="text-2xl pt-4 pb-10 text-gray-700"
|
||||
v-html="$page.news.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 m-0">
|
||||
<li
|
||||
v-for="author in $page.news.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.news.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.news.author.length - 1">,</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
<g-link :to="$page.news.path">
|
||||
<time :datetime="$page.news.datetime">{{
|
||||
$page.news.humanTime
|
||||
}}</time>
|
||||
</g-link>
|
||||
<!-- · {{ $page.news.timeToRead }} min read -->
|
||||
·
|
||||
<g-link :to="$page.news.path">
|
||||
<time :datetime="$page.news.datetime">{{
|
||||
$page.news.startDate
|
||||
}}</time>
|
||||
</g-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section class="post-image mx-auto w-full">
|
||||
<g-image :src="$page.news.image"></g-image>
|
||||
</section>
|
||||
|
||||
<div class="">
|
||||
<section
|
||||
class="post-content container mx-auto relative font-serif text-gray-700"
|
||||
>
|
||||
<div
|
||||
class="post-content-text text-xl"
|
||||
v-html="$page.news.content"
|
||||
></div>
|
||||
</section>
|
||||
|
||||
<section class="post-tags container mx-auto relative py-10">
|
||||
<g-link
|
||||
v-for="tag in $page.news.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 text-gray-700 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!) {
|
||||
news(id: $id) {
|
||||
title
|
||||
path
|
||||
image(width:1600, height:800)
|
||||
image_caption
|
||||
content
|
||||
excerpt
|
||||
humanTime : created(format:"DD MMMM YYYY")
|
||||
datetime : created(format:"ddd MMM DD YYYY hh:mm:ss zZ")
|
||||
timeToRead
|
||||
tags {
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
author {
|
||||
id
|
||||
name
|
||||
image
|
||||
path
|
||||
}
|
||||
}
|
||||
|
||||
previous: news(id: $previousElement) {
|
||||
title
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
author {
|
||||
id
|
||||
name
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
}
|
||||
}
|
||||
|
||||
next: news(id: $nextElement) {
|
||||
title
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
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.news.title,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
.post-card-excerpt,
|
||||
.post-content-text {
|
||||
font-family: "Roboto", sans-serif !important;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden">
|
||||
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
|
||||
query ($private: Int){
|
||||
entries: allProject (sortBy: "rank", order: DESC, filter: { private: { ne: $private }}){
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
title
|
||||
path
|
||||
members {
|
||||
id
|
||||
name
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
},
|
||||
tags {
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
rank
|
||||
linkedin
|
||||
startDate : startdate(format:"MM YYYY")
|
||||
humanTime : created(format:"DD MMMM YYYY")
|
||||
datetime : created(format:"ddd MMM DD YYYY hh:mm:ss zZ")
|
||||
status
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from '~/components/PostListItem.vue';
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
|
||||
export default {
|
||||
metaInfo: {
|
||||
title: "Projects"
|
||||
},
|
||||
components: {
|
||||
PostListItem,
|
||||
Pagination
|
||||
},
|
||||
computed: {
|
||||
baseurl: function() {
|
||||
return "/projects/"
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user