Add titles/description and translations

2022-12-26 05:04:27 -08:00 · 2022-12-26 05:04:27 -08:00 · 0c76866b56
commit 0c76866b56
parent 5d4f3b1091
6 changed files with 159 additions and 15 deletions
--- a/pages/[username].tsx
+++ b/pages/[username].tsx
@ -246,15 +246,27 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
  return (
    <div id="Profile">
      <Head>
-        <title>@{props.user?.username}&apos;s Teams</title>
+        {/* HTML */}
+        <title>
+          {t('page.titles.profile', { username: props.user?.username })}
+        </title>
+        <meta
+          name="description"
+          content={t('page.descriptions.profile', {
+            username: props.user?.username,
+          })}
+        />

+        {/* OpenGraph */}
        <meta
          property="og:title"
-          content={`@${props.user?.username}\'s Teams`}
+          content={t('page.titles.profile', { username: props.user?.username })}
        />
        <meta
          property="og:description"
-          content={`Browse @${props.user?.username}\'s Teams and filter raid, element or recency`}
+          content={t('page.descriptions.profile', {
+            username: props.user?.username,
+          })}
        />
        <meta
          property="og:url"
@ -262,15 +274,18 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
        />
        <meta property="og:type" content="website" />

+        {/* Twitter */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta property="twitter:domain" content="app.granblue.team" />
        <meta
          name="twitter:title"
-          content={`@${props.user?.username}\'s Teams`}
+          content={t('page.titles.profile', { username: props.user?.username })}
        />
        <meta
          name="twitter:description"
-          content={`Browse @${props.user?.username}\''s Teams and filter raid, element or recency`}
+          content={t('page.descriptions.profile', {
+            username: props.user?.username,
+          })}
        />
      </Head>
      <FilterBar
--- a/pages/p/[party].tsx
+++ b/pages/p/[party].tsx
@ -1,5 +1,6 @@
 import React, { useEffect } from 'react'
-import { getCookie } from 'cookies-next'
+import Head from 'next/head'
+import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

 import Party from '~components/Party'
@ -12,6 +13,9 @@ import api from '~utils/api'

 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
+import { useSnapshot } from 'valtio'
+import { raidGroups } from '~utils/raidGroups'
+import { useRouter } from 'next/router'

 interface Props {
  party: Party
@ -20,9 +24,18 @@ interface Props {
  raids: Raid[]
  sortedRaids: Raid[][]
  weaponKeys: GroupedWeaponKeys
+  meta: { [key: string]: string }
 }

 const PartyRoute: React.FC<Props> = (props: Props) => {
+  // Import translations
+  const { t } = useTranslation('common')
+
+  // Set up router
+  const router = useRouter()
+  const locale =
+    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+
  useEffect(() => {
    persistStaticData()
  }, [persistStaticData])
@ -34,7 +47,65 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
    appState.weaponKeys = props.weaponKeys
  }

-  return <Party team={props.party} raids={props.sortedRaids} />
+  function generateTitle() {
+    const teamName =
+      props.party && props.party.name ? props.party.name : t('no_title')
+    const username = props.party
+      ? `@${props.party.user.username}`
+      : t('no_user')
+
+    const title = t('page.titles.team', {
+      username: username,
+      teamName: teamName,
+      emoji: props.meta.element,
+    })
+
+    return title
+  }
+
+  return (
+    <React.Fragment>
+      <Party team={props.party} raids={props.sortedRaids} />
+      <Head>
+        {/* HTML */}
+        <title>{generateTitle()}</title>
+        <meta
+          name="description"
+          content={t('page.descriptions.team', {
+            username: props.party.user?.username,
+            raidName: props.party.raid.name[locale],
+          })}
+        />
+
+        {/* OpenGraph */}
+        <meta property="og:title" content={generateTitle()} />
+        <meta
+          property="og:description"
+          content={t('page.descriptions.team', {
+            username: props.party.user?.username,
+            raidName: props.party.raid.name[locale],
+          })}
+        />
+        <meta
+          property="og:url"
+          content={`https://app.granblue.team/p/${props.party.shortcode}`}
+        />
+        <meta property="og:type" content="website" />
+
+        {/* Twitter */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta property="twitter:domain" content="app.granblue.team" />
+        <meta name="twitter:title" content={generateTitle()} />
+        <meta
+          name="twitter:description"
+          content={t('page.descriptions.team', {
+            username: props.party.user?.username,
+            raidName: props.party.raid.name[locale],
+          })}
+        />
+      </Head>
+    </React.Fragment>
+  )
 }

 export const getServerSidePaths = async () => {
@ -80,6 +151,31 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
    console.log('No party code')
  }

+  function getElement() {
+    if (party) {
+      const mainhand = party.weapons.find((weapon) => weapon.mainhand)
+      if (mainhand && mainhand.object.element === 0) {
+        return mainhand.element
+      } else {
+        return mainhand?.object.element
+      }
+    } else {
+      return 0
+    }
+  }
+
+  function elementEmoji() {
+    const element = getElement()
+
+    if (element === 0) return '⚪'
+    if (element === 1) return '🟢'
+    if (element === 2) return '🔴'
+    if (element === 3) return '🔵'
+    if (element === 4) return '🟤'
+    if (element === 5) return '🟣'
+    if (element === 6) return '🟡'
+  }
+
  return {
    props: {
      party: party,
@ -88,6 +184,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
      raids: raids,
      sortedRaids: sortedRaids,
      weaponKeys: weaponKeys,
+      meta: {
+        element: elementEmoji()
+      },
      ...(await serverSideTranslations(locale, ['common'])),
      // Will be passed to the page component as props
    },
--- a/pages/saved.tsx
+++ b/pages/saved.tsx
@ -288,15 +288,15 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
  return (
    <div id="Teams">
      <Head>
-        <title>{t('saved.title')}</title>
+        <title>{t('page.titles.saved')}</title>

-        <meta property="og:title" content="Your saved Teams" />
+        <meta property="og:title" content={t('page.titles.saved')} />
        <meta property="og:url" content="https://app.granblue.team/saved" />
        <meta property="og:type" content="website" />

        <meta name="twitter:card" content="summary_large_image" />
        <meta property="twitter:domain" content="app.granblue.team" />
-        <meta name="twitter:title" content="Your saved Teams" />
+        <meta name="twitter:title" content={t('page.titles.saved')} />
      </Head>

      <FilterBar
--- a/pages/teams.tsx
+++ b/pages/teams.tsx
@ -287,22 +287,26 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
  return (
    <div id="Teams">
      <Head>
-        <title>{t('teams.title')}</title>
+        {/* HTML */}
+        <title>{t('page.titles.discover')}</title>
+        <meta name="description" content={t('page.descriptions.discover')} />

-        <meta property="og:title" content="Discover Teams" />
+        {/* OpenGraph */}
+        <meta property="og:title" content={t('page.titles.discover')} />
        <meta
          property="og:description"
-          content="Find different Granblue Fantasy teams by raid, element or recency"
+          content={t('page.descriptions.discover')}
        />
        <meta property="og:url" content="https://app.granblue.team/teams" />
        <meta property="og:type" content="website" />

+        {/* Twitter */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta property="twitter:domain" content="app.granblue.team" />
-        <meta name="twitter:title" content="Discover Teams" />
+        <meta name="twitter:title" content={t('page.titles.discover')} />
        <meta
          name="twitter:description"
-          content="Find different Granblue Fantasy teams by raid, element or recency"
+          content={t('page.descriptions.discover')}
        />
      </Head>

--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -278,6 +278,19 @@
    "loading": "Loading teams...",
    "not_found": "No teams found"
  },
+  "page": {
+    "titles": {
+      "discover": "Discover teams",
+      "profile": "@{{username}}'s Teams / granblue.team",
+      "team": "{{emoji}} {{teamName}} by {{username}} / granblue.team",
+      "saved": "Your saved teams"
+    },
+    "descriptions": {
+      "discover": "Save and discover teams to use in Granblue Fantasy and search by raid, element or recency",
+      "profile": "Browse @{{username}}'s Teams and filter by raid, element or recency",
+      "team": "Browse this team for {{raidName}} by {{username}} and others on granblue.team"
+    }
+  },
  "job_skills": {
    "all": "All skills",
    "buffing": "Buffing",
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@ -279,6 +279,19 @@
    "loading": "ロード中...",
    "not_found": "編成は見つかりませんでした"
  },
+  "page": {
+    "titles": {
+      "discover": "編成を見出す",
+      "profile": "@{{username}}さんの作った編成",
+      "team": "{{emoji}} {{teamName}}、{{username}}さんから / granblue.team",
+      "saved": "保存した編成"
+    },
+    "descriptions": {
+      "discover": "グランブルーファンタジーの編成をマルチ、属性、作った時間などで探したり保存したりできる",
+      "profile": "@{{username}}の編成を調査し、マルチ、属性、または作った時間でフィルターする",
+      "team": "granblue.teamで{{username}}さんが作った{{raidName}}の編成を調査できる"
+    }
+  },
  "job_skills": {
    "all": "全てのアビリティ",
    "buffing": "強化アビリティ",