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

fix project page

Browse Source
This commit is contained in:
hamdy
2020-11-13 15:03:51 +02:00
parent f1d1b2b766
commit 804b705c65
4 changed files with 99 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gridsome.config.js
View File

@@ -71,6 +71,8 @@ module.exports = {
},
refs: {
author: 'Person',
members: 'Person',
tags: {
typeName: 'Tag',
create: true

2
gridsome.server.js
View File

@@ -32,7 +32,7 @@ module.exports = function (api) {
options.tags = (typeof options.tags === 'string') ? options.tags.split(',').map(string => string.trim()) : options.tags;
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;
options.members = (typeof options.cities === 'string') ? options.members.split(',').map(string => string.trim()) : options.members;
options.members = (typeof options.members === 'string') ? options.members.split(',').map(string => string.trim()) : options.members;
options.author = (typeof options.author === 'string') ? options.author.split(',').map(string => string.trim()) : options.author;
return {
...options

7
src/pages/Projects.vue
View File

@@ -30,7 +30,12 @@ query($page:Int) {
node {
title
path
members
members {
id
name
image(width:64, height:64, fit:inside)
path
}
rank
linkedin
startDate : startdate(format:"MM YYYY")

112
src/templates/Project.vue
View File

@@ -10,8 +10,47 @@
</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.project.title }}</h1>
<p class="text-gray-700 text-xl" v-if="$page.project.bio">{{ $page.project.bio }}</p>
<div class="author-social">
<div class="avatars">
<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.project.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="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
/>
</g-link>
</li>
</ul>
</div>
<div
class="ml-3 pl-3 border-l flex flex-col text-xs leading-none uppercase"
>
<p>
<g-link :to="$page.project.path">
<time :datetime="$page.project.datetime">{{
$page.project.humanTime
}}</time>
</g-link>
</p>
<p>
<g-link :to="$page.project.path">
<time :datetime="$page.project.datetime">{{
$page.project.startDate
}}</time>
</g-link>
{{ $page.project.status }}
</p>
</div>
<div class="author-social">
&nbsp;&middot;&nbsp;
<a
@@ -23,6 +62,41 @@
<font-awesome :icon="['fab', 'linkedin']" />
</a>
</div>
</div>
<section>
<br/>
<div class="avatars">
<div class="flex items-center">
<div class="flex justify-between items-center">
<ul class="list-none flex author-list m-0">
<li
v-for="member in $page.project.members"
:key="member.id"
class="author-list-item"
>
<g-link :to="member.path" v-tooltip="member.name">
<g-image
:src="member.image"
:alt="member.name"
class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
/>
</g-link>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="post-tags container mx-auto relative py-10">
<g-link
v-for="tag in $page.project.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>
</div>
@@ -31,25 +105,6 @@
<section class="post-content container mx-auto relative text-gray-700">
<div class="post-content-text text-xl" v-html="$page.project.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.project.belongsTo.edges"
:key="edge.node.id"
:record="edge.node"
/>
</div>
<section class="post-tags container mx-auto relative py-10">
<g-link
v-for="tag in $page.project.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 class="pagination flex justify-center mb-8">
<Pagination
:baseUrl="$page.project.path"
@@ -86,10 +141,20 @@
title
path
}
members
members {
id
name
image(width:64, height:64, fit:inside)
path
}
websites
private
author {
id
name
image(width:64, height:64, fit:inside)
path
}
rank
excerpt
content
@@ -102,7 +167,10 @@
edges {
node {
... on Person {
id
name
image(width:64, height:64, fit:inside)
path
}
}
}