Fix imgs and Update pages title

src/components/PostListItem.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="flex flex-post px-0 sm:px-4 pb-8 mb-8" v-bind:class="{'no-border': !border}">
+  <div
+    class="flex flex-post 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-image
+        :src="record.image"
+        :alt="record.title"
+        class="post-card-image"
+      ></g-image>
     </g-link>
     <div class="post-card-content">
       <g-link :to="record.path">
-        <h2 class="post-card-title mt-3">{{ record.title || record.name}}</h2>
+        <h2 class="post-card-title mt-3">{{ record.title || record.name }}</h2>
         <p class="post-card-excerpt">{{ record.excerpt }}</p>
       </g-link>
       <div class="w-full post-card-meta pt-4">
@@ -13,7 +20,11 @@
           <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">
+                <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"
@@ -24,15 +35,21 @@
                 </li>
               </ul>
             </div>
-            <div class="ml-3 pl-3 border-l flex flex-col text-xs leading-none uppercase">
+            <div
+              class="ml-3 pl-3 border-l flex flex-col text-xs leading-none uppercase"
+            >
               <p>
                 <g-link :to="record.path">
-                  <time :datetime="record.datetime">{{ record.humanTime }}</time>
+                  <time :datetime="record.datetime">{{
+                    record.humanTime
+                  }}</time>
                 </g-link>
               </p>
               <p>
                 <g-link :to="record.path">
-                  <time :datetime="record.datetime">{{ record.startDate }}</time>
+                  <time :datetime="record.datetime">{{
+                    record.startDate
+                  }}</time>
                 </g-link>
                 {{ record.status }}
               </p>
@@ -62,4 +79,9 @@ export default {
   font-family: "Roboto", sans-serif;
   line-height: 1.2;
 }
+
+.post-card-image {
+  max-width: 100%;
+  height: auto;
+}
 </style>

src/pages/Index.vue

@@ -2,7 +2,11 @@
   <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" />
+        <PostListItem
+          v-for="edge in $page.entries.edges"
+          :key="edge.node.id"
+          :record="edge.node"
+        />
       </div>
     </div>
   </Layout>
@@ -44,15 +48,14 @@ query($page:Int) {
 </page-query>
 
 <script>
-
-import PostListItem from '~/components/PostListItem.vue';
+import PostListItem from "~/components/PostListItem.vue";
 
 export default {
   metaInfo: {
-    title: "Hello, world!"
+    title: "Home",
   },
   components: {
-    PostListItem
-  }
+    PostListItem,
+  },
 };
 </script>

src/pages/People.vue

@@ -46,7 +46,7 @@ import PostListItem from '~/components/PostListItem.vue';
 
 export default {
   metaInfo: {
-    title: "Hello, world!"
+    title: "People"
   },
   components: {
     PostListItem

src/pages/Projects.vue

@@ -50,7 +50,7 @@ import PostListItem from '~/components/PostListItem.vue';
 
 export default {
   metaInfo: {
-    title: "Hello, world!"
+    title: "Projects"
   },
   components: {
     PostListItem