blog added

pages/blog/_handle/article/_articleHandle/index.vue

@@ -1,28 +1,54 @@
 <template>
-  <div class="container">
-    Article {{ params }}
-    {{ article }}
+  <div>
+    <section class="hero is-info is-medium is-bold">
+      <div
+        class="hero-body"
+        :style="{
+          backgroundImage: (article.image === null) ? '' : `url(${article.image.originalSrc})`,
+          backgroundPosition: 'center',
+          backgroundSize: 'cover'
+        }"
+      />
+    </section>
+    <div class="container">
+      <section class="articles">
+        <div class="card article">
+          <div class="card-content">
+            <div class="media">
+              <div class="media-content has-text-centered">
+                <p class="title article-title">{{ article.title }}</p>
+                <div class="tags has-addons level-item">
+                  <span class="tag is-rounded is-info">@{{ article.authorV2.name }}</span>
+                  <span class="tag is-rounded">{{ $moment(article.publishedAt).format('DD MMMM Y') }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="content article-body">
+              <p v-html="article.contentHtml" />
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'Index',
+  layout: 'noContainer',
   asyncData ({ app, params }) {
     return app.$axios({
       method: 'POST',
       data: {
         query: `query {
                   blogByHandle (handle:"${params.handle}") {
-                    title,
-                    handle
                     articleByHandle (handle: "${params.articleHandle}") {
                       title,
+                      publishedAt,
                       contentHtml
                       authorV2 {
-                        bio,
-                        firstName,
-                        lastName
+                        name
                       },
                       image (maxWidth: 2000) {
                         altText,
@@ -42,4 +68,24 @@ export default {
 </script>
 
 <style scoped>
+  .articles {
+    margin: -200px 0 5rem;
+  }
+  .articles .content p {
+    line-height: 1.9;
+    margin: 15px 0;
+  }
+  .media-content {
+    margin-top: 3rem;
+  }
+  .article {
+    margin-top: 6rem;
+  }
+  .article-body {
+    line-height: 1.4;
+    margin: 0 6rem;
+  }
+  .hero-body {
+    height: 500px;
+  }
 </style>

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>