feat: スポンサー一覧ページを作成する

nuxt.config.ts

@@ -82,9 +82,10 @@ const config: NuxtConfiguration = {
   loading: { color: '#fff' },
   css: ['~/assets/stylesheets/main.scss'],
   plugins: [
-    { src: '~/plugins/typekit', ssr: false },
+    { src: '~/plugins/typekit', mode: 'client' },
     { src: '~/plugins/vee-validate' },
-    { src: '~/plugins/vue-lazyload', ssr: false }
+    { src: '~/plugins/vue-lazyload', mode: 'client' },
+    { src: '~/plugins/sponsor-anchor', mode: 'client' }
   ],
   modules: [
     '@nuxtjs/dotenv',

src/assets/stylesheets/foundation/variables.scss

@@ -17,6 +17,10 @@ $layout-column-width--is-small-up: calc(
 
 $page-container-max-width: 1180px;
 
+// md サイズ以上のときのヘッダーの高さ
+// FIXME: アンカーがあるページ（sponsors など）で使っているため、ヘッダーの高さを変える場合はこの変数を調整する
+$header-logo-height: 100px;
+
 // transition のイージング
 $easeInOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
 

src/components/TheSponsorListSection.vue

@@ -4,31 +4,30 @@
       SPONSORS
     </template>
 
-    <ul v-for="sponsorPlan in sponsorPlans" :key="sponsorPlan.plan">
-      <li
-        v-if="sponsorsByPlan(sponsorPlan.plan).length > 0"
-        class="sponsor-group"
-        :class="sponsorPlan.plan"
-      >
+    <ul
+      v-for="sponsorPlan in sponsorPlansHavingSponsors"
+      :key="sponsorPlan.plan"
+    >
+      <li class="sponsor-group" :class="sponsorPlan.plan">
         <h3 class="sponsor-plan">
           {{ sponsorPlan.name }}
         </h3>
 
         <ul>
           <li
-            v-for="sponsor in sortSponsors(sponsorsByPlan(sponsorPlan.plan))"
+            v-for="sponsor in sponsorsByPlan(sponsorPlan.plan)"
             :key="sponsor.sys.id"
             class="sponsor"
           >
-            <a :href="sponsor.fields.url" target="_blank" rel="noopener">
+            <nuxt-link :to="`/sponsors/#sponsor_${sponsor.sys.id}`">
               <div v-lazy-container="{ selector: 'img' }">
                 <img
                   class="sponsor-image"
                   :data-src="sponsor.fields.banner.fields.file.url"
                   :alt="sponsor.fields.name"
                 />
               </div>
-            </a>
+            </nuxt-link>
           </li>
         </ul>
       </li>
@@ -37,7 +36,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
+import { Component, Getter, Vue } from 'nuxt-property-decorator'
+import Sponsor from '~/types/sponsor'
+import SponsorPlan from '~/types/sponsorPlan'
 import BaseSection from '~/components/BaseSection.vue'
 
 @Component({
@@ -46,43 +47,17 @@ import BaseSection from '~/components/BaseSection.vue'
   }
 })
 export default class TheSponsorListSection extends Vue {
-  sponsorPlans: { plan: string; name: string }[] = [
-    { plan: 'platinum', name: 'PLATINUM' },
-    { plan: 'gold', name: 'GOLD' },
-    { plan: 'silver', name: 'SILVER' },
-    { plan: 'bronze', name: 'BRONZE' },
-    { plan: 'special', name: 'SPECIAL' },
-    { plan: 'room', name: 'ROOM' },
-    { plan: 'translation', name: '同時通訳' },
-    { plan: 'commercial', name: '幕間 CM' },
-    { plan: 'toast', name: 'カンパイ' },
-    { plan: 'lunch', name: 'LUNCH' },
-    { plan: 'refreshment', name: 'REFRESHMENT' },
-    { plan: 'video', name: 'VIDEO' },
-    { plan: 'media', name: 'MEDIA' }
-  ]
-
-  @Prop()
-  readonly sponsorList!: any[]
-
-  sortSponsors(sponsors): 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
-    })
-  }
+  @Getter('sponsorsByPlan', { namespace: 'sponsors' })
+  private sponsorsByPlan!: (plan: string) => Sponsor[]
 
-  sponsorsByPlan(plan): any[] {
-    return this.sponsorList.filter(sponsor => sponsor.fields.plan === plan)
-  }
+  @Getter('sponsorPlansHavingSponsors', { namespace: 'sponsors' })
+  private sponsorPlansHavingSponsors!: SponsorPlan[]
 }
 </script>
 
 <style lang="scss" scoped>
 ul {
-  margin: 0; // このコンポーネントでは ul 要素に margin を持たせない
+  margin: 0;
 }
 
 .the-sponsor-list-section {

src/components/TheStaffListSection.vue

@@ -5,7 +5,7 @@
     </template>
 
     <!-- prettier-ignore -->
-    <template slot="heading-copy">
+    <template v-slot:heading-copy>
       Vue Fes Japan 2019 は、Vue.js 日本ユーザーグループのスタッフによって企画・運営されています。
     </template>
 

src/pages/index.vue

@@ -6,14 +6,13 @@
     <TheAccessSection />
     <TheTimeTableSection />
     <TheEventSection />
-    <TheSponsorListSection :sponsor-list="sponsors || []" />
+    <TheSponsorListSection />
     <TheStaffListSection />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
-import { getSponsors } from '~/plugins/contentful.ts'
 import TheAccessSection from '~/components/TheAccessSection.vue'
 import TheEventSection from '~/components/TheEventSection.vue'
 import TheHeadSection from '~/components/TheHeadSection.vue'
@@ -33,17 +32,6 @@ import TheStaffListSection from '~/components/TheStaffListSection.vue'
     TheTimeTableSection,
     TheSponsorListSection,
     TheStaffListSection
-  },
-  async asyncData(): Promise<{
-    sponsors: any[]
-  } | void> {
-    try {
-      return {
-        sponsors: await getSponsors()
-      }
-    } catch (error) {
-      console.error(error)
-    }
   }
 })
 export default class HomePage extends Vue {}