From 61cb5b98ea2fe3f433ff75bd3a2763a118a183fd Mon Sep 17 00:00:00 2001
From: mcdmaster <mcdmaster@gmail.com>
Date: Mon, 25 Jan 2021 06:41:20 +0900
Subject: [PATCH 1/2] feat: redeploy new metainfo mechanism

---
 .../cards/ConfirmedCasesDetailsCard.vue       |  4 +-
 layouts/default.vue                           | 65 ++++++++--------
 pages/cards/_card.vue                         | 75 +++++++++++--------
 3 files changed, 78 insertions(+), 66 deletions(-)

diff --git a/components/cards/ConfirmedCasesDetailsCard.vue b/components/cards/ConfirmedCasesDetailsCard.vue
index ed6b2a86d28..94c8596772f 100644
--- 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
index ee633eee871..4e5b901d245 100644
--- 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
index 7370e4e6bdf..1e759df9c59 100644
--- 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>

From e4b2e6ae88ca5bde006dec8470398a2ff28e1729 Mon Sep 17 00:00:00 2001
From: mcdmaster <mcdmaster@gmail.com>
Date: Mon, 25 Jan 2021 06:53:57 +0900
Subject: [PATCH 2/2] feat: redeploy new metainfo mechanism

---
 package.json |  3 ++-
 yarn.lock    | 42 ++++++++++++++++++++++++++++++++++++------
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 06c161d6323..ac4d1b5733a 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@nuxt/typescript-runtime": "2.0.1",
     "@nuxtjs/dotenv": "1.4.1",
     "@nuxtjs/gtm": "2.4.0",
-    "@nuxtjs/pwa": "3.3.4",
+    "@nuxtjs/pwa": "3.3.5",
     "axe-core": "4.1.1",
     "chart.js": "2.9.4",
     "cross-env": "7.0.3",
@@ -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/yarn.lock b/yarn.lock
index 2bdc205275b..277390ccb6b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1347,15 +1347,15 @@
     chalk "^4.1.0"
     semver "^7.3.2"
 
-"@nuxtjs/pwa@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/pwa/-/pwa-3.3.4.tgz#557a7a57bc3713bcc820bc88942069af263fd045"
-  integrity sha512-aDw9xnTIPdqknvgm5uOtuhcmMedtCy8HALQ4lSb30UqLQzY0z6yOyGSq+6ShybtDW2FjaBeyhs/ooEIP0XZZ9A==
+"@nuxtjs/pwa@3.3.5":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/pwa/-/pwa-3.3.5.tgz#db7c905536ebe8a464a347b6ae3215810642c044"
+  integrity sha512-8tTmW8DBspWxlJwTimOHTkwfkwPpL9wIcGmy75Gcmin+c9YtX2Ehxmhgt/TLFOC9XsLAqojqynw3/Agr/9OE1w==
   dependencies:
     clone-deep "^4.0.1"
     defu "^3.2.2"
     execa "^5.0.0"
-    fs-extra "^9.0.1"
+    fs-extra "^9.1.0"
     hasha "^5.2.2"
     jimp-compact "^0.16.1"
     lodash.template "^4.5.0"
@@ -4772,7 +4772,7 @@ fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^9.0.0, fs-extra@^9.0.1:
+fs-extra@^9.0.0, fs-extra@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
   integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
@@ -6848,6 +6848,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"
@@ -10083,6 +10093,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"
@@ -10133,6 +10148,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.4.9"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"
@@ -10203,6 +10223,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.0"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.0.tgz#95efa56a58f7607c135b053350833a09e01aa813"