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/pages/404.tsx

@@ -1,13 +1,29 @@
 import React from 'react';
 import { Link } from 'gatsby';
+import { GlobalStyles } from '../ui/GlobalStyles';
+import { Gainburua } from '../components/Gainburua';
+import { Container } from '../components/Container';
+import { Helmet } from 'react-helmet';
 
 const NotFoundPage: React.VFC = () => {
   return (
-    <main>
-      <h1>Ez dugu orria topatu</h1>
-      <br />
-      <Link to="/">Hasierara bueltatu</Link>
-    </main>
+    <>
+      <Helmet
+        title={`Ez dugu orria topatu | Laba`}
+        htmlAttributes={{ lang: 'eu' }}
+      />
+
+      <GlobalStyles />
+      <Gainburua />
+
+      <Container>
+        <main>
+          <h1>Ez dugu orria topatu</h1>
+          <br />
+          <Link to="/">Hasierara bueltatu</Link>
+        </main>
+      </Container>
+    </>
   );
 };
 

front/src/pages/index.tsx

@@ -2,7 +2,6 @@ import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';
 
-import { Helmet } from 'react-helmet';
 import { Gainburua } from '../components/Gainburua';
 import styled from 'styled-components';
 import { colors, font, fontWeight, size } from '../ui/theme';
@@ -11,6 +10,7 @@ import { rem } from 'polished';
 import Gezia from '../assets/gezia.svg';
 import ReactMarkdown from 'react-markdown';
 import { Oina } from '../components/Oina';
+import { SEO } from '../components/SEO';
 
 interface DataProps {
   strapiHasiera: {
@@ -20,7 +20,7 @@ interface DataProps {
   };
 }
 
-const IndexPage: React.VFC<PageProps> = () => {
+const IndexPage: React.VFC<PageProps> = ({ location }) => {
   const { strapiHasiera } = useStaticQuery<DataProps>(graphql`
     {
       strapiHasiera {
@@ -33,12 +33,11 @@ const IndexPage: React.VFC<PageProps> = () => {
 
   return (
     <>
-      <Helmet
-        title={`${strapiHasiera.izenburua} | Laba`}
-        htmlAttributes={{ lang: 'eu' }}
-      >
-        <meta name="description" content={strapiHasiera.deskribapena} />
-      </Helmet>
+      <SEO
+        title={strapiHasiera.izenburua}
+        description={strapiHasiera.deskribapena}
+        location={location}
+      />
 
       <GlobalStyles />
 
@@ -96,6 +95,11 @@ const Botoia = styled.a`
   &:hover {
     color: ${colors.morea};
   }
+
+  &:focus {
+    border: 2px solid ${colors.zuria};
+    outline: 3px solid ${colors.morea};
+  }
 `;
 
 const GeziaLogo = styled(Gezia)`

front/src/pages/kafetegia.tsx

@@ -2,7 +2,6 @@ import { PageProps, navigate } from 'gatsby';
 import React from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';
 
-import { Helmet } from 'react-helmet';
 import { Gainburua } from '../components/Gainburua';
 import { Container } from '../components/Container';
 import styled from 'styled-components';
@@ -15,8 +14,9 @@ import { Produktua } from '../domain/models/Produktua';
 import { useKafetegiaData } from '../viewQueries/useKafetegiaData';
 import { AlergenoLegenda } from '../components/AlergenoLegenda';
 import { Oina } from '../components/Oina';
+import { SEO } from '../components/SEO';
 
-const Kafetegia: React.VFC<PageProps> = () => {
+const Kafetegia: React.VFC<PageProps> = ({ location }) => {
   const {
     izenburua,
     deskribapena,
@@ -32,9 +32,7 @@ const Kafetegia: React.VFC<PageProps> = () => {
 
   return (
     <>
-      <Helmet title={`${izenburua} | Laba`} htmlAttributes={{ lang: 'eu' }}>
-        <meta name="description" content={deskribapena} />
-      </Helmet>
+      <SEO title={izenburua} description={deskribapena} location={location} />
 
       <GlobalStyles />
 

front/src/pages/lege-oharra.tsx

@@ -2,7 +2,6 @@ import { graphql, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';
 
-import { Helmet } from 'react-helmet';
 import { Container } from '../components/Container';
 import ReactMarkdown from 'react-markdown';
 import styled from 'styled-components';
@@ -10,6 +9,7 @@ import { font, fontWeight, size } from '../ui/theme';
 import { rem } from 'polished';
 import { Gainburua } from '../components/Gainburua';
 import { Oina } from '../components/Oina';
+import { SEO } from '../components/SEO';
 
 interface DataProps {
   strapiLegeOharra: {
@@ -18,7 +18,7 @@ interface DataProps {
   };
 }
 
-const LegeOharra: React.VFC<PageProps> = () => {
+const LegeOharra: React.VFC<PageProps> = ({ location }) => {
   const { strapiLegeOharra } = useStaticQuery<DataProps>(graphql`
     {
       strapiLegeOharra {
@@ -30,10 +30,7 @@ const LegeOharra: React.VFC<PageProps> = () => {
 
   return (
     <>
-      <Helmet
-        title={`${strapiLegeOharra.izenburua} | Laba`}
-        htmlAttributes={{ lang: 'eu' }}
-      />
+      <SEO title={strapiLegeOharra.izenburua} location={location} />
 
       <GlobalStyles />
 

front/src/pages/pribatutasun-politika.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';
 import remarkGfm from 'remark-gfm';
 
-import { Helmet } from 'react-helmet';
 import { Container } from '../components/Container';
 import ReactMarkdown from 'react-markdown';
 import styled from 'styled-components';
@@ -11,6 +10,7 @@ import { colors, font, fontWeight, size } from '../ui/theme';
 import { rem } from 'polished';
 import { Gainburua } from '../components/Gainburua';
 import { Oina } from '../components/Oina';
+import { SEO } from '../components/SEO';
 
 interface DataProps {
   strapiPribatutasunPolitika: {
@@ -19,7 +19,7 @@ interface DataProps {
   };
 }
 
-const PribatutasunPolitika: React.VFC<PageProps> = () => {
+const PribatutasunPolitika: React.VFC<PageProps> = ({ location }) => {
   const { strapiPribatutasunPolitika } = useStaticQuery<DataProps>(graphql`
     {
       strapiPribatutasunPolitika {
@@ -31,10 +31,7 @@ const PribatutasunPolitika: React.VFC<PageProps> = () => {
 
   return (
     <>
-      <Helmet
-        title={`${strapiPribatutasunPolitika.izenburua} | Laba`}
-        htmlAttributes={{ lang: 'eu' }}
-      />
+      <SEO title={strapiPribatutasunPolitika.izenburua} location={location} />
 
       <GlobalStyles />
 

front/src/pages/sanferminak.tsx

@@ -2,7 +2,6 @@ import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';
 
-import { Helmet } from 'react-helmet';
 import { Gainburua } from '../components/Gainburua';
 import styled from 'styled-components';
 import { colors, font, fontWeight, media, size } from '../ui/theme';
@@ -12,6 +11,7 @@ import ReactMarkdown from 'react-markdown';
 import { Oina } from '../components/Oina';
 import { SFEgunaEdukia } from '../components/SFEgunaEdukia';
 import { datesUtils } from '../utils/dateUtils';
+import { SEO } from '../components/SEO';
 
 export interface SFEguna {
   id: string;
@@ -34,7 +34,7 @@ interface DataProps {
   };
 }
 
-const IndexPage: React.VFC<PageProps> = () => {
+const IndexPage: React.VFC<PageProps> = ({ location }) => {
   const { strapiSanferminak } = useStaticQuery<DataProps>(graphql`
     {
       strapiSanferminak {
@@ -58,18 +58,14 @@ const IndexPage: React.VFC<PageProps> = () => {
 
   return (
     <>
-      <Helmet
-        title={`${strapiSanferminak.datu_orokorrak.izenburua} | Laba`}
-        htmlAttributes={{ lang: 'eu' }}
-      >
-        <meta
-          name="description"
-          content={strapiSanferminak.datu_orokorrak.deskribapena}
-        />
-      </Helmet>
-
       <GlobalStyles />
 
+      <SEO
+        location={location}
+        title={strapiSanferminak.datu_orokorrak.izenburua}
+        description={strapiSanferminak.datu_orokorrak.izenburua}
+      />
+
       <Gainburua
         atala="sanferminak"
         izenburua={strapiSanferminak.datu_orokorrak.izenburua}
@@ -123,7 +119,7 @@ const SFEgunaElementua = styled.li`
         background-color: ${colors.beltza};
       }
       33% {
-        background-color: ${colors.morea};
+        background-color: ${colors.gorria};
       }
       66% {
         background-color: ${colors.beltza};