Dependencies updated & small enhancements (#27)

* Dependencies updated and imports shortened

* Head tags refactored

* Final tweaks

pages/404.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
-import { CustomError } from "../components";
+import { CustomError } from "@components";
 
 const My404: FC = () => (
-    <CustomError statusCode={404} statusText={"This page could not be found"} />
+    <CustomError statusCode={404} statusText="This page could not be found" />
 );
 
 export default My404;

pages/500.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
-import { CustomError } from "../components";
+import { CustomError } from "@components";
 
 const My500: FC = () => (
-    <CustomError statusCode={500} statusText={"Internal Server Error"} />
+    <CustomError statusCode={500} statusText="Internal Server Error" />
 );
 
 export default My500;

pages/[[...slug]].tsx

@@ -4,11 +4,11 @@ import Router from "next/router";
 import { Stack, VStack, HStack, IconButton } from "@chakra-ui/react";
 import { FaExchangeAlt } from "react-icons/fa";
 import { useHotkeys } from "react-hotkeys-hook";
-import { Layout, LangSelect, TranslationArea } from "../components";
-import { useToastOnLoad } from "../hooks";
-import { googleScrape, extractSlug, textToSpeechScrape } from "../utils/translate";
-import { retrieveFiltered, replaceBoth } from "../utils/language";
-import langReducer, { Actions, initialState } from "../utils/reducer";
+import { CustomHead, LangSelect, TranslationArea } from "@components";
+import { useToastOnLoad } from "@hooks";
+import { googleScrape, extractSlug, textToSpeechScrape } from "@utils/translate";
+import { retrieveFiltered, replaceBoth } from "@utils/language";
+import langReducer, { Actions, initialState } from "@utils/reducer";
 
 const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, translationRes, audio, errorMsg, initial }) => {
     const [{ source, target, query, delayedQuery, translation, isLoading }, dispatch] = useReducer(langReducer, initialState);
@@ -79,7 +79,9 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
     ), [canSwitch]);
 
     return (
-        <Layout home={home}>
+        <>
+            <CustomHead home={home} />
+
             <VStack px={[8, null, 24, 40]} w="full">
                 <HStack px={[1, null, 3, 4]} w="full">
                     <LangSelect
@@ -128,9 +130,9 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
                     />
                 </Stack>
             </VStack>
-        </Layout>
+        </>
     );
-}
+};
 
 export default Page;
 
@@ -186,4 +188,4 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
             ? 2 * 30 * 24 * 60 * 60 // 2 months
             : 1
     };
-}
+};

pages/_app.tsx

@@ -1,11 +1,14 @@
 import { AppProps } from "next/app";
 import { FC } from "react";
 import { ChakraProvider } from "@chakra-ui/react";
-import theme from "../theme";
+import theme from "@theme";
+import { Layout } from "@components";
 
 const App: FC<AppProps> = ({ Component, pageProps }) => (
     <ChakraProvider theme={theme}>
-        <Component {...pageProps} />
+        <Layout>
+            <Component {...pageProps} />
+        </Layout>
     </ChakraProvider>
 );
 

pages/_document.tsx

@@ -1,6 +1,6 @@
 import { ColorModeScript } from "@chakra-ui/color-mode";
 import Document, { Html, Head, Main, NextScript } from "next/document";
-import theme from "../theme";
+import theme from "@theme";
 
 export default class MyDocument extends Document {
     render() {

pages/api/graphql.ts

@@ -1,7 +1,7 @@
 import { ApolloServer, gql, IResolvers } from "apollo-server-micro";
 import { NextApiHandler } from "next";
 import NextCors from "nextjs-cors";
-import { googleScrape, textToSpeechScrape } from "../../utils/translate";
+import { googleScrape, textToSpeechScrape } from "@utils/translate";
 
 export const typeDefs = gql`
     type Query {

pages/api/v1/[[...slug]].ts

@@ -1,6 +1,6 @@
 import { NextApiHandler } from "next";
 import NextCors from "nextjs-cors";
-import { googleScrape, textToSpeechScrape } from "../../../utils/translate";
+import { googleScrape, textToSpeechScrape } from "@utils/translate";
 
 type Data = {
     translation?: string,