Merge pull request #146 from Kyutech-C3/feature/toybox-blog

ToyBoxブログの記事をブログ一覧に表示するよう更新

.env.sample

@@ -1,2 +1,5 @@
 CTF_SPACE_ID=
-CTF_CDA_ACCESS_TOKEN=
+CTF_CDA_ACCESS_TOKEN=
+BASE_URL=
+GOOGLE_ANALYTICS_ID=
+TOYBOX_API_BASE_URL=

components/card/Card.vue

@@ -117,7 +117,7 @@ export default {
       }
       const hourDiff = Math.floor(now.diff(date, 'hour'))
       if (hourDiff < 6) {
-        return hourDiff + ' 時前'
+        return hourDiff + ' 時間前'
       }
 
       if (now.format('YYYY') !== this.$dayjs(date).format('YYYY')) {

components/top/TopBlog.vue

@@ -5,7 +5,7 @@
       <hooper :settings="hooperSettings">
         <slide v-for="(content, idx) in blog" :key="idx">
           <carousel-item
-            :link-url="`/news/${content.sys.id}`"
+            :link-url="`/blog/${content.sys.id}`"
             :image-url="content.fields.thumbnail.fields.file.url"
             :title="content.fields.title"
             :tags="content.fields.tags"

pages/blog/_id.vue

@@ -17,10 +17,12 @@
 
 <script>
 import Vue from 'vue'
+import axios from 'axios'
 
 import EntryDetail from '~/components/EntryDetail.vue'
 
 import sdkClient from '~/plugins/contentful.js'
+import { formatToybox } from '~/utils/toybox'
 
 export default Vue.extend({
   components: {
@@ -30,11 +32,13 @@ export default Vue.extend({
     if (payload) {
       return { blog_item: payload }
     }
+
     try {
       return Promise.all([
         await sdkClient.getEntry(params.id),
         await sdkClient.getEntries({ content_type: 'blog', limit: 3 }),
-      ]).then(([blog, recentBlog]) => {
+        await axios.get(`${process.env.TOYBOX_API_BASE_URL}/blogs?limit=3`),
+      ]).then(([blog, recentBlog, recentToyboxBlog]) => {
         store.commit('breadcrumbs/setBreadcrumbs', {
           breadcrumbs: [
             { url: '/', text: 'ホーム' },
@@ -45,16 +49,50 @@ export default Vue.extend({
             },
           ],
         })
+        const formattedRecentToyboxBlogs =
+          recentToyboxBlog.data.blogs.map(formatToybox)
         return {
           blog_item: blog,
-          recent_blog: recentBlog.items,
+          recent_blog: formattedRecentToyboxBlogs
+            .concat(recentBlog.items)
+            .slice(0, 3),
         }
       })
     } catch (e) {
-      error({
-        errorCode: e.errorCode,
-        message: e.message,
-      })
+      try {
+        return Promise.all([
+          await axios.get(
+            `${process.env.TOYBOX_API_BASE_URL}/blogs/${params.id}`
+          ),
+          await sdkClient.getEntries({ content_type: 'blog', limit: 3 }),
+          await axios.get(`${process.env.TOYBOX_API_BASE_URL}/blogs?limit=3`),
+        ]).then(([blog, recentBlog, recentToyboxBlog]) => {
+          store.commit('breadcrumbs/setBreadcrumbs', {
+            breadcrumbs: [
+              { url: '/', text: 'ホーム' },
+              { url: '/blog', text: 'ブログ一覧' },
+              {
+                url: `/blog/${params.id}`,
+                text: blog.data.title,
+              },
+            ],
+          })
+          const formattedRecentToyboxBlogs =
+            recentToyboxBlog.data.blogs.map(formatToybox)
+
+          return {
+            blog_item: formatToybox(blog.data),
+            recent_blog: formattedRecentToyboxBlogs
+              .concat(recentBlog.items)
+              .slice(0, 3),
+          }
+        })
+      } catch (e) {
+        error({
+          errorCode: e.errorCode,
+          message: e.message,
+        })
+      }
     }
   },
   data() {
@@ -116,3 +154,10 @@ export default Vue.extend({
   margin: 0 auto;
 }
 </style>
+<style>
+.markdown video {
+  display: block;
+  margin: auto;
+  width: 60vw;
+}
+</style>

pages/blog/index.vue

@@ -11,11 +11,15 @@
 </template>
 
 <script>
+import axios from 'axios'
+
 import CardList from '~/components/card/CardList.vue'
 import BaseBreadcrumbs from '~/components/commons/BaseBreadcrumbs.vue'
 
 import sdkClient from '@/plugins/contentful.js'
 
+import { formatToybox } from '~/utils/toybox'
+
 export default {
   components: {
     CardList,
@@ -34,9 +38,11 @@ export default {
           content_type: 'blog',
           order: '-sys.createdAt',
         }),
-      ]).then(([blog]) => {
+        await axios.get(`${process.env.TOYBOX_API_BASE_URL}/blogs`),
+      ]).then(([ctfResult, toyboxResult]) => {
+        const blogs = toyboxResult.data.blogs.map(formatToybox)
         return {
-          entry_list: blog.items,
+          entry_list: blogs.concat(ctfResult.items),
         }
       })
     } catch (e) {

pages/index.vue

@@ -24,6 +24,7 @@ import TopCommunityLink from '~/components/top/TopCommunityLink.vue'
 import TopWork from '~/components/top/TopWork.vue'
 
 import sdkClient from '@/plugins/contentful.js'
+import { formatToybox } from '~/utils/toybox'
 
 export default {
   components: {
@@ -51,44 +52,58 @@ export default {
           limit: 5,
         }),
         await axios.get(`${process.env.TOYBOX_API_BASE_URL}/works?limit=30`),
-      ]).then(([c3Introduction, eachCommunity, news, blog, toyboxWork]) => {
-        const communities = []
-        const selectNews = []
-        for (let i = 0; i < eachCommunity.items.length; i++) {
-          communities.push({
-            id: eachCommunity.items[i].sys.id,
-            field: {
-              name: eachCommunity.items[i].fields.name,
-              domain: eachCommunity.items[i].fields.domain,
-              image: eachCommunity.items[i].fields.image.fields.file.url,
-              simage: eachCommunity.items[i].fields.smallimg.fields.file.url,
-            },
-          })
-        }
-        for (let i = 0; i < news.items.length; i++) {
-          if (news.items[i].fields.important) {
-            selectNews.push(news.items[i])
+        await axios.get(`${process.env.TOYBOX_API_BASE_URL}/blogs?limit=5`),
+      ]).then(
+        ([
+          c3Introduction,
+          eachCommunity,
+          news,
+          blog,
+          toyboxWork,
+          toyboxblog,
+        ]) => {
+          const communities = []
+          const selectNews = []
+          for (let i = 0; i < eachCommunity.items.length; i++) {
+            communities.push({
+              id: eachCommunity.items[i].sys.id,
+              field: {
+                name: eachCommunity.items[i].fields.name,
+                domain: eachCommunity.items[i].fields.domain,
+                image: eachCommunity.items[i].fields.image.fields.file.url,
+                simage: eachCommunity.items[i].fields.smallimg.fields.file.url,
+              },
+            })
           }
-        }
-        const latestNews = news.items.slice(0, 5)
+          for (let i = 0; i < news.items.length; i++) {
+            if (news.items[i].fields.important) {
+              selectNews.push(news.items[i])
+            }
+          }
+          const latestNews = news.items.slice(0, 5)
+
+          const works = toyboxWork.data.works.map((work) => {
+            return {
+              id: work.id,
+              title: work.title,
+              thumbnail: work.thumbnail.url,
+            }
+          })
 
-        const works = toyboxWork.data.works.map((work) => {
           return {
-            id: work.id,
-            title: work.title,
-            thumbnail: work.thumbnail.url,
+            c3Introduction:
+              c3Introduction.items[0].fields.summaryOfIntroduction,
+            eachCommunity: communities,
+            news: latestNews,
+            importantNews: selectNews,
+            blog: toyboxblog.data.blogs
+              .map(formatToybox)
+              .concat(blog.items)
+              .slice(0, 5),
+            works,
           }
-        })
-
-        return {
-          c3Introduction: c3Introduction.items[0].fields.summaryOfIntroduction,
-          eachCommunity: communities,
-          news: latestNews,
-          importantNews: selectNews,
-          blog: blog.items,
-          works,
         }
-      })
+      )
     } catch (e) {
       error({
         errorCode: e.errorCode,

utils/toybox.js

@@ -0,0 +1,49 @@
+export function formatToybox(blog) {
+  const tags = blog.tags.map((tag) => {
+    return {
+      fields: {
+        name: tag.name,
+      },
+      sys: {
+        id: tag.id,
+      },
+    }
+  })
+  return {
+    fields: {
+      body: blog.body_text,
+      digest: blog.body_text,
+      tags,
+      thumbnail: {
+        fields: {
+          file: {
+            url: blog.thumbnail.url,
+          },
+        },
+      },
+      title: blog.title,
+      user: [
+        {
+          fields: {
+            name: blog.user.name,
+            icon: {
+              fields: {
+                file: {
+                  url: blog.user.avatar_url,
+                },
+              },
+            },
+          },
+          sys: {
+            id: blog.user.id,
+          },
+        },
+      ],
+    },
+    sys: {
+      id: blog.id,
+      createdAt: blog.created_at,
+      updatedAt: blog.updated_at,
+    },
+  }
+}