From fa178c3d9ef382a1a8b063a83113e6d3e4a3f61d Mon Sep 17 00:00:00 2001 From: David Date: Sun, 21 Mar 2021 16:02:15 +0100 Subject: [PATCH] SEO & PWA (#1) * 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 --- .gitignore | 5 + components/Layout.tsx | 32 +- next.config.js | 7 + package.json | 1 + pages/[[...slug]].tsx | 2 +- public/apple-touch-icon.png | Bin 0 -> 12809 bytes public/favicon-16x16.png | Bin 0 -> 738 bytes public/favicon-192x192.png | Bin 0 -> 8420 bytes public/favicon-32x32.png | Bin 0 -> 1573 bytes public/favicon-512x512.png | Bin 0 -> 22739 bytes public/favicon-maskable.png | Bin 0 -> 19457 bytes public/favicon.ico | Bin 0 -> 9662 bytes public/favicon.svg | 26 +- public/manifest.json | 28 + public/robots.txt | 3 + yarn.lock | 1333 ++++++++++++++++++++++++++++++++++- 16 files changed, 1388 insertions(+), 49 deletions(-) create mode 100644 next.config.js create mode 100644 public/apple-touch-icon.png create mode 100644 public/favicon-16x16.png create mode 100644 public/favicon-192x192.png create mode 100644 public/favicon-32x32.png create mode 100644 public/favicon-512x512.png create mode 100644 public/favicon-maskable.png create mode 100644 public/favicon.ico create mode 100644 public/manifest.json create mode 100644 public/robots.txt diff --git a/.gitignore b/.gitignore index 0437f04..d9e413a 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,8 @@ yarn-error.log* # cypress cypress/videos cypress/screenshots + +# next-pwa +**/public/workbox-*.js* +**/public/sw.js* +**/public/worker-*.js* diff --git a/components/Layout.tsx b/components/Layout.tsx index 4ee76b4..11d05ac 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -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 = ({ customTitle, children }) => ( +const Layout: FC = ({ customTitle, children, home, ...props }) => ( <> {customTitle ?? title} - + + + {home && } + + + + + + + + + + + + + + + + +