fix project page

gridsome.config.js

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

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

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")

src/templates/Project.vue

@@ -10,7 +10,46 @@
         </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="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;
           
@@ -23,25 +62,32 @@
               <font-awesome :icon="['fab', 'linkedin']" />
             </a>
           </div>
+          
           </div>
-      </div>
+          <section>
-
+            <br/>
-      <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
+    <div class="avatars">
-
+            <div class="flex items-center">
-        <section class="post-content container mx-auto relative text-gray-700">
+              <div class="flex justify-between items-center">
-          <div class="post-content-text text-xl" v-html="$page.project.content"></div>
+                <ul class="list-none flex author-list m-0">
-        </section>
+                  <li
-
+                    v-for="member in $page.project.members"
-
+                    :key="member.id"
-      <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
+                    class="author-list-item"
-      
+                  >
-      <div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
+                    <g-link :to="member.path" v-tooltip="member.name">
-        <PostListItem
+                      <g-image
-          v-for="edge in $page.project.belongsTo.edges"
+                        :src="member.image"
-          :key="edge.node.id"
+                        :alt="member.name"
-          :record="edge.node"
+                        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"
@@ -49,6 +95,15 @@
             :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>
+
+      <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
+
+        <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="pagination flex justify-center mb-8">
         <Pagination
@@ -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
             }
           }
         }