diff --git a/pages/[username].tsx b/pages/[username].tsx index 0767c736..215a201c 100644 --- a/pages/[username].tsx +++ b/pages/[username].tsx @@ -246,15 +246,27 @@ const ProfileRoute: React.FC = (props: Props) => { return (
- @{props.user?.username}'s Teams + {/* HTML */} + + {t('page.titles.profile', { username: props.user?.username })} + + + {/* OpenGraph */} = (props: Props) => { /> + {/* Twitter */} = (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) => { appState.weaponKeys = props.weaponKeys } - return + 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 ( + + + + {/* HTML */} + {generateTitle()} + + + {/* OpenGraph */} + + + + + + {/* Twitter */} + + + + + + + ) } 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 }, diff --git a/pages/saved.tsx b/pages/saved.tsx index 90fdc6ff..2d5609d2 100644 --- a/pages/saved.tsx +++ b/pages/saved.tsx @@ -288,15 +288,15 @@ const SavedRoute: React.FC = (props: Props) => { return (
- {t('saved.title')} + {t('page.titles.saved')} - + - + = (props: Props) => { return (
- {t('teams.title')} + {/* HTML */} + {t('page.titles.discover')} + - + {/* OpenGraph */} + + {/* Twitter */} - + diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 08b6cf85..3343da00 100644 --- 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", diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index 5c87b919..5f4a1e8d 100644 --- 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": "強化アビリティ",