feat: redeploy new metainfo mechanism

ohyama · Jan 24, 2021 · 61cb5b9 · 61cb5b9
1 parent 311f52a
commit 61cb5b9
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 66 deletions.
diff --git a/components/cards/ConfirmedCasesDetailsCard.vue b/components/cards/ConfirmedCasesDetailsCard.vue
@@ -59,7 +59,7 @@ import DataView from '@/components/DataView.vue'
 import Data from '@/data/data.json'
 import formatConfirmedCases from '@/utils/formatConfirmedCases'
 
-export default {
+const options = {
   components: {
     DataView,
     ConfirmedCasesDetailsTable,
@@ -78,6 +78,8 @@ export default {
     }
   },
 }
+
+export default options
 </script>
 
 <style lang="scss" module>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -32,8 +32,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import { LinkPropertyHref, MetaInfo } from 'vue-meta'
+import type { NuxtConfig } from '@nuxt/types'
+import type { NuxtOptionsHead as MetaInfo } from '@nuxt/types/config/head'
+import { Component, Vue } from 'nuxt-property-decorator'
 import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue'
 
 import DevelopmentModeMark from '@/components/DevelopmentModeMark.vue'
@@ -43,19 +44,16 @@ import Data from '@/data/data.json'
 import { convertDateToSimpleFormat } from '@/utils/formatDate'
 import { getLinksLanguageAlternative } from '@/utils/i18nUtils'
 
-type LocalData = {
-  hasNavigation: boolean
-  isOpenNavigation: boolean
-  loading: boolean
-}
-export default Vue.extend({
+@Component({
   components: {
     DevelopmentModeMark,
     ScaleLoader,
     SideNavigation,
     NoScript,
   },
-  data(): LocalData {
+})
+export default class Default extends Vue implements NuxtConfig {
+  data() {
     let hasNavigation = true
     let loading = true
     if (this.$route.query.embed === 'true') {
@@ -70,27 +68,32 @@ export default Vue.extend({
       loading,
       isOpenNavigation: false,
     }
-  },
+  }
+
   mounted() {
-    this.loading = false
+    this.$data.loading = false
     this.getMatchMedia().addListener(this.closeNavigation)
-  },
+  }
+
   beforeDestroy() {
     this.getMatchMedia().removeListener(this.closeNavigation)
-  },
-  methods: {
-    openNavigation(): void {
-      this.isOpenNavigation = true
-    },
-    closeNavigation(): void {
-      this.isOpenNavigation = false
-    },
-    getMatchMedia(): MediaQueryList {
-      return window.matchMedia('(min-width: 601px)')
-    },
-  },
-  head(): MetaInfo {
+  }
+
+  openNavigation() {
+    this.data().isOpenNavigation = true
+  }
+
+  closeNavigation() {
+    this.data().isOpenNavigation = false
+  }
+
+  getMatchMedia() {
+    return window.matchMedia('(min-width: 601px)')
+  }
+
+  head() {
     const { htmlAttrs, meta } = this.$nuxtI18nSeo()
+    type LinkPropertyHref = typeof htmlAttrs
     const ogLocale =
       meta && meta.length > 0
         ? meta[0]
@@ -99,7 +102,6 @@ export default Vue.extend({
             name: 'og:locale',
             content: this.$i18n.locale,
           }
-
     let linksAlternate: LinkPropertyHref[] = []
     const basename = this.getRouteBaseName()
     // 404 エラーなどのときは this.getRouteBaseName() が null になるため除外
@@ -110,17 +112,15 @@ export default Vue.extend({
         this.$i18n.defaultLocale
       )
     }
-
     const { lastUpdate } = Data
-
-    return {
+    const mInfo: MetaInfo = {
       htmlAttrs,
       link: [
         {
           rel: 'canonical',
           href: `https://stopcovid19.metro.tokyo.lg.jp${this.$route.path}`,
         },
-        ...linksAlternate,
+        ...(linksAlternate as []),
       ],
       // Disable prettier for readability purposes
       // eslint-disable-next-line prettier/prettier
@@ -188,8 +188,9 @@ export default Vue.extend({
         },
       ],
     }
-  },
-})
+    return mInfo
+  }
+}
 </script>
 <style lang="scss">
 .app {

diff --git a/pages/cards/_card.vue b/pages/cards/_card.vue
@@ -2,7 +2,7 @@
   <component :is="cardComponent" />
 </template>
 
-<script>
+<script lang="ts">
 /* eslint-disable simple-import-sort/sort -- ブラウザでの表示順に合わせて各 card の component を import する */
 // ---- モニタリング項目
 // 検査陽性者の状況
@@ -48,9 +48,13 @@ import MetroCard from '@/components/cards/MetroCard.vue'
 import AgencyCard from '@/components/cards/AgencyCard.vue'
 /* eslint-enable simple-import-sort/sort */
 
+import { Vue, Component } from 'nuxt-property-decorator'
+import type { NuxtOptionsHead as MetaInfo } from '@nuxt/types/config/head'
+import type { NuxtConfig } from '@nuxt/types'
 import { getLinksLanguageAlternative } from '@/utils/i18nUtils'
+import { convertDateToSimpleFormat } from '@/utils/formatDate'
 
-export default {
+@Component({
   components: {
     // ---- モニタリング項目
     ConfirmedCasesDetailsCard,
@@ -75,6 +79,8 @@ export default {
     MetroCard,
     AgencyCard,
   },
+})
+export default class CardContainer extends Vue implements NuxtConfig {
   data() {
     let title, updatedAt, cardComponent
     switch (this.$route.params.card) {
@@ -161,35 +167,37 @@ export default {
       case 'agency':
         cardComponent = 'agency-card'
     }
-
+    /* eslint-enable simple-import-sort/sort */
     return {
       cardComponent,
       title,
       updatedAt,
     }
-  },
+  }
+
   head() {
     const url = 'https://stopcovid19.metro.tokyo.lg.jp'
     const timestamp = new Date().getTime()
-    const ogpImage =
-      this.$i18n.locale === 'ja'
-        ? `${url}/ogp/${this.$route.params.card}.png?t=${timestamp}`
-        : `${url}/ogp/${this.$i18n.locale}/${this.$route.params.card}.png?t=${timestamp}`
-    const description = `${this.$t(
-      '当サイトは新型コロナウイルス感染症 (COVID-19) に関する最新情報を提供するために、東京都が開設したものです。'
-    )}`
     const defaultTitle = `${this.$t('東京都')} ${this.$t(
       '新型コロナウイルス感染症'
     )}${this.$t('対策サイト')}`
+    const ogpImage =
+      (this.$i18n.locale ?? 'ja') === 'ja'
+        ? `${url}/ogp/${this.$route.params.card}.png?t=${timestamp}`
+        : `${url}/ogp/${this.$i18n.locale}/${this.$route.params.card}.png?t=${timestamp}`
 
-    return {
-      titleTemplate: (title) => `${this.title || title} | ${defaultTitle}`,
+    const mInfo: MetaInfo = {
+      title: `${
+        (this.$data.title ?? '') !== ''
+          ? this.$data.title + ' | ' + defaultTitle
+          : defaultTitle
+      }`,
       link: [
-        ...getLinksLanguageAlternative(
+        ...(getLinksLanguageAlternative(
           `cards/${this.$route.params.card}`,
           this.$i18n.locales,
           this.$i18n.defaultLocale
-        ),
+        ) as []),
       ],
       meta: [
         {
@@ -200,42 +208,43 @@ export default {
         {
           hid: 'og:title',
           property: 'og:title',
-          template: (title) =>
-            title !== ''
-              ? `${this.title || title} | ${defaultTitle}`
-              : `${defaultTitle}`,
-          content: '',
+          content: `${
+            (this.$data.title ?? '') !== ''
+              ? this.$data.title + ' | ' + defaultTitle
+              : defaultTitle
+          }`,
         },
         {
           hid: 'description',
           name: 'description',
-          template: (updatedAt) =>
-            updatedAt !== ''
-              ? `${this.updatedAt || updatedAt} | ${description}`
-              : `${description}`,
-          content: '',
+          content: `${this.$t('{date} 更新', {
+            date: convertDateToSimpleFormat(this.$data.updatedAt),
+          })}: ${this.$tc(
+            '当サイトは新型コロナウイルス感染症 (COVID-19) に関する最新情報を提供するために、東京都が開設したものです。'
+          )}`,
         },
         {
           hid: 'og:description',
           property: 'og:description',
-          template: (updatedAt) =>
-            updatedAt !== ''
-              ? `${this.updatedAt || updatedAt} | ${description}`
-              : `${description}`,
-          content: '',
+          content: `${this.$t('{date} 更新', {
+            date: convertDateToSimpleFormat(this.$data.updatedAt),
+          })}: ${this.$tc(
+            '当サイトは新型コロナウイルス感染症 (COVID-19) に関する最新情報を提供するために、東京都が開設したものです。'
+          )}`,
         },
         {
           hid: 'og:image',
           property: 'og:image',
-          content: ogpImage,
+          content: `${ogpImage}`,
         },
         {
           hid: 'twitter:image',
           name: 'twitter:image',
-          content: ogpImage,
+          content: `${ogpImage}`,
         },
       ],
     }
-  },
+    return mInfo
+  }
 }
 </script>