From f04c502fc4723c8c12d00abfcd74e2bd71d3b822 Mon Sep 17 00:00:00 2001
From: hamdy <hamdy.a.farag@gmail.com>
Date: Wed, 18 Nov 2020 13:45:50 +0200
Subject: [PATCH] memberships + new home page

---
 content/site/navigation.json    | 11 ++--
 gridsome.config.js              | 14 ++++-
 gridsome.server.js              |  1 +
 src/components/PostListItem.vue | 25 +++++++++
 src/pages/About2.vue            | 46 ----------------
 src/pages/Blog.vue              | 77 ++++++++++++++++++++++++++
 src/pages/Index.vue             | 96 ++++++++++++---------------------
 src/pages/People.vue            |  6 ++-
 src/pages/Projects.vue          |  7 ++-
 src/pages/Search.vue            |  6 ++-
 src/templates/Membership.vue    | 93 ++++++++++++++++++++++++++++++++
 src/templates/Person.vue        |  8 ++-
 12 files changed, 266 insertions(+), 124 deletions(-)
 delete mode 100644 src/pages/About2.vue
 create mode 100644 src/pages/Blog.vue
 create mode 100644 src/templates/Membership.vue

diff --git a/content/site/navigation.json b/content/site/navigation.json
index 4f956569f..840a438b1 100644
--- a/content/site/navigation.json
+++ b/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",
-      "link": "/",
+      "name": "",
+      "link": "",
       "external": false
     }
-    
   ]
 }
diff --git a/gridsome.config.js b/gridsome.config.js
index 66a0f226f..5d8c0fb1e 100644
--- a/gridsome.config.js
+++ b/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'
diff --git a/gridsome.server.js b/gridsome.server.js
index cf44cf8a9..0cd7a3c9b 100644
--- a/gridsome.server.js
+++ b/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 {
diff --git a/src/components/PostListItem.vue b/src/components/PostListItem.vue
index e7536fc74..0ab56a8d1 100644
--- a/src/components/PostListItem.vue
+++ b/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>
diff --git a/src/pages/About2.vue b/src/pages/About2.vue
deleted file mode 100644
index 1662900de..000000000
--- a/src/pages/About2.vue
+++ /dev/null
@@ -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> >
-
-
-
-
diff --git a/src/pages/Blog.vue b/src/pages/Blog.vue
new file mode 100644
index 000000000..1ba70cf62
--- /dev/null
+++ b/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>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 1ba70cf62..d667c2200 100644
--- a/src/pages/Index.vue
+++ b/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
-          v-for="edge in $page.entries.edges"
-          :key="edge.node.id"
-          :record="edge.node"
-        />
+       
+      <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>
-     <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>
+</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";
+import VueMarkdown from 'vue-markdown'
 
 export default {
   metaInfo: {
-    title: "Home",
+    title: "Home"
   },
+
   components: {
-    PostListItem,
-    Pagination
-  },
-  computed: {
-    baseurl: function() {
-     return ""
-    }
-  },
+    VueMarkdown
+  }
 };
 </script>
+<style scoped>
+/* h2 {
+  padding-bottom: 8rem;
+} */
+</style> >
+
+
+
+
diff --git a/src/pages/People.vue b/src/pages/People.vue
index fc6829693..157fdbff2 100644
--- a/src/pages/People.vue
+++ b/src/pages/People.vue
@@ -20,7 +20,11 @@ query {
         content
         name
         rank
-        memberships
+        memberships{
+          id
+          title
+          path
+        }
         bio
         linkedin
         websites
diff --git a/src/pages/Projects.vue b/src/pages/Projects.vue
index e0e764c8a..1e0183c01 100644
--- a/src/pages/Projects.vue
+++ b/src/pages/Projects.vue
@@ -22,7 +22,12 @@ query {
           name
           image(width:64, height:64, fit:inside)
           path
-      }
+        },
+        tags {
+          id
+          title
+          path
+        }  
         rank
         linkedin
         startDate : startdate(format:"MM YYYY")
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
index 3a5df6f73..28bbb5259 100644
--- a/src/pages/Search.vue
+++ b/src/pages/Search.vue
@@ -62,7 +62,11 @@ query {
         content
         name
         rank
-        memberships
+         memberships{
+          id
+          title
+          path
+        }
         bio
         linkedin
         websites
diff --git a/src/templates/Membership.vue b/src/templates/Membership.vue
new file mode 100644
index 000000000..a7a0361f4
--- /dev/null
+++ b/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>
diff --git a/src/templates/Person.vue b/src/templates/Person.vue
index 4bace9c62..3c96ca854 100644
--- a/src/templates/Person.vue
+++ b/src/templates/Person.vue
@@ -86,11 +86,15 @@
 <page-query>
   query($id: ID!, $page:Int) {
     person(id: $id) {
-       path
+        path
         content
         name
         rank
-        memberships
+        memberships{
+          id
+          title
+          path
+        }
         bio
         excerpt
         linkedin