Added next-seo and a bunch of favicons

.prettierignore

@@ -3,4 +3,5 @@ node_modules
 .babelrc
 .eslintrc
 .prettierrc
-next-i18next.config.js
+next-i18next.config.js
+site.webmanifest

app/components/CustomButton/index.ts

@@ -27,7 +27,7 @@ const CustomButton = styled.button<Props>`
   transition: all 150ms ease-in;
 
   &:hover {
-    background-color: ${({ secondary }) => (secondary ? PRUSSIAN_BLUE : REGAL_BLUE)};
+    background-color: ${({ secondary }) => (secondary ? WHITE : REGAL_BLUE)};
     transform: scale(1.015);
   }
 `;

app/components/SEO/DefaultHead.tsx

@@ -0,0 +1,68 @@
+import { useRouter } from 'next/router';
+import { DefaultSeo } from 'next-seo';
+import { baseUrl } from '~constants/general';
+
+function DefaultHead() {
+  const { asPath } = useRouter();
+
+  return (
+    <DefaultSeo
+      title="Rayuela Uniformes Escolares"
+      description="Compra los uniformes escolares de la mejor calidad en la Ciudad de Buenos Aires."
+      canonical={`${baseUrl}${asPath}`}
+      openGraph={{
+        type: 'website',
+        title: 'Rayuela Uniformes Escolares',
+        description:
+          'Compra los uniformes escolares de la mejor calidad en la Ciudad de Buenos Aires.',
+        url: `${baseUrl}${asPath}`,
+        images: [
+          {
+            url: '/favicons/apple-touch-icon.png',
+            height: 180,
+            width: 180,
+            alt: 'Rayuela Logo'
+          }
+        ]
+      }}
+      additionalLinkTags={[
+        {
+          rel: 'icon',
+          sizes: '32x32',
+          href: '/favicons/favicon-32x32.png'
+        },
+        {
+          rel: 'icon',
+          sizes: '16x16',
+          href: '/favicons/favicon-16x16.png'
+        },
+        {
+          rel: 'apple-touch-icon',
+          sizes: '180x180',
+          href: '/favicons/apple-touch-icon.png'
+        },
+        {
+          rel: 'manifest',
+          href: '/site.webmanifest'
+        },
+        {
+          rel: 'mask-icon',
+          color: '#4e7cb6',
+          href: '/favicons/safari-pinned-tab.svg'
+        }
+      ]}
+      additionalMetaTags={[
+        {
+          name: 'msapplication-TileColor',
+          content: '#2b5797'
+        },
+        {
+          name: 'theme-color',
+          content: '#ffffff'
+        }
+      ]}
+    />
+  );
+}
+
+export default DefaultHead;

app/constants/general.ts

@@ -1 +1,4 @@
 export const isServer = typeof window === 'undefined';
+
+// @todo: Add proper baseUrl after we have final domain
+export const baseUrl = process.env.NODE_ENV === 'production' ? '' : 'http://localhost:3000';

package.json

@@ -20,6 +20,7 @@
     "mercadopago": "^1.5.12",
     "next": "11.0.1",
     "next-connect": "^0.11.0",
+    "next-seo": "^5.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hook-form": "^7.20.2",

pages/_app.tsx

@@ -1,14 +1,18 @@
 import type { AppProps } from 'next/app';
+import DefaultHead from '~components/SEO/DefaultHead';
 import { AuthProvider } from '~hooks/useAuth';
 import GlobalStyles from '~styles/GlobalStyles';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <AuthProvider>
-      <GlobalStyles>
-        <Component {...pageProps} />
-      </GlobalStyles>
-    </AuthProvider>
+    <>
+      <DefaultHead />
+      <AuthProvider>
+        <GlobalStyles>
+          <Component {...pageProps} />
+        </GlobalStyles>
+      </AuthProvider>
+    </>
   );
 }
 export default MyApp;

public/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Rayuela",
+    "short_name": "Rayuela",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

yarn.lock

@@ -3710,6 +3710,11 @@ next-connect@^0.11.0:
   dependencies:
     trouter "^3.1.0"
 
+next-seo@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-5.1.0.tgz#aa9fd6249a11bf93e6da06fa2a6bc89268936edf"
+  integrity sha512-ampuQfNTOi1x+xtRIb6CZGunIo6rQXtMo2Tyu861d5GjJFIwfOXsA4lzCa4+e2rLkyXDyVpavNNUZWa3US9ELw==
+
 next@11.0.1:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/next/-/next-11.0.1.tgz#b8e3914d153aaf7143cb98c09bcd3c8230eeb17a"