Contentful から Sponsor データを取得する (vuejs-jp#55)

* new file: src/components/TheSponsorListSection.vue

* + test.todo('スポンサー情報が表示されている')

* + test('スポンサー情報が表示されている', () => { ... }

* wrapper が冗長だったのでリファクタリングした

* + <TheSponsorListSection />

* スポンサー情報を asyncData でセットするようにした

* Contentful からスポンサー情報を取得するようにした

* fix: error TS2322: Type '{ ctfSpaceId: string | undefined; ctfCdaAccessToken: string | undefined; }' is not assignable to type 'NuxtConfigurationEnv'.

* + CTF_CDA_ACCESS_TOKEN=PLEASE_SET_ME

* nuxt 経由の env を使うように修正した

* スポンサー情報の取得を src/plugins/contentful.ts に切り出した

* + readonly sponsorList!: Entry<any>[]

* new file: test/unit/__mocks__/sponsorListMock.ts

* + import sponsorList from '../../__mocks__/sponsorListMock'

* スポンサーの種類によって表示をまとめるようにした

* スポンサーを publishedAt 順に表示する

* SponsorListSection と SponsorSection とを統合した

* new file: src/components/SponsorGroup.vue

* + test('sponsorType がクラスに含まれる', () => { ... })

* SponsorGroup でバナー画像のリンクを表示させるようにした

* interface を作るまでもない

* Contentful の Sponsor 定義変更を反映させた

* スポンサープランを追加した

スポンサープランの表示を柔軟にできるようにした

* fix testing

* 複数のスポンサープランをまとめて表示させることもできるようにするため SponsorGroup コンポーネントを廃止した

* スタイルの調整（モバイル）

* スタイルの調整（デスクトップ）

* fix: ネガティブマージンを短縮形で書いた

* Update src/components/TheSponsorListSection.vue

Co-Authored-By: INOUE Takuya <[email protected]>

* fix: .sponsor-plan の md lg サイズのフォントを指定した

* sm でもバナーがひとつしかない場合は中央配置になるように修正

* バナーサイズを修正

* ルーム A/B とルーム C スポンサーを統合した。ランチスポンサーも同様に統合した

Author: ryamakuchi

.env.example

@@ -1 +1,3 @@
-GA_TRACKING_ID=UA-XXXXXXX-X
+CTF_SPACE_ID=PLEASE_SET_CTF_SPACE_ID
+CTF_CDA_ACCESS_TOKEN=PLEASE_SET_CTF_CDA_ACCESS_TOKEN
+GA_TRACKING_ID=UA-XXXXXXX-X

.env.test

@@ -0,0 +1,3 @@
+CTF_SPACE_ID=secret
+CTF_CDA_ACCESS_TOKEN=secret
+GA_TRACKING_ID=UA-XXXXXXX-X

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
         }
       }
     ],
+    'no-console': 'off',
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': 'error'
   }

jest.config.js

@@ -1,3 +1,5 @@
+require('dotenv').config({ path: '.env.test' })
+
 module.exports = {
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

nuxt.config.ts

@@ -106,6 +106,11 @@ const config: NuxtConfiguration = {
       }
     ]
   ],
+  env: {
+    CTF_SPACE_ID: process.env.CTF_SPACE_ID || 'PLEASE_SET_CTF_SPACE_ID',
+    CTF_CDA_ACCESS_TOKEN:
+      process.env.CTF_CDA_ACCESS_TOKEN || 'PLEASE_SET_CTF_CDA_ACCESS_TOKEN'
+  },
   build: {
     extend(config, ctx) {
       if (ctx.isDev && ctx.isClient) {

package.json

@@ -29,6 +29,7 @@
     "@nuxtjs/dotenv": "^1.3.0",
     "@nuxtjs/google-analytics": "^2.2.0",
     "@nuxtjs/pwa": "^3.0.0-beta.12",
+    "contentful": "^7.6.0",
     "cross-env": "^5.2.0",
     "normalize.css": "^8.0.1",
     "nuxt": "^2.6.1",

src/assets/images/staffs/@2x/KiaKing85.png

@@ -0,0 +1,316 @@
+<template>
+  <BaseSection class="the-sponsor-list-section">
+    <template slot="heading">
+      SPONSORS
+    </template>
+
+    <div class="content">
+      <div class="description">
+        <p>
+          Vue.js に関わる人々が集まる Vue Fes Japan 2019 をよりよいイベントにするため、スポンサーを募集します。<a class="link" href="https://fortee.jp/vuefes-2019/sponsor/form" target="_blank" rel="noopener">こちらのフォーム</a> よりお申し込みください。応募締め切りは、2019年7月31日（水）です。
+        </p>
+
+        <p>
+          最新情報は <a class="link" href="https://twitter.com/vuefes" target="_blank" rel="noopener">Vue Fes Japan の Twitter</a> もしくは <a class="link" href="https://note.mu/vuejs_jp/m/mb35849fee631" target="_blank" rel="noopener">公式 note</a> でご確認ください。
+        </p>
+
+        <p>
+          資料は <a class="link" href="https://docs.google.com/presentation/d/1YSr_QVUUKZmkYMBICE3mIQl2Um9OXfeS2AKgiOHX4Ds/edit#slide=id.p" target="_blank" rel="noopener">こちら</a>
+        </p>
+      </div>
+
+      <LinkToTwitter class="link-to-twitter show-on-medium-and-up" />
+    </div>
+
+    <div
+      v-lazy-container="{ selector: 'img' }"
+      class="image"
+    >
+      <img
+        :data-srcset="`${imageOne}, ${imageOne2x} 2x`"
+        :data-src="imageOne2x"
+        alt=""
+      />
+
+      <img
+        :data-srcset="`${imageTwo}, ${imageTwo2x} 2x`"
+        :data-src="imageTwo2x"
+        alt=""
+      />
+
+      <img
+        :data-srcset="`${imageThree}, ${imageThree2x} 2x`"
+        :data-src="imageThree2x"
+        alt=""
+      />
+    </div>
+
+    <LinkToTwitter class="show-on-small" />
+
+    <ul v-for="sponsorPlan in sponsorPlans" :key="sponsorPlan.plan">
+      <li
+        v-if="sponsorsByPlan(sponsorPlan.plan).length > 0"
+        class="sponsor-group"
+        :class="sponsorPlan.plan"
+      >
+        <h3 class="sponsor-plan">
+          {{ sponsorPlan.name }}
+        </h3>
+
+        <ul>
+          <li
+            v-for="sponsor in sortSponsors(sponsorsByPlan(sponsorPlan.plan))"
+            :key="sponsor.sys.id"
+            class="sponsor"
+          >
+            <a
+              :href="sponsor.fields.url"
+              target="_blank"
+              rel="noopener"
+            >
+              <div v-lazy-container="{ selector: 'img' }">
+                <img
+                  class="sponsor-image"
+                  :data-src="sponsor.fields.banner.fields.file.url"
+                  :alt="sponsor.fields.name"
+                />
+              </div>
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+
+    <BaseButton
+      class="link-to-sponsor-form"
+      href="https://fortee.jp/vuefes-2019/sponsor/form"
+      target="_blank"
+      rel="noopener"
+    >
+      スポンサー申し込みフォーム
+    </BaseButton>
+  </BaseSection>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'nuxt-property-decorator'
+import { Entry } from 'contentful/index'
+import BaseButton from '~/components/BaseButton.vue'
+import BaseSection from '~/components/BaseSection.vue'
+import LinkToTwitter from '~/components/LinkToTwitter.vue'
+
+@Component({
+  components: {
+    BaseButton,
+    BaseSection,
+    LinkToTwitter
+  }
+})
+export default class TheSponsorListSection extends Vue {
+  private imageOne = require('~/assets/images/sponsors/image1.jpg')
+  private imageOne2x = require('~/assets/images/sponsors/[email protected]')
+
+  private imageTwo = require('~/assets/images/sponsors/image2.jpg')
+  private imageTwo2x = require('~/assets/images/sponsors/[email protected]')
+
+  private imageThree = require('~/assets/images/sponsors/image3.jpg')
+  private imageThree2x = require('~/assets/images/sponsors/[email protected]')
+
+  sponsorPlans: { plan: string; name: string }[] = [
+    { plan: 'platinum', name: 'PLATINUM' },
+    { plan: 'gold', name: 'GOLD' },
+    { plan: 'silver', name: 'SILVER' },
+    { plan: 'bronze', name: 'BRONZE' },
+    { plan: 'room', name: 'ROOM' },
+    { plan: 'translation', name: '同時通訳' },
+    { plan: 'commercial', name: '幕間 CM' },
+    { plan: 'toast', name: 'カンパイ' },
+    { plan: 'lunch', name: 'LUNCH' },
+    { plan: 'refreshment', name: 'REFRESHMENT' }
+  ]
+
+  @Prop()
+  readonly sponsorList!: Entry<any>[]
+
+  sortSponsors(sponsors): Entry<any>[] {
+    return sponsors.sort((a, b) => {
+      if (a.fields.appliedAt < b.fields.appliedAt) return -1
+      if (a.fields.appliedAt > b.fields.appliedAt) return 1
+
+      return 0
+    })
+  }
+
+  sponsorsByPlan(plan): Entry<any>[] {
+    return this.sponsorList.filter(sponsor => sponsor.fields.plan === plan)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ul {
+  margin: 0; // このコンポーネントでは ul 要素に margin を持たせない
+}
+
+.the-sponsor-list-section {
+  background: linear-gradient(to right bottom, $tohoh, $sangosyu);
+}
+
+.content {
+  @media screen and (min-width: $layout-breakpoint--is-small-up) {
+    position: absolute;
+    width: calc(100% - 140px);
+    max-width: $page-container-max-width;
+  }
+}
+
+.description {
+  background-color: $white;
+  padding: 6.17%;
+  margin-bottom: 5vw;
+
+  @media screen and (min-width: $layout-breakpoint--is-small-up) {
+    width: 70%;
+    max-width: calc(#{$page-container-max-width} * 0.7);
+    padding: 40px;
+    margin-top: -30px;
+    margin-bottom: 60px;
+    z-index: 1;
+  }
+}
+
+.start-datetime {
+  text-decoration: underline;
+}
+
+.image {
+  margin-bottom: 5vw;
+
+  img {
+    display: block;
+    width: 100%;
+  }
+
+  @media screen and (min-width: $layout-breakpoint--is-small-up) {
+    width: 340px;
+    margin: -125px 0 0 auto;
+  }
+
+  @media screen and (min-width: $layout-breakpoint--is-medium-up) {
+    margin: -125px 5% 0 auto;
+  }
+}
+
+.link-to-twitter {
+  width: 100%;
+  max-width: 100%;
+  margin-top: 10vw;
+
+  @media screen and (min-width: $layout-breakpoint--is-small-up) {
+    width: 700px;
+    margin: 0 auto 0 0;
+  }
+}
+
+// ここから下は Sponsor 一覧の CSS
+.sponsor-plan {
+  font-size: 5vw;
+  text-align: center;
+  font-weight: bold;
+  margin: calc(10vw - 20px) 0 1vw;
+
+  @media screen and (min-width: $layout-breakpoint--is-small-up) {
+    font-size: 30px;
+    margin: 80px 0 20px;
+  }
+}
+
+.sponsor-group {
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: calc(100% + 20px);
+    margin: -10px;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+  }
+
+  .sponsor {
+    width: calc(50% - 20px);
+    margin: 10px;
+
+    @media screen and (min-width: $layout-breakpoint--is-small-up) {
+      width: calc((100% / 5) - 20px); // 普通サイズの Sponsor バナーの横幅
+    }
+  }
+}
+
+.sponsor-group.bronze {
+  .sponsor {
+    @media screen and (min-width: $layout-breakpoint--is-small-up) {
+      width: calc((100% / 6) - 20px);
+    }
+  }
+}
+
+.sponsor-group.gold {
+  .sponsor {
+    @media screen and (min-width: $layout-breakpoint--is-small-up) {
+      width: calc((100% / 4) - 20px);
+    }
+  }
+}
+
+.sponsor-group.platinum {
+  ul {
+    width: 100%;
+    margin: 0;
+
+    @media screen and (min-width: $layout-breakpoint--is-small-up) {
+      width: calc(100% + 20px);
+      margin: -10px;
+    }
+  }
+
+  .sponsor-plan {
+    margin: 5vw 0 1vw;
+
+    @media screen and (min-width: $layout-breakpoint--is-small-up) {
+      margin: 40px 0 20px;
+    }
+  }
+
+  .sponsor {
+    width: 100%;
+    margin: 0 0 5vw;
+
+    @media screen and (min-width: $layout-breakpoint--is-small-up) {
+      width: calc(30% - 20px);
+      margin: 10px;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+
+      @media screen and (min-width: $layout-breakpoint--is-small-up) {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+
+.link-to-sponsor-form {
+  width: 100%;
+  max-width: 100%;
+  margin: calc(10vw - 20px) auto 0;
+
+  @media screen and (min-width: $layout-breakpoint--is-small-up) {
+    width: 700px;
+    margin: 80px auto 0;
+  }
+}
+</style>