Productの項目を追加

src/App.vue

@@ -3,6 +3,7 @@
 
     <div class="w-full m-2 md:mx-auto md:w-2/3 z-10 ">
       <Header></Header>
+      <Products></Products>
       <Works></Works>
       <Skills></Skills>
     </div>
@@ -11,13 +12,16 @@
 
 <script>
 import Header from "./components/Header/ProfileCard.vue";
-import Works from "./components/Works/Works.vue";
+
 import Skills from "./components/Skills/Skills.vue";
+import Works from "./components/Works/Works.vue";
+import Products from "./components/Products/Products.vue";
 
 export default {
   name: "App",
   components: {
     Header,
+    Products,
     Works,
     Skills,
   },

src/components/Card.vue

@@ -0,0 +1,47 @@
+<template>
+<div class="grid gap-4 grid-cols-1 md:grid-cols-3">
+    <div v-for="content in contents" :key='content.id' class="flex flex-warp">
+        <div class="overflow-hidden rounded shadow-lg h-50 bg-gray-100 cursor-pointer" v-on:click="toggleModal(content.id)">
+           <img class="object-contain" :src="content.default_image.url" />
+            <div class="p-4">
+                <h3>{{content.title}}</h3>
+                <p class="text-xs text-gray-400">{{content.date.slice(0,10)}}</p>
+                <p class="my-2 text-base mx-1">{{content.abstract}}</p>
+                <p v-show="content.categories != null" class="tag" v-for="category in content.categories"  :key="category.index">{{category.name}}</p> 
+            </div>                 
+        </div>
+        <Modal v-if="showModal==content.id" v-bind:content="content" v-on:close="toggleModal(content.id)"></Modal>
+    </div>
+</div>
+
+</template>
+
+<script>
+import Modal from "./Modal.vue";
+
+export default {
+    props: ['contents'],
+    name: "Contents",
+    components: {
+        Modal,
+        
+    },
+    data() {
+        return {
+            showModal: false,
+        }
+    },
+
+    methods: {
+        toggleModal(id){
+            if(!this.showModal){
+                this.showModal = id;
+            } else {
+                this.showModal =false;
+            }
+            
+        },
+        
+    },
+}
+</script>

src/components/Works/Modal.vue → src/components/Modal.vue

@@ -5,47 +5,49 @@
             <div class="  md:h-screen-80 border-0  rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                 <!--header-->
                 <div class="flex md:h-20 items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t">
-                    <h3 class="text-3xl font-semibold">{{ work.title }}</h3>
+                    <h3 class="text-3xl font-semibold">{{ content.title }}</h3>
                     <button class="md:-8 w-8 overflow-hidden stroke-current text-red-500 bg-transparent border border-solid border-red-500 hover:border-gray-500 hover:text-gray-500 active:bg-red-600 font-bold text-sm rounded outline-none focus:outline-none" type="button" v-on:click="closeModal">
                         <svg class="stroke" width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"><path d="M0,0l15,15"/><path d="M15,0l-15,15" /></svg>
                     </button>
                 </div>
                 <!--body-->
                 <div class="overflow-y-auto p-6">
-                    <p class="text-normal-color text-lg">{{work.abstract}}</p>
+                    <p class="text-normal-color text-lg">{{content.abstract}}</p>
                     <div class="w-full">
                         <content-loader class="object-contain my-4" v-show="isLoading"></content-loader>
-                        <img v-show="!isLoading" class="object-contain my-4" :src="work.hover_image.url" v-on:load="loaded"/>
+                        <div v-if="content.hover_image"><img  v-show="!isLoading" class="object-contain my-4" :src="content.hover_image.url" v-on:load="loaded"/></div>
+                        <div v-else><img  v-show="!isLoading" class="object-contain my-4" :src="content.default_image.url" v-on:load="loaded"/></div>
+                    </div>
+                    <div v-if="content.links.length">
+                        <h3 class="font-bold text-normal-color">Link</h3>
+                        <ul >
+                            <li v-for="link in content.links" :key='link.url' >
+                                <a class="hover:text-blue-300" :href= link.url>{{ link.displayName }}</a>
+                            </li>
+                        </ul>
                     </div>
-                    <h3 class="font-bold text-normal-color">Link</h3>
-
-                    <ul>
-                        <li  v-for="link in work.links" :key='link.url' >
-                            <a class="hover:text-blue-300" :href= link.url>{{ link.displayName }}</a>
-                        </li>
-                    </ul>
 
                 </div>
                 <!--footer-->
-                <div class="p-6 md:h-20 border-gray-300 rounded-b">
-                    <p class="tag" v-for="category in work.categories"  :key="category.index">{{category.name}}</p>                   
+                <div v-if="content.categories.length" class="p-6 md:h-20 border-gray-300 rounded-b">
+                    <p  class="tag" v-for="category in content.categories"  :key="category.index">{{category.name}}</p>                   
                 </div>
              </div>
         </div>
     </div>
 
     <div class="overflow-x-hidden overflow-y-auto pattern-dots-sm text-blue-700 fixed inset-0 outline-none focus:outline-none justify-left items-left ">
         <div class="opacity-25 fixed inset-0 bg-black"></div>
-        <p class="opacity-60 text-9xl m-0 p-0 text-blue-700 font-black">WORKS/<br>{{work.title}}</p>   
+        <p class="opacity-60 text-9xl m-0 p-0 text-blue-700 font-black">{{content.title}}</p>   
     </div>    
 </template>
 
 <script>
 import { ContentLoader } from 'vue-content-loader'
 
 export default {
-    props: ['work'],
-    name: "work-modal",
+    props: ['content'],
+    name: "content-modal",
     components: {
         ContentLoader
     },
@@ -55,6 +57,7 @@ export default {
             isLoading: true
         }
     },
+    emits: ['close'],
     methods: {
         closeModal:function(){
             this.$emit('close');

src/components/Products/Products.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="w-full text-left p-3 mt-5">
+    <h1>Products</h1>
+    <section class="my-4">
+    <Card :contents ="products.contents"></Card>
+    </section>
+
+  </div>
+</template>
+
+<script>
+import Card from "../Card.vue";
+import axios from "axios";
+export default {
+  name: "product",
+  data() {
+    return {
+      showModal: false,
+      products: [],
+    }
+  },
+  components: {
+    Card,
+  },
+  async mounted() {
+    // productsを取得
+    //秘密にする必要がないため公開してます。
+    const response = await axios.get(
+      "https://yukyu-myportfolio.microcms.io/api/v1/products",
+      {
+        headers: { "X-API-KEY": process.env.VUE_APP_X_API_KEY}
+      }
+    );
+    this.products = response.data;
+  }
+};
+</script>

src/components/Works/Works.vue

@@ -2,14 +2,14 @@
   <div class="w-full text-left p-3 mt-5">
     <h1>Works</h1>
     <section class="my-4">
-    <Card :works="works.contents"></Card>
+    <Card :contents ="works.contents"></Card>
     </section>
 
   </div>
 </template>
 
 <script>
-import Card from "./Card.vue";
+import Card from "../Card.vue";
 import axios from "axios";
 export default {
   name: "work",
@@ -23,7 +23,7 @@ export default {
     Card,
   },
   async mounted() {
-    // Worksを取得
+    // worksを取得
     //秘密にする必要がないため公開してます。
     const response = await axios.get(
       "https://yukyu-myportfolio.microcms.io/api/v1/works",