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

fixe

Browse Source
This commit is contained in:
hamdy
2020-11-26 16:22:02 +02:00
parent a19d129041 47d08e42a1
commit 8e78cbf5b1
7 changed files with 134 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
gridsome.config.js
View File

@@ -69,7 +69,7 @@ module.exports = {
path: './content/person/**/*.md',
refs: {
tags: {
typeName: 'Tag',
typeName: 'PersonTag',
create: true
},
memberships: {
@@ -91,7 +91,7 @@ module.exports = {
refs: {
author: 'Person',
tags: {
typeName: 'Tag',
typeName: 'BlogTag',
create: true
}
}
@@ -109,7 +109,7 @@ module.exports = {
refs: {
author: 'Person',
tags: {
typeName: 'Tag',
typeName: 'NewsTag',
create: true
}
}
@@ -130,7 +130,7 @@ module.exports = {
members: 'Person',
tags: {
typeName: 'Tag',
typeName: 'ProjectTag',
create: true
}
}
@@ -160,11 +160,7 @@ module.exports = {
Person: [{
path: '/people/:id',
component: '~/templates/Person.vue'
}],
Tag: [{
path: '/tags/:id',
component: '~/templates/Tag.vue'
}],
}],
Membership: [{
path: '/memberships/:id',
component: '~/templates/Membership.vue'

1
gridsome.server.js
View File

@@ -58,6 +58,7 @@ module.exports = function(api) {
if (options.internal.typeName === 'Person') {
options.tags = (typeof options.tags === 'string') ? options.tags.split(',').map(string => string.trim()) : options.tags;
options.project_ids = (typeof options.project_ids === 'string') ? options.project_ids.split(',').map(string => string.trim()) : options.project_ids;
options.memberships = (typeof options.memberships === 'string') ? options.memberships.split(',').map(string => string.trim()) : options.memberships;
options.countries = (typeof options.countries === 'string') ? options.countries.split(',').map(string => string.trim()) : options.countries;

4
src/assets/scss/main.scss
View File

@@ -98,6 +98,10 @@ ul {
@apply -ml-3;
}
button:focus {
outline: none;
}
@media (min-width: 768px) {
// .with-large>.flex-post:nth-child(5n),
.with-large>.flex-post:nth-child(6n + 1) {

74
src/components/Group.vue
View File

@@ -1,74 +0,0 @@
<template>
<section class="py-12 px-4 text-center">
<h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">{{title}}</h2>
<p class="max-w-xl mx-auto mb-12 text-gray-400">{{description}}</p>
<div class="flex max-w-lg mb-12 mx-auto text-center border-b-2">
<div v-for="(tag, index) in tags" :key="tag.node.id" class="w-1/3 pb-2">
<button @click="setSelected('')" v-if="index == 0" class="w-1/3 pb-2 border-b-4 border-indigo-600">All</button>
<button @click="setSelected(tag.node.title)" v-if="index == 0" class="w-1/3 pb-2 border-b-4 border-indigo-600">{{ tag.node.title }}</button>
<button @click="setSelected(tag.node.title)" v-if="index != 0" class="hover:text-indigo-600">{{ tag.node.title }}</button>
</div>
</div>
<div class="flex flex-wrap -mx-4">
<div v-for="obj in filter(selected)" :key="obj.node.id" class="w-1/2 lg:w-1/4 p-4">
<g-link :to="obj.node.path" class="post-card-image-link">
<g-image
:src="obj.node.image"
:alt="obj.node.name"
class="w-1/2 mx-auto mb-4 rounded-full"
></g-image>
</g-link>
<h3 class="text-xl mb-1 font-semibold font-heading font-semibold">{{ obj.name }}</h3>
<!-- <span>{{ edge.node.title }}</span> -->
</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
selected: "",
}
},
props: {
title: String,
description: String,
objects: {},
tags: {},
tagsField: String,
},
methods: {
setSelected: function(tag){
this.selected = tag
},
filter: function(tag){
if (tag == '')
return this.objects
var result = []
for(var i=0; i < this.objects.length; i++){
var obj = this.objects[i].node;
for (var j=0; j<obj[this.tagsField].length; j++){
var membership = obj[this.tagsField][j];
if (membership.title == tag){
result.push(this.objects[i]);
break
}
}
}
return result;
},
},
}
</script>

108
src/components/Team.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<section class="py-12 px-4 text-center">
<h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
{{ title }}
</h2>
<p class="max-w-xl mx-auto mb-12 text-gray-400">{{ description }}</p>
<div class="flex max-w-lg mx-auto mb-12 justify-center border-b-2">
<div v-for="(tag, index) in tags" :key="tag.node.id" class="w-1/3 mr-5 pb-2">
<a :href="`/#${selected}`"
@click="setSelected('', index)"
v-if="index == 0"
class="pb-2 hover:text-indigo-600 capitalize"
:class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
>
All
</a>
<a :href="`/#${selected}`"
@click="setSelected(tag.node.title, index)"
v-if="index != 0"
class="pb-2 hover:text-indigo-600 capitalize"
:class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
>
{{ tag.node.title.replace("_", " ") }}
</a>
</div>
</div>
<div class="flex flex-wrap -mx-4 transition-all ease-in-out duration-150">
<div
v-for="obj in filter(selected)"
:key="obj.node.id"
class="w-1/2 lg:w-1/4 p-4"
>
<g-link :to="obj.node.path" class="post-card-image-link">
<g-image
:src="obj.node.image"
:alt="obj.node.name || obj.node.title"
class="w-1/2 mx-auto mb-4 rounded-full"
></g-image>
</g-link>
<h3 class="text-xl mb-1 font-semibold font-heading font-semibold">
{{ obj.node.name || obj.node.title}}
</h3>
<!-- <span>{{ edge.node.title }}</span> -->
</div>
</div>
</section>
</template>
<script>
console.log
export default {
data() {
var selected = this.$route.hash.replace("#", "")
var activeIndex = 0
for(var i=0; i < this.tags.length; i++){
if (this.tags[i].node.title == selected){
activeIndex = i;
}
}
return {
selected: selected,
activeIndex: activeIndex,
};
},
props: {
title: String,
description: String,
objects: {},
tags: {},
tagsField: String,
},
computed : {
url: function(){
return window.location.href + "#" + this.selected
}
},
methods: {
setSelected: function(tag, index){
this.selected = tag
this.activeIndex = index
},
filter: function(tag){
if (tag == '')
return this.objects
var result = []
for(var i=0; i < this.objects.length; i++){
var obj = this.objects[i].node;
for (var j=0; j<obj[this.tagsField].length; j++){
var membership = obj[this.tagsField][j];
if (membership.title == tag){
result.push(this.objects[i]);
break
}
}
}
return result;
}
}
};
</script>

6
src/templates/People.vue
View File

@@ -2,7 +2,7 @@
<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">
<Group title="THREEFOLD TEAM" description="The heartbeat behind the ThreeFold Movement." :objects="$page.entries.edges" :tags="$page.memberships.edges" tagsField="memberships" />
<Team title="THREEFOLD TEAM" description="The heartbeat behind the ThreeFold Movement." :objects="$page.entries.edges" :tags="$page.memberships.edges" tagsField="memberships" />
</div>
</div>
</Layout>
@@ -50,14 +50,14 @@ query ($private: Int){
<script>
import Pagination from "~/components/Pagination.vue";
import Group from '~/components/Group.vue';
import Team from '~/components/Team.vue';
export default {
metaInfo: {
title: "People"
},
components: {
Group,
Team,
Pagination
},
computed: {

16
src/templates/Projects.vue
View File

@@ -2,7 +2,7 @@
<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" />
<Team title="THREEFOLD PROJECTS" description="The heartbeat behind the ThreeFold Movement." :objects="$page.entries.edges" :tags="$page.memberships.edges" tagsField="tags" />
</div>
</div>
</Layout>
@@ -42,12 +42,22 @@ query ($private: Int){
}
}
}
memberships: allProjectTag{
edges{
node{
id
title
path
}
}
}
}
</page-query>
<script>
import PostListItem from '~/components/PostListItem.vue';
import Team from '~/components/Team.vue';
import Pagination from "~/components/Pagination.vue";
export default {
@@ -55,7 +65,7 @@ export default {
title: "Projects"
},
components: {
PostListItem,
Team,
Pagination
},
computed: {