Init search item

src/components/SearchListItem.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="flex px-0 sm:px-4 pb-8 mb-8"
+    v-bind:class="{ 'no-border': !border }"
+  >
+    <g-link :to="record.path" class="post-card-image-link">
+      <g-image
+        :src="record.image"
+        :alt="record.title"
+        class="post-card-image"
+      ></g-image>
+    </g-link>
+    <div class="p-5">
+      <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-1">
+          <g-link
+            v-for="membership in record.memberships"
+            :key="membership.id"
+            :to="membership.path"
+            class="text-xs bg-transparent hover:text-blue-700 py-1 px-2 mr-1 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-2">
+        <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 record.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="flex flex-col text-xs leading-none uppercase">
+              <p>
+                <g-link :to="record.path">
+                  <time :datetime="record.datetime">{{
+                    record.humanTime
+                  }}</time>
+                </g-link>
+              </p>
+              <p>
+                <g-link :to="record.path">
+                  <time :datetime="record.datetime">{{
+                    record.startDate
+                  }}</time>
+                </g-link>
+                {{ record.status }}
+              </p>
+            </div>
+          </div>
+          <section class="post-tags container mx-auto relative py-3">
+            <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>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    record: {},
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+.post-card-excerpt {
+  font-family: "Roboto", sans-serif;
+  line-height: 1.2;
+}
+
+.flex-post {
+  flex-direction: row;
+}
+
+.post-card-image {
+  max-width: 400px;
+  height: auto;
+}
+</style>

src/pages/Index.vue

@@ -1,41 +1,31 @@
 <template>
   <Layout :hideHeader="true" :disableScroll="true">
-
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
-       <VacationCard
-        img=""
-        imgAlt=""
-        eyebrow=""
-        title=""
-        pricing=""
-        url=""
-      />
-       <div class="flex flex-col h-screen">
-      <img class="py-20" src="/img/new_home.png" alt="">
+      <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" />
+      <div class="flex flex-col">
+        <img class="py-20" src="/img/new_home.png" alt="" />
         <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>
 
-      <vue-markdown>
-        
-      </vue-markdown>
+      <vue-markdown> </vue-markdown>
     </div>
   </Layout>
 </template>
 
 <script>
-import VueMarkdown from 'vue-markdown'
+import VueMarkdown from "vue-markdown";
 
 export default {
   metaInfo: {
-    title: "Home"
+    title: "Home",
   },
 
   components: {
-    VueMarkdown
-  }
+    VueMarkdown,
+  },
 };
 </script>
 <style scoped>

src/templates/Search.vue

@@ -1,11 +1,17 @@
 <template>
   <Layout>
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden my-auto">
+    <div class="container sm:pxi-0 mx-auto">
+      <img
+        v-if="loading"
+        class="m-auto"
+        src="../assets/imgs/loader.gif"
+        alt=""
+      />
       <div
         v-if="searchResults.length > 0"
         class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4"
       >
-        <PostListItem
+        <SearchListItem
           v-for="edge in searchResults"
           :key="edge.node.id"
           :record="edge.node"
@@ -102,8 +108,7 @@ query ($private: Int){
 </page-query>
 
 <script>
-import PostListItem from "~/components/PostListItem.vue";
-import Pagination from "~/components/Pagination.vue";
+import SearchListItem from "~/components/SearchListItem.vue";
 
 export default {
   metaInfo: {
@@ -112,6 +117,7 @@ export default {
   data: () => ({
     q: "",
     objects: {},
+    loading: true,
   }),
   computed: {
     searchResults() {
@@ -123,6 +129,7 @@ export default {
         var item = searchRes[i];
         result.push({ node: this.objects[item.path] });
       }
+      this.loading = false;
       return result;
     },
   },
@@ -145,14 +152,13 @@ export default {
     }
   },
   components: {
-    PostListItem,
-    Pagination,
+    SearchListItem,
   },
 };
 </script>
 
 <style scoped>
 h1 {
-    font-size: 13rem;;
+  font-size: 13rem;
 }
 </style>