Merge pull request #5927 from mcdmaster/feat/options

Feat/options: redeploy new metainfo mechanism
Tokyo-Metro-Gov · Feb 1, 2021 · 9dd6121 · 9dd6121
2 parents 6153dd1 + e4b2e6a
commit 9dd6121
Show file tree

Hide file tree

Showing 5 changed files with 109 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/package.json b/package.json
@@ -73,6 +73,7 @@
     "eslint-plugin-tsdoc": "0.2.11",
     "husky": "4.3.8",
     "lint-staged": "10.5.3",
+    "nuxt-property-decorator": "2.9.1",
     "nuxt-purgecss": "1.0.0",
     "nuxt-svg-loader": "1.2.0",
     "nuxt-webfontloader": "1.1.0",

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>
diff --git a/yarn.lock b/yarn.lock
@@ -6863,6 +6863,16 @@ nuxt-i18n@6.17.0:
     klona "^2.0.4"
     vue-i18n "^8.18.1"
 
+nuxt-property-decorator@2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/nuxt-property-decorator/-/nuxt-property-decorator-2.9.1.tgz#60fd87b64d85519b091374c7ea4c0ce1979f6afa"
+  integrity sha512-dE2GrrGKZMhv0dHAr+Lmj+JOQfjIouINgF58QNRDFNOZXMJrXxKO5zGqvCRwmx3hxqqwht7TXHdz9w1AnvL2IA==
+  dependencies:
+    vue-class-component "^7.2.6"
+    vue-property-decorator "^9.0.0"
+    vuex-class "^0.3.2"
+    vuex-module-decorators "^1.0.1"
+
 nuxt-purgecss@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/nuxt-purgecss/-/nuxt-purgecss-1.0.0.tgz#7c275205f0b727a5822781908d684f2e094ff5e7"
@@ -10098,6 +10108,11 @@ vue-chartjs@3.5.1:
   dependencies:
     "@types/chart.js" "^2.7.55"
 
+vue-class-component@^7.2.6:
+  version "7.2.6"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
+  integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
+
 vue-client-only@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
@@ -10148,6 +10163,11 @@ vue-no-ssr@^1.1.1:
   resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
   integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
 
+vue-property-decorator@^9.0.0:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz#266a2eac61ba6527e2e68a6933cfb98fddab5457"
+  integrity sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==
+
 vue-router@^3.4.9:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"
@@ -10219,6 +10239,16 @@ vuetify@^2.4.2:
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.4.3.tgz#8d6f15dde396e81f64e130d8ac0bc272e030879c"
   integrity sha512-i2/Df0U0sedlaCbft4NMbna7WXbTCBhKVYTMjBrLVzrYTTWqzSO7ZCxLuDRY7MjwQhn7AOec7ent9U/NyIICqA==
 
+vuex-class@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/vuex-class/-/vuex-class-0.3.2.tgz#c7e96a076c1682137d4d23a8dcfdc63f220e17a8"
+  integrity sha512-m0w7/FMsNcwJgunJeM+wcNaHzK2KX1K1rw2WUQf7Q16ndXHo7pflRyOV/E8795JO/7fstyjH3EgqBI4h4n4qXQ==
+
+vuex-module-decorators@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vuex-module-decorators/-/vuex-module-decorators-1.0.1.tgz#d34dafb5428a3636f1c26d3d014c15fc9659ccd0"
+  integrity sha512-FLWZsXV5XAtl/bcKUyQFpnSBtpc3wK/7zSdy9oKbyp71mZd4ut5y2zSd219wWW9OG7WUOlVwac4rXFFDVnq7ug==
+
 vuex@^3.6.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"