blog added

pages/blog/_handle/index.vue

@@ -1,57 +1,19 @@
 <template>
   <div class="container">
     <h1>{{ blog.title }}</h1>
-    <div class="columns is-multiline">
-      <div
-        v-for="article in blog.articles.edges"
-        :key="article.node.id"
-        class="column is-full-mobile is-half-tablet is-one-third-desktop"
-      >
-        <nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
-          <div class="card">
-            <div class="card-image">
-              <figure v-if="article.node.image !== null">
-                <img
-                  :src="article.node.image.originalSrc"
-                  :alt="article.node.image.altText"
-                >
-              </figure>
-              <figure v-else class="is-flex">
-                <img
-                  src="/img/no-image.jpg"
-                  alt="image-not-found"
-                >
-              </figure>
-            </div>
-            <div class="card-content">
-              <p class="title is-4">
-                {{ article.node.title }}
-              </p>
-              <p class="subtitle is-6">{{ article.node.excerpt }}</p>
-              <div class="content">
-                <b-taglist class="is-marginless">
-                  <b-tag
-                    v-for="tag in article.node.tags"
-                    :key="tag"
-                    href="#"
-                    type="is-primary"
-                  >
-                    #{{ tag }}
-                  </b-tag>
-                </b-taglist>
-                <time datetime="2016-1-1">{{ article.node.publishedAt }}</time>
-              </div>
-            </div>
-          </div>
-        </nuxt-link>
-      </div>
-    </div>
+    <blog-card-list
+      :blog="blog"
+    />
   </div>
 </template>
 
 <script>
+import BlogCardList from '../../../components/BlogCardList'
 export default {
   name: 'Index',
+  components: {
+    BlogCardList
+  },
   asyncData ({ app, params }) {
     return app.$axios({
       method: 'POST',
@@ -89,13 +51,4 @@ export default {
 </script>
 
 <style scoped>
-  .subtitle {
-    height: 20px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 1rem;
-  }
-  figure.is-flex {
-    justify-content: center;
-  }
 </style>