[update] Full Staticモードにする

Author: shibe97

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  extends: [
+    '@nuxtjs',
+    'prettier',
+    'prettier/vue',
+    'plugin:prettier/recommended',
+    'plugin:nuxt/recommended',
+  ],
+  plugins: ['prettier'],
+  // add your custom rules here
+  rules: {
+    'vue/no-v-html': 'off',
+  },
+};

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "singleQuote": true
+}

README.md

@@ -1,22 +1,20 @@
-# blog
-
-> microCMS blog
+# microcms-blog
 
 ## Build Setup
 
-``` bash
+```bash
 # install dependencies
-$ yarn install
+$ npm install
 
 # serve with hot reload at localhost:3000
-$ yarn dev
+$ npm run dev
 
 # build for production and launch server
-$ yarn build
-$ yarn start
+$ npm run build
+$ npm run start
 
 # generate static project
-$ yarn generate
+$ npm run generate
 ```
 
 For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

components/Breadcrumb.vue

@@ -4,7 +4,7 @@
       <nuxt-link to="/">記事一覧</nuxt-link>
     </li>
     <li v-if="category !== undefined" class="breadcrumbList">
-      <nuxt-link v-bind:to="`/category/${category.id}/page/1`">{{
+      <nuxt-link :to="`/category/${category.id}/page/1`">{{
         category.name
       }}</nuxt-link>
     </li>
@@ -13,7 +13,13 @@
 
 <script>
 export default {
-  props: ['category']
+  props: {
+    category: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
 };
 </script>
 

components/Categories.vue

@@ -3,7 +3,7 @@
     <h1 class="pageTitle">カテゴリー</h1>
     <ul>
       <li v-for="category in categories" :key="category.id" class="list">
-        <nuxt-link v-bind:to="`/category/${category.id}/page/1`" class="link">{{
+        <nuxt-link :to="`/category/${category.id}/page/1`" class="link">{{
           category.name
         }}</nuxt-link>
       </li>
@@ -12,9 +12,14 @@
 </template>
 
 <script>
-import axios from 'axios';
 export default {
-  props: ['categories']
+  props: {
+    categories: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
 };
 </script>
 

components/Header.vue

@@ -11,7 +11,7 @@
       </button>
       <div v-if="open" class="mask" @click="setOpen(false)"></div>
 
-      <div class="menu" :class="{'isOpen': open}">
+      <div class="menu" :class="{ isOpen: open }">
         <ul class="lists">
           <li class="list">
             <a href="https://microcms.io/pricing">料金</a>
@@ -31,7 +31,9 @@
             <a class="signin" href="https://app.microcms.io/signin">ログイン</a>
           </li>
           <li class="list">
-            <a class="signup" v-bind:href="`https://app.microcms.io${params}`">新規登録</a>
+            <a class="signup" :href="`https://app.microcms.io${params}`"
+              >新規登録</a
+            >
           </li>
         </ul>
       </div>
@@ -42,11 +44,10 @@
 
 <script>
 export default {
-  props: ['isWhite'],
   data() {
     return {
       params: this.params || '',
-      open: false
+      open: false,
     };
   },
   mounted() {
@@ -58,8 +59,8 @@ export default {
     },
     toggleOpen() {
       this.open = !this.open;
-    }
-  }
+    },
+  },
 };
 </script>
 

components/Latest.vue

@@ -3,12 +3,9 @@
     <h1 class="pageTitle">最新の記事</h1>
     <ul>
       <li v-for="content in contents" :key="content.id" class="list">
-        <nuxt-link v-bind:to="`/${content.id}`" class="link">
+        <nuxt-link :to="`/${content.id}`" class="link">
           <dl class="content">
             <dt class="title">{{ content.title }}</dt>
-            <dd>
-              <Meta :createdAt="content.createdAt" :author="content.author" />
-            </dd>
           </dl>
         </nuxt-link>
       </li>
@@ -17,9 +14,14 @@
 </template>
 
 <script>
-import axios from 'axios';
 export default {
-  props: ['contents']
+  props: {
+    contents: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
 };
 </script>
 

components/Logo.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg
+    class="NuxtLogo"
+    width="245"
+    height="180"
+    viewBox="0 0 452 342"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
+      fill="#00C58E"
+    />
+    <path
+      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
+      fill="#108775"
+    />
+    <path
+      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
+      fill="#2F495E"
+    />
+  </svg>
+</template>
+
+<style>
+.NuxtLogo {
+  animation: 1s appear;
+  margin: auto;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+}
+</style>

components/Meta.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="category" v-if="category">{{ category.name }}</span>
+    <span v-if="category" class="category">{{ category.name }}</span>
     <div class="meta">
       <span class="timestamp">
         <img src="/blog/images/icon_clock.svg" alt />
@@ -16,7 +16,22 @@
 
 <script>
 export default {
-  props: ['createdAt', 'author', 'category']
+  props: {
+    createdAt: {
+      type: String,
+      required: true,
+    },
+    author: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    category: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+  },
 };
 </script>
 

components/Post.vue

@@ -4,7 +4,13 @@
 
 <script>
 export default {
-  props: ['body']
+  props: {
+    body: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
 };
 </script>
 

components/RelatedBlogs.vue

@@ -3,7 +3,7 @@
     <h2 class="pageTitle">関連記事</h2>
     <ul class="lists">
       <li v-for="blog in blogs" :key="blog.id" class="list">
-        <nuxt-link v-bind:to="`/${blog.id}`" class="link">
+        <nuxt-link :to="`/${blog.id}`" class="link">
           <picture>
             <source
               type="image/webp"
@@ -15,7 +15,7 @@
             <dt class="title">{{ blog.title }}</dt>
             <dd>
               <Meta
-                :createdAt="blog.createdAt"
+                :created-at="blog.createdAt"
                 :author="blog.writer.name"
                 :category="blog.category"
               />
@@ -28,13 +28,18 @@
 </template>
 
 <script>
-import axios from 'axios';
 import Meta from '~/components/Meta.vue';
 export default {
-  props: ['blogs'],
   components: {
-    Meta
-  }
+    Meta,
+  },
+  props: {
+    blogs: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
 };
 </script>
 

components/Toc.vue

@@ -2,7 +2,7 @@
   <div v-if="visible" class="wrapper">
     <h4 class="title">目次</h4>
     <ul class="lists">
-      <li :class="`list ${item.name}`" v-for="item in toc" :key="item.id">
+      <li v-for="item in toc" :key="item.id" :class="`list ${item.name}`">
         <n-link v-scroll-to="`#${item.id}`" to>
           {{ item.text }}
         </n-link>
@@ -13,7 +13,18 @@
 
 <script>
 export default {
-  props: ['toc', 'id', 'visible']
+  props: {
+    toc: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
 };
 </script>
 

components/Writer.vue

@@ -2,12 +2,20 @@
   <div class="wrapper">
     <h2 class="title">ABOUT ME</h2>
     <div class="container">
-      <img :src="writer.image.url + '?fit=crop&w=100&h=100&q=100'" class="image" alt />
+      <img
+        :src="writer.image.url + '?fit=crop&w=100&h=100&q=100'"
+        class="image"
+        alt
+      />
       <dl class="content">
         <dt class="name">
           {{ writer.name }}
-          <a class="twitterLink" v-bind:href="`https://twitter.com/${writer.id}`">
-            <img class="twitter" src="/blog/images/icon_twitter.svg" alt="Twitter" />
+          <a class="twitterLink" :href="`https://twitter.com/${writer.id}`">
+            <img
+              class="twitter"
+              src="/blog/images/icon_twitter.svg"
+              alt="Twitter"
+            />
           </a>
         </dt>
         <dd class="text">{{ writer.text }}</dd>
@@ -18,7 +26,13 @@
 
 <script>
 export default {
-  props: ['writer']
+  props: {
+    writer: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+  },
 };
 </script>