Apply tags

src/templates/Project.vue

@@ -1,6 +1,6 @@
 <template>
   <Layout :hideHeader="true" :disableScroll="true">
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden px-4 pt-24">
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-24">
       <div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
         <div class="w-full md:w-1/6 mx-auto sm:mx-0">
           <g-image
@@ -11,14 +11,14 @@
         <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 }}
-            <a
+            <!-- <a
               :href="$page.project.linkedin"
               target="_blank"
               rel="noopener noreferrer"
               class="text-gray-400 hover:text-black"
             >
               <font-awesome :icon="['fab', 'linkedin']" />
-            </a>
+            </a> -->
           </h1>
 
           <p class="text-gray-700 text-xl" v-if="$page.project.bio">
@@ -35,7 +35,7 @@
                         :key="member.id"
                         class="author-list-item"
                       >
-                        <g-link :to="member.path" v-tooltip="member.name">
+                        <g-link :to="member.path">
                           <g-image
                             :src="member.image"
                             :alt="member.name"
@@ -48,13 +48,42 @@
                 </div>
               </div>
             </section>
-            <section class="post-tags container mx-auto relative py-5">
+            <section class="container mx-auto py-2">
+              <ul class="list-none flex author-list m-0">
+                <!-- <li class="mx-2">
+                <g-image
+                  :src="$page.project.logo"
+                  class="rounded-full bg-gray-200 w-8 h-8 border-2 border-gray-400 mx-auto md:mx-0"
+                ></g-image>
+                </li> -->
+                <li>
+                  <a
+                    :href="$page.project.websites"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-gray-400 hover:text-black linkedin_size mx-1"
+                  >
+                    <font-awesome :icon="['fas', 'globe']" />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    :href="$page.project.linkedin"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-gray-400 hover:text-black linkedin_size mx-1"
+                  >
+                    <font-awesome :icon="['fab', 'linkedin']" />
+                  </a>
+                </li>
+              </ul>
+
               <g-link
-                v-for="edge in $page.tags.edges"
-                :key="edge.node.id"
-                :to="edge.node.path"
+                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"
-                >{{ edge.node.title }}</g-link
+                >{{ tag.title }}</g-link
               >
             </section>
           </div>
@@ -127,6 +156,11 @@
                   path
                   logo
                   image
+                  tags {
+                    id
+                    title
+                    path
+                  }
               }
             }
           }
@@ -134,17 +168,15 @@
       }
     }  
 
-    tags: allProjectTag (filter: { title: {in: ["tech", "foundation"]}}) {
+    tags: allProjectTag (filter: { title: {in: ["foundation"]}}) {
      edges{
       node{
         id
         title
         path
       }
+    }
   }
-  }
-
-  
 }
 
 </page-query>
@@ -153,7 +185,6 @@
 import PostListItem from "~/components/custom/Cards/PostListItem.vue";
 import Pagination from "~/components/custom/Pagination.vue";
 
-
 export default {
   components: {
     Pagination,
@@ -178,4 +209,8 @@ export default {
   font-family: "Roboto", sans-serif;
   font-weight: 300;
 }
+
+.linkedin_size {
+  font-size: 2rem !important;
+}
 </style>