CloudHost/LingvAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SEO & PWA (#1)

Browse Source 
* Initial SEO test

* Canonical URL added using envs

* OG & Twitter fix

* Robots.txt & meta added

* Localhost support for canonical url

* Initial PWA version

* Icons reexported & added maskable
This commit is contained in:
David
2021-03-21 16:02:15 +01:00
committed by GitHub
parent 1ef9399fdf
commit fa178c3d9e
16 changed files with 1388 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/Layout.tsx
View File

@@ -1,23 +1,46 @@
import { FC } from "react";
import { Flex, VStack, Button, Link } from "@chakra-ui/react";
import { Flex, VStack, Button, Link, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import Header from "./Header";
import Footer from "./Footer";
type Props = {
customTitle?: string
customTitle?: string,
home?: true
[key: string]: any
};
const title = "Lingva Translate";
const description = "Alternative front-end for Google Translate, serving as a Free and Open Source translator with over a hundred languages available";
const siteDomain = process.env["NEXT_PUBLIC_SITE_DOMAIN"];
const url = siteDomain && (siteDomain.includes("localhost") ? "http://" : "https://") + siteDomain;
const Layout: FC<Props> = ({ customTitle, children }) => (
const Layout: FC<Props> = ({ customTitle, children, home, ...props }) => (
<>
<Head>
<title>
{customTitle ?? title}
</title>
<link rel="icon" href="/favicon.svg" />
<meta name="description" content={description} />
<meta name="robots" content={home ? "index,follow" : "noindex,nofollow"} />
{home && <link rel="canonical" href={url} />}
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content={useColorModeValue("#bde3cb", "#005525")} />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:locale" content="en" />
<meta property="og:image" content={`${url}/favicon-512x512.png`} />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<meta property="og:image:alt" content={title} />
<meta property="twitter:card" content="summary" />
<meta property="twitter:creator" content="@thedaviddelta" />
</Head>
<Button
@@ -41,6 +64,7 @@ const Layout: FC<Props> = ({ customTitle, children }) => (
id="main"
flexGrow={1}
w="full"
{...props}
>
{children}
</Flex>