Put viewport meta tag in _app

This commit is contained in:
Justin Edmund 2023-07-06 19:21:35 -07:00
parent 14994bfbbd
commit 2049ad4cf7
7 changed files with 28 additions and 20 deletions

View file

@ -26,7 +26,7 @@ const AboutHead = ({ page }: Props) => {
name="description" name="description"
content={t(`page.descriptions.${currentPage}`)} content={t(`page.descriptions.${currentPage}`)}
/> />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/images/favicon.png" /> <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
{/* OpenGraph */} {/* OpenGraph */}

View file

@ -11,7 +11,7 @@ const NewHead = () => {
{/* HTML */} {/* HTML */}
<title>{t('page.titles.new')}</title> <title>{t('page.titles.new')}</title>
<meta name="description" content={t('page.descriptions.new')} /> <meta name="description" content={t('page.descriptions.new')} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/images/favicon.png" /> <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
{/* OpenGraph */} {/* OpenGraph */}

View file

@ -20,7 +20,7 @@ const ProfileHead = ({ user }: Props) => {
username: user.username, username: user.username,
})} })}
/> />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/images/favicon.png" /> <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
{/* OpenGraph */} {/* OpenGraph */}

View file

@ -9,7 +9,7 @@ const SavedHead = () => {
return ( return (
<Head> <Head>
<title>{t('page.titles.saved')}</title> <title>{t('page.titles.saved')}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/images/favicon.png" /> <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
<meta property="og:title" content={t('page.titles.saved')} /> <meta property="og:title" content={t('page.titles.saved')} />

View file

@ -11,7 +11,6 @@ const TeamsHead = () => {
{/* HTML */} {/* HTML */}
<title>{t('page.titles.discover')}</title> <title>{t('page.titles.discover')}</title>
<meta name="description" content={t('page.descriptions.discover')} /> <meta name="description" content={t('page.descriptions.discover')} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/images/favicon.png" /> <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
{/* OpenGraph */} {/* OpenGraph */}

View file

@ -32,7 +32,7 @@ const PartyHead = ({ party, meta }: Props) => {
raidName: party.raid ? party.raid.name[locale] : '', raidName: party.raid ? party.raid.name[locale] : '',
})} })}
/> />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/images/favicon.png" /> <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
{/* OpenGraph */} {/* OpenGraph */}

View file

@ -1,4 +1,5 @@
import { appWithTranslation } from 'next-i18next' import { appWithTranslation } from 'next-i18next'
import Head from 'next/head'
import Link from 'next/link' import Link from 'next/link'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import { get } from 'local-storage' import { get } from 'local-storage'
@ -131,20 +132,28 @@ function MyApp({ Component, pageProps }: AppProps) {
} }
return ( return (
<ThemeProvider> <>
<ToastProvider swipeDirection="right"> <Head>
<TooltipProvider> <meta
<Layout> name="viewport"
{!appState.version ? ( content="viewport-fit=cover, width=device-width, initial-scale=1.0"
serverUnavailable() />
) : ( </Head>
<Component {...pageProps} /> <ThemeProvider>
)} <ToastProvider swipeDirection="right">
</Layout> <TooltipProvider>
<Viewport className="ToastViewport" /> <Layout>
</TooltipProvider> {!appState.version ? (
</ToastProvider> serverUnavailable()
</ThemeProvider> ) : (
<Component {...pageProps} />
)}
</Layout>
<Viewport className="ToastViewport" />
</TooltipProvider>
</ToastProvider>
</ThemeProvider>
</>
) )
} }