update: ブログ詳細ページのToyboxBlogへの対応

Kyutech-C3 · Nov 28, 2023 · a126390 · a126390
1 parent a64b338
commit a126390
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 53 deletions.
diff --git a/pages/blog/_id.vue b/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>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -18,6 +18,8 @@ import BaseBreadcrumbs from '~/components/commons/BaseBreadcrumbs.vue'
 
 import sdkClient from '@/plugins/contentful.js'
 
+import { formatToybox } from '~/utils/toybox'
+
 export default {
   components: {
     CardList,
@@ -38,53 +40,7 @@ export default {
         }),
         await axios.get(`${process.env.TOYBOX_API_BASE_URL}/blogs`),
       ]).then(([ctfResult, toyboxResult]) => {
-        const blogs = toyboxResult.data.blogs.map((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,
-            },
-          }
-        })
+        const blogs = toyboxResult.data.blogs.map(formatToybox)
         return {
           entry_list: blogs.concat(ctfResult.items),
         }

diff --git a/utils/toybox.js b/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,
+    },
+  }
+}