From 804b705c65c97e0656af95d6424baee8a6937751 Mon Sep 17 00:00:00 2001
From: hamdy <hamdy.a.farag@gmail.com>
Date: Fri, 13 Nov 2020 15:03:51 +0200
Subject: [PATCH] fix project page

---
 gridsome.config.js        |   2 +
 gridsome.server.js        |   2 +-
 src/pages/Projects.vue    |   7 ++-
 src/templates/Project.vue | 112 ++++++++++++++++++++++++++++++--------
 4 files changed, 99 insertions(+), 24 deletions(-)

diff --git a/gridsome.config.js b/gridsome.config.js
index 18b2ef133..d871f0cfe 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -71,6 +71,8 @@ module.exports = {
         },
         refs: {
           author: 'Person',
+          members: 'Person',
+          
           tags: {
             typeName: 'Tag',
             create: true
diff --git a/gridsome.server.js b/gridsome.server.js
index f14ef4f8d..cf44cf8a9 100644
--- a/gridsome.server.js
+++ b/gridsome.server.js
@@ -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
diff --git a/src/pages/Projects.vue b/src/pages/Projects.vue
index 6794b6684..45208e4fa 100644
--- a/src/pages/Projects.vue
+++ b/src/pages/Projects.vue
@@ -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")
diff --git a/src/templates/Project.vue b/src/templates/Project.vue
index 9de41ff65..b10f157dd 100644
--- a/src/templates/Project.vue
+++ b/src/templates/Project.vue
@@ -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
             }
           }
         }