Access セクションを追加する (vuejs-jp#107)

* Access セクションを追加する

* テストを追加する

* HTMLのコーディングとGoogleMapsの調整をする

* エラーを吐いてたので、Union Typesにする

エラー内容: Type 'string | undefined' is not assignable to type 'string'.

* smのスタイルを調整する

* mdのスタイルを調整する

* yarn add vue2-google-maps

* vue2-google-mapsを使用できるようにする

* vue2-google-mapsを使って書き直す

* Fix `[Vue warn]: Unknown custom element: <GmapMap>`

* 昨年に合わせて、infoWindowを表示する

* リンクであることがわかりやすいように、下線をつける

* HTMLの文章構造を正す

* Revert "Fix `[Vue warn]: Unknown custom element: <GmapMap>`"

This reverts commit 53ab58b.

* Revert "vue2-google-mapsを使って書き直す"

This reverts commit dfabb1c.

* Revert "vue2-google-mapsを使用できるようにする"

This reverts commit 2bea327.

* Revert "yarn add vue2-google-maps"

This reverts commit a138d4a.

* エラーを解決するために、`type="application/javascript"`を指定する

エラーメッセージ: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

Author: yinm

.env.example

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

nuxt.config.ts

@@ -112,7 +112,8 @@ 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'
+      process.env.CTF_CDA_ACCESS_TOKEN || 'PLEASE_SET_CTF_CDA_ACCESS_TOKEN',
+    GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY || 'PLEASE_SET_ME'
   },
   build: {
     extend(config, ctx) {

src/components/TheAccessSection.vue

@@ -0,0 +1,125 @@
+<template>
+  <BaseSection class="the-access-section">
+    <template slot="heading">
+      ACCESS
+    </template>
+
+    <div id="map" />
+
+    <!-- eslint-disable vue/html-indent -->
+    <script type="application/javascript">
+    function initMap() {
+      const latlng = new google.maps.LatLng(35.6230000, 139.717600)
+      const map = new google.maps.Map(document.getElementById('map'), {
+        center: latlng,
+        zoom: 16
+      })
+      const infowindow = new google.maps.InfoWindow({
+        content: 'TOC五反田メッセ',
+        position: latlng
+      })
+      infowindow.open(map)
+    }
+    </script>
+    <!-- eslint-enable vue/html-indent -->
+
+    <script
+      type="application/javascript"
+      :src="
+        `https://maps.googleapis.com/maps/api/js?key=${googleMapsApiKey}&callback=initMap`
+      "
+      async
+      defer
+    />
+
+    <h3 class="title">
+      会場：TOC五反田メッセ
+    </h3>
+
+    <div class="description">
+      <p>
+        <a href="http://messe.toc.co.jp/" target="_blank" rel="noopener">
+          http://messe.toc.co.jp/
+        </a>
+        <br />
+        東京都品川区西五反田6-6-19
+      </p>
+
+      <p>
+        <span class="line">JR山手線、都営地下鉄浅草線でお越しの方</span><br />
+        五反田駅 西口より徒歩10分
+      </p>
+
+      <p>
+        <span class="line">東急池上線でお越しの方</span><br />
+        大崎広小路駅より徒歩9分
+      </p>
+
+      <p>
+        <span class="line">東急目黒線でお越しの方</span><br />
+        不動前駅より徒歩6分
+      </p>
+    </div>
+  </BaseSection>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import BaseSection from '~/components/BaseSection.vue'
+
+@Component({
+  components: {
+    BaseSection
+  }
+})
+export default class TheAccessSection extends Vue {
+  private get googleMapsApiKey(): string | undefined {
+    return process.env.GOOGLE_MAPS_API_KEY
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#map {
+  margin-bottom: 10px;
+  height: 439px;
+
+  @media screen and (min-width: $layout-breakpoint--is-small-up) {
+    height: 516px;
+  }
+}
+
+.title {
+  margin-bottom: 10px;
+  font-size: 5vw;
+  font-weight: bold;
+  line-height: 1.28;
+
+  @media screen and (min-width: $layout-breakpoint--is-small-up) {
+    margin-bottom: 3px;
+    font-size: 30px;
+  }
+}
+
+.description {
+  p {
+    font-size: 3.5vw;
+
+    @media screen and (min-width: $layout-breakpoint--is-small-up) {
+      font-size: 16px;
+    }
+  }
+
+  a {
+    color: $primary-text-color;
+  }
+
+  p + p {
+    margin-top: 40px;
+  }
+}
+
+.line {
+  font-weight: bold;
+}
+</style>

src/pages/index.vue

@@ -4,6 +4,7 @@
     <TheSpeakerListSection />
     <TheTicketSection />
     <TheSponsorListSection :sponsor-list="sponsors || []" />
+    <TheAccessSection />
     <TheStoreSection />
     <TheStaffListSection />
   </div>
@@ -13,6 +14,7 @@
 import { Component, Vue } from 'nuxt-property-decorator'
 import { Entry } from 'contentful/index'
 import { getSponsors } from '~/plugins/contentful.ts'
+import TheAccessSection from '~/components/TheAccessSection.vue'
 import TheHeadSection from '~/components/TheHeadSection.vue'
 import TheSpeakerListSection from '~/components/TheSpeakerListSection.vue'
 import TheTicketSection from '~/components/TheTicketSection.vue'
@@ -22,6 +24,7 @@ import TheStoreSection from '~/components/TheStoreSection.vue'
 
 @Component({
   components: {
+    TheAccessSection,
     TheHeadSection,
     TheSpeakerListSection,
     TheTicketSection,

test/unit/specs/components/TheAccessSection.spec.ts

@@ -0,0 +1,9 @@
+import { mount } from '@vue/test-utils'
+import TheAccessSection from '~/components/TheAccessSection.vue'
+
+describe('TheAccessSection', () => {
+  test('レンダリングできる', () => {
+    const wrapper = mount(TheAccessSection)
+    expect(wrapper.find('.the-access-section').isVisible()).toBeTruthy()
+  })
+})