memberships + new home page

content/site/navigation.json

@@ -10,23 +10,18 @@
       "link": "/people",
       "external": false
     },
+
     {
       "name": "Values",
       "link": "/about",
       "external": false
-    },
-    {
-      "name": "Test",
-      "link": "/about2",
-      "external": false
     }
   ],
   "footerNavigation": [
     {
-      "name": "Latest Posts",
+      "name": "",
-      "link": "/",
+      "link": "",
       "external": false
     }
-    
   ]
 }

gridsome.config.js

@@ -64,8 +64,13 @@ module.exports = {
                     tags: {
                         typeName: 'Tag',
                         create: true
-                    }
+                    },
-                }
+                    memberships: {
+                        typeName: 'Membership',
+                        create: true
+                    },
+                    
+                },
             }
         },
         {
@@ -129,6 +134,11 @@ module.exports = {
             path: '/tags/:id',
             component: '~/templates/Tag.vue'
         }],
+        Membership: [{
+            path: '/memberships/:id',
+            component: '~/templates/Membership.vue'
+        }],
+
         Project: [{
             path: '/project/:id',
             component: '~/templates/Project.vue'

gridsome.server.js

@@ -41,6 +41,7 @@ module.exports = function (api) {
 
 
     if (options.internal.typeName === 'Person') {
+      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;
       options.cities = (typeof options.cities === 'string') ? options.cities.split(',').map(string => string.trim()) : options.cities;
       return {

src/components/PostListItem.vue

@@ -14,7 +14,17 @@
       <g-link :to="record.path">
         <h2 class="post-card-title mt-3">{{ record.title || record.name }}</h2>
         <p class="post-card-excerpt">{{ record.excerpt }}</p>
+        <section class="post-tags container mx-auto relative py-5">
+              <g-link
+                v-for="membership in record.memberships"
+                :key="membership.id"
+                :to="membership.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"
+                >{{ membership.title }}</g-link
+              >
+            </section>
       </g-link>
+       
       <div class="w-full post-card-meta pt-4">
         <div class="avatars">
           <div class="flex items-center">
@@ -35,6 +45,7 @@
                 </li>
               </ul>
             </div>
+            
             <div
               class="ml-3 pl-3 border-l flex flex-col text-xs leading-none uppercase"
             >
@@ -53,8 +64,22 @@
                 </g-link>
                 {{ record.status }}
               </p>
+              
             </div>
+
+           
+
           </div>
+           <section class="post-tags container mx-auto relative py-5">
+              <g-link
+                v-for="tag in record.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>

src/pages/About2.vue

@@ -1,46 +0,0 @@
-<template>
-  <Layout :hideHeader="true" :disableScroll="true">
-
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
-       
-      <VacationCard
-        img="/img/Homepage.jpg"
-        imgAlt="Beach in Cancun"
-        eyebrow=""
-        title=""
-        pricing=""
-        url=""
-      />
-      <div class="center py-10">
-      <h2 class="text-center">CO-CREATING BETTER FUTURES TOGETHER</h2>
-      <!-- <p class="text-center py-1">The ThreeFold Foundation is not ThreeFold — rather, it is sparking a movement to bring the world <br> a truly peer-to-peer internet. We acknowledge and support the many people and organizations around the world <br>  who bring crucial support to the growth and adoption of the ThreeFold Grid.</p> -->
-      </div>
-
-      <vue-markdown>
-      </vue-markdown>
-    </div>
-</Layout>
-</template>
-
-<script>
-import VueMarkdown from 'vue-markdown'
-
-export default {
-  metaInfo: {
-    title: "About us"
-  },
-
-  components: {
-    VueMarkdown
-  }
-};
-</script>
-<style scoped>
-/* h2 {
-  padding-bottom: 8rem;
-} */
-</style> >
-
-
-
-

src/pages/Blog.vue

@@ -0,0 +1,77 @@
+<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>
+     <div class="pagination flex justify-center mb-8">
+        <Pagination
+          :baseUrl="baseurl"
+          :currentPage="$page.entries.pageInfo.currentPage"
+          :totalPages="$page.entries.pageInfo.totalPages"
+          :maxVisibleButtons="5"
+          v-if="$page.entries.pageInfo.totalPages > 1"
+        />
+      </div>
+  </Layout>
+</template>
+
+<page-query>
+
+query{
+
+  entries: allBlog(sortBy: "created", order: DESC) {
+    totalCount
+    pageInfo {
+      totalPages
+      currentPage
+    }
+    edges {
+      node {
+        name
+        title
+        team
+        rank
+        excerpt
+        image(width:800)
+        path
+        timeToRead
+        humanTime : created(format:"DD MMM YYYY")
+        datetime : created
+        author {
+          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 {
+  metaInfo: {
+    title: "Home",
+  },
+  components: {
+    PostListItem,
+    Pagination
+  },
+  computed: {
+    baseurl: function() {
+     return ""
+    }
+  },
+};
+</script>

src/pages/Index.vue

@@ -1,77 +1,47 @@
 <template>
-  <Layout>
+  <Layout :hideHeader="true" :disableScroll="true">
+
     <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
+      <VacationCard
-          v-for="edge in $page.entries.edges"
+        img="/img/Homepage.jpg"
-          :key="edge.node.id"
+        imgAlt="Beach in Cancun"
-          :record="edge.node"
+        eyebrow=""
+        title=""
+        pricing=""
+        url=""
       />
+      <div class="center py-10">
+      <h2 class="text-center">CO-CREATING BETTER FUTURES TOGETHER</h2>
+      <!-- <p class="text-center py-1">The ThreeFold Foundation is not ThreeFold — rather, it is sparking a movement to bring the world <br> a truly peer-to-peer internet. We acknowledge and support the many people and organizations around the world <br>  who bring crucial support to the growth and adoption of the ThreeFold Grid.</p> -->
       </div>
-    </div>
+
-     <div class="pagination flex justify-center mb-8">
+      <vue-markdown>
-        <Pagination
+        
-          :baseUrl="baseurl"
+      </vue-markdown>
-          :currentPage="$page.entries.pageInfo.currentPage"
-          :totalPages="$page.entries.pageInfo.totalPages"
-          :maxVisibleButtons="5"
-          v-if="$page.entries.pageInfo.totalPages > 1"
-        />
     </div>
 </Layout>
 </template>
 
-<page-query>
-
-query{
-
-  entries: allBlog(sortBy: "created", order: DESC) {
-    totalCount
-    pageInfo {
-      totalPages
-      currentPage
-    }
-    edges {
-      node {
-        name
-        title
-        team
-        rank
-        excerpt
-        image(width:800)
-        path
-        timeToRead
-        humanTime : created(format:"DD MMM YYYY")
-        datetime : created
-        author {
-          id
-          name
-          image(width:64, height:64, fit:inside)
-          path
-        }
-      }
-    }
-  }
-}
-
-</page-query>
-
 <script>
-import PostListItem from "~/components/PostListItem.vue";
+import VueMarkdown from 'vue-markdown'
-import Pagination from "~/components/Pagination.vue";
 
 export default {
   metaInfo: {
-    title: "Home",
+    title: "Home"
   },
+
   components: {
-    PostListItem,
+    VueMarkdown
-    Pagination
-  },
-  computed: {
-    baseurl: function() {
-     return ""
   }
-  },
 };
 </script>
+<style scoped>
+/* h2 {
+  padding-bottom: 8rem;
+} */
+</style> >
+
+
+
+

src/pages/People.vue

@@ -20,7 +20,11 @@ query {
         content
         name
         rank
-        memberships
+        memberships{
+          id
+          title
+          path
+        }
         bio
         linkedin
         websites

src/pages/Projects.vue

@@ -22,6 +22,11 @@ query {
           name
           image(width:64, height:64, fit:inside)
           path
+        },
+        tags {
+          id
+          title
+          path
         }  
         rank
         linkedin

src/pages/Search.vue

@@ -62,7 +62,11 @@ query {
         content
         name
         rank
-        memberships
+         memberships{
+          id
+          title
+          path
+        }
         bio
         linkedin
         websites

src/templates/Membership.vue

@@ -0,0 +1,93 @@
+<template>
+  <Layout :hideHeader="true" :disableScroll="true">
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-24">
+      <div class="mx-4 sm:mx-0">
+        <h1 class="pb-0 mb-0 text-5xl font-medium">{{ $page.membership.title }}</h1>
+        <p class="text-gray-700 text-xl">
+          A collection of
+          <span
+            class="self-center"
+          >{{ $page.membership.belongsTo.totalCount }} items</span>
+        </p>
+      </div>
+
+      <div class="pt-8 border-b"></div>
+
+      <div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
+        <PostListItem
+          v-for="edge in $page.membership.belongsTo.edges"
+          :key="edge.node.id"
+          :record="edge.node"
+        />
+      </div>
+
+      <div class="pagination flex justify-center mb-8">
+        <Pagination
+          :baseUrl="$page.membership.path"
+          :currentPage="$page.membership.belongsTo.pageInfo.currentPage"
+          :totalPages="$page.membership.belongsTo.pageInfo.totalPages"
+          :maxVisibleButtons="5"
+          v-if="$page.membership.belongsTo.pageInfo.totalPages > 1"
+        />
+      </div>
+    </div>
+  </Layout>
+</template>
+
+<page-query>
+  query($id: ID!, $page:Int) {
+    membership(id: $id) {
+      title
+      path
+      belongsTo(perPage: 10, page: $page) @paginate {
+        totalCount
+        pageInfo {
+          totalPages
+          currentPage
+        }
+        edges {
+          node {
+            ... on Person {
+               path
+              content
+              name
+              rank
+              memberships{
+                id
+                title
+                path
+              }
+              bio
+              excerpt
+              linkedin
+              websites
+              project_ids
+              countries
+              cities
+              private
+              image(width:150, height:150)
+            }
+          }
+        }
+      }
+    }  
+  }
+</page-query>
+
+<script>
+import PostListItem from "~/components/PostListItem.vue";
+import Pagination from "~/components/Pagination.vue";
+
+export default {
+  components: {
+    Pagination,
+    PostListItem
+  },
+ 
+  metaInfo() {
+    return {
+      title: this.$page.membership.title
+    };
+  }
+};
+</script>

src/templates/Person.vue

@@ -90,7 +90,11 @@
         content
         name
         rank
-        memberships
+        memberships{
+          id
+          title
+          path
+        }
         bio
         excerpt
         linkedin