Revert "fix ogp"

Tokyo-Metro-Gov · Jan 22, 2021 · d3fa0e2 · d3fa0e2
1 parent bf6a5f2
commit d3fa0e2
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 48 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -32,8 +32,8 @@
 </template>
 
 <script lang="ts">
-import Vue from '@nuxt/types'
-import type { NuxtOptionsHead as MetaInfo } from '@nuxt/types/config/head'
+import Vue from 'vue'
+import { LinkPropertyHref, MetaInfo } from 'vue-meta'
 import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue'
 
 import DevelopmentModeMark from '@/components/DevelopmentModeMark.vue'
@@ -43,14 +43,19 @@ import Data from '@/data/data.json'
 import { convertDateToSimpleFormat } from '@/utils/formatDate'
 import { getLinksLanguageAlternative } from '@/utils/i18nUtils'
 
-const options: Vue.NuxtConfig = {
+type LocalData = {
+  hasNavigation: boolean
+  isOpenNavigation: boolean
+  loading: boolean
+}
+export default Vue.extend({
   components: {
     DevelopmentModeMark,
     ScaleLoader,
     SideNavigation,
     NoScript,
   },
-  data() {
+  data(): LocalData {
     let hasNavigation = true
     let loading = true
     if (this.$route.query.embed === 'true') {
@@ -74,17 +79,17 @@ const options: Vue.NuxtConfig = {
     this.getMatchMedia().removeListener(this.closeNavigation)
   },
   methods: {
-    openNavigation() {
+    openNavigation(): void {
       this.isOpenNavigation = true
     },
-    closeNavigation() {
+    closeNavigation(): void {
       this.isOpenNavigation = false
     },
-    getMatchMedia() {
+    getMatchMedia(): MediaQueryList {
       return window.matchMedia('(min-width: 601px)')
     },
   },
-  head() {
+  head(): MetaInfo {
     const { htmlAttrs, meta } = this.$nuxtI18nSeo()
     const ogLocale =
       meta && meta.length > 0
@@ -95,7 +100,7 @@ const options: Vue.NuxtConfig = {
             content: this.$i18n.locale,
           }
 
-    let linksAlternate = htmlAttrs
+    let linksAlternate: LinkPropertyHref[] = []
     const basename = this.getRouteBaseName()
     // 404 エラーなどのときは this.getRouteBaseName() が null になるため除外
     if (basename) {
@@ -108,7 +113,7 @@ const options: Vue.NuxtConfig = {
 
     const { lastUpdate } = Data
 
-    const mInfo: MetaInfo = {
+    return {
       htmlAttrs,
       link: [
         {
@@ -183,10 +188,8 @@ const options: Vue.NuxtConfig = {
         },
       ],
     }
-    return mInfo
   },
-}
-export default options
+})
 </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 lang="ts">
+<script>
 /* eslint-disable simple-import-sort/sort -- ブラウザでの表示順に合わせて各 card の component を import する */
 // ---- モニタリング項目
 // 検査陽性者の状況
@@ -46,13 +46,11 @@ import TokyoFeverConsultationCenterReportsNumberCard from '@/components/cards/To
 import MetroCard from '@/components/cards/MetroCard.vue'
 // 都庁来庁者数の推移
 import AgencyCard from '@/components/cards/AgencyCard.vue'
+/* eslint-enable simple-import-sort/sort */
 
-import Vue from '@nuxt/types'
-import type { NuxtOptionsHead as MetaInfo } from '@nuxt/types/config/head'
 import { getLinksLanguageAlternative } from '@/utils/i18nUtils'
-import { convertDateToSimpleFormat } from '@/utils/formatDate'
 
-const options: Vue.NuxtConfig = {
+export default {
   components: {
     // ---- モニタリング項目
     ConfirmedCasesDetailsCard,
@@ -77,7 +75,6 @@ const options: Vue.NuxtConfig = {
     MetroCard,
     AgencyCard,
   },
-  /* eslint-enable simple-import-sort/sort */
   data() {
     let title, updatedAt, cardComponent
     switch (this.$route.params.card) {
@@ -174,20 +171,19 @@ const options: Vue.NuxtConfig = {
   head() {
     const url = 'https://stopcovid19.metro.tokyo.lg.jp'
     const timestamp = new Date().getTime()
-    const defaultTitle = `${this.$t('東京都')} ${this.$t(
-      '新型コロナウイルス感染症'
-    )}${this.$t('対策サイト')}`
     const ogpImage =
-      (this.$i18n.locale ?? 'ja') === 'ja'
+      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 mInfo: MetaInfo = {
-      title: `${
-        (this.title ?? '') !== ''
-          ? this.title + ' | ' + defaultTitle
-          : defaultTitle
-      }`,
+    return {
+      titleTemplate: (title) => `${this.title || title} | ${defaultTitle}`,
       link: [
         ...getLinksLanguageAlternative(
           `cards/${this.$route.params.card}`,
@@ -204,44 +200,42 @@ const options: Vue.NuxtConfig = {
         {
           hid: 'og:title',
           property: 'og:title',
-          content: `${
-            (this.title ?? '') !== ''
-              ? this.title + ' | ' + defaultTitle
-              : defaultTitle
-          }`,
+          template: (title) =>
+            title !== ''
+              ? `${this.title || title} | ${defaultTitle}`
+              : `${defaultTitle}`,
+          content: '',
         },
         {
           hid: 'description',
           name: 'description',
-          content: `${this.$t('{date} 更新', {
-            date: convertDateToSimpleFormat(this.updatedAt),
-          })}: ${this.$tc(
-            '当サイトは新型コロナウイルス感染症 (COVID-19) に関する最新情報を提供するために、東京都が開設したものです。'
-          )}`,
+          template: (updatedAt) =>
+            updatedAt !== ''
+              ? `${this.updatedAt || updatedAt} | ${description}`
+              : `${description}`,
+          content: '',
         },
         {
           hid: 'og:description',
           property: 'og:description',
-          content: `${this.$t('{date} 更新', {
-            date: convertDateToSimpleFormat(this.updatedAt),
-          })}: ${this.$tc(
-            '当サイトは新型コロナウイルス感染症 (COVID-19) に関する最新情報を提供するために、東京都が開設したものです。'
-          )}`,
+          template: (updatedAt) =>
+            updatedAt !== ''
+              ? `${this.updatedAt || updatedAt} | ${description}`
+              : `${description}`,
+          content: '',
         },
         {
           hid: 'og:image',
           property: 'og:image',
-          content: `${ogpImage}`,
+          content: ogpImage,
         },
         {
           hid: 'twitter:image',
           name: 'twitter:image',
-          content: `${ogpImage}`,
+          content: ogpImage,
         },
       ],
     }
-    return mInfo
   },
 }
-export default options
 </script>