OG Image jartzen du (#7)

* feat: og image sartzen du sanferminetan

* feat: SEO konponentea sortzen du

* refactor: orri guztietan SEO konponentea erabiltzen du

* feat: focus hobetzen du

* feat: favicon aldatzen du

* feat: koloreak aldatzen ditu

front/src/components/Gainburua/DesktopNabigazioa.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Link } from 'gatsby';
 import styled, { css } from 'styled-components';
 import { rem } from 'polished';
 import { size } from '../../ui/theme';
 import { AtalaName } from './Gainburua';
+import { GainburuLink } from './GainburuLink';
 
 interface Props {
   atala?: AtalaName;
@@ -14,13 +14,13 @@ export const DesktopNabigazioa: React.FC<Props> = ({ atala }) => {
     <Nabigazioa>
       <EstekaZerrenda>
         <Esteka aktiboa={atala === 'hasiera'}>
-          <Link to="/">Laba gara</Link>
+          <GainburuLink to="/">Laba gara</GainburuLink>
         </Esteka>
         <Esteka aktiboa={atala === 'sanferminak'}>
-          <Link to="/sanferminak">Sanferminak</Link>
+          <GainburuLink to="/sanferminak">Sanferminak</GainburuLink>
         </Esteka>
         <Esteka aktiboa={atala === 'kafetegia'}>
-          <Link to="/kafetegia">Dastatu Laba</Link>
+          <GainburuLink to="/kafetegia">Dastatu Laba</GainburuLink>
         </Esteka>
       </EstekaZerrenda>
     </Nabigazioa>

front/src/components/Gainburua/GainburuLink.tsx

@@ -0,0 +1,8 @@
+import { Link } from 'gatsby';
+import styled from 'styled-components';
+
+export const GainburuLink = styled(Link)`
+  &:focus {
+    outline: 3px solid var(--hover-color);
+  }
+`;

front/src/components/Gainburua/Gainburua.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'gatsby';
 
 import { rem } from 'polished';
 import styled from 'styled-components';
@@ -13,6 +12,7 @@ import { MugikorNabigazioa } from './MugikorNabigazioa';
 import MediaQuery from 'react-responsive';
 import { KontaktuDatuak } from './KontaktuDatuak';
 import Gezia from '../../assets/gezia.svg';
+import { GainburuLink } from './GainburuLink';
 
 export type AtalaName = 'hasiera' | 'kafetegia' | 'sanferminak';
 
@@ -27,7 +27,6 @@ export const Gainburua: React.FC<Props> = ({
   izenburua,
   deskribapena,
   atala,
-  onClick,
 }) => {
   return (
     <Wrapper atala={atala}>
@@ -38,11 +37,11 @@ export const Gainburua: React.FC<Props> = ({
               <MugikorNabigazioa />
             </MenuWrapper>
             <MugikorLogoWrapper>
-              <Link to="/">
+              <GainburuLink to="/">
                 <LogoWrapper>
                   <Logo title="Laba gara" atala={atala} />
                 </LogoWrapper>
-              </Link>
+              </GainburuLink>
             </MugikorLogoWrapper>
           </MugikorWrapper>
         </Container>
@@ -50,11 +49,11 @@ export const Gainburua: React.FC<Props> = ({
 
       <MediaQuery minWidth={breakpoints.tablet}>
         <GainburuWrapper>
-          <Link to="/">
+          <GainburuLink to="/">
             <LogoWrapper>
               <Logo title="Laba gara" atala={atala} />
             </LogoWrapper>
-          </Link>
+          </GainburuLink>
 
           <KontaktuDatuak />
         </GainburuWrapper>
@@ -71,7 +70,9 @@ export const Gainburua: React.FC<Props> = ({
             </IzenburuWrapper>
 
             <GeziaWrapper>
-              <GeziaLogo atala={atala} onClick={onClick} />
+              <GainburuLink to="#edukia">
+                <GeziaLogo atala={atala} />
+              </GainburuLink>
             </GeziaWrapper>
           </Container>
         </Nagusia>
@@ -233,11 +234,11 @@ const Izenburua = styled.h1`
 
 function getAtalaBackground(atala?: AtalaName) {
   if (atala === 'sanferminak') {
-    return colors.morea;
+    return colors.gorria;
   }
 
   if (atala === 'hasiera') {
-    return colors.gorria;
+    return colors.morea;
   }
 
   if (atala === 'kafetegia') {

front/src/components/Gainburua/KontaktuDatuak.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { font, size } from '../../ui/theme';
 import InstagramLogo from '../../assets/instagram.svg';
 import TwitterLogo from '../../assets/twitter.svg';
+import { GainburuLink } from './GainburuLink';
 
 /**
  * ERREPIKATUA
@@ -22,23 +23,23 @@ export const KontaktuDatuak: React.FC = () => {
 
       <SareSozialak>
         <SareSoziala>
-          <a
+          <GainburuLink
             tabIndex={0}
             aria-label="Laba Twitterren"
-            href="https://twitter.com/labasarea/"
+            to="https://twitter.com/labasarea/"
           >
             <Twitter title="Laba Twitterren" />
-          </a>
+          </GainburuLink>
         </SareSoziala>
 
         <SareSoziala>
-          <a
+          <GainburuLink
             tabIndex={0}
             aria-label="Laba Instagramen"
-            href="https://www.instagram.com/labasarea/"
+            to="https://www.instagram.com/labasarea/"
           >
             <Instagram role="link" title="Laba Instagramen" />
-          </a>
+          </GainburuLink>
         </SareSoziala>
       </SareSozialak>
     </Kontaktua>

front/src/components/Oina.tsx

@@ -26,4 +26,8 @@ const Esteka = styled(Link)`
   &:hover {
     color: ${colors.morea};
   }
+
+  &:focus {
+    outline: 2px solid ${colors.morea};
+  }
 `;

front/src/components/SEO.tsx

@@ -0,0 +1,24 @@
+import { PageProps } from 'gatsby';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import ogImagePath from '../images/og-image.jpeg';
+
+interface Props {
+  title: string;
+  description?: string;
+
+  location: PageProps['location'];
+}
+
+export const SEO: React.VFC<Props> = ({ title, description, location }) => (
+  <Helmet title={`${title} | Laba`} htmlAttributes={{ lang: 'eu' }}>
+    {description && <meta name="description" content={description} />}
+
+    <meta
+      name="og:image"
+      content={`${location.protocol}//${location.host}${ogImagePath}`}
+    />
+    <meta name="og:image:height" content="500" />
+    <meta name="og:image:width" content="1500" />
+  </Helmet>
+);