Dependencies updated & small enhancements (#27)

* Dependencies updated and imports shortened * Head tags refactored * Final tweaks
2021-06-12 22:44:56 +02:00
parent 030de63b2a
commit bdaced0457
29 changed files with 2523 additions and 3373 deletions
--- a/components/CustomError.tsx
+++ b/components/CustomError.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Stack, HStack, Heading, Text, Icon, useColorModeValue } from "@chakra-ui/react";
 import { FaSadTear } from "react-icons/fa";
-import Layout from "./Layout";
+import { CustomHead } from ".";

 type Props = {
    statusCode: number,
@@ -9,7 +9,9 @@ type Props = {
 };

 const CustomError: FC<Props> = ({ statusCode, statusText }) => (
-    <Layout customTitle={`${statusCode} - ${statusText}`}>
+    <>
+        <CustomHead customTitle={`${statusCode} - ${statusText}`} />
+
        <Stack
            color={useColorModeValue("lingva.900", "lingva.100")}
            direction={["column", null, "row"]}
@@ -28,7 +30,7 @@ const CustomError: FC<Props> = ({ statusCode, statusText }) => (
                {statusText}
            </Text>
        </Stack>
-    </Layout>
+    </>
 );

 export default CustomError;
--- a/components/CustomHead.tsx
+++ b/components/CustomHead.tsx
@@ -0,0 +1,56 @@
+import { FC } from "react";
+import Head from "next/head";
+import { useColorModeValue } from "@chakra-ui/react";
+import theme from "@theme";
+
+type Props = {
+    customTitle?: string,
+    home?: true
+};
+
+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 CustomHead: FC<Props> = ({ customTitle, home }) => {
+    const fullTitle = customTitle
+        ? `${customTitle} | ${title}`
+        : title;
+
+    const themeColor = useColorModeValue(theme.colors.lingva["100"], theme.colors.lingva["900"]);
+
+    return (
+        <Head>
+            <title>{fullTitle}</title>
+            <meta name="description" content={description} />
+            <meta name="robots" content={home ? "index,follow" : "noindex,nofollow"} />
+            {home && <link rel="canonical" href={url} />}
+
+            <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="apple-touch-icon" href="/apple-touch-icon.png" />
+
+            <link rel="manifest" href="/manifest.json" />
+            <meta name="theme-color" content={themeColor} />
+
+            <meta property="og:type" content="website" />
+            <meta property="og:title" content={fullTitle} />
+            <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>
+    );
+};
+
+export default CustomHead;
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Center, Text, useColorModeValue } from "@chakra-ui/react";
+import { Center, Text } from "@chakra-ui/react";

 type Props = {
    [key: string]: any
@@ -11,8 +11,6 @@ const Footer: FC<Props> = (props) => (
        w="full"
        p={3}
        fontSize={["sm", null, "md"]}
-        bgColor={useColorModeValue("lingva.100", "lingva.900")}
-        color={useColorModeValue("lingva.900", "lingva.100")}
        {...props}
    >
        <Text as="span">&#169; 2021 TheDavidDelta</Text>
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,50 +1,57 @@
 import { FC } from "react";
+import Head from "next/head";
 import NextLink from "next/link";
 import { Flex, HStack, IconButton, Link, useColorModeValue } from "@chakra-ui/react";
 import { FaGithub } from "react-icons/fa";
 import Image from "next/image";
-import ColorModeToggler from "./ColorModeToggler";
+import { ColorModeToggler } from ".";

 type Props = {
    [key: string]: any
 };

 const Header: FC<Props> = (props) => (
-    <Flex
-        as="header"
-        px={1}
-        py={3}
-        justify="space-around"
-        align="center"
-        bgColor={useColorModeValue("lingva.100", "lingva.900")}
-        w="full"
-        {...props}
-    >
-        <NextLink href="/" passHref={true}>
-            <Link display="flex">
-                <Image
-                    src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
-                    alt="Logo"
-                    width={110}
-                    height={64}
+    <>
+        <Head>
+            <link rel="prefetch" href="/banner_light.svg" />
+            <link rel="prefetch" href="/banner_dark.svg" />
+        </Head>
+
+        <Flex
+            as="header"
+            px={1}
+            py={3}
+            justify="space-around"
+            align="center"
+            w="full"
+            {...props}
+        >
+            <NextLink href="/" passHref={true}>
+                <Link display="flex">
+                    <Image
+                        src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
+                        alt="Logo"
+                        width={110}
+                        height={64}
+                    />
+                </Link>
+            </NextLink>
+            <HStack spacing={3}>
+                <ColorModeToggler
+                    variant={useColorModeValue("outline", "solid")}
                />
-            </Link>
-        </NextLink>
-        <HStack spacing={3}>
-            <ColorModeToggler
-                variant={useColorModeValue("outline", "solid")}
-            />
-            <IconButton
-                as={Link}
-                href="https://github.com/TheDavidDelta/lingva-translate"
-                isExternal={true}
-                aria-label="GitHub"
-                icon={<FaGithub />}
-                colorScheme="lingva"
-                variant={useColorModeValue("outline", "solid")}
-            />
-        </HStack>
-    </Flex>
+                <IconButton
+                    as={Link}
+                    href="https://github.com/TheDavidDelta/lingva-translate"
+                    isExternal={true}
+                    aria-label="GitHub"
+                    icon={<FaGithub />}
+                    colorScheme="lingva"
+                    variant={useColorModeValue("outline", "solid")}
+                />
+            </HStack>
+        </Flex>
+    </>
 );

 export default Header;
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -1,48 +1,13 @@
 import { FC } from "react";
 import { Flex, VStack, Button, Link, useColorModeValue } from "@chakra-ui/react";
-import Head from "next/head";
-import Header from "./Header";
-import Footer from "./Footer";
+import { Header, Footer } from ".";

 type Props = {
-    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, home, ...props }) => (
+const Layout: FC<Props> = ({ children, ...props }) => (
    <>
-        <Head>
-            <title>
-                {customTitle ?? title}
-            </title>
-            <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
            as={Link}
            href="#main"
@@ -58,7 +23,10 @@ const Layout: FC<Props> = ({ customTitle, children, home, ...props }) => (
        </Button>

        <VStack minH="100vh" spacing={8}>
-            <Header />
+            <Header
+                bgColor={useColorModeValue("lingva.100", "lingva.900")}
+            />
+
            <Flex
                as="main"
                id="main"
@@ -68,7 +36,11 @@ const Layout: FC<Props> = ({ customTitle, children, home, ...props }) => (
            >
                {children}
            </Flex>
-            <Footer />
+
+            <Footer
+                bgColor={useColorModeValue("lingva.100", "lingva.900")}
+                color={useColorModeValue("lingva.900", "lingva.100")}
+            />
        </VStack>
    </>
 );
--- a/components/TranslationArea.tsx
+++ b/components/TranslationArea.tsx
@@ -1,7 +1,7 @@
 import { FC, ChangeEvent } from "react";
 import { Box, HStack, Textarea, IconButton, Tooltip, Spinner, useBreakpointValue, useColorModeValue, useClipboard } from "@chakra-ui/react";
 import { FaCopy, FaCheck, FaPlay, FaStop } from "react-icons/fa";
-import { useAudioFromBuffer } from "../hooks";
+import { useAudioFromBuffer } from "@hooks";

 type Props =  {
    value: string,
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -1,4 +1,8 @@
 export { default as CustomError } from "./CustomError";
+export { default as CustomHead } from "./CustomHead";
 export { default as Layout } from "./Layout";
+export { default as Header } from "./Header";
+export { default as Footer } from "./Footer";
+export { default as ColorModeToggler } from "./ColorModeToggler";
 export { default as LangSelect } from "./LangSelect";
 export { default as TranslationArea } from "./TranslationArea";