Add browser meta tags for favicon and title (#1746)

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-01-02 19:35:39 +01:00 committed by GitHub
parent 0a4ab9fb0a
commit 194183a7eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 111 additions and 48 deletions

View file

@ -6,15 +6,12 @@
import React, { Fragment } from 'react'
import { Container } from 'react-bootstrap'
import { useDocumentTitle } from '../../hooks/common/use-document-title'
import { MotdModal } from '../common/motd-modal/motd-modal'
import { Footer } from './footer/footer'
import { HeaderBar } from './navigation/header-bar/header-bar'
import { UiNotifications } from '../notifications/ui-notifications'
export const LandingLayout: React.FC = ({ children }) => {
useDocumentTitle()
return (
<Fragment>
<UiNotifications />

View file

@ -0,0 +1,25 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import Head from 'next/head'
import { useAppTitle } from '../../hooks/common/use-app-title'
import { FavIcon } from './fav-icon'
/**
* Sets basic browser meta tags.
*/
export const BaseHead: React.FC = () => {
const appTitle = useAppTitle()
return (
<Head>
<title>{appTitle}</title>
<FavIcon />
<meta content='width=device-width, initial-scale=1' name='viewport' />
</Head>
)
}

View file

@ -0,0 +1,29 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { Fragment } from 'react'
/**
* Sets meta tags for the favicon.
*/
export const FavIcon: React.FC = () => {
return (
<Fragment>
<link href='/icons/apple-touch-icon.png' rel='apple-touch-icon' sizes='180x180' />
<link href='/icons/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png' />
<link href='/icons/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png' />
<link href='/icons/site.webmanifest' rel='manifest' />
<link href='/icons/favicon.ico' rel='shortcut icon' />
<link color='#b51f08' href='/icons/safari-pinned-tab.svg' rel='mask-icon' />
<meta name='apple-mobile-web-app-title' content='HedgeDoc' />
<meta name='application-name' content='HedgeDoc' />
<meta name='msapplication-TileColor' content='#b51f08' />
<meta name='theme-color' content='#b51f08' />
<meta content='/icons/browserconfig.xml' name='msapplication-config' />
<meta content='HedgeDoc - Collaborative markdown notes' name='description' />
</Fragment>
)
}

View file

@ -0,0 +1,28 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import Head from 'next/head'
import React, { useMemo } from 'react'
import { useNoteTitle } from '../../hooks/common/use-note-title'
import { useAppTitle } from '../../hooks/common/use-app-title'
/**
* Sets the note and app title for the browser window
*/
export const NoteAndAppTitleHead: React.FC = () => {
const noteTitle = useNoteTitle()
const appTitle = useAppTitle()
const noteAndAppTitle = useMemo(() => {
return noteTitle + ' - ' + appTitle
}, [appTitle, noteTitle])
return (
<Head>
<title>{noteAndAppTitle}</title>
</Head>
)
}