ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

news

Browse Source
This commit is contained in:
hamdy
2020-11-26 14:04:14 +02:00
parent 99a19fb63b
commit fcc2a18721
12 changed files with 503 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/templates/NewsPost.vue Normal file
View 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>
<!-- &nbsp;&middot;&nbsp; {{ $page.news.timeToRead }} min read -->
&nbsp;&middot;&nbsp;
<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>

67
src/templates/NewsRoom.vue
View File

@@ -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>