├── static
    ├── og.png
    ├── icon.png
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── apple-touch-icon.png
    └── fonts
    │   ├── noto-serif.woff
    │   ├── noto-serif.woff2
    │   ├── YakuHanMP-Medium.woff
    │   └── YakuHanMP-Medium.woff2
├── lib
    └── helpers.js
├── .gitignore
├── jest-puppeteer.config.js
├── config
    └── constant.js
├── jest.config.js
├── .editorconfig
├── test
    └── e2e
    │   └── index.spec.js
├── components
    ├── LayoutInside.vue
    ├── TagList.vue
    ├── ButtonMore.vue
    ├── PostList.vue
    ├── PostContainer.vue
    └── DummyPostList.vue
├── pages
    ├── error
    │   └── 404.vue
    ├── index.vue
    ├── tag
    │   └── _id.vue
    └── entry
    │   └── _id.vue
├── assets
    ├── scss
    │   ├── base
    │   │   ├── _font.scss
    │   │   └── _reset.scss
    │   ├── index.scss
    │   └── foundation
    │   │   ├── _variables.scss
    │   │   └── _mixin.scss
    └── images
    │   └── logo.svg
├── layouts
    ├── partial
    │   ├── TheError.vue
    │   ├── TheMain.vue
    │   ├── TheHeader.vue
    │   └── TheFooter.vue
    └── default.vue
├── README.md
├── .eslintrc.js
├── api
    └── index.js
├── .circleci
    └── config.yml
├── package.json
├── nuxt.config.js
└── store
    └── index.js


/static/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nishinoshake/houga-blog/HEAD/static/og.png


--------------------------------------------------------------------------------
/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nishinoshake/houga-blog/HEAD/static/icon.png


--------------------------------------------------------------------------------
/lib/helpers.js:
--------------------------------------------------------------------------------
1 | export const uniq = arr => arr.filter((val, i, self) => self.indexOf(val) === i)
2 | 


--------------------------------------------------------------------------------
/static/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nishinoshake/houga-blog/HEAD/static/favicon-16x16.png


--------------------------------------------------------------------------------
/static/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nishinoshake/houga-blog/HEAD/static/favicon-32x32.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | sw.*
3 | .env
4 | .nuxt
5 | node_modules/
6 | dist/
7 | coverage/
8 | static/sitemap.xml
9 | 


--------------------------------------------------------------------------------
/static/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nishinoshake/houga-blog/HEAD/static/apple-touch-icon.png


--------------------------------------------------------------------------------
/static/fonts/noto-serif.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nishinoshake/houga-blog/HEAD/static/fonts/noto-serif.woff


--------------------------------------------------------------------------------
/static/fonts/noto-serif.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nishinoshake/houga-blog/HEAD/static/fonts/noto-serif.woff2


--------------------------------------------------------------------------------
/jest-puppeteer.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   server: {
3 |     command: 'yarn serve',
4 |     port: 8888
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/static/fonts/YakuHanMP-Medium.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nishinoshake/houga-blog/HEAD/static/fonts/YakuHanMP-Medium.woff


--------------------------------------------------------------------------------
/static/fonts/YakuHanMP-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nishinoshake/houga-blog/HEAD/static/fonts/YakuHanMP-Medium.woff2


--------------------------------------------------------------------------------
/config/constant.js:
--------------------------------------------------------------------------------
1 | export const CONTENT_TYPE_POST = 'post'
2 | export const CONTENT_TYPE_TAG = 'tag'
3 | export const POSTS_PER_PAGE = 30
4 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   verbose: true,
3 |   testURL: 'http://localhost/',
4 |   preset: 'jest-puppeteer',
5 |   moduleNameMapper: {
6 |     '^@/(.*)$': '<rootDir>/$1'
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/test/e2e/index.spec.js:
--------------------------------------------------------------------------------
 1 | const buildUrl = path => `http://localhost:8888${path}`
 2 | 
 3 | // 雑
 4 | test('トップページにエラーがない', async () => {
 5 |   const p = await browser.newPage()
 6 | 
 7 |   await p.goto(buildUrl('/'))
 8 | 
 9 |   const error = await p.$('.error')
10 | 
11 |   expect(error).toBeNull()
12 | 
13 |   p.close()
14 | })
15 | 


--------------------------------------------------------------------------------
/components/LayoutInside.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="layout-inside">
 3 |     <slot />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .layout-inside {
 9 |   @include max {
10 |     padding: 0 30px;
11 |   }
12 |   @include min {
13 |     width: 820px;
14 |     margin: 0 auto;
15 |     padding: 0 60px;
16 |     box-sizing: content-box;
17 |   }
18 | }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/pages/error/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p class="oops">ナニカガオカシイデス</p>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   head() {
 8 |     return {
 9 |       title: `ナニカガオカシイデス | 邦画だってさ`
10 |     }
11 |   }
12 | }
13 | </script>
14 | 
15 | <style lang="scss" scoped>
16 | .oops {
17 |   margin: 2rem 0 8rem;
18 |   font-size: 2rem;
19 |   @include min {
20 |     font-size: 2.5rem;
21 |   }
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/assets/scss/base/_font.scss:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | 
 3 | @font-face {
 4 |   font-family: YakuHanMP;
 5 |   font-style: normal;
 6 |   font-weight: normal;
 7 |   src: url(/fonts/YakuHanMP-Medium.woff2) format('woff2'), url(/fonts/YakuHanMP-Medium.woff) format('woff');
 8 | }
 9 | 
10 | @font-face {
11 |   font-family: 'noto-serif';
12 |   font-style: normal;
13 |   font-weight: normal;
14 |   src: url(/fonts/noto-serif.woff2) format('woff2'), url(/fonts/noto-serif.woff) format('woff');
15 | }
16 | 


--------------------------------------------------------------------------------
/assets/scss/index.scss:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | 
 3 | // ==========================================================================
 4 | // variables & mixin
 5 | // ==========================================================================
 6 | @import 'foundation/variables';
 7 | @import 'foundation/mixin';
 8 | 
 9 | // ==========================================================================
10 | // base
11 | // ==========================================================================
12 | @import 'base/reset';
13 | @import 'base/font';
14 | 


--------------------------------------------------------------------------------
/layouts/partial/TheError.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p class="error">{{ message }}</p>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     message: String
 9 |   }
10 | }
11 | </script>
12 | 
13 | <style lang="scss" scoped>
14 | .error {
15 |   bottom: 2rem;
16 |   padding: 1rem 2rem;
17 |   font-size: 1.2rem;
18 |   font-family: sans-serif;
19 |   color: $color-white;
20 |   white-space: nowrap;
21 |   background-color: $color-error;
22 |   border-radius: 0.6rem;
23 |   @include center-horizontal(fixed);
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 邦画だってさ
 2 | 
 3 | [Contentful](https://www.contentful.com)と[Nuxt.js](https://ja.nuxtjs.org)で構築したブログです。  
 4 | ブログを作って満足してしまったので、記事はまだ全部（仮）です。  
 5 | 
 6 | https://blog.houga.cc
 7 | 
 8 | ## 使い方
 9 | Contentfulのアクセストークンを環境変数に設定しないと動きませんが参考までに。
10 | 
11 | ```
12 | # インストール
13 | yarn
14 | 
15 | # 開発
16 | yarn dev
17 | 
18 | # 静的ファイル生成
19 | yarn generate
20 | ```
21 | 
22 | ## インフラ構成
23 | Nuxt.jsで静的に生成したファイルをS3へホスティングして、手前にCloudFrontを置いています。  
24 | 
25 | ## ご意見・ご要望
26 | ブログに関するご意見・ご要望がありましたら、issueにあげていただくか、下記のメールまでご連絡をお願いいたします。
27 | 
28 | lawson.and.7.11@gmail.com
29 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   globals: {
11 |     test: true,
12 |     browser: true,
13 |     expect: true
14 |   },
15 |   extends: [
16 |     'standard',
17 |     'plugin:vue/essential',
18 |     'plugin:prettier/recommended'
19 |   ],
20 |   plugins: [
21 |     'vue',
22 |   ],
23 |   rules: {
24 |     'no-new': 'off',
25 |     'prettier/prettier': ['error', {
26 |       'singleQuote': true,
27 |       'semi': false,
28 |       'printWidth': 120
29 |     }]
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/components/TagList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="tag-list">
 3 |     <li class="tag-item" v-for="tag in tags" :key="tag.sys.id">
 4 |       <nuxt-link :to="`/tag/${tag.sys.id}/`">#{{ tag.fields.title }}</nuxt-link>
 5 |     </li>
 6 |   </ul>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     tags: Array
13 |   }
14 | }
15 | </script>
16 | 
17 | <style lang="scss" scoped>
18 | .tag {
19 |   &-list {
20 |     display: flex;
21 |     flex-wrap: wrap;
22 |     margin: -0.4rem;
23 |   }
24 |   &-item {
25 |     margin: 0.4rem;
26 |     font-size: 1.4rem;
27 |     a {
28 |       text-decoration: none;
29 |       @include link-text;
30 |     }
31 |   }
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/components/ButtonMore.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button class="button-more" @click="handleClick">もっと見る</button>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     handleClick: Function
 9 |   }
10 | }
11 | </script>
12 | 
13 | <style lang="scss" scoped>
14 | .button {
15 |   &-more {
16 |     margin-top: 3rem;
17 |     padding: 1rem 2rem;
18 |     display: inline-flex;
19 |     justify-content: center;
20 |     align-items: center;
21 |     font-size: 1.4rem;
22 |     line-height: 1;
23 |     white-space: nowrap;
24 |     letter-spacing: 0.12em;
25 |     border: 2px solid currentColor;
26 |     border-radius: 999em;
27 |     @include font-serif;
28 |     @include min {
29 |       &:hover {
30 |         color: $color-modest;
31 |       }
32 |     }
33 |   }
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/api/index.js:
--------------------------------------------------------------------------------
 1 | import { createClient } from 'contentful'
 2 | import { CONTENT_TYPE_POST, CONTENT_TYPE_TAG, POSTS_PER_PAGE } from '@/config/constant'
 3 | 
 4 | const client = createClient({
 5 |   space: process.env.SPACE_ID,
 6 |   accessToken: process.env.ACCESS_TOKEN
 7 | })
 8 | 
 9 | export const fetchPosts = ({ page, tagId = null }) => {
10 |   let param = {
11 |     content_type: CONTENT_TYPE_POST,
12 |     order: '-fields.releaseDate',
13 |     skip: (page - 1) * POSTS_PER_PAGE,
14 |     limit: POSTS_PER_PAGE
15 |   }
16 | 
17 |   if (tagId) {
18 |     param['fields.tags.sys.id'] = tagId
19 |   }
20 | 
21 |   return client.getEntries(param)
22 | }
23 | 
24 | export const fetchPost = id => client.getEntry(id)
25 | 
26 | export const fetchTags = () =>
27 |   client.getEntries({
28 |     content_type: CONTENT_TYPE_TAG
29 |   })
30 | 


--------------------------------------------------------------------------------
/layouts/partial/TheMain.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main class="main">
 3 |     <LayoutInside>
 4 |       <nuxt />
 5 |       <div class="main-tag">
 6 |         <h2 class="main-tag-title">#タグで探す</h2>
 7 |         <TagList :tags="tags" />
 8 |       </div>
 9 |     </LayoutInside>
10 |   </main>
11 | </template>
12 | 
13 | <script>
14 | import { mapGetters } from 'vuex'
15 | import LayoutInside from '@/components/LayoutInside'
16 | import TagList from '@/components/TagList'
17 | 
18 | export default {
19 |   components: {
20 |     TagList,
21 |     LayoutInside
22 |   },
23 |   computed: {
24 |     ...mapGetters(['tags'])
25 |   }
26 | }
27 | </script>
28 | 
29 | <style lang="scss" scoped>
30 | .main {
31 |   &-tag {
32 |     margin-top: 8rem;
33 |     &-title {
34 |       margin-bottom: 1rem;
35 |       font-size: 1.8rem;
36 |       letter-spacing: 0.12em;
37 |     }
38 |   }
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/components/PostList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="post-list">
 3 |     <li class="post-item" v-for="post in posts" :key="post.sys.id">
 4 |       <nuxt-link :to="`/entry/${post.sys.id}/`">{{ post.fields.title }}</nuxt-link>
 5 |     </li>
 6 |   </ul>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     posts: Array
13 |   }
14 | }
15 | </script>
16 | 
17 | <style lang="scss" scoped>
18 | .post {
19 |   &-list {
20 |   }
21 |   &-item {
22 |     font-size: 1.8rem;
23 |     letter-spacing: 0.12em;
24 |     @include min {
25 |       font-size: 2.2rem;
26 |     }
27 |     &:nth-child(n + 2) {
28 |       margin-top: 2rem;
29 |       @include min {
30 |         margin-top: 2.5rem;
31 |       }
32 |     }
33 |     a {
34 |       @include min {
35 |         &:hover {
36 |           color: $color-modest;
37 |         }
38 |       }
39 |     }
40 |   }
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/layouts/partial/TheHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="header">
 3 |     <LayoutInside>
 4 |       <p class="header-logo">
 5 |         <nuxt-link to="/"><img src="@/assets/images/logo.svg" alt="邦画だってさ"></nuxt-link>
 6 |       </p>
 7 |     </LayoutInside>
 8 |   </header>
 9 | </template>
10 | 
11 | <script>
12 | import LayoutInside from '@/components/LayoutInside'
13 | 
14 | export default {
15 |   components: {
16 |     LayoutInside
17 |   }
18 | }
19 | </script>
20 | 
21 | <style lang="scss" scoped>
22 | .header {
23 |   padding: 7rem 0;
24 |   @include min {
25 |     padding: 8rem 0;
26 |   }
27 |   &-logo {
28 |     font-size: 2rem;
29 |     letter-spacing: 0.12em;
30 |     line-height: 1;
31 |     a {
32 |       display: inline-block;
33 |       @include min {
34 |         &:hover {
35 |           opacity: 0.8;
36 |         }
37 |       }
38 |     }
39 |     img {
40 |       width: 180px;
41 |       height: auto;
42 |       @include min {
43 |         width: 220px;
44 |       }
45 |     }
46 |   }
47 | }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/components/PostContainer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="page-container">
 3 |     <PostList :posts="posts" />
 4 |     <DummyPostList v-if="isFetching" />
 5 |     <ButtonMore v-if="hasMorePosts" :handle-click="handleClickMore" />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import { mapState } from 'vuex'
11 | import PostList from '@/components/PostList'
12 | import DummyPostList from '@/components/DummyPostList'
13 | import ButtonMore from '@/components/ButtonMore'
14 | 
15 | export default {
16 |   components: {
17 |     PostList,
18 |     DummyPostList,
19 |     ButtonMore
20 |   },
21 |   props: {
22 |     pageType: String,
23 |     posts: Array,
24 |     handleClickMore: Function
25 |   },
26 |   computed: {
27 |     ...mapState(['index']),
28 |     page() {
29 |       return this.index[this.pageType].page
30 |     },
31 |     lastPage() {
32 |       return this.index[this.pageType].lastPage
33 |     },
34 |     isFetching() {
35 |       return this.index[this.pageType].isFetching
36 |     },
37 |     hasMorePosts() {
38 |       return !this.isFetching && this.page < this.lastPage
39 |     }
40 |   }
41 | }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="index">
 3 |     <PostContainer
 4 |       page-type="post"
 5 |       :posts="posts"
 6 |       :handle-click-more="fetchMore"
 7 |     />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import { mapState, mapGetters, mapActions } from 'vuex'
13 | import PostContainer from '@/components/PostContainer'
14 | import { CONTENT_TYPE_POST } from '@/config/constant'
15 | 
16 | export default {
17 |   components: {
18 |     PostContainer
19 |   },
20 |   computed: {
21 |     ...mapGetters(['posts']),
22 |     ...mapState({
23 |       page: state => state.index.post.page
24 |     })
25 |   },
26 |   async fetch({ store }) {
27 |     if (!process.browser) {
28 |       await store.dispatch('fetchPosts', { pageType: CONTENT_TYPE_POST, page: 1 })
29 |     }
30 |   },
31 |   mounted() {
32 |     if (!this.posts.length) {
33 |       this.fetchPosts({ pageType: CONTENT_TYPE_POST, page: 1 })
34 |     }
35 |   },
36 |   methods: {
37 |     ...mapActions(['fetchPosts']),
38 |     fetchMore() {
39 |       this.fetchPosts({ pageType: CONTENT_TYPE_POST, page: this.page + 1 })
40 |     }
41 |   }
42 | }
43 | </script>
44 | 


--------------------------------------------------------------------------------
/assets/scss/base/_reset.scss:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body,
 6 | div,
 7 | dl,
 8 | dt,
 9 | dd,
10 | ul,
11 | ol,
12 | li,
13 | h1,
14 | h2,
15 | h3,
16 | h4,
17 | h5,
18 | h6,
19 | pre,
20 | code,
21 | form,
22 | fieldset,
23 | legend,
24 | input,
25 | textarea,
26 | p,
27 | blockquote,
28 | th,
29 | td,
30 | button,
31 | figure,
32 | figcaption {
33 |   margin: 0;
34 |   padding: 0;
35 | }
36 | 
37 | main {
38 |   display: block;
39 | }
40 | 
41 | table {
42 |   border-collapse: collapse;
43 |   border-spacing: 0;
44 | }
45 | 
46 | fieldset,
47 | img {
48 |   border: 0;
49 | }
50 | 
51 | button {
52 |   border: 0;
53 |   outline: none;
54 |   background-color: transparent;
55 |   box-shadow: none;
56 |   cursor: pointer;
57 | }
58 | 
59 | address,
60 | caption,
61 | cite,
62 | code,
63 | dfn,
64 | em,
65 | strong,
66 | th,
67 | var {
68 |   font-style: normal;
69 |   font-weight: normal;
70 | }
71 | 
72 | ol,
73 | ul {
74 |   list-style: none;
75 | }
76 | 
77 | h1,
78 | h2,
79 | h3,
80 | h4,
81 | h5,
82 | h6 {
83 |   font-size: 100%;
84 |   font-weight: normal;
85 | }
86 | 
87 | a {
88 |   color: inherit;
89 |   text-decoration: none;
90 | }
91 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <TheHeader />
 4 |     <TheMain />
 5 |     <TheFooter />
 6 |     <TheError v-if="error" :message="error" />
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { mapState } from 'vuex'
12 | import TheHeader from '@/layouts/partial/TheHeader'
13 | import TheMain from '@/layouts/partial/TheMain'
14 | import TheFooter from '@/layouts/partial/TheFooter'
15 | import TheError from '@/layouts/partial/TheError'
16 | 
17 | export default {
18 |   components: {
19 |     TheHeader,
20 |     TheMain,
21 |     TheFooter,
22 |     TheError
23 |   },
24 |   computed: {
25 |     ...mapState(['error'])
26 |   }
27 | }
28 | </script>
29 | 
30 | <style lang="scss">
31 | // ==========================================================================
32 | // !!!グローバル!!!
33 | // ==========================================================================
34 | html {
35 |   font-size: 12px;
36 |   @include min {
37 |     font-size: 16px;
38 |   }
39 | }
40 | body {
41 |   font-weight: normal;
42 |   line-height: 1.6;
43 |   letter-spacing: 0.14em;
44 |   color: $color-font;
45 |   @include font-serif;
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | 
 3 | jobs:
 4 |   build:
 5 |     working_directory: ~/app
 6 |     docker:
 7 |       - image: circleci/python:3.6-jessie-node-browsers
 8 |     steps:
 9 |       - checkout
10 |       - restore_cache:
11 |           name: Restore Yarn Package Cache
12 |           keys:
13 |             - yarn-packages-{{ checksum "yarn.lock" }}
14 |       - run: yarn install
15 |       - save_cache:
16 |           name: Save Yarn Package Cache
17 |           key: yarn-packages-{{ checksum "yarn.lock" }}
18 |           paths:
19 |             - ~/.cache/yarn
20 |       - run: yarn generate
21 |       - run: yarn test
22 |       - run: sudo pip install awscli
23 |       - run: aws s3 sync ./dist/ s3://blog.houga.cc --exact-timestamps --delete --exclude "*.html" --cache-control max-age=31536000
24 |       - run: aws s3 sync ./dist/ s3://blog.houga.cc --exact-timestamps --delete --exclude "*" --include "*.html" --cache-control no-store
25 |       - run: aws cloudfront create-invalidation --distribution-id $CF_DIST_ID --paths "/*"
26 | 
27 | workflows:
28 |   version: 2
29 |   build-deploy:
30 |     jobs:
31 |       - build:
32 |           filters:
33 |             branches:
34 |               only: master
35 | 


--------------------------------------------------------------------------------
/components/DummyPostList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="dummy-post-list">
 3 |     <li class="dummy-post-item" v-for="i in 10" :key="i">○○○○</li>
 4 |   </ul>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .dummy-post {
 9 |   &-item {
10 |     width: 14em;
11 |     max-width: 100%;
12 |     margin-top: 2rem;
13 |     position: relative;
14 |     overflow: hidden;
15 |     font-size: 2rem;
16 |     border-radius: 0.2rem;
17 |     @include hide-text;
18 |     @include min {
19 |       margin-top: 2.5rem;
20 |       font-size: 2.2rem;
21 |     }
22 |     &:before {
23 |       content: '';
24 |       width: 200%;
25 |       height: 100%;
26 |       position: absolute;
27 |       top: 0;
28 |       left: 0;
29 |       background: linear-gradient(to right, #eee 0%, #eaeaea 50%, #eee 50%, #eaeaea 100%);
30 |       transform: translateX(-50%);
31 |       animation: anime-loading 0.8s ease-in-out infinite;
32 |     }
33 |   }
34 | }
35 | 
36 | @keyframes anime-loading {
37 |   0% {
38 |     transform: translateX(-50%);
39 |   }
40 |   100% {
41 |     transform: translateX(0);
42 |   }
43 | }
44 | 
45 | @for $i from 1 through 10 {
46 |   .dummy-post-item:nth-of-type(#{$i + 1}):before {
47 |     animation-delay: #{- (10 - $i) * 100ms};
48 |   }
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/layouts/partial/TheFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="footer">
 3 |     <LayoutInside>
 4 |       <ul class="footer-list">
 5 |         <li class="footer-item">
 6 |           <a href="https://github.com/noplan1989/houga-blog" target="_blank" rel="noopener">GITHUB</a>
 7 |         </li>
 8 |       </ul>
 9 |     </LayoutInside>
10 |   </footer>
11 | </template>
12 | 
13 | <script>
14 | import LayoutInside from '@/components/LayoutInside'
15 | 
16 | export default {
17 |   components: {
18 |     LayoutInside
19 |   }
20 | }
21 | </script>
22 | 
23 | <style lang="scss" scoped>
24 | .footer {
25 |   padding: 8rem 0 6rem;
26 |   &-list {
27 |     display: flex;
28 |     align-items: center;
29 |     justify-content: flex-end;
30 |     margin-top: 0.3rem;
31 |     font-size: 1.1rem;
32 |     font-family: sans-serif;
33 |     font-weight: bold;
34 |     color: $color-modest;
35 |   }
36 |   &-item {
37 |     display: flex;
38 |     align-items: center;
39 |     &:nth-child(n + 2) {
40 |       &:before {
41 |         content: '/';
42 |         margin: 0 0.15em;
43 |         padding-bottom: 0.1em;
44 |       }
45 |     }
46 |     a {
47 |       @include min {
48 |         &:hover {
49 |           color: $color-font;
50 |         }
51 |       }
52 |     }
53 |   }
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/pages/tag/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="tag">
 3 |     <h2 class="tag-title" v-if="tag">#{{ tag.fields.title }}</h2>
 4 |     <PostContainer
 5 |       page-type="tag"
 6 |       :posts="posts"
 7 |       :handle-click-more="fetchMore"
 8 |     />
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import { mapState, mapGetters, mapActions } from 'vuex'
14 | import { CONTENT_TYPE_TAG } from '@/config/constant'
15 | import PostContainer from '@/components/PostContainer'
16 | 
17 | export default {
18 |   components: {
19 |     PostContainer
20 |   },
21 |   head() {
22 |     return {
23 |       title: `#${this.tag.fields.title} | 邦画だってさ`
24 |     }
25 |   },
26 |   computed: {
27 |     ...mapGetters({
28 |       tag: 'tag',
29 |       posts: 'tagPosts'
30 |     }),
31 |     ...mapState({
32 |       page: state => state.index.tag.page
33 |     })
34 |   },
35 |   async fetch({ store, params }) {
36 |     store.commit('setTagId', { id: params.id })
37 |     store.commit('clearPostIds', { pageType: CONTENT_TYPE_TAG })
38 | 
39 |     if (!process.browser) {
40 |       await store.dispatch('fetchPosts', {
41 |         pageType: CONTENT_TYPE_TAG,
42 |         page: 1,
43 |         tagId: params.id
44 |       })
45 |     }
46 |   },
47 |   mounted() {
48 |     if (!this.posts.length) {
49 |       this.fetchPosts({
50 |         pageType: CONTENT_TYPE_TAG,
51 |         page: 1,
52 |         tagId: this.$route.params.id
53 |       })
54 |     }
55 |   },
56 |   methods: {
57 |     ...mapActions(['fetchPosts']),
58 |     fetchMore() {
59 |       this.fetchPosts({
60 |         pageType: CONTENT_TYPE_TAG,
61 |         page: this.page + 1,
62 |         tagId: this.$route.params.id
63 |       })
64 |     }
65 |   }
66 | }
67 | </script>
68 | 
69 | <style lang="scss" scoped>
70 | .tag {
71 |   &-title {
72 |     margin-bottom: 4rem;
73 |     font-size: 2rem;
74 |     letter-spacing: 0.16em;
75 |   }
76 | }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "houga-blog",
 3 |   "version": "1.0.0",
 4 |   "description": "My first-rate Nuxt.js project",
 5 |   "author": "noplan1989",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "analyze": "nuxt build --analyze",
11 |     "generate": "nuxt generate",
12 |     "serve": "http-server ./dist -p 8888",
13 |     "test": "jest",
14 |     "format": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
15 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
16 |     "precommit": "lint-staged"
17 |   },
18 |   "lint-staged": {
19 |     "*.{js,vue}": [
20 |       "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
21 |       "git add"
22 |     ]
23 |   },
24 |   "dependencies": {
25 |     "@nuxtjs/dotenv": "^1.4.1",
26 |     "@nuxtjs/google-analytics": "^2.2.3",
27 |     "@nuxtjs/pwa": "^3.0.0-beta.19",
28 |     "@nuxtjs/sitemap": "^2.0.1",
29 |     "@nuxtjs/style-resources": "^1.0.0",
30 |     "contentful": "^7.13.1",
31 |     "cross-env": "^7.0.0",
32 |     "markdown-it": "^10.0.0",
33 |     "nuxt": "^2.11.0"
34 |   },
35 |   "devDependencies": {
36 |     "@babel/core": "^7.8.4",
37 |     "babel-eslint": "^10.0.3",
38 |     "babel-jest": "^25.1.0",
39 |     "eslint": "^6.8.0",
40 |     "eslint-config-prettier": "^6.10.0",
41 |     "eslint-config-standard": "^14.1.0",
42 |     "eslint-plugin-import": "^2.20.0",
43 |     "eslint-plugin-node": "^11.0.0",
44 |     "eslint-plugin-prettier": "^3.1.2",
45 |     "eslint-plugin-promise": "^4.2.1",
46 |     "eslint-plugin-standard": "^4.0.1",
47 |     "eslint-plugin-vue": "^6.1.2",
48 |     "http-server": "^0.12.1",
49 |     "husky": "^4.2.1",
50 |     "jest": "^25.1.0",
51 |     "jest-puppeteer": "^4.4.0",
52 |     "lint-staged": "^10.0.6",
53 |     "node-sass": "^4.13.1",
54 |     "nodemon": "^2.0.2",
55 |     "prettier": "^1.19.1",
56 |     "puppeteer": "^2.1.0",
57 |     "sass-loader": "^8.0.2"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/assets/scss/foundation/_variables.scss:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | 
 3 | // -----------------------------------------------------
 4 | // color
 5 | // -----------------------------------------------------
 6 | $color-black: #000;
 7 | $color-dark: #111;
 8 | $color-font: #2a2a2a;
 9 | $color-modest: #666;
10 | $color-link: #1976d2;
11 | $color-link-hover: lighten($color-link, 20%);
12 | $color-error: #e05243;
13 | $color-gray: #eee;
14 | $color-snow: #f1f1f1;
15 | $color-white: #fff;
16 | 
17 | // -----------------------------------------------------
18 | // size
19 | // -----------------------------------------------------
20 | $mq-max: 956px;
21 | $mq-min: $mq-max+1;
22 | 
23 | // -----------------------------------------------------
24 | // easing
25 | // -----------------------------------------------------
26 | $easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
27 | $easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
28 | $easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
29 | $easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
30 | $easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
31 | $easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
32 | $easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
33 | $easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
34 | $easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
35 | $easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
36 | $easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
37 | $easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
38 | $easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
39 | $easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
40 | $easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
41 | $easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
42 | $easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
43 | $easeInOutExpo: cubic-bezier(1, 0, 0, 1);
44 | $easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
45 | $easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
46 | $easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
47 | $easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
48 | $easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
49 | $easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
50 | 


--------------------------------------------------------------------------------
/assets/scss/foundation/_mixin.scss:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | 
  3 | // -----------------------------------------------------
  4 | // Media Query
  5 | // -----------------------------------------------------
  6 | @mixin max($width: $mq-max) {
  7 |   @media only screen and (max-width: $width) {
  8 |     @content;
  9 |   }
 10 | }
 11 | 
 12 | @mixin between($width-from: $mq-min, $width-to: $width-border-change) {
 13 |   @media only screen and (min-width: $width-from) and (max-width: $width-to) {
 14 |     @content;
 15 |   }
 16 | }
 17 | 
 18 | @mixin min($width: $mq-min) {
 19 |   @media only screen and (min-width: $width) {
 20 |     @content;
 21 |   }
 22 | }
 23 | 
 24 | // -----------------------------------------------------
 25 | // Position
 26 | // -----------------------------------------------------
 27 | @mixin fit-full($position: absolute) {
 28 |   width: 100%;
 29 |   height: 100%;
 30 |   position: $position;
 31 |   top: 0;
 32 |   left: 0;
 33 | }
 34 | 
 35 | @mixin center($position: absolute) {
 36 |   position: $position;
 37 |   top: 50%;
 38 |   left: 50%;
 39 |   transform: translate(-50%, -50%);
 40 | }
 41 | 
 42 | @mixin center-vertical($position: absolute) {
 43 |   position: $position;
 44 |   top: 50%;
 45 |   transform: translateY(-50%);
 46 | }
 47 | 
 48 | @mixin center-horizontal($position: absolute) {
 49 |   position: $position;
 50 |   left: 50%;
 51 |   transform: translateX(-50%);
 52 | }
 53 | 
 54 | @mixin center-flex() {
 55 |   display: flex;
 56 |   justify-content: center;
 57 |   align-items: center;
 58 | }
 59 | 
 60 | // -----------------------------------------------------
 61 | // Background
 62 | // -----------------------------------------------------
 63 | @mixin bg-cover {
 64 |   background-position: center center;
 65 |   background-repeat: no-repeat;
 66 |   background-size: cover;
 67 | }
 68 | 
 69 | @mixin bg-contain {
 70 |   background-position: center center;
 71 |   background-repeat: no-repeat;
 72 |   background-size: contain;
 73 | }
 74 | 
 75 | // -----------------------------------------------------
 76 | // Text
 77 | // -----------------------------------------------------
 78 | @mixin hide-text {
 79 |   font: 0 / 0;
 80 |   color: transparent;
 81 | }
 82 | 
 83 | @mixin font-serif {
 84 |   font-family: YakuHanMP, 'noto-serif', serif;
 85 | }
 86 | 
 87 | @mixin font-sans {
 88 |   font-family: 'Gothic A1', sans-serif;
 89 | }
 90 | 
 91 | @mixin ellipsis {
 92 |   overflow: hidden;
 93 |   text-overflow: ellipsis;
 94 |   white-space: nowrap;
 95 | }
 96 | 
 97 | @mixin link-text {
 98 |   color: $color-link;
 99 |   @include min {
100 |     &:hover {
101 |       color: $color-link-hover;
102 |     }
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
  1 | import { createClient } from 'contentful'
  2 | import { CONTENT_TYPE_POST, CONTENT_TYPE_TAG } from './config/constant'
  3 | 
  4 | require('dotenv').config()
  5 | 
  6 | const CONTENTFUL_SPACE_ID = process.env.SPACE_ID || 'pf2aflscqgg2'
  7 | const CONTENTFUL_ACCESS_TOKEN = process.env.ACCESS_TOKEN || '672f6ef9cd1792652afa415fb353482f43f7267fd191ff488869528a70ed0ed1'
  8 | 
  9 | const routes = async function() {
 10 |   const client = createClient({
 11 |     space: CONTENTFUL_SPACE_ID,
 12 |     accessToken: CONTENTFUL_ACCESS_TOKEN
 13 |   })
 14 | 
 15 |   const [post, tag] = await Promise.all([
 16 |     client.getEntries({ content_type: CONTENT_TYPE_POST, limit: 1000 }),
 17 |     client.getEntries({ content_type: CONTENT_TYPE_TAG })
 18 |   ])
 19 | 
 20 |   return [...post.items.map(item => `/entry/${item.sys.id}`), ...tag.items.map(item => `/tag/${item.sys.id}`)]
 21 | }
 22 | 
 23 | const TITLE = '邦画だってさ'
 24 | const DESCRIPTION =
 25 |   'おもしろかった邦画の感想を書いていく予定です。まだ何も書けていないですが、順次追加していきます。たまには邦画も悪くないですよ。'
 26 | 
 27 | module.exports = {
 28 |   mode: 'universal',
 29 |   head: {
 30 |     title: TITLE,
 31 |     htmlAttrs: {
 32 |       lang: 'ja'
 33 |     },
 34 |     meta: [
 35 |       { charset: 'utf-8' },
 36 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 37 |       { name: 'theme-color', content: '#ffffff' },
 38 |       {
 39 |         hid: 'description',
 40 |         name: 'description',
 41 |         content: DESCRIPTION
 42 |       },
 43 |       {
 44 |         name: 'theme-color',
 45 |         content: '#ffffff'
 46 |       },
 47 |       {
 48 |         property: 'og:site_name',
 49 |         content: TITLE
 50 |       },
 51 |       {
 52 |         hid: 'og:title',
 53 |         name: 'og:title',
 54 |         content: TITLE
 55 |       },
 56 |       {
 57 |         hid: 'og:description',
 58 |         name: 'og:description',
 59 |         content: DESCRIPTION
 60 |       },
 61 |       {
 62 |         property: 'og:image',
 63 |         content: 'https://blog.houga.cc/og.png?2018110601'
 64 |       },
 65 |       {
 66 |         name: 'twitter:card',
 67 |         content: 'summary_large_image'
 68 |       },
 69 |       {
 70 |         name: 'twitter:image',
 71 |         content: 'https://blog.houga.cc/og.png?2018110601'
 72 |       }
 73 |     ],
 74 |     link: [
 75 |       { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
 76 |       { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
 77 |       { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' }
 78 |     ]
 79 |   },
 80 |   env: {
 81 |     SPACE_ID: CONTENTFUL_SPACE_ID,
 82 |     ACCESS_TOKEN: CONTENTFUL_ACCESS_TOKEN
 83 |   },
 84 |   loading: false,
 85 |   css: ['@/assets/scss/index.scss'],
 86 |   modules: [
 87 |     ['@nuxtjs/google-analytics', { id: 'UA-53153991-19' }],
 88 |     '@nuxtjs/dotenv',
 89 |     '@nuxtjs/pwa',
 90 |     '@nuxtjs/sitemap',
 91 |     '@nuxtjs/style-resources'
 92 |   ],
 93 |   styleResources: {
 94 |     scss: [
 95 |       './assets/scss/foundation/_variables.scss',
 96 |       './assets/scss/foundation/_mixin.scss'
 97 |     ]
 98 |   },
 99 |   generate: {
100 |     routes
101 |   },
102 |   sitemap: {
103 |     path: '/sitemap.xml',
104 |     hostname: 'https://blog.houga.cc',
105 |     generate: true,
106 |     routes
107 |   },
108 |   manifest: {
109 |     name: '邦画だってさ',
110 |     short_name: '邦画だってさ',
111 |     lang: 'ja',
112 |     orientation: 'portrait',
113 |     theme_color: '#ffffff',
114 |     background_color: '#ffffff',
115 |     start_url: '/index.html'
116 |   },
117 |   workbox: {
118 |     dev: true
119 |   }
120 | }
121 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
  1 | import Vuex from 'vuex'
  2 | import * as api from '@/api'
  3 | import { uniq } from '@/lib/helpers'
  4 | import { POSTS_PER_PAGE } from '@/config/constant'
  5 | 
  6 | const createIndexState = () => ({
  7 |   total: null,
  8 |   page: null,
  9 |   lastPage: null,
 10 |   ids: [],
 11 |   isFetching: false
 12 | })
 13 | 
 14 | const createStore = () =>
 15 |   new Vuex.Store({
 16 |     state: {
 17 |       entities: {
 18 |         post: {},
 19 |         tag: {}
 20 |       },
 21 |       index: {
 22 |         post: createIndexState(),
 23 |         tag: createIndexState()
 24 |       },
 25 |       postId: null,
 26 |       tagIds: [],
 27 |       tagId: null,
 28 |       error: null
 29 |     },
 30 |     getters: {
 31 |       posts(state) {
 32 |         return state.index.post.ids.map(id => state.entities.post[id])
 33 |       },
 34 |       post(state) {
 35 |         return state.postId ? state.entities.post[state.postId] : null
 36 |       },
 37 |       tagPosts(state) {
 38 |         return state.index.tag.ids.map(id => state.entities.post[id])
 39 |       },
 40 |       tags(state) {
 41 |         return state.tagIds.map(id => state.entities.tag[id])
 42 |       },
 43 |       tag(state) {
 44 |         return state.tagId ? state.entities.tag[state.tagId] : null
 45 |       }
 46 |     },
 47 |     actions: {
 48 |       async nuxtServerInit({ commit }) {
 49 |         try {
 50 |           const { items } = await api.fetchTags()
 51 | 
 52 |           commit('mergeTagEntities', { items })
 53 |           commit('setTagIds', { items })
 54 |         } catch (e) {
 55 |           commit('setNetwordError')
 56 |         }
 57 |       },
 58 |       async fetchPosts({ state, commit }, { pageType, page, tagId = null }) {
 59 |         if (state.index[pageType].isFetching) {
 60 |           return
 61 |         }
 62 | 
 63 |         commit('setIsFetching', { pageType })
 64 | 
 65 |         try {
 66 |           const { total, items } = await api.fetchPosts({ page, tagId })
 67 | 
 68 |           commit('clearIsFetching', { pageType })
 69 |           commit('mergePostEntities', { items })
 70 |           commit('appendPostIds', { pageType, items })
 71 |           commit('setPage', { pageType, page })
 72 | 
 73 |           if (page === 1) {
 74 |             commit('setTotal', { pageType, total })
 75 |             commit('setLastPage', { pageType, total })
 76 |           }
 77 |         } catch (e) {
 78 |           commit('setNetwordError')
 79 |         }
 80 |       },
 81 |       async fetchPost({ commit }, { id }) {
 82 |         try {
 83 |           const item = await api.fetchPost(id)
 84 | 
 85 |           commit('mergePostEntities', { items: [item] })
 86 |           commit('setPostId', { id: item.sys.id })
 87 |         } catch (e) {
 88 |           commit('setNetwordError')
 89 |         }
 90 |       }
 91 |     },
 92 |     mutations: {
 93 |       mergePostEntities(state, { items }) {
 94 |         state.entities.post = {
 95 |           ...state.entities.post,
 96 |           ...items.reduce((obj, item) => ({ ...obj, [item.sys.id]: item }), {})
 97 |         }
 98 |       },
 99 |       mergeTagEntities(state, { items }) {
100 |         state.entities.tag = {
101 |           ...state.entities.tag,
102 |           ...items.reduce((obj, item) => ({ ...obj, [item.sys.id]: item }), {})
103 |         }
104 |       },
105 |       appendPostIds(state, { pageType, items }) {
106 |         state.index[pageType].ids = uniq([...state.index[pageType].ids, ...items.map(item => item.sys.id)])
107 |       },
108 |       clearPostIds(state, { pageType }) {
109 |         state.index[pageType].ids = []
110 |       },
111 |       setTotal(state, { pageType, total }) {
112 |         state.index[pageType].total = total
113 |       },
114 |       setPage(state, { pageType, page }) {
115 |         state.index[pageType].page = page
116 |       },
117 |       setLastPage(state, { pageType, total }) {
118 |         state.index[pageType].lastPage = Math.ceil(total / POSTS_PER_PAGE)
119 |       },
120 |       setIsFetching(state, { pageType }) {
121 |         state.index[pageType].isFetching = true
122 |       },
123 |       clearIsFetching(state, { pageType }) {
124 |         state.index[pageType].isFetching = false
125 |       },
126 |       setPostId(state, { id }) {
127 |         state.postId = id
128 |       },
129 |       clearPostId(state) {
130 |         state.postId = null
131 |       },
132 |       setTagIds(state, { items }) {
133 |         state.tagIds = [...state.tagIds, ...items.map(item => item.sys.id)]
134 |       },
135 |       setTagId(state, { id }) {
136 |         state.tagId = id
137 |       },
138 |       setNetwordError(state) {
139 |         state.error = '通信の調子が悪いようで・・・'
140 |       }
141 |     }
142 |   })
143 | 
144 | export default createStore
145 | 


--------------------------------------------------------------------------------
/pages/entry/_id.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="entry" v-if="post">
  3 |     <h2 class="entry-title">{{ post.fields.title }}</h2>
  4 |     <p class="entry-date">{{ releaseDate }}</p>
  5 |     <div class="entry-body" v-if="renderedMd" v-html="renderedMd"></div>
  6 |     <TagList class="entry-tag" :tags="post.fields.tags" />
  7 |     <div class="entry-trailer" v-if="post.fields.trailerId">
  8 |       <iframe width="480" height="270" :src="`https://www.youtube.com/embed/${post.fields.trailerId}?controls=2`" frameborder="0" allowfullscreen></iframe>
  9 |     </div>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | import md from 'markdown-it'
 15 | import { mapGetters } from 'vuex'
 16 | import PostList from '@/components/PostList'
 17 | import TagList from '@/components/TagList'
 18 | 
 19 | export default {
 20 |   components: {
 21 |     PostList,
 22 |     TagList
 23 |   },
 24 |   head() {
 25 |     return {
 26 |       title: `${this.post.fields.title} | 邦画だってさ`
 27 |     }
 28 |   },
 29 |   computed: {
 30 |     ...mapGetters(['post']),
 31 |     renderedMd() {
 32 |       console.log(this.post.fields.body)
 33 |       return this.post && this.post.fields.body ? md().render(this.post.fields.body) : null
 34 |     },
 35 |     releaseDate() {
 36 |       if (!this.post) {
 37 |         return null
 38 |       }
 39 | 
 40 |       const d = new Date(this.post.fields.releaseDate)
 41 | 
 42 |       return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
 43 |     }
 44 |   },
 45 |   async fetch({ store, params }) {
 46 |     if (!process.browser) {
 47 |       await store.dispatch('fetchPost', { id: params.id })
 48 |     }
 49 | 
 50 |     store.commit('setPostId', { id: params.id })
 51 |   },
 52 |   mounted() {}
 53 | }
 54 | </script>
 55 | 
 56 | <style lang="scss" scoped>
 57 | .entry {
 58 |   &-title {
 59 |     margin-bottom: 0.8rem;
 60 |     font-size: 1.8rem;
 61 |     line-height: 1.4;
 62 |     letter-spacing: 0.12em;
 63 |     @include min {
 64 |       font-size: 2.2rem;
 65 |     }
 66 |   }
 67 |   &-date {
 68 |     color: $color-modest;
 69 |     margin-bottom: 4rem;
 70 |   }
 71 |   &-tag {
 72 |     margin-top: 0.3rem;
 73 |   }
 74 |   &-spec {
 75 |     table-layout: fixed;
 76 |     border-collapse: collapse;
 77 |     margin-top: 4rem;
 78 |     text-align: left;
 79 |     th,
 80 |     td {
 81 |       padding: 1.2rem 0;
 82 |       border-top: 1px solid $color-snow;
 83 |       border-bottom: 1px solid $color-snow;
 84 |     }
 85 |     th {
 86 |       width: 7em;
 87 |     }
 88 |     a {
 89 |       @include link-text;
 90 |     }
 91 |   }
 92 |   &-trailer {
 93 |     width: 100%;
 94 |     max-width: 480px;
 95 |     margin-top: 6rem;
 96 |     position: relative;
 97 |     background-color: $color-black;
 98 |     &:before {
 99 |       content: '';
100 |       display: block;
101 |       height: 0;
102 |       padding-top: 56.25%;
103 |     }
104 |     iframe {
105 |       @include fit-full;
106 |     }
107 |   }
108 |   &-body {
109 |     /deep/ {
110 |       line-height: 2;
111 |       font-size: 1.6rem;
112 |       p,
113 |       ul,
114 |       ol,
115 |       dl,
116 |       table,
117 |       pre,
118 |       blockquote {
119 |         margin: 2rem 0;
120 |       }
121 | 
122 |       h1,
123 |       h2,
124 |       h3,
125 |       h4,
126 |       h5 {
127 |         margin: 4rem 0 2rem;
128 |       }
129 |       > *:first-child {
130 |         margin-top: 0;
131 |       }
132 |       > *:last-child {
133 |         margin-bottom: 0;
134 |       }
135 | 
136 |       h1,
137 |       h2,
138 |       h3,
139 |       h4,
140 |       h5 {
141 |         padding-left: 0.7rem;
142 |         line-height: 1.4;
143 |         border-left: 4px solid currentColor;
144 |       }
145 | 
146 |       ul {
147 |         list-style-type: disc;
148 |         list-style-position: inside;
149 |       }
150 | 
151 |       ol {
152 |         list-style-type: decimal;
153 |         list-style-position: inside;
154 |       }
155 | 
156 |       img {
157 |         display: block;
158 |         max-width: 100%;
159 |         height: auto;
160 |       }
161 | 
162 |       hr {
163 |         margin: 1em 0;
164 |         border-top: 1px solid #3f3f3f;
165 |       }
166 | 
167 |       pre {
168 |         width: 100%;
169 |         box-sizing: border-box;
170 |         overflow: auto;
171 |         padding: 0.5em 1em;
172 |         white-space: pre-wrap;
173 |         background-color: #ededed;
174 |       }
175 | 
176 |       blockquote {
177 |         padding: 0.5em 1em;
178 |         border-left: 3px solid #999;
179 |       }
180 | 
181 |       table {
182 |         width: 100%;
183 |         border: 1px solid #999;
184 |         th,
185 |         td {
186 |           padding: 1em 0.5em;
187 |           border: 1px solid #999;
188 |         }
189 |         thead,
190 |         th {
191 |           vertical-align: middle;
192 |           background-color: #ccc;
193 |         }
194 |       }
195 | 
196 |       strong {
197 |         font-weight: bold;
198 |       }
199 | 
200 |       em {
201 |         font-style: italic;
202 |       }
203 | 
204 |       del {
205 |         text-decoration: line-through;
206 |       }
207 | 
208 |       sub {
209 |         vertical-align: sub;
210 |       }
211 | 
212 |       sup {
213 |         vertical-align: super;
214 |       }
215 | 
216 |       a {
217 |         color: $color-link;
218 |         text-decoration: underline;
219 |         &:hover {
220 |           text-decoration: none;
221 |         }
222 |       }
223 |     }
224 |   }
225 | }
226 | </style>
227 | 


--------------------------------------------------------------------------------
/assets/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="512" height="64" viewBox="0 0 512 64">
 2 |   <defs>
 3 |     <style>
 4 |       .cls-1 {
 5 |         fill: #fff;
 6 |       }
 7 | 
 8 |       .cls-2 {
 9 |         fill: #444;
10 |       }
11 | 
12 |       .cls-2, .cls-3 {
13 |         fill-rule: evenodd;
14 |       }
15 | 
16 |       .cls-3 {
17 |         fill: #333;
18 |       }
19 |     </style>
20 |   </defs>
21 |   <g>
22 |     <rect y="-32" width="512" height="128" class="cls-1"/>
23 |     <g>
24 |       <path d="M493.501,18.794 C492.541,19.050 489.405,19.690 484.093,20.714 C486.397,25.002 487.869,27.689 488.509,28.841 C490.237,31.785 493.053,35.945 495.293,38.953 L487.869,42.344 C486.269,40.872 485.245,40.233 483.453,39.593 C480.574,38.633 477.182,38.121 473.342,38.121 C464.639,38.121 459.519,40.745 459.519,45.288 C459.519,49.448 464.255,51.752 472.958,51.752 C479.742,51.752 487.229,50.088 492.221,47.464 L493.245,55.655 C485.309,58.087 479.358,59.111 472.958,59.111 C464.767,59.111 458.431,57.383 455.167,54.248 C452.736,51.944 451.392,48.808 451.392,45.608 C451.392,41.960 453.056,38.569 455.999,36.073 C459.711,32.937 465.023,31.465 472.318,31.465 C476.478,31.465 480.190,32.105 483.389,33.385 C480.766,29.801 480.702,29.609 476.478,21.738 C470.846,22.506 461.375,23.146 453.760,23.274 C452.160,23.338 451.904,23.338 450.944,23.466 L450.368,15.786 C452.288,16.042 453.952,16.106 456.575,16.106 C461.375,16.106 469.886,15.530 473.854,15.018 C472.766,12.203 470.014,5.419 469.694,4.907 L477.950,3.819 C478.334,5.995 479.486,9.387 481.470,14.058 C488.061,12.907 493.757,11.563 497.148,10.283 L498.044,17.898 C496.380,18.154 495.677,18.346 493.501,18.794 ZM418.429,20.650 C410.302,24.874 405.502,31.273 405.502,37.737 C405.502,42.728 408.638,46.568 414.014,48.168 C417.149,49.128 421.245,49.832 423.549,49.832 C423.613,49.832 424.189,49.832 424.829,49.768 L423.677,58.471 C422.909,58.279 422.589,58.215 421.501,58.087 C414.462,57.191 410.430,56.039 406.526,53.864 C400.639,50.536 397.375,45.096 397.375,38.441 C397.375,33.001 399.551,27.625 403.454,23.338 C405.886,20.714 408.190,19.050 412.350,16.938 C407.166,17.706 404.670,17.898 390.783,18.922 C386.496,19.242 382.656,19.690 380.160,20.202 L379.712,11.883 C381.120,11.947 381.824,11.947 382.144,11.947 C383.296,11.947 383.296,11.947 392.703,11.307 C396.287,11.115 406.910,10.539 424.637,9.707 C429.884,9.451 430.844,9.387 431.996,9.067 L432.444,17.258 C431.740,17.194 431.740,17.194 431.100,17.194 C427.261,17.194 422.525,18.474 418.429,20.650 ZM333.055,59.175 C332.415,55.975 331.903,54.759 330.303,51.880 C330.751,51.880 331.007,51.880 331.263,51.880 C333.631,51.880 337.214,51.496 340.350,50.920 C345.342,49.960 348.158,48.808 351.037,46.568 C354.109,44.264 355.581,41.448 355.581,37.929 C355.581,32.937 351.869,30.249 345.086,30.249 C340.670,30.249 335.743,30.953 328.255,32.745 C324.159,33.705 323.007,34.025 320.832,34.921 L319.232,27.241 C321.024,27.113 321.024,27.113 325.887,26.026 C334.591,24.106 340.350,23.338 345.662,23.338 C352.957,23.338 357.885,25.450 360.765,29.865 C362.365,32.297 363.133,34.985 363.133,38.121 C363.133,46.632 357.117,53.544 346.942,56.743 C342.974,57.959 341.374,58.215 333.055,59.175 ZM291.965,4.203 L296.253,1.963 C299.132,4.907 300.924,7.339 302.908,10.987 L298.492,13.482 C296.573,9.963 294.461,6.955 291.965,4.203 ZM290.813,17.514 C288.701,13.610 286.909,11.051 284.093,7.979 L288.573,5.739 C291.389,8.747 293.117,11.179 295.293,15.146 L290.813,17.514 ZM299.004,23.210 L299.132,30.825 C296.061,30.505 294.269,30.377 291.069,30.377 C284.733,30.377 280.510,30.825 274.174,32.297 L273.598,25.194 C282.622,23.466 285.757,23.146 292.669,23.146 C294.589,23.146 296.061,23.146 299.004,23.210 ZM278.334,20.074 L276.862,20.330 C272.574,21.098 267.903,21.674 266.367,21.674 C263.999,34.025 260.799,44.712 255.232,59.367 L247.168,56.231 C251.328,48.808 256.447,33.385 258.623,21.930 C258.303,21.930 258.047,21.930 257.983,21.930 L256.575,21.866 L253.504,21.866 C253.440,21.866 252.864,21.866 252.032,21.866 C251.136,21.802 249.984,21.802 249.472,21.802 C249.152,21.802 248.832,21.802 248.256,21.866 L248.384,14.442 C250.688,14.826 253.248,15.018 256.959,15.018 C257.727,15.018 258.431,15.018 259.903,14.954 C260.479,11.883 261.119,6.955 261.119,5.163 C261.119,4.907 261.119,4.523 261.055,4.011 L269.502,4.779 C269.119,6.187 269.055,6.507 268.479,9.771 C268.351,10.539 268.223,11.435 268.031,12.587 C267.967,12.907 267.839,13.418 267.647,14.570 C271.806,14.186 275.582,13.546 278.590,12.651 L278.910,20.010 C278.590,20.074 278.398,20.074 278.334,20.074 ZM198.014,10.731 L198.014,16.426 L205.629,16.426 C207.933,16.426 209.405,16.362 210.877,16.170 C210.685,17.578 210.621,18.922 210.621,20.970 L210.621,43.880 C210.621,46.248 210.685,47.208 210.877,48.616 C209.213,48.424 208.189,48.360 205.245,48.360 L184.575,48.360 C181.503,48.360 180.479,48.424 178.815,48.616 C179.007,47.080 179.071,46.184 179.071,43.880 L179.071,20.970 C179.071,18.922 179.007,17.770 178.815,16.170 C180.287,16.362 181.759,16.426 184.063,16.426 L191.486,16.426 L191.486,10.731 L173.888,10.731 C171.008,10.731 168.640,10.859 166.016,11.115 L166.016,4.075 C168.384,4.331 170.752,4.459 173.760,4.459 L215.997,4.459 C218.876,4.459 221.372,4.331 223.868,4.075 L223.868,11.115 C221.564,10.859 218.684,10.731 216.061,10.731 L198.014,10.731 ZM198.014,42.664 L204.477,42.664 L204.477,34.857 L198.014,34.857 L198.014,42.664 ZM198.014,29.097 L204.477,29.097 L204.477,22.378 L198.014,22.378 L198.014,29.097 ZM191.486,22.378 L185.279,22.378 L185.279,29.097 L191.486,29.097 L191.486,22.378 ZM191.486,34.857 L185.279,34.857 L185.279,42.664 L191.486,42.664 L191.486,34.857 ZM135.677,27.177 C139.388,31.465 140.860,33.705 142.140,37.353 C142.908,39.529 143.292,41.832 143.292,44.072 C143.292,50.728 140.540,52.968 132.541,52.968 C130.941,52.968 130.109,52.904 127.997,52.712 C127.869,49.896 127.485,48.104 126.269,45.416 C128.509,45.864 130.045,45.992 131.581,45.992 C135.357,45.992 136.189,45.352 136.189,42.408 C136.189,40.297 135.165,37.353 133.373,34.281 C131.965,31.913 130.749,30.313 128.061,27.241 C131.197,21.994 133.309,17.194 135.229,10.923 L124.861,10.923 L124.861,53.800 C124.861,57.127 124.989,59.623 125.245,61.479 L117.438,61.479 C117.694,59.431 117.822,56.871 117.822,53.736 L117.822,9.451 C117.822,7.467 117.758,5.931 117.630,4.139 C119.230,4.331 120.830,4.395 123.197,4.395 L135.101,4.395 C137.852,4.395 139.196,4.331 140.540,4.075 L143.996,8.747 C143.356,10.091 143.356,10.091 142.972,11.051 C141.308,15.594 138.300,22.250 135.677,27.177 ZM104.383,41.704 C103.551,45.480 102.591,48.104 100.927,51.240 C98.623,55.399 96.575,57.767 92.032,61.287 C90.304,58.919 88.960,57.575 86.400,55.655 C90.240,53.096 91.968,51.496 93.888,48.808 C95.487,46.568 96.511,44.392 97.279,41.704 L92.352,41.704 C89.984,41.704 88.064,41.832 86.080,42.024 L86.080,34.985 C87.872,35.241 89.728,35.305 92.544,35.305 L98.303,35.305 C98.495,33.193 98.559,31.849 98.751,28.649 L93.632,28.649 C91.392,28.649 89.728,28.713 88.192,28.905 L88.192,22.250 C89.536,22.442 91.200,22.506 93.632,22.506 L98.943,22.506 C98.943,20.906 98.943,20.330 98.943,19.306 L98.943,16.234 L93.376,16.234 C90.944,16.234 88.896,16.362 86.848,16.554 L86.848,9.515 C88.832,9.707 91.008,9.835 93.504,9.835 L98.943,9.835 L98.943,9.003 C98.943,6.635 98.815,4.715 98.623,2.731 L106.111,2.731 C105.855,4.395 105.791,5.803 105.791,9.835 L109.310,9.835 C112.062,9.835 113.662,9.771 115.646,9.579 L115.646,16.490 C113.662,16.362 111.550,16.234 109.374,16.234 L105.791,16.234 L105.791,22.506 L109.118,22.506 C111.358,22.506 113.150,22.442 114.686,22.250 L114.686,28.905 C113.214,28.713 111.486,28.649 109.310,28.649 L105.599,28.649 C105.471,31.529 105.407,32.553 105.215,35.305 L109.374,35.305 C112.382,35.305 113.854,35.241 115.646,35.049 L115.646,42.024 C113.854,41.768 111.934,41.704 109.182,41.704 L104.383,41.704 ZM167.360,17.386 L174.784,17.386 C174.592,18.858 174.528,20.202 174.528,23.082 L174.528,52.584 L215.229,52.584 L215.229,22.954 C215.229,20.394 215.165,18.986 214.909,17.386 L222.396,17.386 C222.140,19.626 222.012,22.314 222.012,24.554 L222.012,53.224 C222.012,56.551 222.140,59.111 222.460,61.799 L215.037,61.799 L215.037,58.791 L174.656,58.791 L174.656,61.799 L167.360,61.799 C167.616,59.111 167.744,56.679 167.744,53.288 L167.744,24.490 C167.744,21.930 167.616,19.690 167.360,17.386 ZM280.126,39.209 C277.566,42.472 276.798,44.008 276.798,46.312 C276.798,49.576 279.998,51.240 286.397,51.240 C291.069,51.240 297.212,50.216 300.924,48.872 L301.500,56.679 C300.348,56.807 300.028,56.871 298.364,57.127 C293.053,57.959 290.237,58.215 286.461,58.215 C280.766,58.215 276.670,57.383 273.598,55.655 C270.846,54.056 269.055,50.984 269.055,47.784 C269.055,44.392 270.270,41.512 273.790,36.649 L280.126,39.209 Z" class="cls-2"/>
25 |       <path d="M59.000,2.000 L59.000,62.000 L9.000,62.000 L59.000,2.000 Z" class="cls-3"/>
26 |     </g>
27 |   </g>
28 | </svg>
29 | 


--------------------------------------------------------------------------------