Files
www_threefold_io/src/templates/Partners.vue
2021-04-19 14:03:09 +02:00

143 lines
3.3 KiB
Vue

<template>
<Layout>
<TagFilterHeader
:tags="tags"
selected="all"
v-if="$page.tags.edges.length > 1"
/>
<div class="container mt-8 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
:showtags="true"
v-for="partner in $page.entries.edges"
:key="partner.id"
:record="partner.node"
pathPrefix="/partners"
/>
</div>
</div>
</Layout>
</template>
<page-query>
query ($private: Int){
entries: allProject (sortBy: "rank", order: ASC, filter: { private: { ne: $private }, category: { contains: ["foundation"]}}){
totalCount
edges {
node {
id
title
path
members {
id
name
image(width:64, height:64, fit:inside)
path
},
rank
linkedin
excerpt
image(width:800)
timeToRead
logo
category
tags{
id
path
title
}
}
}
}
markdownPage(id: "home") {
id
metaImg
}
tags: allProjectTag (filter: { title: {in: ["blockchain", "experience", "technology", "farming", "community", "infrastructure", "impact"]}}) {
edges{
node{
id
title
path
}
}
}
}
</page-query>
<script>
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
import TagFilterHeader from "~/components/custom/TagFilterHeader.vue";
export default {
components: {
PostListItem,
TagFilterHeader,
},
computed: {
tags() {
var res = [{ title: "All", path: "/partners" }];
this.$page.tags.edges.forEach((edge) =>
res.push({ title: edge.node.title, path: edge.node.path })
);
return res;
},
getImg() {
let img = "";
if (process.isClient) {
img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
}
return img;
},
},
metaInfo() {
return {
title: "",
titleTemplate: "ThreeFold | Partners",
meta: [
{
key: "description",
name: "description",
content:
"Meet the incredible organizations co-creating the peer-to-peer alongside the ThreeFold Foundation.",
},
{
key: "og:title",
property: "og:title",
content: "ThreeFold | Partners",
},
{
key: "og:description",
property: "og:description",
content:
"Meet the incredible organizations co-creating the peer-to-peer alongside the ThreeFold Foundation.",
},
{
key: "og:image",
property: "og:image",
content: this.getImg,
},
{
key: "twitter:description",
name: "twitter:description",
content:
"Meet the incredible organizations co-creating the peer-to-peer alongside the ThreeFold Foundation.",
},
{
key: "twitter:image",
property: "twitter:image",
content: this.getImg,
},
{
key: "twitter:title",
property: "twitter:title",
content: "ThreeFold | Partners",
},
],
};
},
};
</script>