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

people page

Browse Source
This commit is contained in:
hamdy
2020-11-10 17:38:05 +02:00
parent c8c2d9d882
commit c598d63ae7
6 changed files with 89 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
content/site/navigation.json
View File

@@ -5,15 +5,21 @@
"link": "/", "link": "/",
"external": false "external": false
}, },
{
"name": "Values",
"link": "/about",
"external": false
},
{ {
"name": "Projects", "name": "Projects",
"link": "/projects", "link": "/projects",
"external": false "external": false
},
{
"name": "People",
"link": "/people",
"external": false
},
{
"name": "Values",
"link": "/about",
"external": false
} }
], ],
"footerNavigation": [{ "footerNavigation": [{

2
gridsome.config.js
View File

@@ -96,7 +96,7 @@ module.exports = {
path: '/blog/:id' path: '/blog/:id'
}], }],
Person: [{ Person: [{
path: '/author/:id', path: '/people/:id',
component: '~/templates/Person.vue' component: '~/templates/Person.vue'
}], }],
Tag: [{ Tag: [{

9
gridsome.server.js
View File

@@ -38,6 +38,15 @@ module.exports = function (api) {
...options ...options
}; };
} }
if (options.internal.typeName === 'Person') {
options.countries = (typeof options.countries === 'string') ? options.countries.split(',').map(string => string.trim()) : options.countries;
options.cities = (typeof options.cities === 'string') ? options.cities.split(',').map(string => string.trim()) : options.cities;
return {
...options
};
}
}) })
api.createPages(async ({ api.createPages(async ({

54
src/pages/People.vue Normal file
View File

@@ -0,0 +1,54 @@
<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($page:Int) {
entries: allPerson(perPage: 40, page: $page) @paginate {
totalCount
pageInfo {
totalPages
currentPage
}
edges {
node {
path
content
name
rank
memberships
bio
linkedin
websites
project_ids
countries
cities
image(width:800)
private
}
}
}
}
</page-query>
<script>
import PostListItem from '~/components/PostListItem.vue';
export default {
metaInfo: {
title: "Hello, world!"
},
components: {
PostListItem
}
};
</script>

21
src/templates/Person.vue
View File

@@ -77,13 +77,20 @@
<page-query> <page-query>
query($id: ID!, $page:Int) { query($id: ID!, $page:Int) {
person(id: $id) { person(id: $id) {
name path
path content
bio name
image(width:150, height:150) rank
linkedin memberships
content bio
belongsTo(perPage: 5, page: $page) @paginate { linkedin
websites
project_ids
countries
cities
private
image(width:150, height:150)
belongsTo(perPage: 5, page: $page) @paginate {
totalCount totalCount
pageInfo { pageInfo {
totalPages totalPages

139
src/templates/User.vue
View File

@@ -1,139 +0,0 @@
<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.user.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.user.name }}</h1>
<p class="text-gray-700 text-xl" v-if="$page.user.bio">{{ $page.user.bio }}</p>
<div class="author-social">
{{ $page.user.belongsTo.totalCount }} Projects
&nbsp;&middot;&nbsp;
<!-- <a
:href="$page.user.facebook"
target="_blank"
rel="noopener noreferrer"
class="text-gray-400 hover:text-black"
>
<font-awesome :icon="['fab', 'facebook']" />
</a>
&nbsp;
<a
:href="$page.user.twitter"
target="_blank"
rel="noopener noreferrer"
class="text-gray-400 hover:text-black"
>
<font-awesome :icon="['fab', 'twitter']" />
</a>
&nbsp; -->
<a
:href="$page.user.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.user.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.user.belongsTo.edges"
:key="edge.node.id"
:record="edge.node"
/>
</div>
<div class="pagination flex justify-center mb-8">
<Pagination
:baseUrl="$page.user.path"
:currentPage="$page.user.belongsTo.pageInfo.currentPage"
:totalPages="$page.user.belongsTo.pageInfo.totalPages"
:maxVisibleButtons="5"
v-if="$page.user.belongsTo.pageInfo.totalPages > 1"
/>
</div>
</div>
</Layout>
</template>
<page-query>
query($id: ID!, $page:Int) {
user(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
user {
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.user.belongsTo.totalCount);
}
},
metaInfo() {
return {
title: this.$page.user.name
};
}
};
</script>